@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal.34b9c504.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:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal.3100e775.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}
/*
 * Design tokeny podle docs/zadani.md (sekce Design a UX) a spec-design-system. Jediné povolené barvy,
 * velikosti a mezery; komponenty používají jen tyto proměnné (hex/rgb mimo tento soubor hlídá
 * scripts/design/hardcoded-colors.test.ts).
 *
 * F8-10 tmavý režim: světlé hodnoty na :root, tmavé jen předefinují barevné tokeny – podle systému
 * (@media prefers-color-scheme, pokud uživatel nezvolil Světlý: data-theme="light") a volbou
 * uživatele (data-theme="dark"). Oba tmavé bloky musí být shodné (hlídá
 * scripts/design/theme-contrast.test.ts, který zároveň počítá kontrast WCAG klíčových dvojic v obou
 * motivech). Jen pro obrazovku
 * (`screen`): tisk, PDF a e-maily zůstávají vždy světlé. Widget (Shadow DOM) bere stejné hodnoty
 * přes widgetTokenCss (packages/ui/src/token-css.ts).
 */
:root {
  /* Nativní prvky (posuvník, datum, výběr barvy) podle motivu. */
  color-scheme: light;
  --fp-color-primary: #0e7c6b;
  --fp-color-primary-hover: #0a6457;
  --fp-color-primary-soft: #e6f4f1;
  --fp-color-on-primary: #ffffff;
  --fp-color-bg: #f7f9f8;
  --fp-color-surface: #ffffff;
  --fp-color-text: #14211e;
  --fp-color-text-muted: #5b6b67;
  --fp-color-border: #dde5e2;
  /* Obrys polí, checkboxů a radií (WCAG 1.4.11, 3,48:1 proti surface; spec-design-system). */
  --fp-color-border-strong: #7d8d88;
  /* Jemná linka: půlhodiny v mřížce kalendáře, oddělovače uvnitř menu (jen dekorace). */
  --fp-color-border-subtle: #edf1ef;
  --fp-color-surface-sunken: #eef2f0;
  --fp-color-text-disabled: #8a9894;
  /* Závoj pod modálem a mobilním šuplíkem */
  --fp-color-overlay: rgb(20 33 30 / 40%);
  /* QR kód platby: vždy tmavé moduly na bílé (čitelnost čtečkou nezávisle na motivu). */
  --fp-color-qr-bg: #ffffff;
  --fp-color-qr-fg: #000000;
  /* F9-10: světlý podklad loga kliniky (čitelné i na tmavém pozadí) a tmavé pozadí náhledu loga. */
  --fp-color-logo-plate: #ffffff;
  --fp-color-preview-dark: #14211e;
  /* F8-10: náhled „na světlém“ zůstává světlý i v tmavém režimu (nastavení vzhledu kliniky). */
  --fp-color-preview-light: #ffffff;
  --fp-color-preview-light-text: #14211e;
  --fp-color-preview-light-muted: #5b6b67;
  /* F8-10: podklad loga kliniky – ve světlém žádný, v tmavém světlá destička (logo s průhledným
     pozadím by na tmavém zmizelo). */
  --fp-logo-backdrop: transparent;
  --fp-logo-backdrop-padding: 0;
  /* Pozadí videa a médií (letterbox) – tmavé v obou motivech. */
  --fp-color-media-bg: #14211e;
  /* Stavy: původní barvy jen pro dekoraci, pro text a ikony *-text (R2026-10-07-05, WCAG AA) */
  --fp-color-danger: #d9534f;
  --fp-color-danger-text: #b3302c;
  --fp-color-danger-strong: #b3302c;
  --fp-color-danger-strong-hover: #8f2622;
  --fp-color-danger-soft: #fbeae9;
  --fp-color-warning: #e5a23c;
  --fp-color-warning-text: #8a5a00;
  --fp-color-warning-soft: #fdf3e0;
  --fp-color-success: #2e9e5b;
  --fp-color-success-text: #1d7343;
  --fp-color-success-soft: #e4f4ea;
  --fp-color-focus: #0e7c6b;

  /* Paleta služeb 1–12 (spec-design-system, Barvy služeb; ADR 0012). Služba v DB nese jen index. */
  --fp-service-1-bg: #d3eee8;
  --fp-service-1-text: #0b4a41;
  --fp-service-1-stripe: #12907c;
  --fp-service-2-bg: #d9f0dc;
  --fp-service-2-text: #1c5228;
  --fp-service-2-stripe: #3a9a4f;
  --fp-service-3-bg: #e8eecf;
  --fp-service-3-text: #464f14;
  --fp-service-3-stripe: #7a8a20;
  --fp-service-4-bg: #f8edc4;
  --fp-service-4-text: #5c4706;
  --fp-service-4-stripe: #a8840f;
  --fp-service-5-bg: #fbe1cc;
  --fp-service-5-text: #6b3510;
  --fp-service-5-stripe: #c4631a;
  --fp-service-6-bg: #fad9d4;
  --fp-service-6-text: #74251c;
  --fp-service-6-stripe: #d9604f;
  --fp-service-7-bg: #f7d7e6;
  --fp-service-7-text: #6e1f45;
  --fp-service-7-stripe: #c9548a;
  --fp-service-8-bg: #e7ddf5;
  --fp-service-8-text: #46297a;
  --fp-service-8-stripe: #8a63c9;
  --fp-service-9-bg: #dce1f7;
  --fp-service-9-text: #2a3577;
  --fp-service-9-stripe: #5b6bcf;
  --fp-service-10-bg: #d6e8f7;
  --fp-service-10-text: #17466e;
  --fp-service-10-stripe: #3d85c6;
  --fp-service-11-bg: #d2eef3;
  --fp-service-11-text: #0e4a57;
  --fp-service-11-stripe: #23899c;
  --fp-service-12-bg: #e3e8e6;
  --fp-service-12-text: #2e3b38;
  --fp-service-12-stripe: #7a8a86;

  --fp-font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fp-font-size-base: 14px;
  --fp-font-size-sm: 12px;
  --fp-font-size-xs: 12px;
  --fp-font-size-lg: 16px;
  --fp-font-size-h3: 18px;
  --fp-font-size-h2: 22px;
  --fp-font-size-h1: 28px;
  --fp-line-height: 1.45;

  --fp-radius: 8px;
  --fp-radius-sm: 4px;
  --fp-radius-pill: 999px;
  --fp-stripe-width: 4px;
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-6: 24px;
  --fp-space-8: 32px;

  --fp-sidebar-width: 232px;
  --fp-topbar-height: 56px;
  /* Výška tlačítek a polí (spec-design-system, Rozměry); kompaktní varianta v liště a toolbaru. */
  --fp-control-height: 36px;
  --fp-control-height-sm: 32px;
  --fp-avatar-size: 32px;
  --fp-shadow: 0 1px 2px rgb(20 33 30 / 8%);
  --fp-shadow-md: 0 4px 12px rgb(20 33 30 / 12%);
  --fp-shadow-lg: 0 12px 32px rgb(20 33 30 / 18%);

  /* Vrstvy (spec-design-system, Z-index) */
  --fp-z-sticky: 10;
  --fp-z-topbar: 20;
  --fp-z-panel: 30;
  --fp-z-popover: 40;
  --fp-z-drawer: 50;
  --fp-z-modal: 60;

  /* Kalendář, boční panel a popover (F1-06) */
  --fp-panel-width: 440px;
  --fp-popover-width: 320px;
  --fp-calendar-hour-height: 64px;
  --fp-calendar-column-min: 160px;
  --fp-calendar-time-width: 56px;

  /* F8-02: grafy přehledů – jedna série jedním odstínem, srovnání tlumeně, heatmapa ve stupních 1–5
     jednoho odstínu (stupně 4–5 s bílým textem, kontrast ≥ 4,5:1). */
  --fp-chart-bar: var(--fp-color-primary);
  --fp-chart-previous: var(--fp-color-text);
  --fp-chart-track: var(--fp-color-surface-sunken);
  --fp-chart-grid: var(--fp-color-border);
  --fp-heat-0: var(--fp-color-surface);
  --fp-heat-1: color-mix(in srgb, var(--fp-color-primary) 12%, var(--fp-color-surface));
  --fp-heat-2: color-mix(in srgb, var(--fp-color-primary) 26%, var(--fp-color-surface));
  --fp-heat-3: color-mix(in srgb, var(--fp-color-primary) 44%, var(--fp-color-surface));
  --fp-heat-4: var(--fp-color-primary);
  --fp-heat-5: var(--fp-color-primary-hover);
}

/* F8-10: tmavý režim podle systému (výchozí volba „Podle systému“). */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --fp-color-primary: #54b29f;
    --fp-color-primary-hover: #68c5b1;
    --fp-color-primary-soft: #12352f;
    --fp-color-on-primary: #0f1715;
    --fp-color-bg: #0f1715;
    --fp-color-surface: #16211e;
    --fp-color-text: #e6eeeb;
    --fp-color-text-muted: #a7b5b1;
    --fp-color-border: #2c3a36;
    --fp-color-border-strong: #7f918b;
    --fp-color-border-subtle: #1f2b28;
    --fp-color-surface-sunken: #1d2a27;
    --fp-color-text-disabled: #6f7f7a;
    --fp-color-overlay: rgb(0 0 0 / 60%);
    --fp-logo-backdrop: var(--fp-color-logo-plate);
    --fp-logo-backdrop-padding: var(--fp-space-1) var(--fp-space-2);
    --fp-color-danger: #e5736e;
    --fp-color-danger-text: #ff9b94;
    --fp-color-danger-strong: #f28b84;
    --fp-color-danger-strong-hover: #ffa8a2;
    --fp-color-danger-soft: #3b1f1d;
    --fp-color-warning-text: #f0c060;
    --fp-color-warning-soft: #362a12;
    --fp-color-success: #3fb974;
    --fp-color-success-text: #78d39c;
    --fp-color-success-soft: #14301f;
    --fp-color-focus: #68c5b1;
    /* Služby: tmavé pozadí bloku, světlý text a sytý proužek stejného odstínu (OKLCH, index zůstává). */
    --fp-service-1-bg: #103830;
    --fp-service-1-text: #bee9de;
    --fp-service-1-stripe: #4eb39e;
    --fp-service-2-bg: #16391d;
    --fp-service-2-text: #c2eac6;
    --fp-service-2-stripe: #5db56c;
    --fp-service-3-bg: #2e340f;
    --fp-service-3-text: #dae4b9;
    --fp-service-3-stripe: #98a84b;
    --fp-service-4-bg: #3c2e08;
    --fp-service-4-text: #edddb4;
    --fp-service-4-stripe: #bd9a3b;
    --fp-service-5-bg: #4a250d;
    --fp-service-5-text: #ffd2b7;
    --fp-service-5-stripe: #e18245;
    --fp-service-6-bg: #4e211a;
    --fp-service-6-text: #ffcdc3;
    --fp-service-6-stripe: #ec7765;
    --fp-service-7-bg: #4b1f33;
    --fp-service-7-text: #ffcbe1;
    --fp-service-7-stripe: #e573a5;
    --fp-service-8-bg: #36274e;
    --fp-service-8-text: #e4d5ff;
    --fp-service-8-stripe: #ac88ec;
    --fp-service-9-bg: #252d53;
    --fp-service-9-text: #cfdcff;
    --fp-service-9-stripe: #8296f8;
    --fp-service-10-bg: #18324b;
    --fp-service-10-text: #c2e2ff;
    --fp-service-10-stripe: #60a4e4;
    --fp-service-11-bg: #13363d;
    --fp-service-11-text: #c0e6ef;
    --fp-service-11-stripe: #55adbf;
    --fp-service-12-bg: #2c3230;
    --fp-service-12-text: #d8e0de;
    --fp-service-12-stripe: #93a29e;
    --fp-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --fp-shadow-md: 0 4px 12px rgb(0 0 0 / 45%);
    --fp-shadow-lg: 0 12px 32px rgb(0 0 0 / 55%);
  }
}

/* F8-10: tmavý režim zvolený uživatelem (stejné hodnoty jako výše). */
@media screen {
  :root[data-theme='dark'] {
    color-scheme: dark;
    --fp-color-primary: #54b29f;
    --fp-color-primary-hover: #68c5b1;
    --fp-color-primary-soft: #12352f;
    --fp-color-on-primary: #0f1715;
    --fp-color-bg: #0f1715;
    --fp-color-surface: #16211e;
    --fp-color-text: #e6eeeb;
    --fp-color-text-muted: #a7b5b1;
    --fp-color-border: #2c3a36;
    --fp-color-border-strong: #7f918b;
    --fp-color-border-subtle: #1f2b28;
    --fp-color-surface-sunken: #1d2a27;
    --fp-color-text-disabled: #6f7f7a;
    --fp-color-overlay: rgb(0 0 0 / 60%);
    --fp-logo-backdrop: var(--fp-color-logo-plate);
    --fp-logo-backdrop-padding: var(--fp-space-1) var(--fp-space-2);
    --fp-color-danger: #e5736e;
    --fp-color-danger-text: #ff9b94;
    --fp-color-danger-strong: #f28b84;
    --fp-color-danger-strong-hover: #ffa8a2;
    --fp-color-danger-soft: #3b1f1d;
    --fp-color-warning-text: #f0c060;
    --fp-color-warning-soft: #362a12;
    --fp-color-success: #3fb974;
    --fp-color-success-text: #78d39c;
    --fp-color-success-soft: #14301f;
    --fp-color-focus: #68c5b1;
    /* Služby: tmavé pozadí bloku, světlý text a sytý proužek stejného odstínu (OKLCH, index zůstává). */
    --fp-service-1-bg: #103830;
    --fp-service-1-text: #bee9de;
    --fp-service-1-stripe: #4eb39e;
    --fp-service-2-bg: #16391d;
    --fp-service-2-text: #c2eac6;
    --fp-service-2-stripe: #5db56c;
    --fp-service-3-bg: #2e340f;
    --fp-service-3-text: #dae4b9;
    --fp-service-3-stripe: #98a84b;
    --fp-service-4-bg: #3c2e08;
    --fp-service-4-text: #edddb4;
    --fp-service-4-stripe: #bd9a3b;
    --fp-service-5-bg: #4a250d;
    --fp-service-5-text: #ffd2b7;
    --fp-service-5-stripe: #e18245;
    --fp-service-6-bg: #4e211a;
    --fp-service-6-text: #ffcdc3;
    --fp-service-6-stripe: #ec7765;
    --fp-service-7-bg: #4b1f33;
    --fp-service-7-text: #ffcbe1;
    --fp-service-7-stripe: #e573a5;
    --fp-service-8-bg: #36274e;
    --fp-service-8-text: #e4d5ff;
    --fp-service-8-stripe: #ac88ec;
    --fp-service-9-bg: #252d53;
    --fp-service-9-text: #cfdcff;
    --fp-service-9-stripe: #8296f8;
    --fp-service-10-bg: #18324b;
    --fp-service-10-text: #c2e2ff;
    --fp-service-10-stripe: #60a4e4;
    --fp-service-11-bg: #13363d;
    --fp-service-11-text: #c0e6ef;
    --fp-service-11-stripe: #55adbf;
    --fp-service-12-bg: #2c3230;
    --fp-service-12-text: #d8e0de;
    --fp-service-12-stripe: #93a29e;
    --fp-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --fp-shadow-md: 0 4px 12px rgb(0 0 0 / 45%);
    --fp-shadow-lg: 0 12px 32px rgb(0 0 0 / 55%);
  }
}

/*
 * Prezentační web FyzioPlan (F4-08, ADR 0061; redesign 2026-10-19). Barvy jen z tokenů
 * packages/ui/src/tokens.css (build je přibalí před tento soubor) – žádný hex ani rgb(); odstíny
 * webu jsou odvozené přes color-mix() z tokenů, takže tmavý režim (tokens.css, @media
 * prefers-color-scheme) platí i pro ně. Od 360 px. Bez JavaScriptu: menu, výběr jazyka a časté
 * otázky jsou <details>/<summary>, mobilní panel se otevírá přes :has(); jediný skript je
 * kalkulačka ceníku (ADR 0061 dodatek 2).
 */

/* ------------------------------------------------------------ Tokeny webu (odvozené) */

:root {
  /* Tmavý inkoust pro stíny – stejný v obou motivech (token media-bg je vždy tmavý). */
  --w-ink: var(--fp-color-media-bg);

  /* Značková zelená paleta z primární barvy (v tmavém režimu se přepočítá sama). */
  --w-brand-50: color-mix(in srgb, var(--fp-color-primary) 6%, var(--fp-color-surface));
  --w-brand-100: color-mix(in srgb, var(--fp-color-primary) 12%, var(--fp-color-surface));
  --w-brand-200: color-mix(in srgb, var(--fp-color-primary) 24%, var(--fp-color-surface));
  --w-brand-300: color-mix(in srgb, var(--fp-color-primary) 40%, var(--fp-color-surface));
  --w-brand-ring: color-mix(in srgb, var(--fp-color-primary) 22%, transparent);
  --w-accent: var(--fp-service-10-stripe);

  /* Měkké přechody pozadí (hero, hlavička stránek). */
  --w-glow-1: color-mix(in srgb, var(--fp-color-primary) 20%, transparent);
  --w-glow-2: color-mix(in srgb, var(--w-accent) 14%, transparent);
  --w-glow-3: color-mix(in srgb, var(--fp-service-2-stripe) 12%, transparent);
  --w-grid-line: color-mix(in srgb, var(--fp-color-border) 55%, transparent);

  --w-header-bg: color-mix(in srgb, var(--fp-color-surface) 80%, transparent);
  --w-border-soft: color-mix(in srgb, var(--fp-color-border) 75%, transparent);

  /* Typografie: plynulá škála od 360 px do 1440 px. */
  --w-text-xs: 0.8125rem;
  --w-text-sm: 0.875rem;
  --w-text-base: 1rem;
  --w-text-md: 1.0625rem;
  --w-text-lg: 1.1875rem;
  --w-h1: clamp(2.375rem, 1.55rem + 3.7vw, 4.25rem);
  --w-h1-page: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
  --w-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
  --w-h3: 1.1875rem;

  /* Mezery, zaoblení, stíny. */
  --w-section: clamp(4rem, 2.8rem + 5vw, 7rem);
  --w-gutter: var(--fp-space-4);
  --w-radius-sm: 8px;
  --w-radius: 12px;
  --w-radius-lg: 16px;
  --w-radius-xl: 24px;
  --w-header-height: 64px;
  --w-shadow-xs: 0 1px 2px color-mix(in srgb, var(--w-ink) 6%, transparent);
  --w-shadow-sm:
    0 1px 2px color-mix(in srgb, var(--w-ink) 5%, transparent),
    0 2px 8px color-mix(in srgb, var(--w-ink) 5%, transparent);
  --w-shadow-md:
    0 2px 4px color-mix(in srgb, var(--w-ink) 4%, transparent),
    0 12px 28px -6px color-mix(in srgb, var(--w-ink) 12%, transparent);
  --w-shadow-lg:
    0 2px 6px color-mix(in srgb, var(--w-ink) 5%, transparent),
    0 32px 72px -20px color-mix(in srgb, var(--w-ink) 28%, transparent);
  --w-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --w-glow-1: color-mix(in srgb, var(--fp-color-primary) 16%, transparent);
    --w-glow-2: color-mix(in srgb, var(--w-accent) 10%, transparent);
    --w-glow-3: color-mix(in srgb, var(--fp-service-2-stripe) 8%, transparent);
    --w-grid-line: color-mix(in srgb, var(--fp-color-border) 45%, transparent);
    --w-header-bg: color-mix(in srgb, var(--fp-color-bg) 78%, transparent);
    --w-shadow-xs: 0 1px 2px color-mix(in srgb, var(--w-ink) 40%, transparent);
    --w-shadow-sm: 0 1px 3px color-mix(in srgb, var(--w-ink) 50%, transparent);
    --w-shadow-md:
      0 2px 4px color-mix(in srgb, var(--w-ink) 40%, transparent),
      0 16px 32px -8px color-mix(in srgb, var(--w-ink) 60%, transparent);
    --w-shadow-lg:
      0 0 0 1px color-mix(in srgb, var(--fp-color-border) 60%, transparent),
      0 32px 80px -16px color-mix(in srgb, var(--w-ink) 85%, transparent);
  }
}

@media (min-width: 768px) {
  :root {
    --w-gutter: var(--fp-space-8);
  }
}

/* ------------------------------------------------------------ Základ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--w-header-height) + var(--fp-space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--fp-font-family);
  font-size: var(--w-text-base);
  line-height: 1.6;
  color: var(--fp-color-text);
  background: var(--fp-color-bg);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03';
}

h1,
h2,
h3 {
  margin: 0 0 var(--fp-space-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--w-h1);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--w-h2);
  line-height: 1.12;
  letter-spacing: -0.028em;
}

h3 {
  font-size: var(--w-h3);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 650;
}

p {
  margin: 0 0 var(--fp-space-4);
  text-wrap: pretty;
}

/* Odkaz v textu: primární barva a podtržení (F9-08). Výjimky: tlačítka, značka, navigace,
   patička a odkazy karet (.card-link) – ty jsou zřetelné samy o sobě. */
a {
  color: var(--fp-color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--fp-color-primary-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--fp-color-focus);
  outline-offset: 2px;
  border-radius: var(--fp-radius-sm);
}

main:focus {
  outline: none;
}

img {
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--fp-space-4);
  top: calc(-1 * var(--fp-space-8) * 3);
  z-index: var(--fp-z-modal);
  padding: var(--fp-space-2) var(--fp-space-4);
  background: var(--fp-color-surface);
  color: var(--fp-color-primary);
  border: 2px solid var(--fp-color-primary);
  border-radius: var(--fp-radius);
}

.skip-link:focus {
  top: var(--fp-space-4);
}

.container {
  width: 100%;
  max-width: calc(1184px + 2 * var(--w-gutter));
  margin: 0 auto;
  padding: 0 var(--w-gutter);
}

.narrow {
  max-width: calc(760px + 2 * var(--w-gutter));
}

.center {
  text-align: center;
}

[hidden] {
  display: none !important;
}

summary {
  cursor: pointer;
  list-style: none;
}

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

.chevron,
.globe,
.check,
.arrow {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------ Hlavička (jeden řádek od 1024 px) */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--fp-z-topbar);
}

/* Průsvitné pozadí s rozostřením je na pseudo-prvku: backdrop-filter na hlavičce samotné by
   z ní udělal blok pro position: fixed a překryv rozbalovacích menu by nepokryl stránku. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--w-header-bg);
  border-bottom: 1px solid var(--fp-color-border);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: var(--fp-color-surface);
  }
}

/* Linka a stín pod hlavičkou až po odrolování (scroll-driven animace, bez JS). */
@supports (animation-timeline: scroll()) {
  .site-header::before {
    border-bottom-color: transparent;
    animation: header-raise linear both;
    animation-timeline: scroll(root);
    animation-range: 0 64px;
  }

  @keyframes header-raise {
    to {
      border-bottom-color: var(--fp-color-border);
      box-shadow: var(--w-shadow-sm);
    }
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--fp-space-2);
  min-height: var(--w-header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-weight: 700;
  font-size: var(--w-text-lg);
  letter-spacing: -0.02em;
  color: var(--fp-color-text);
  text-decoration: none;
  margin: 0;
}

.brand:hover {
  color: var(--fp-color-text);
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  box-shadow: var(--w-shadow-xs);
}

.nav-list,
.sub-menu,
.lang-list,
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--w-radius-sm);
  color: var(--fp-color-text-muted);
  font-size: var(--w-text-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover,
.dropdown[open] > .nav-link {
  color: var(--fp-color-text);
  background: var(--fp-color-surface-sunken);
}

.nav-link[aria-current='page'],
.nav-link.is-current {
  color: var(--fp-color-text);
  font-weight: 650;
}

.nav-link .chevron {
  width: 14px;
  height: 14px;
}

.dropdown {
  position: relative;
}

.dropdown[open] > summary .chevron {
  transform: rotate(180deg);
}

.sub-menu,
.lang-list {
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius-lg);
  box-shadow: var(--w-shadow-md);
}

.sub-link {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-3);
  padding: 10px 12px;
  border-radius: var(--w-radius-sm);
  color: var(--fp-color-text);
  text-decoration: none;
}

.sub-link:hover,
.sub-link[aria-current='page'] {
  background: var(--fp-color-surface-sunken);
  color: var(--fp-color-text);
}

.sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--w-brand-100);
  color: var(--fp-color-primary);
}

.sub-icon .icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

.sub-text {
  display: grid;
  gap: 1px;
}

.sub-title {
  font-size: var(--w-text-sm);
  font-weight: 650;
}

.sub-desc {
  font-size: var(--w-text-xs);
  font-weight: 450;
  line-height: 1.45;
  color: var(--fp-color-text-muted);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--fp-space-1);
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--w-radius-sm);
  color: var(--fp-color-text-muted);
  font-size: var(--w-text-sm);
  font-weight: 600;
}

.lang-current:hover,
.lang-menu[open] > .lang-current {
  color: var(--fp-color-text);
  background: var(--fp-color-surface-sunken);
}

.lang-current .chevron {
  width: 14px;
  height: 14px;
}

.lang-switch {
  display: block;
  padding: 8px 12px;
  border-radius: var(--w-radius-sm);
  color: var(--fp-color-text);
  font-size: var(--w-text-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch:hover {
  background: var(--fp-color-surface-sunken);
  color: var(--fp-color-text);
}

.nav-login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--w-radius-sm);
  color: var(--fp-color-text);
  font-size: var(--w-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-login:hover {
  color: var(--fp-color-text);
  background: var(--fp-color-surface-sunken);
}

.header-cta {
  flex: none;
  white-space: nowrap;
}

/* Hamburger (jen pod 1024 px). */
.nav-toggle > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--w-radius-sm);
  color: var(--fp-color-text);
}

.nav-toggle > summary:hover {
  background: var(--fp-color-surface-sunken);
}

.burger,
.burger > span,
.burger::before,
.burger::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.burger {
  position: relative;
  background: transparent;
}

.burger::before,
.burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.burger::before {
  top: -6px;
}

.burger::after {
  top: 6px;
}

.nav-toggle[open] .burger > span {
  opacity: 0;
}

.nav-toggle[open] .burger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[open] .burger::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .nav-panel {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--fp-space-2);
  }

  .main-nav {
    margin: 0 auto;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 2;
    width: 360px;
  }

  .lang-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    min-width: 168px;
  }

  /* Klik mimo otevřené menu ho zavře: neviditelný překryv je součástí <summary>, takže klik na
     něj menu přepne (bez JS). Escape bez JS menu nezavře – to je známé omezení <details>. */
  .dropdown[open] > summary::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    cursor: default;
  }

  .dropdown > summary {
    position: relative;
  }

  .header-cta {
    margin-left: var(--fp-space-1);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .dropdown[open] > .sub-menu,
  .dropdown[open] > .lang-list {
    animation: menu-in 160ms var(--w-ease);
  }

  @keyframes menu-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

/* Mobilní panel: otevírá ho <details class="nav-toggle"> přes :has(), bez JS. */
@media (max-width: 1023.98px) {
  .header-cta {
    margin-left: auto;
  }

  .nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--w-header-height));
    overflow-y: auto;
    flex-direction: column;
    gap: var(--fp-space-3);
    padding: var(--fp-space-3) var(--w-gutter) var(--fp-space-6);
    background: var(--fp-color-surface);
    border-bottom: 1px solid var(--fp-color-border);
    box-shadow: var(--w-shadow-md);
  }

  .site-header:has(.nav-toggle[open]) .nav-panel {
    display: flex;
  }

  .nav-list {
    display: grid;
    gap: 2px;
  }

  .nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    font-size: var(--w-text-base);
    color: var(--fp-color-text);
  }

  .sub-menu {
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--fp-space-2);
    background: transparent;
  }

  .header-tools {
    justify-content: space-between;
    padding-top: var(--fp-space-3);
    border-top: 1px solid var(--fp-color-border);
  }

  .lang-list {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 2;
    min-width: 168px;
  }
}

/* Prohlížeč bez :has() – panel zůstane rozbalený pod lištou, hamburger se skryje. */
@supports not selector(:has(a)) {
  @media (max-width: 1023.98px) {
    .nav-toggle {
      display: none;
    }

    .nav-panel {
      display: flex;
      position: static;
      box-shadow: none;
      border: 0;
      padding: 0 0 var(--fp-space-3);
    }

    .header-inner {
      flex-wrap: wrap;
    }

    .nav-panel {
      order: 5;
      flex-basis: 100%;
    }
  }
}

@media (max-width: 379.98px) {
  .header-cta {
    padding: 0 var(--fp-space-3);
  }

  .brand {
    font-size: var(--w-text-md);
  }
}

/* ------------------------------------------------------------ Tlačítka */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-2);
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--w-text-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 150ms var(--w-ease),
    border-color 150ms var(--w-ease),
    box-shadow 150ms var(--w-ease),
    transform 150ms var(--w-ease);
}

.button:hover {
  text-decoration: none;
}

.button-lg {
  min-height: 50px;
  padding: 0 26px;
  font-size: var(--w-text-base);
  border-radius: 12px;
}

.button-sm {
  min-height: 38px;
  padding: 0 16px;
}

.button-primary {
  background: var(--fp-color-primary);
  color: var(--fp-color-on-primary);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--w-ink) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--fp-color-on-primary) 16%, transparent);
}

.button-primary:hover {
  background: var(--fp-color-primary-hover);
  color: var(--fp-color-on-primary);
  box-shadow:
    0 4px 14px -4px color-mix(in srgb, var(--fp-color-primary) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--fp-color-on-primary) 16%, transparent);
}

.button-secondary {
  background: var(--fp-color-surface);
  color: var(--fp-color-text);
  border-color: var(--fp-color-border);
  box-shadow: var(--w-shadow-xs);
}

.button-secondary:hover {
  background: var(--fp-color-surface);
  color: var(--fp-color-text);
  border-color: var(--fp-color-border-strong);
}

.button-ghost {
  color: var(--fp-color-text);
}

.button-ghost:hover {
  background: var(--fp-color-surface-sunken);
  color: var(--fp-color-text);
}

@media (prefers-reduced-motion: no-preference) {
  .button-lg:hover {
    transform: translateY(-1px);
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-3);
  margin: var(--fp-space-8) 0 var(--fp-space-4);
}

.cta-row.center {
  justify-content: center;
}

@media (max-width: 479.98px) {
  .cta-row .button {
    flex: 1 1 100%;
  }
}

.big {
  font-size: var(--w-text-lg);
}

.hint {
  font-size: var(--w-text-sm);
  color: var(--fp-color-text-muted);
}

.hint.center {
  text-align: center;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--w-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.card-link .arrow {
  width: 15px;
  height: 15px;
  transition: transform 150ms var(--w-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .card-link:hover .arrow {
    transform: translateX(3px);
  }
}

/* ------------------------------------------------------------ Hero */

.hero,
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Jemná síť a barevné závoje (jen CSS, bez obrázků). */
.hero::before,
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, var(--w-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--w-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at 50% 0%,
    var(--fp-color-text) 30%,
    transparent 75%
  );
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, var(--fp-color-text) 30%, transparent 75%);
}

.hero::after,
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38% 42% at 18% 8%, var(--w-glow-1), transparent 70%),
    radial-gradient(32% 40% at 84% 4%, var(--w-glow-2), transparent 70%),
    radial-gradient(42% 36% at 50% 46%, var(--w-glow-3), transparent 72%);
}

.hero {
  padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
}

.hero-copy {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 var(--fp-space-6);
  padding: 5px 14px;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-color-surface);
  border: 1px solid var(--w-brand-200);
  box-shadow: var(--w-shadow-xs);
  font-size: var(--w-text-sm);
  font-weight: 550;
  line-height: 1.5;
  color: var(--fp-color-text-muted);
}

@media (max-width: 479.98px) {
  .eyebrow {
    font-size: var(--w-text-xs);
    padding: 4px 12px;
  }
}

.h1-accent {
  color: var(--fp-color-primary);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .h1-accent {
    background: linear-gradient(
      100deg,
      var(--fp-color-primary-hover) 10%,
      var(--fp-color-primary) 55%,
      color-mix(in srgb, var(--fp-color-primary) 70%, var(--w-accent)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lead {
  font-size: clamp(var(--w-text-md), 0.95rem + 0.45vw, var(--w-text-lg) + 0.0625rem);
  line-height: 1.6;
  color: var(--fp-color-text-muted);
}

.hero .lead {
  max-width: 660px;
  margin: 0 auto;
}

.hero .cta-row {
  margin-top: var(--fp-space-8);
}

.trust-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fp-space-2) var(--fp-space-6);
  margin: var(--fp-space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--w-text-sm);
  font-weight: 500;
  color: var(--fp-color-text-muted);
}

.trust-line li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-line .check {
  color: var(--fp-color-primary);
}

.hero-visual {
  position: relative;
  max-width: 1088px;
  margin: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) auto 0;
}

.hero-visual::before {
  content: '';
  position: absolute;
  inset: 6% 4% -6%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, var(--w-glow-1), transparent 75%);
  filter: blur(40px);
}

/* ------------------------------------------------------------ Rámečky zařízení se screenshoty */

.device {
  position: relative;
  overflow: hidden;
  background: var(--fp-color-surface);
}

.device-browser {
  border: 1px solid var(--fp-color-border);
  border-radius: 14px;
  box-shadow: var(--w-shadow-lg);
}

.device-bar {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3);
  height: 38px;
  padding: 0 14px;
  background: var(--fp-color-surface-sunken);
  border-bottom: 1px solid var(--fp-color-border);
}

.device-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}

.device-dots > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-color-danger) 70%, var(--fp-color-surface));
}

.device-dots > span + span {
  background: color-mix(in srgb, var(--fp-color-warning) 70%, var(--fp-color-surface));
}

.device-dots > span + span + span {
  background: color-mix(in srgb, var(--fp-color-success) 70%, var(--fp-color-surface));
}

.device-url {
  margin: 0 auto;
  padding: 2px 28px;
  border-radius: 6px;
  background: var(--fp-color-surface);
  border: 1px solid var(--w-border-soft);
  font-size: 12px;
  color: var(--fp-color-text-muted);
  transform: translateX(-24px);
}

@media (max-width: 559.98px) {
  .device-url {
    display: none;
  }

  .device-bar {
    height: 28px;
  }
}

.shot {
  display: block;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Screenshoty jsou ze světlé aplikace – podklad zůstává světlý i v tmavém režimu. */
  background: var(--fp-color-preview-light);
}

.device-phone {
  width: 100%;
  max-width: 292px;
  margin: 0 auto;
  padding: 9px;
  border-radius: 44px;
  background: var(--w-ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fp-color-preview-light) 14%, transparent),
    var(--w-shadow-lg);
}

.device-phone .shot img {
  border-radius: 35px;
}

/* ------------------------------------------------------------ Pruh čísel */

.proof-strip {
  padding: 0 0 var(--fp-space-8);
}

.proof-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fp-space-6) 0;
  margin: 0;
  padding: var(--fp-space-6) 0;
  list-style: none;
  border-top: 1px solid var(--fp-color-border);
  border-bottom: 1px solid var(--fp-color-border);
}

.proof-list li {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 0 var(--fp-space-4);
  text-align: center;
}

@media (min-width: 768px) {
  .proof-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .proof-list li + li {
    border-left: 1px solid var(--fp-color-border);
  }
}

.proof-value {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.proof-label {
  font-size: var(--w-text-sm);
  line-height: 1.45;
  color: var(--fp-color-text-muted);
}

/* ------------------------------------------------------------ Sekce */

.section {
  padding: var(--w-section) 0;
}

/* Dvě sekce se stejným pozadím za sebou: bez zdvojené mezery. */
.section:not(.section-alt, .cta-band) + .section:not(.section-alt, .cta-band) {
  padding-top: 0;
}

.section-alt {
  background: var(--fp-color-surface);
  border-top: 1px solid var(--w-border-soft);
  border-bottom: 1px solid var(--w-border-soft);
}

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  text-align: center;
}

.section-head h2 {
  margin-bottom: var(--fp-space-3);
}

.kicker {
  margin: 0 0 var(--fp-space-3);
  font-size: var(--w-text-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--fp-color-primary);
}

.section-lead {
  margin-bottom: 0;
  font-size: var(--w-text-md);
  color: var(--fp-color-text-muted);
}

.page-header {
  padding: clamp(3.5rem, 2.4rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 2.5vw, 4rem);
  border-bottom: 1px solid var(--w-border-soft);
}

.page-header h1 {
  font-size: var(--w-h1-page);
  line-height: 1.08;
}

.page-header .lead {
  margin-bottom: 0;
  max-width: 720px;
}

.page-header .eyebrow {
  margin-bottom: var(--fp-space-4);
}

.hero-grid,
.two-col {
  display: grid;
  gap: var(--fp-space-6);
}

@media (min-width: 900px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  .align-center {
    align-items: center;
  }
}

/* ------------------------------------------------------------ Karty */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fp-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

@media (min-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fp-space-6);
  }
}

.card {
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--w-shadow-xs);
}

.section-alt .card {
  background: var(--fp-color-bg);
  box-shadow: none;
}

.card > :last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--fp-color-text-muted);
}

.card h3 {
  margin-bottom: var(--fp-space-2);
}

.card-muted {
  background: var(--fp-color-surface-sunken);
  box-shadow: none;
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    border-color 200ms var(--w-ease),
    box-shadow 200ms var(--w-ease),
    transform 200ms var(--w-ease);
}

.value-card:hover {
  border-color: var(--w-brand-300);
  box-shadow: var(--w-shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .value-card:hover {
    transform: translateY(-2px);
  }
}

.value-card .card-link {
  margin-top: auto;
  padding-top: var(--fp-space-2);
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--fp-color-primary);
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--fp-space-4);
  border-radius: var(--w-radius);
  background: linear-gradient(180deg, var(--w-brand-50), var(--w-brand-100));
  border: 1px solid var(--w-brand-200);
  color: var(--fp-color-primary);
}

.icon-badge .icon {
  margin: 0;
  width: 22px;
  height: 22px;
}

.check-list {
  list-style: none;
  margin: 0 0 var(--fp-space-6);
  padding: 0;
  display: grid;
  gap: var(--fp-space-3);
}

.check-list li {
  display: flex;
  gap: var(--fp-space-3);
  align-items: flex-start;
}

.check-list .check {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 3px;
  border-radius: 50%;
  background: var(--w-brand-100);
  color: var(--fp-color-primary);
}

.plain-list {
  margin: 0;
  padding-left: var(--fp-space-6);
  display: grid;
  gap: var(--fp-space-2);
}

.badge {
  display: inline-block;
  margin: 0 0 var(--fp-space-2);
  padding: 2px var(--fp-space-3);
  border-radius: var(--fp-radius-pill);
  font-size: var(--w-text-xs);
  font-weight: 600;
  line-height: 1.6;
}

.badge-success {
  background: var(--fp-color-success-soft);
  color: var(--fp-color-success-text);
}

.badge-warning {
  background: var(--fp-color-warning-soft);
  color: var(--fp-color-warning-text);
}

.badge-neutral {
  background: var(--fp-color-surface-sunken);
  color: var(--fp-color-text-muted);
  border: 1px solid var(--fp-color-border);
}

/* ------------------------------------------------------------ Střídavé řádky se screenshoty */

.split-rows {
  display: grid;
  gap: clamp(4rem, 2.5rem + 6vw, 7.5rem);
}

.split {
  display: grid;
  gap: var(--fp-space-8) clamp(2.5rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.split-copy h2 {
  margin-bottom: var(--fp-space-6);
}

.split-copy > h3 {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--fp-space-3);
}

.split-copy > p {
  font-size: var(--w-text-md);
  color: var(--fp-color-text-muted);
}

.split-visual {
  min-width: 0;
  padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  border-radius: var(--w-radius-xl);
  background:
    radial-gradient(70% 70% at 100% 0%, var(--w-glow-2), transparent 70%),
    linear-gradient(160deg, var(--w-brand-100), var(--w-brand-50) 70%);
  border: 1px solid var(--w-border-soft);
}

.split-visual .device-browser {
  box-shadow: var(--w-shadow-md);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .split-reverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .split-reverse .split-copy {
    order: 2;
  }

  .split-mobile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Stránka Funkce: položky oblasti jako tichý seznam (s obrázkem) nebo mřížka (bez obrázku). */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fp-space-6);
}

.feature-list li {
  position: relative;
  padding-left: var(--fp-space-6);
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-color-primary);
  box-shadow: 0 0 0 4px var(--w-brand-100);
}

.feature-list h3 {
  font-size: var(--w-text-md);
  margin-bottom: var(--fp-space-1);
}

.feature-list p {
  color: var(--fp-color-text-muted);
  margin-bottom: var(--fp-space-2);
}

.feature-list li > :last-child {
  margin-bottom: 0;
}

.feature-plain h2 {
  max-width: 720px;
}

.feature-list-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--fp-space-4);
}

.feature-list-grid li {
  padding: var(--fp-space-6);
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius-lg);
}

.section-alt .feature-list-grid li {
  background: var(--fp-color-bg);
}

.feature-list-grid li::before {
  display: none;
}

/* ------------------------------------------------------------ Pro koho (náhled ceníku) */

.audience-grid {
  max-width: 960px;
  margin: 0 auto;
}

.audience-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.audience-card + .audience-card {
  border-color: var(--w-brand-300);
  box-shadow:
    0 0 0 4px var(--w-brand-ring),
    var(--w-shadow-md);
}

.audience-price {
  font-weight: 700;
  font-size: var(--w-text-lg);
  letter-spacing: -0.01em;
  color: var(--fp-color-text);
}

.card .audience-price {
  color: var(--fp-color-text);
}

.audience-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-2) var(--fp-space-6);
  margin-top: auto;
  padding-top: var(--fp-space-2);
}

/* ------------------------------------------------------------ Přínosy a přechod (sales.ts) */

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

.benefit-grid h3 {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-2);
  font-size: var(--w-text-md);
}

.benefit-grid h3 .icon {
  margin-top: 1px;
}

.switch-layout {
  display: grid;
  gap: var(--fp-space-8);
}

@media (min-width: 900px) {
  .switch-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }
}

.switch-copy > :last-child {
  margin-bottom: 0;
}

.switch-layout .steps-list {
  margin: 0;
}

.steps-list {
  list-style: none;
  counter-reset: step;
  margin: var(--fp-space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--fp-space-3);
}

.steps-list li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: var(--fp-space-4);
  padding: var(--fp-space-4);
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius);
  font-weight: 550;
}

.section-alt .steps-list li {
  background: var(--fp-color-bg);
}

.steps-list li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--w-brand-100);
  color: var(--fp-color-primary-hover);
  font-size: var(--w-text-sm);
  font-weight: 700;
}

/* ------------------------------------------------------------ Bezpečnost na úvodu */

.trust-panel {
  display: grid;
  gap: var(--fp-space-8);
  padding: clamp(1.75rem, 1rem + 3.5vw, 3.75rem);
  border-radius: var(--w-radius-xl);
  background:
    radial-gradient(60% 80% at 0% 0%, var(--w-glow-1), transparent 70%), var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  box-shadow: var(--w-shadow-sm);
}

@media (min-width: 900px) {
  .trust-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }
}

.trust-copy > :last-child {
  margin-bottom: 0;
}

.trust-copy > p {
  color: var(--fp-color-text-muted);
  font-size: var(--w-text-md);
}

.trust-list {
  margin: 0;
}

.trust-list li {
  padding: var(--fp-space-4);
  background: var(--fp-color-bg);
  border: 1px solid var(--w-border-soft);
  border-radius: var(--w-radius);
  font-weight: 500;
}

/* ------------------------------------------------------------ Časté otázky */

.faq-layout {
  display: grid;
  gap: var(--fp-space-8);
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .faq-intro {
    position: sticky;
    top: calc(var(--w-header-height) + var(--fp-space-8));
  }
}

.faq-intro .section-lead {
  margin-bottom: var(--fp-space-3);
}

.faq {
  display: grid;
  border-top: 1px solid var(--fp-color-border);
}

.faq details {
  border-bottom: 1px solid var(--fp-color-border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-space-4);
  min-height: 24px;
  padding: var(--fp-space-4) var(--fp-space-1);
  font-weight: 600;
  font-size: var(--w-text-md);
  line-height: 1.4;
}

.faq summary:hover {
  color: var(--fp-color-primary-hover);
}

.faq summary .chevron {
  width: 18px;
  height: 18px;
  color: var(--fp-color-text-muted);
  transition: transform 200ms var(--w-ease);
}

.faq details[open] summary .chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--fp-space-1) var(--fp-space-4);
  color: var(--fp-color-text-muted);
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ Závěrečná výzva */

.cta-band > .container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--fp-space-4));
  max-width: 1184px;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  border-radius: 28px;
  color: var(--fp-color-on-primary);
  background:
    radial-gradient(
      50% 80% at 100% 0%,
      color-mix(in srgb, var(--w-accent) 35%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 60% at 0% 100%,
      color-mix(in srgb, var(--fp-color-on-primary) 12%, transparent),
      transparent 70%
    ),
    linear-gradient(140deg, var(--fp-color-primary-hover), var(--fp-color-primary));
  box-shadow: var(--w-shadow-lg);
}

.cta-band > .container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--fp-color-on-primary) 8%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--fp-color-on-primary) 8%, transparent) 1px,
      transparent 1px
    );
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 80% at 50% 0%,
    var(--fp-color-text),
    transparent 75%
  );
  mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, var(--fp-color-text), transparent 75%);
}

.cta-band > .container > h2,
.cta-band > .container > p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: var(--fp-color-on-primary);
}

.cta-band > .container > p {
  font-size: var(--w-text-md);
}

.cta-band .cta-row .button-primary {
  background: var(--fp-color-on-primary);
  color: var(--fp-color-primary-hover);
}

.cta-band .cta-row .button-primary:hover {
  background: var(--fp-color-surface);
  color: var(--fp-color-primary-hover);
}

.cta-band .cta-row .button-secondary {
  background: transparent;
  color: var(--fp-color-on-primary);
  border-color: color-mix(in srgb, var(--fp-color-on-primary) 55%, transparent);
  box-shadow: none;
}

.cta-band .cta-row .button-secondary:hover {
  border-color: var(--fp-color-on-primary);
  background: color-mix(in srgb, var(--fp-color-on-primary) 8%, transparent);
}

.cta-band > .container > .hint,
.cta-band > .container > .hint a {
  color: var(--fp-color-on-primary);
}

.cta-cards {
  margin-top: var(--fp-space-8);
  text-align: left;
}

.cta-cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  color: var(--fp-color-text);
  box-shadow: var(--w-shadow-md);
}

.cta-cards .button {
  margin-top: auto;
}

/* ------------------------------------------------------------ Ceník */

.plan-grid {
  display: grid;
  gap: var(--fp-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.plan-card + .plan-card {
  border-color: var(--w-brand-300);
  box-shadow:
    0 0 0 4px var(--w-brand-ring),
    var(--w-shadow-md);
}

.plan-card .button {
  margin-top: auto;
  align-self: stretch;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fp-space-1) var(--fp-space-2);
  margin-bottom: var(--fp-space-1);
}

.price-amount {
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.card .price-unit,
.card .price-extra,
.price-unit,
.price-extra {
  color: var(--fp-color-text-muted);
}

.all-features {
  margin-top: var(--fp-space-8);
  text-align: center;
}

/* Kalkulačka ceníku */
.calc {
  display: grid;
  gap: var(--fp-space-4);
}

.calc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-space-3);
}

.calc-label {
  font-weight: 600;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-3);
}

.stepper-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--fp-color-border-strong);
  border-radius: var(--w-radius);
  background: var(--fp-color-surface);
  color: var(--fp-color-text);
  font: inherit;
  font-size: var(--fp-font-size-h2);
  line-height: 1;
  cursor: pointer;
}

.stepper-button:hover:not(:disabled) {
  background: var(--w-brand-100);
}

.stepper-button:disabled {
  color: var(--fp-color-text-disabled);
  cursor: not-allowed;
}

.stepper-button:focus-visible,
.calc-interval input:focus-visible + span {
  outline: 3px solid var(--fp-color-focus);
  outline-offset: 2px;
}

.stepper-value {
  min-width: 2ch;
  text-align: center;
  font-size: var(--fp-font-size-h2);
  font-weight: 700;
}

.calc-more {
  margin: 0;
}

.calc-interval {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-1);
  margin: 0;
  padding: var(--fp-space-1);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius);
  background: var(--fp-color-surface-sunken);
}

.calc-interval label {
  flex: 1 1 140px;
}

.calc-interval input {
  position: absolute;
  opacity: 0;
}

.calc-interval span {
  display: block;
  padding: var(--fp-space-2) var(--fp-space-4);
  border-radius: var(--w-radius-sm);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}

.calc-interval input:checked + span {
  background: var(--fp-color-primary);
  color: var(--fp-color-on-primary);
  box-shadow: var(--w-shadow-xs);
}

.calc-result {
  padding: var(--fp-space-6);
  border-radius: var(--w-radius);
  background: var(--fp-color-primary-soft);
}

.calc-result p {
  margin: 0 0 var(--fp-space-1);
  color: var(--fp-color-text);
}

.calc-plan {
  font-weight: 600;
}

.calc-saving {
  font-weight: 700;
}

.calc .button {
  justify-self: start;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius);
  background: var(--fp-color-surface);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--w-text-sm);
}

.price-table th,
.price-table td {
  padding: var(--fp-space-3) var(--fp-space-4);
  border-bottom: 1px solid var(--fp-color-border);
  text-align: right;
  white-space: nowrap;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
}

.price-table th:first-child {
  text-align: left;
}

/* ------------------------------------------------------------ Trust Center */

.claims {
  display: grid;
  gap: var(--fp-space-4);
}

.claim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fp-space-2) var(--fp-space-4);
  justify-content: space-between;
}

.claim-head h3 {
  margin-bottom: var(--fp-space-2);
}

.claim p {
  color: var(--fp-color-text);
}

.proof {
  font-size: var(--w-text-sm);
  margin-bottom: var(--fp-space-2);
}

.card .updated,
.updated {
  font-size: var(--w-text-xs);
  color: var(--fp-color-text-muted);
}

.summary-list li {
  padding: var(--fp-space-4);
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius);
}

.doc-list {
  list-style: none;
  margin: 0 0 var(--fp-space-4);
  padding: 0;
  display: grid;
  gap: var(--fp-space-2);
}

.doc-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fp-space-2);
  padding: var(--fp-space-3) 0;
  border-bottom: 1px solid var(--fp-color-border);
}

.doc-list .badge {
  margin: 0;
}

.facts {
  margin: 0 0 var(--fp-space-8);
}

.facts div {
  display: grid;
  gap: var(--fp-space-1) var(--fp-space-4);
  padding: var(--fp-space-3) 0;
  border-bottom: 1px solid var(--fp-color-border);
}

@media (min-width: 600px) {
  .facts div {
    grid-template-columns: 240px 1fr;
  }
}

.facts dt {
  font-weight: 600;
}

.facts dd {
  margin: 0;
}

.steps {
  list-style: none;
  margin: 0 0 var(--fp-space-4);
  padding: 0;
  display: grid;
  gap: var(--fp-space-2);
}

.steps li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fp-space-2);
  padding-bottom: var(--fp-space-2);
  border-bottom: 1px solid var(--fp-color-border-subtle);
}

.steps .badge {
  margin: 0;
}

.preview-notice {
  margin: 0;
  padding: var(--fp-space-2) var(--fp-space-4);
  font-size: var(--w-text-sm);
  text-align: center;
  color: var(--fp-color-warning-text);
  background: var(--fp-color-warning-soft);
}

/* ------------------------------------------------------------ Patička */

.site-footer {
  background: var(--fp-color-surface);
  border-top: 1px solid var(--w-border-soft);
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
  font-size: var(--w-text-sm);
}

.footer-grid {
  display: grid;
  gap: var(--fp-space-8);
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
  }
}

.footer-brand {
  max-width: 340px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fp-space-8) var(--fp-space-6);
}

@media (min-width: 640px) {
  .footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.footer-nav li {
  margin-bottom: var(--fp-space-2);
}

.footer-nav a {
  color: var(--fp-color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--fp-color-text);
  text-decoration: underline;
}

.footer-nav a[aria-current='page'],
.footer-lang-current {
  color: var(--fp-color-text);
  font-weight: 600;
}

.footer-heading {
  margin-bottom: var(--fp-space-3);
  font-size: var(--w-text-sm);
  font-weight: 650;
  color: var(--fp-color-text);
}

.brand-footer {
  margin-bottom: var(--fp-space-3);
}

.motto,
.footer-note {
  color: var(--fp-color-text-muted);
}

.motto-name {
  font-weight: 700;
  color: var(--fp-color-primary);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fp-space-2) var(--fp-space-6);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: var(--fp-space-6);
  padding-bottom: var(--fp-space-6);
  border-top: 1px solid var(--w-border-soft);
  color: var(--fp-color-text-muted);
  font-size: var(--w-text-xs);
}

.footer-bottom p {
  margin: 0;
}

/* ------------------------------------------------------------ Značka (inline SVG) */

.ill-primary {
  fill: var(--fp-color-primary);
}

.ill-on-primary {
  stroke: var(--fp-color-on-primary);
}

/* ------------------------------------------------------------ Přístupnost a tisk */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cta-band {
    display: none;
  }

  .hero::before,
  .hero::after,
  .page-header::before,
  .page-header::after {
    display: none;
  }
}

/* ------------------------------------------------------------ Doladění */

.section + .cta-band {
  padding-top: calc(var(--w-section) / 2);
}

/* Tmavý režim: závěrečná výzva tlumeně (sytá světlá zelená by na tmavé stránce křičela). */
@media screen and (prefers-color-scheme: dark) {
  .cta-band > .container {
    color: var(--fp-color-text);
    background:
      radial-gradient(
        50% 80% at 100% 0%,
        color-mix(in srgb, var(--w-accent) 22%, transparent),
        transparent 70%
      ),
      radial-gradient(
        50% 70% at 0% 100%,
        color-mix(in srgb, var(--fp-color-primary) 24%, transparent),
        transparent 70%
      ),
      linear-gradient(
        140deg,
        color-mix(in srgb, var(--fp-color-primary) 26%, var(--fp-color-bg)),
        var(--fp-color-surface)
      );
    border: 1px solid color-mix(in srgb, var(--fp-color-primary) 30%, var(--fp-color-border));
  }

  .cta-band > .container::before {
    background-image:
      linear-gradient(to right, var(--w-grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--w-grid-line) 1px, transparent 1px);
  }

  .cta-band > .container > h2,
  .cta-band > .container > p,
  .cta-band > .container > .hint {
    color: var(--fp-color-text);
  }

  .cta-band > .container > .hint a {
    color: var(--fp-color-primary);
  }

  .cta-band .cta-row .button-primary,
  .cta-band .cta-row .button-primary:hover {
    background: var(--fp-color-primary);
    color: var(--fp-color-on-primary);
  }

  .cta-band .cta-row .button-secondary {
    color: var(--fp-color-text);
    border-color: var(--fp-color-border-strong);
  }

  .cta-band .cta-row .button-secondary:hover {
    border-color: var(--fp-color-text);
  }
}

.page-header-inner {
  text-align: center;
}

.page-header .lead {
  margin-left: auto;
  margin-right: auto;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fp-space-2);
  margin: var(--fp-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--fp-radius-pill);
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  box-shadow: var(--w-shadow-xs);
  color: var(--fp-color-text);
  font-size: var(--w-text-sm);
  font-weight: 550;
  text-decoration: none;
}

.chip:hover {
  color: var(--fp-color-text);
  border-color: var(--w-brand-300);
  background: var(--w-brand-50);
}

@media (min-width: 900px) {
  .feature-split {
    align-items: start;
  }

  .feature-split .split-visual {
    position: sticky;
    top: calc(var(--w-header-height) + var(--fp-space-8));
  }
}

.card .price,
.card .price-amount {
  color: var(--fp-color-text);
}

.plan-grid {
  max-width: calc(1000px + 2 * var(--w-gutter));
}

.plan-card h2 {
  font-size: var(--fp-font-size-h2);
  letter-spacing: -0.02em;
  margin-bottom: var(--fp-space-3);
}

.plan-card .check-list {
  margin-top: var(--fp-space-4);
}

#kalkulacka h2,
#pricing-notes-title {
  text-align: center;
  margin-bottom: var(--fp-space-8);
}

.switch-copy .section-lead,
.faq-intro .section-lead {
  margin-bottom: var(--fp-space-4);
}

.notes-list {
  list-style: none;
  padding: 0;
  gap: 0;
  border-top: 1px solid var(--fp-color-border);
}

.notes-list li {
  position: relative;
  padding: var(--fp-space-4) 0 var(--fp-space-4) var(--fp-space-6);
  border-bottom: 1px solid var(--fp-color-border);
}

.notes-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: calc(var(--fp-space-4) + 0.6em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fp-color-primary);
}

/* Formulář Domluvit ukázku (ADR 0061 dodatek 4): jen tokeny, bez JavaScriptu. */
.lead-form {
  display: grid;
  gap: 1rem;
}

.lead-form .field {
  display: grid;
  gap: 0.35rem;
}

.lead-form .field-row {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.lead-form label {
  font-weight: 600;
}

.lead-form input[type='text'],
.lead-form input[type='email'],
.lead-form input[type='tel'],
.lead-form select,
.lead-form textarea {
  width: 100%;
  font: inherit;
  color: var(--fp-color-text);
  background: var(--fp-color-bg);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--w-radius-sm);
  padding: 0.65rem 0.8rem;
}

.lead-form textarea {
  resize: vertical;
}

.lead-form .field.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.lead-form .field.consent input {
  flex: none;
  margin-top: 0.3rem;
}

.lead-form .field.consent label {
  flex: 1;
  font-weight: 400;
}

.lead-form .field-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fp-color-text-muted);
}

.lead-form .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-form button {
  cursor: pointer;
}