/* =====================================================================
   TOKOV — Podnikanie v Nemecku · design system
   Standalone brand: deep navy surfaces, saffron gold for actions and
   highlights, navy tints for utility accents. Plain CSS, no build step;
   every colour is a token in section 2.
   Layout language: content sits in rows separated by hairlines. Only the
   objects that must stand out get a card — the invoice example, the price,
   the misconceptions and the closing call to action.
   Graphic motif: the technical drawing — a faint blueprint grid on dark and
   soft surfaces, dimension-line labels in heroes, navy-toned photography,
   spot illustrations with a gold seal. Motion: section 20 (reveal on
   scroll, draw-in illustrations, invoice bars, timelines); everything
   stops under prefers-reduced-motion and nothing is hidden without JS.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Fonts — self-hosted (no third-party request), latin + latin-ext
 * ------------------------------------------------------------------ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-wght-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-ext-wght-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: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/space-grotesk-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; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-grotesk-latin-700-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: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext-700-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; }

/* ------------------------------------------------------------------ *
 * 2. Tokens
 * ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* dark surfaces */
  --night: #0c1b2c;
  --night-soft: #12273d;
  --night-ink: #e8eef5;
  --night-ink-soft: #a3b1c1;
  --night-ink-faint: #8d9aa8;
  --night-border: rgba(255, 255, 255, 0.12);

  /* utility accents (icons, rings, links) */
  --navy-700: #183756;
  --navy-600: #215582;
  --navy-100: #e9eff5;
  --navy-50: #f3f6fa;

  /* action + highlight — never as text on white (use --gold-text) */
  --gold: #f0b64b;
  --gold-hover: #f5c25e;
  --gold-deep: #d9982e;
  --gold-soft: #fdf3dc;
  --gold-text: #7a5210;

  /* semantic */
  --green: #17804f;
  --green-text: #136b42;
  --green-soft: #eaf6ef;
  --signal: #c9493b;
  --signal-text: #b3372a;
  --signal-soft: #fdf3f2;

  /* neutrals */
  --ink: #111c27;
  --ink-soft: #4b5a68;
  --ink-faint: #5f6d7a;
  --bg: #ffffff;
  --bg-soft: #f2f5f9;
  --bg-sunk: #eceff3;
  --surface: #ffffff;
  --border: #e2e8ee;
  --border-strong: #cdd5de;
  --border-input: #7f8c99; /* form field edges: 3:1 on white */

  --link: var(--navy-600);
  --focus: var(--navy-600);
  --mark-ring: transparent;
  --row-hover: rgba(33, 85, 130, 0.07);

  /* blueprint grid lines: on light surfaces (ink) and on dark ones (light) */
  --grid-ink: rgba(24, 55, 86, 0.085);
  --grid-light: rgba(255, 255, 255, 0.06);

  /* illustrations (inline SVG) */
  --ill-line: var(--navy-700);
  --ill-paper: #ffffff;
  --ill-blob: var(--navy-100);
  --ill-lines: #d5dde6;
  --ill-edge: transparent;
  --ill-chip: #ffffff;
  --scena-bg: #0c1b2c; --scena-bg-2: #12304d;
  --scena-paper: #ffffff; --scena-paper-2: #e6ecf2; --scena-edge: rgba(12, 27, 44, 0.08);
  --scena-ink: #0c1b2c; --scena-muted: #5f6d7a; --scena-line: #dfe5ec; --scena-line-2: #b3c0ce;
  --scena-dim: rgba(240, 182, 75, 0.6);
  --scena-border: rgba(12, 27, 44, 0.12);

  /* 2026-10 foundation (task 87, F1) — layout, type scale, spacing rhythm */
  --container: 80rem; /* 1280 px with the gutters = 1200 px of content */
  --container-wide: 90rem; /* 1440 px = 1360 content: product row at >= 1680, night bands, hero stages */
  --container-narrow: 51.25rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 40rem; /* prose: ~70 characters per line */
  --row-max: 56rem; /* single-column lists of rows */
  --fs-display: clamp(2.25rem, 1.55rem + 2.9vw, 4.5rem); /* home H1 only: 36 / 67 / 72 */
  --fs-h1: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); /* 36 / 56 / 56 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); /* 28 / 44 / 44 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* 20 / 26 / 26: row names, card titles, questions */
  --fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.375rem); /* 18 / 22 / 22 */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 to 18 */
  --fs-small: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14 / 15 */
  --fs-label: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* 12 / 13, uppercase */
  --tracking-label: 0.12em; /* the one tracking of every uppercase label */
  --section-y: clamp(3.75rem, 1.9rem + 5.2vw, 7rem);
  --section-y-tight: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem);
  --head-gap: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  --card-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --btn-h-sm: 2.5rem; /* buttons 40 / 48 / 56 px */
  --btn-h: 3rem;
  --btn-h-lg: 3.5rem;
  /* the hero system (FX-shared S3): two sizes. Full = home, hub, O nás, 404 (H1 = --fs-h1); compact = FAQ, kontakt,
     dokumenty, legal documents (H1 = --fs-hero-compact). One distance from the header to the eyebrow / breadcrumb in both,
     one bottom padding per size. Page regions read these, they do not set their own. */
  --hero-pt: clamp(1.75rem, 3.4vw, 3rem); /* 28 phones / 48 from 1412 px */
  --hero-pb: clamp(2.25rem, 4.5vw, 4rem); /* full: 36 / 64 */
  --hero-pb-compact: var(--hero-pt); /* compact: 28 / 48 */
  --fs-hero-compact: var(--fs-h2); /* 28 / 44 */

  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* the old step tokens stay (anything still using them lands on the new scale) */
  --step--1: var(--fs-small);
  --step-0: var(--fs-body);
  --step-1: var(--fs-h3);
  --step-2: var(--fs-h3);
  --step-3: var(--fs-h2);
  --step-4: var(--fs-h1);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --radius-sm: 8px; /* inputs, small controls */
  --radius: 14px; /* callouts, tiles, rows */
  --radius-lg: 20px; /* stage, price card, invoice, closing panel */
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(12, 27, 44, 0.06), 0 1px 3px rgba(12, 27, 44, 0.05);
  --shadow-md: 0 12px 28px -12px rgba(12, 27, 44, 0.2);
  --shadow-lg: 0 34px 64px -28px rgba(12, 27, 44, 0.35);

  /* one focus ring: 2 px outline in --focus (navy on light, gold on night), fields add a soft halo of the same colour */
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 150ms; /* hover, colour */
  --dur-2: 250ms; /* lift, slide */
  --dur-3: 600ms; /* reveal, draw-in */
  --header-h: 4.75rem;
}

/* FX-shared S4 · the big screens. The clamps above reach their caps at about 1400 px; from 1700 px the page keeps growing:
   wider containers (1328 / 1456 px of content instead of 1200 / 1360, so the page does not sit in 360 px gutters at 1920)
   and a higher ceiling for the display / H1 / H2 sizes (every clamp continues from its value at 1700 px: 72 / 56 / 44 px,
   reaching 80 / 64 / 50 px at 1920). Body, lead and small text keep their size. */
@media (min-width: 1700px) {
  :root {
    --container: 88rem;
    --container-wide: 96rem;
    --fs-display: clamp(4.5rem, 3.64vw + 0.63rem, 5rem);
    --fs-h1: clamp(3.5rem, 3.64vw - 0.36rem, 4rem);
    --fs-h2: clamp(2.75rem, 2.73vw - 0.15rem, 3.25rem);
    --hero-pt: 3.5rem;
    --hero-pb: 4.5rem;
  }
}

/* FX-shared S8 · phones: information text is 15 px (labels in capitals keep their 12 px) */
@media (max-width: 600px) {
  :root { --fs-small: 0.9375rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* ladder: page #0a1520 → soft #102338 → surface #152a43; night is lifted to #0e2540 and carries a hairline.
       S7: soft was only 4 points of lightness above the page and the section boundaries vanished: soft is lifted to 6-7 points
       and every soft section carries a hairline above and below (section 19); borders and edge rings are a step stronger */
    --night: #0e2540;
    --night-soft: #112a48;
    --navy-700: #b7cde6;
    --navy-600: #8fb8e3;
    --navy-100: rgba(143, 184, 227, 0.14);
    --navy-50: rgba(143, 184, 227, 0.07);
    --gold-soft: #2e2a1c;
    --gold-text: #f0b64b;
    --green-text: #5fcf97;
    --green-soft: rgba(23, 128, 79, 0.18);
    --signal-text: #ff8a7a;
    --signal-soft: rgba(201, 73, 59, 0.16);
    --ink: #e8eef5;
    --ink-soft: #b4c0cd;
    --ink-faint: #8d9aa8;
    --bg: #0a1520;
    --bg-soft: #102338;
    --bg-sunk: #08111a;
    --surface: #152a43;
    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.22);
    --border-input: rgba(255, 255, 255, 0.42);
    --link: #8fb8e3;
    --focus: #8fb8e3;
    --mark-ring: rgba(255, 255, 255, 0.16);
    --row-hover: rgba(143, 184, 227, 0.09);
    --grid-ink: rgba(143, 184, 227, 0.09);
    /* shadows vanish on dark grounds: an edge ring plus a deep, tight drop */
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -24px rgba(0, 0, 0, 0.65);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 36px 64px -28px rgba(0, 0, 0, 0.75);
    --ill-paper: #16283f;
    --ill-lines: rgba(255, 255, 255, 0.18);
    --ill-edge: rgba(255, 255, 255, 0.14);
    --ill-chip: #17293f;
    --scena-bg: #07111c; --scena-bg-2: #0f2740;
    --scena-paper: #e9eef4; --scena-paper-2: #d3dbe5; --scena-edge: rgba(255, 255, 255, 0.2);
    --scena-border: var(--border);
    --scena-line: #cbd4de; --scena-line-2: #97a6b7;
  }
}

/* ------------------------------------------------------------------ *
 * 3. Reset & base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; overflow-x: hidden; overflow-x: clip; }
html.nav-open { overflow: hidden; } /* the off-canvas menu locks the page (body overflow would not propagate past the clip) */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-wrap: pretty; /* inherited: short labels and list items avoid one-word last lines too */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual; /* soft hyphens only: a headline is never broken mid-word by the browser */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lead); }

p { text-wrap: pretty; }
p, li, dd, dt { overflow-wrap: break-word; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
ul, ol { padding-left: 1.15em; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* the one focus ring; --focus is gold on night grounds, navy / pale blue on the page */
::selection { background: var(--navy-600); color: var(--bg); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--night); color: #fff;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* ------------------------------------------------------------------ *
 * 4. Layout primitives + the blueprint grid
 * ------------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); } /* modifier: hero stages, night bands, the product row on big screens */
.container--narrow { max-width: var(--container-narrow); margin-inline: 0; } /* narrow columns hang off the left edge, like the headings above them */

/* fluid rhythm: 60 px on phones, 105 at 1440, 112 from 1500 up; tight bands (forms, closing CTA) 40 to 72 */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section-soft { background: var(--bg-soft); }
/* Two white bands in a row: the closing CTA band drops its own top padding. */
.section:not(.section-soft) + .section--tight:not(.section-soft) { padding-top: 0; }

/* ------------------------------------------------------------------ *
 * Night band (F1) — a scoped token remap. Put `band-night` on a <section>
 * (or any wrapper) and everything inside flips to the night look without
 * per-component overrides: index rows, accordions, chips, cards, links,
 * eyebrows, outline buttons. It carries the blueprint grid. Works the same
 * in light and dark mode (dark mode only lifts --night one step).
 * Never place it directly under the product block of a service page.
 * ------------------------------------------------------------------ */
.band-night {
  position: relative; isolation: isolate; color-scheme: dark;
  background: var(--night); color: var(--night-ink);
  --bg: var(--night); --bg-soft: rgba(255, 255, 255, 0.05); --bg-sunk: rgba(0, 0, 0, 0.22);
  --surface: var(--night-soft);
  --ink: var(--night-ink); --ink-soft: var(--night-ink-soft); --ink-faint: var(--night-ink-faint);
  --border: var(--night-border); --border-strong: rgba(255, 255, 255, 0.22); --border-input: rgba(255, 255, 255, 0.42);
  --link: #8fb8e3; --focus: var(--gold);
  --navy-700: #b7cde6; --navy-600: #8fb8e3; --navy-100: rgba(143, 184, 227, 0.14); --navy-50: rgba(143, 184, 227, 0.07);
  --gold-text: var(--gold); --gold-soft: #2e2a1c;
  --green-text: #5fcf97; --green-soft: rgba(23, 128, 79, 0.18);
  --signal-text: #ff8a7a; --signal-soft: rgba(201, 73, 59, 0.16);
  --row-hover: rgba(143, 184, 227, 0.09); --mark-ring: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 48px -24px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 36px 64px -28px rgba(0, 0, 0, 0.75);
  --grid-c: var(--grid-light); --grid-mask: radial-gradient(70% 120% at 85% 0%, #000 0%, transparent 70%);
}
.band-night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask);
}

.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); } }

/* Labels: small uppercase text in gold ink. Heroes get the dimension line. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-text);
}
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: var(--space-xs); }
/* keyboard focus on dark surfaces: navy would vanish, gold reads on both */
.page-hero, .vyzva, .site-footer { --focus: var(--gold); }

.lead { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); }
.section-head { max-width: 46rem; margin-bottom: var(--head-gap); }
.section-head .lead { margin-top: var(--space-sm); }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.section-head--row > h2 { max-width: 46rem; }

.link-arrow { position: relative; display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 600; text-decoration: none; color: var(--link); }
.link-arrow::before { content: ""; position: absolute; inset: -0.75rem -0.25rem; } /* 44 px tap area without moving the layout */
.link-arrow svg { transition: transform 0.2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* icon tiles: the radius follows the tile size (--s), so every tile has the same silhouette */
.ikona { --s: 2.6rem; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: var(--navy-100); color: var(--navy-700); }
.ikona--sm { --s: 2.1rem; }

/* ------------------------------------------------------------------ *
 * 5. Buttons — gold is the one filled action colour
 * ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--night); --btn-fg: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--btn-h); padding: 0 1.5em; /* 48 px; --sm 40, --lg 56 */
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline-offset: 3px; }
.btn--primary { --btn-bg: var(--gold); --btn-fg: #0c1b2c; }
.btn--primary:hover { --btn-bg: var(--gold-hover); box-shadow: 0 12px 24px -12px rgba(240, 182, 75, 0.7); }
/* a light sweep across the gold on hover */
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%); transform: translateX(-130%); transition: transform 0.55s var(--ease); pointer-events: none; }
.btn--primary:hover::after { transform: translateX(130%); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--border-strong); }
.btn--outline:hover, .btn--outline[aria-current="page"] { --btn-bg: var(--bg-soft); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255, 255, 255, 0.3); }
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); }
.btn--lg { min-height: var(--btn-h-lg); padding-inline: 1.75em; }
.btn--sm { min-height: var(--btn-h-sm); padding-inline: 1.15em; font-size: var(--fs-small); }
@media (pointer: coarse) { .btn--sm { min-height: 2.75rem; } } /* touch: 44 px */
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ *
 * 6. Header — a night bar on every page (task 87 · F2). Light-on-night
 *    nav, gold CTA, mega menu under the bar (≥ 1025); ≤ 1024 the nav is an
 *    off-canvas night sheet. The preview column, scrim, phone dock and the
 *    no-JS header live in the F:header region at the end of this file.
 * ------------------------------------------------------------------ */
.site-header {
  --focus: var(--gold); --mark-ring: rgba(255, 255, 255, 0.16);
  position: sticky; top: 0; z-index: 100;
  background: var(--night); color: var(--night-ink); border-bottom: 1px solid var(--night-border);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.65); }
.site-header__bar { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-md); height: var(--header-h); }

/* lockup: 40 px mark, TOKOV 22 px; from 1100 px the tagline sits beside it behind a hairline, below that under it */
.brand { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; min-height: 2.75rem; margin-right: auto; text-decoration: none; color: #fff; }
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; box-shadow: 0 0 0 1px var(--mark-ring); overflow: visible; }
.brand__stack { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.05; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; color: currentColor; }
.brand__unit { font-family: var(--font-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--night-ink-soft); }
.site-header .brand__unit { white-space: nowrap; }
@media (min-width: 1100px) {
  .site-header .brand__stack { flex-direction: row; align-items: center; gap: 0.95rem; }
  .site-header .brand__word { font-size: 1.375rem; }
  .site-header .brand__unit { padding-left: 0.95rem; border-left: 1px solid rgba(255, 255, 255, 0.24); font-size: 0.8125rem; line-height: 1.25; }
}
/* the footer lockup is white too: `.site-footer a` (0,1,1) used to out-rank `.brand--footer` and greyed the wordmark */
.site-footer a.brand--footer, .site-footer a.brand--footer:hover { color: #fff; }
.brand--footer { margin-bottom: var(--space-sm); margin-right: 0; }
.brand--footer .brand__unit { color: var(--night-ink-soft); }
.brand--footer .brand__mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }

.primary-nav { display: flex; align-items: center; }
.primary-nav > ul { display: flex; align-items: center; gap: 0.125rem; list-style: none; padding: 0; margin: 0; }
.primary-nav > ul > li { margin: 0; position: relative; }
.primary-nav > ul > li > a:not(.btn), .sub-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.75rem; padding: 0 0.8rem; border: 0; border-radius: var(--radius-sm); background: transparent;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; line-height: 1; color: var(--night-ink-soft);
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: color 0.15s;
}
/* open menu and current page: a 2 px gold underline; on hover it grows from the centre */
.primary-nav > ul > li > a:not(.btn)::after, .sub-toggle::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.55rem; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transition: transform 0.22s var(--ease);
}
.has-sub.open .sub-toggle, .primary-nav > ul > li > a:not(.btn)[aria-current="page"], .sub-toggle[data-active="true"] { color: var(--night-ink); }
.has-sub.open .sub-toggle::after, .primary-nav > ul > li > a:not(.btn)[aria-current="page"]::after, .sub-toggle[data-active="true"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .primary-nav > ul > li > a:not(.btn):hover, .sub-toggle:hover { color: var(--night-ink); }
  .primary-nav > ul > li > a:not(.btn):hover::after, .sub-toggle:hover::after { transform: scaleX(1); }
}
.sub-toggle svg { transition: transform 0.2s var(--ease); }
.has-sub.open .sub-toggle svg { transform: rotate(180deg); }

/* phone number: gold icon in a soft circle, light text */
.primary-nav > ul > li.nav-tel > a:not(.btn) { gap: 0.6rem; padding-inline: 0.5rem 0.4rem; font-weight: 600; white-space: nowrap; color: var(--night-ink); }
.primary-nav > ul > li.nav-tel > a:not(.btn)::after { display: none; }
.nav-tel__ikona { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(240, 182, 75, 0.16); color: var(--gold); transition: background 0.2s var(--ease); }
.nav-tel > a:hover .nav-tel__ikona { background: rgba(240, 182, 75, 0.3); }
.nav-cta { margin-left: 0.5rem; }
.nav-cta .btn { min-height: 2.5rem; padding: 0 1.15rem; font-size: 0.9375rem; }

/* mega menu: rows = icon tile, name, one-line explanation, price right-aligned (colours via --m-* so the phone sheet can flip them) */
.sub-menu {
  --m-ink: var(--ink); --m-soft: var(--ink-faint); --m-line: var(--border);
  --m-tile: var(--navy-100); --m-tile-ink: var(--navy-700); --focus: var(--navy-600);
  margin: 0; padding: 0; color: var(--m-ink);
}
.sub-menu ul { list-style: none; margin: 0; padding: 0; }
.sub-menu li { margin: 0; }
.mega__col { padding: 1.4rem 1rem 0.75rem; }
.mega__col:first-child { padding-left: 1.25rem; }
.mega__title { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.75rem 0.55rem; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-soft); }
.mega__row {
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem;
  min-height: 3.75rem; padding: 0.55rem 0.75rem; border-radius: 12px; color: var(--m-ink); text-decoration: none; transition: background 0.15s;
}
.mega__row:focus-visible { outline-offset: -2px; border-radius: 12px; }
/* hover and focus: soft row tint, a 3 px gold rule at the left edge, the icon tile turns gold (as the home service rows) */
.mega__row::before { content: ""; position: absolute; left: 0; top: 0.65rem; bottom: 0.65rem; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 0.2s var(--ease); }
.mega__row:hover, .mega__row:focus-visible { background: var(--row-hover); }
.mega__row:hover::before, .mega__row:focus-visible::before { transform: scaleY(1); }
.mega__ikona { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--m-tile); color: var(--m-tile-ink); transition: background 0.15s, color 0.15s; }
.mega__row:hover .mega__ikona, .mega__row:focus-visible .mega__ikona { background: var(--gold); color: #0c1b2c; }
.mega__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mega__name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--m-ink); }
.mega__sub { font-size: 0.8125rem; line-height: 1.35; color: var(--m-soft); }
.mega__price { margin-left: 1.25rem; /* + the 0.85 rem gap = at least 32 px between a row's sub-line and its price */ font-family: var(--font-display); font-size: 0.84375rem; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--m-ink); }
.mega__row[aria-current="page"] { background: var(--navy-50); }
.mega__row[aria-current="page"] .mega__name { color: var(--link); }
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.75rem 1rem; border-top: 1px solid var(--m-line); }
.mega__all { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--link); text-decoration: none; }
.mega__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.mega__note { font-size: 0.8125rem; color: var(--m-soft); }

@media (min-width: 1025px) {
  /* the panel anchors to the container's content edges (the logo's left edge, the call button's right edge), not to the "Služby" button */
  .primary-nav > ul > li.has-sub { position: static; }
  .sub-menu {
    display: none; position: absolute; z-index: 2; top: 100%; left: var(--gutter); right: var(--gutter); width: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "f f" "n n";
    background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 20px 20px;
    box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .has-sub.open .sub-menu { display: grid; animation: subIn 0.16s var(--ease); }
  .mega__col:nth-child(1) { grid-area: a; }
  .mega__col:nth-child(2) { grid-area: b; }
  .mega__foot { grid-area: f; }
}
/* from 1200 px the night band becomes a third column: the preview of the hovered / focused service (264 px wide at 1200, 304 from 1280, so the one-line rows stay one line) */
@media (min-width: 1200px) {
  .sub-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(16.5rem, 50vw - 21rem, 19rem); grid-template-rows: 1fr auto; grid-template-areas: "a b n" "f f n"; min-height: 29rem; }
}
@keyframes subIn { from { opacity: 0; transform: translateY(6px); } }

.header-tools { display: flex; align-items: center; gap: 0.5rem; }
/* Without a language switch the tools wrapper only holds the menu button;
   hide it on desktop so the nav ends on the content edge. */
@media (min-width: 1025px) { .header-tools:not(:has(.lang-switch)) { display: none; } }
.lang-switch { position: relative; font-family: var(--font-display); }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--night-border); border-radius: 12px; background: transparent;
  color: var(--night-ink); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.lang-switch__btn:hover { background: rgba(255, 255, 255, 0.08); }
.lang-switch__menu { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 5; min-width: 9rem; margin: 0; padding: 0.35rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu li { margin: 0; }
.lang-switch__menu a { display: block; padding: 0.5rem 0.65rem; border-radius: 6px; font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; }
.lang-switch__menu a:hover { background: var(--bg-soft); color: var(--ink); }
.lang-switch__menu a[aria-current="true"] { color: var(--navy-600); font-weight: 600; }

/* burger and call button: both 44 × 44, same radius */
.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--night-border); border-radius: 12px; background: transparent; color: #fff; cursor: pointer; transition: background 0.15s; }
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.nav-toggle svg { margin: auto; }
.nav-toggle__close { display: none; }
body.nav-open .nav-toggle__open { display: none; }
body.nav-open .nav-toggle__close { display: block; }

@media (max-width: 1024px) {
  .site-header__bar { gap: 0.75rem; }
  .nav-toggle { display: inline-flex; }
  /* off-canvas: a night sheet under the bar; the list scrolls, the bar with the two actions stays pinned (F:header) */
  html.js .primary-nav {
    --sheet-x: max(clamp(1.25rem, 4vw, 2.5rem), calc((100% - 34rem) / 2));
    position: fixed; inset: calc(var(--header-h) + 1px) 0 0 0; z-index: 90; display: none; flex-direction: column; align-items: stretch;
    overflow: hidden; background: var(--night);
  }
  body.nav-open .primary-nav { display: flex; animation: navSlideIn 0.28s var(--ease); }
  body.nav-open { overflow: hidden; }
  .primary-nav > ul { flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 0.25rem var(--sheet-x) 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--night-border); }
  .primary-nav > ul > li.nav-tel, .primary-nav > ul > li.nav-cta { display: none; } /* phone and CTA live in the pinned bar */
  .primary-nav > ul > li > a:not(.btn), .sub-toggle {
    width: 100%; justify-content: space-between; min-height: 3.75rem; padding: 0.5rem 0; border-radius: 0;
    font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--night-ink);
  }
  /* current page: a short gold underline (the desktop underline, shortened) */
  .primary-nav > ul > li > a:not(.btn)::after, .sub-toggle::after { left: 0; right: auto; width: 1.75rem; bottom: 0.75rem; transform-origin: left; }
  .sub-toggle svg { width: 18px; height: 18px; color: var(--night-ink-soft); }
  html.js .has-sub:not(.open) .sub-menu { display: none; }
  .sub-menu {
    --m-ink: var(--night-ink); --m-soft: var(--night-ink-soft); --m-line: var(--night-border);
    --m-tile: rgba(240, 182, 75, 0.16); --m-tile-ink: var(--gold); --focus: var(--gold);
    display: block; padding: 0 0 0.75rem; background: transparent;
  }
  .mega__col, .mega__col:first-child { padding: 0; }
  .mega__title { padding: 1rem 0 0.4rem; }
  .mega__title::before { content: ""; flex: none; width: 1.4rem; height: 2px; border-radius: 2px; background: var(--gold); }
  .mega__row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.9rem; min-height: 4rem; padding: 0.65rem 0; border-radius: 0; }
  .sub-menu li + li .mega__row { border-top: 1px solid var(--m-line); }
  .mega__row::before { display: none; }
  .mega__row:hover { background: transparent; }
  .mega__row:active { background: rgba(255, 255, 255, 0.06); }
  .mega__row:hover .mega__ikona { background: var(--m-tile); color: var(--m-tile-ink); }
  .mega__ikona { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
  .mega__name { font-size: 1.0625rem; }
  .mega__sub { font-size: 0.875rem; }
  .mega__price { margin-left: 0; font-size: 0.9375rem; }
  .mega__row[aria-current="page"] { background: transparent; }
  .mega__row[aria-current="page"] .mega__name { color: var(--gold); }
  .mega__nahlad { display: none; }
  .mega__foot { flex-direction: column; align-items: flex-start; gap: 0; padding: 0.35rem 0 0; border-top: 0; }
  .mega__all { color: var(--gold); }
  .mega__note { padding-bottom: 0.25rem; font-size: 0.875rem; }
}
@media (max-width: 360px) { .site-header .brand__unit { display: none; } }
@media (prefers-reduced-motion: reduce) { body.nav-open .primary-nav { animation: none; } }
@keyframes navSlideIn { from { transform: translateX(100%); } }

/* ------------------------------------------------------------------ *
 * 7. Page hero. Default = the compact night hero: navy ground with soft
 *    glows, the blueprint grid and the dimension-line label, height driven by
 *    its content. `.page-hero--photo` adds a navy-toned photograph under the
 *    same grid (only O nás uses it; the home hero until its package replaces it).
 * ------------------------------------------------------------------ */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--night-ink);
  background:
    radial-gradient(60% 140% at 92% -10%, rgba(58, 116, 176, 0.28), transparent 62%),
    radial-gradient(42% 100% at 100% 110%, rgba(240, 182, 75, 0.1), transparent 70%),
    var(--night);
  --grid-c: var(--grid-light); --grid-mask: radial-gradient(85% 150% at 72% 0%, #000 18%, transparent 80%);
}
.page-hero .container { position: relative; }
/* the grid sits on every hero, photo or not */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; mix-blend-mode: luminosity; opacity: 0.92; filter: contrast(1.08) brightness(0.9); }
.page-hero--photo { --grid-mask: radial-gradient(75% 90% at 78% 30%, #000 25%, transparent 72%); }
.page-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 70% at 100% 100%, rgba(240, 182, 75, 0.14), transparent 65%), linear-gradient(100deg, rgba(12, 27, 44, 0.95) 0%, rgba(12, 27, 44, 0.84) 45%, rgba(12, 27, 44, 0.42) 100%); }
/* S3 · one hero system: the same padding for every full hero (photo or not, with or without a facts strip) and one for every
   compact hero; the eyebrow or breadcrumb sits --hero-pt under the header in both. Page regions must not set their own. */
.page-hero__inner { max-width: 52rem; padding-block: var(--hero-pt) var(--hero-pb); }
.page-hero--compact .page-hero__inner { padding-block: var(--hero-pt) var(--hero-pb-compact); }
.page-hero--fakty .page-hero__inner { padding-bottom: var(--hero-pb); } /* the strip under the hero follows the full hero's bottom padding (and out-ranks the home region's own value) */
.page-hero .breadcrumbs { margin-bottom: var(--space-md); }
.page-hero .eyebrow { display: flex; align-items: flex-start; color: var(--night-ink-soft); } /* block-level: the label's box starts exactly --hero-pt under the header, as a breadcrumb does (an inline-flex box sat 5 px lower in the line's strut) */
/* dimension line |———| in gold, like on a drawing; sits on the first text line even when the label wraps */
.page-hero .eyebrow::before { content: ""; flex: none; width: 2.1rem; height: 10px; margin-top: calc((1.65em - 10px) / 2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1.5 1v8M32.5 1v8M1.5 5h31' fill='none' stroke='%23f0b64b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero h1 span { display: block; color: var(--gold); }
.page-hero--compact h1 { font-size: var(--fs-hero-compact); } /* FAQ, contact, documents: the page title takes the H2 size (44 px at 1440) */
.page-hero .lead { margin-top: var(--space-md); max-width: 36rem; color: var(--night-ink-soft); }
.page-hero--compact .lead { margin-top: var(--space-sm); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (max-width: 700px) {
  .page-hero--photo::after { background: linear-gradient(180deg, rgba(12, 27, 44, 0.93) 0%, rgba(12, 27, 44, 0.88) 70%, rgba(12, 27, 44, 0.84) 100%); }
  .hero__actions { gap: 0.6rem; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* The graphic beside a page headline (documents, 404): desktop nav widths only. */
.page-hero__graphic { display: none; }
@media (min-width: 1025px) {
  .page-hero__graphic { display: block; position: absolute; right: var(--gutter); top: 50%; width: clamp(250px, 26vw, 380px); transform: translateY(-50%); pointer-events: none; }
}

.breadcrumbs { font-size: var(--fs-small); color: var(--night-ink-soft); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumbs a { color: inherit; text-decoration: none; display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; } /* 44 px tap height, no layout change */
.breadcrumbs a:hover { color: #fff; }

.fakty-pas { position: relative; background: rgba(7, 16, 26, 0.66); border-top: 1px solid rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fakty { list-style: none; margin: 0; padding: 0; display: grid; }
.fakty__polozka { margin: 0; display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.1rem 0; }
.fakty__polozka + .fakty__polozka { border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 1000px) {
  .fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fakty__polozka { padding: 1.35rem 1.5rem; }
  .fakty__polozka:first-child { padding-left: 0; }
  .fakty__polozka + .fakty__polozka { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); }
}
.fakty__ikona { --s: 2.6rem; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: rgba(240, 182, 75, 0.16); color: var(--gold); }
.fakty__titul { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: #fff; }
.fakty__text { display: block; margin-top: 0.2rem; font-size: var(--fs-small); line-height: 1.45; color: var(--night-ink-soft); }

/* ------------------------------------------------------------------ *
 * 8. Invoice example, check list, text column beside a figure
 * ------------------------------------------------------------------ */
.faktura { margin: 0; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.faktura__hlava { display: flex; align-items: center; gap: 0.85rem; }
.faktura__titulok { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; color: var(--ink); }
.faktura__podtitul { font-size: var(--fs-small); color: var(--ink-soft); }
.faktura__stavy { display: grid; gap: var(--space-sm); margin-top: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.faktura__stav { padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); }
.faktura__stav--bez { background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 30%, transparent); }
.faktura__stav--s { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.faktura__stitok { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); }
.faktura__stav--bez .faktura__stitok { color: var(--signal-text); }
.faktura__stav--s .faktura__stitok { color: var(--green-text); }
.faktura__pas { display: flex; gap: 2px; height: 0.55rem; margin-top: 0.8rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-sunk); }
.faktura__pas-suma { background: var(--navy-600); }
.faktura__pas-zrazka { background: repeating-linear-gradient(-45deg, var(--signal) 0 4px, color-mix(in srgb, var(--signal) 35%, transparent) 4px 8px); }
.faktura__riadky { margin: 0.8rem 0 0; }
.faktura__riadok { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-size: var(--fs-small); }
.faktura__riadok dt { color: var(--ink-soft); }
.faktura__riadok dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.faktura__riadok--spolu { margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--border-strong); }
.faktura__riadok--spolu dt, .faktura__riadok--spolu dd { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); color: var(--ink); }
.faktura__pozn { margin-top: 0.6rem; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.faktura__fakty { list-style: none; margin: var(--space-md) 0 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--border); }
.faktura__fakty li { margin: 0.45rem 0 0; display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-small); color: var(--ink-soft); }
.faktura__fakty svg { flex: none; margin-top: 0.2rem; color: var(--green-text); }

/* ------------------------------------------------------------------ *
 * 9. Service rows (home, hub, related services) — icon tile, name, price
 * ------------------------------------------------------------------ */

.index-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.section-head + .index-list { margin-top: 0; }
/* a single-column list is not stretched across 1200 px: the price stays near the name */
.container > .index-list, .container > .index-note, .section-head--row:has(+ .index-list) { max-width: var(--row-max); }
.index-list > li { margin: 0; }
.index-row {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto 1.25rem;
  grid-template-areas: "ikona name price arrow" "ikona desc price arrow";
  column-gap: 1.1rem; row-gap: 0.3rem; align-items: baseline;
  padding: 1.05rem 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none;
}
.index-row--nodesc { grid-template-areas: "ikona name price arrow"; align-items: center; padding-block: 0.85rem; }
.index-list > li:last-child .index-row { border-bottom: 1px solid var(--border); }
/* hover: a soft pill behind the row and a gold rule at its left edge */
.index-row::before { content: ""; position: absolute; inset: 4px -0.9rem; z-index: -1; border-radius: 12px; background: var(--row-hover); opacity: 0; transition: opacity 0.2s var(--ease); }
.index-row:hover::before { opacity: 1; }
.index-row::after { content: ""; position: absolute; left: -0.9rem; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 0.2s var(--ease); }
.index-row:hover::after { transform: scaleY(1); }
.index-row__ikona { grid-area: ikona; align-self: start; display: grid; place-items: center; --s: 2.6rem; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: var(--navy-100); color: var(--navy-700); transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--ease); }
.index-row--nodesc .index-row__ikona { align-self: center; }
.index-row:hover .index-row__ikona { background: var(--gold); color: #0c1b2c; transform: translateX(3px); }
.index-row__name { grid-area: name; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); transition: color 0.15s; }
.index-row:hover .index-row__name { color: var(--navy-600); }
.index-row__desc { grid-area: desc; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.index-row__price { grid-area: price; align-self: center; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.index-row__arrow { grid-area: arrow; align-self: center; justify-self: end; color: var(--ink-faint); transition: transform 0.2s var(--ease), color 0.2s; }
.index-row:hover .index-row__arrow { transform: translateX(4px); color: var(--navy-600); }
.index-note { margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--ink-faint); }
@media (max-width: 680px) {
  .index-row { grid-template-columns: 2.3rem minmax(0, 1fr) auto; grid-template-areas: "ikona name price" "ikona desc desc"; column-gap: 0.8rem; padding-block: 0.95rem; }
  .index-row--nodesc { grid-template-areas: "ikona name price"; }
  .index-row__ikona { --s: 2.3rem; }
  .index-row__ikona svg { width: 18px; height: 18px; }

  .index-row__price { align-self: baseline; font-size: var(--fs-small); }
  .index-row--nodesc .index-row__price { align-self: center; }

  .index-row__arrow { display: none; }
  .index-row::before { inset: 3px -0.6rem; }
  .index-row::after { left: -0.6rem; }
}

/* ------------------------------------------------------------------ *
 * 10. Commitments, misconceptions
 * ------------------------------------------------------------------ */

.omyly { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .omyly { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.omyl { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.omyl:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.omyl__hore { padding: var(--card-pad); background: var(--signal-soft); border-bottom: 1px dashed color-mix(in srgb, var(--signal) 35%, transparent); }
.omyl__dole { flex: 1; padding: var(--card-pad); }
.omyl__stitok { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.omyl__stitok--omyl { color: var(--signal-text); }
.omyl__stitok--pravda { color: var(--green-text); }
.omyl__citat { margin-top: 0.6rem; font-size: var(--fs-h3); line-height: 1.25; }
@media (min-width: 900px) { .omyl__citat { min-height: 2.5em; } }
.omyl__text { margin-top: 0.5rem; color: var(--ink-soft); font-size: var(--fs-small); }
/* Tablets: claim and reality side by side inside one card, one card per row. */
@media (min-width: 600px) and (max-width: 899px) {
  .omyl { flex-direction: row; }
  .omyl__hore { flex: 0 0 42%; border-bottom: 0; border-right: 1px dashed color-mix(in srgb, var(--signal) 35%, transparent); }
}

/* ------------------------------------------------------------------ *
 * 11. Service (product) page top: illustration, name, price card, documents.
 *     The owner wants the price right at the top (2026-09-13).
 * ------------------------------------------------------------------ */
/* no overflow: hidden here — it would turn the section into the scroll container of the sticky price card */
.section--produkt { position: relative; isolation: isolate; padding-top: clamp(2.5rem, 5vw, 3.75rem); --grid-c: var(--grid-ink); --grid-mask: radial-gradient(60% 85% at 80% 25%, #000 0%, transparent 70%); }
.section--produkt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask);
}
.produkt { display: grid; gap: var(--space-lg); grid-template-areas: "hlava" "cena" "prehlad"; } /* the columns, gaps and the sticky card: P:service region */
.produkt__hlava { grid-area: hlava; }
.produkt__hlava h1 { font-size: var(--fs-h1); /* service names stay <= 3.5rem: 'Lohnsteuer-Anmeldung' is one line */ }
.produkt__hlava .lead { margin-top: var(--space-sm); max-width: 40rem; }
.h1-doplnok { display: block; color: var(--navy-600); font-weight: 500; }
.produkt__cena { grid-area: cena; }
.produkt__prehlad { grid-area: prehlad; }
/* The product stage: a dark picture of what the client ends up holding
   (scenes.py), facts floating over it as glass chips, the deliverable as its
   caption, and on the light part of the same card when the service is needed
   and what we need from the client. */
.scena { container: scena / inline-size; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--scena-border); box-shadow: var(--shadow-md); }
/* picture and caption share one dark ground */
.scena__plocha {
  position: relative; isolation: isolate; overflow: hidden; color: var(--night-ink);
  background:
    radial-gradient(55% 60% at 84% 6%, rgba(240, 182, 75, 0.18), transparent 62%),
    radial-gradient(70% 70% at 6% 88%, rgba(58, 116, 176, 0.42), transparent 58%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
}
.scena__plocha::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 38%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 70% at 50% 38%, #000 0%, transparent 78%);
}
.scena__obraz { position: relative; aspect-ratio: 560 / 300; padding: clamp(1rem, 3vw, 1.75rem) clamp(0.5rem, 2vw, 1.25rem) 0; }
.scena__obraz > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scena__stitky { list-style: none; margin: 0; padding: 0; }
/* smoked glass: legible over the dark ground and over white paper alike */
.scena__stitok {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.65rem; border-radius: 999px; white-space: nowrap;
  background: rgba(12, 27, 44, 0.32); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.2; color: #fff;
}
.scena__stitok svg { flex: none; color: rgba(255, 255, 255, 0.8); }
.scena__stitok--hlavny svg { color: var(--gold); }
/* slots: each scene picks the ones that keep its drawing clear (scenes.py SLOTS) */
.scena__stitok--tl { left: 4.5%; top: 7%; }
.scena__stitok--tr { right: 4.5%; top: 7%; }
.scena__stitok--lm { left: 4.5%; top: 43%; }
.scena__stitok--rm { right: 4.5%; top: 43%; }
.scena__stitok--bl { left: 4.5%; bottom: 5%; }
.scena__stitok--br { right: 4.5%; bottom: 5%; }
.scena__popis {
  display: flex; flex-direction: column; gap: 0.4rem; margin: 0;
  padding: 0.9rem clamp(1.1rem, 3vw, 1.6rem) 1.35rem;
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-wrap: balance;
}
.scena__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold); }
.scena__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; background: var(--border); }
.scena__stlpec { padding: 1rem clamp(1.1rem, 3vw, 1.6rem) 1.15rem; background: var(--surface); }
.scena__nadpis { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.scena__stlpec p { margin-top: 0.55rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.scena__zoznam { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.scena__zoznam li { position: relative; margin: 0; padding-left: 1.1rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.scena__zoznam li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.5rem; height: 2px; border-radius: 1px; background: var(--navy-600); }
/* the scene's own lettering */
.sc-hlavicka { font-family: var(--font-display); font-size: 7.5px; font-weight: 600; letter-spacing: 0.14em; fill: var(--scena-muted); }
.sc-titul { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; fill: var(--scena-ink); }
.sc-podtitul { font-family: var(--font-body); font-size: 8px; font-weight: 500; fill: var(--scena-muted); }
.sc-pole { font-family: var(--font-body); font-size: 6.8px; font-weight: 500; fill: var(--scena-muted); }
.sc-cislo { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; fill: var(--scena-ink); }
.sc-mini { font-family: var(--font-body); font-size: 6.5px; font-weight: 500; fill: var(--scena-muted); }
.sc-biely { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; fill: var(--night-ink); }
.sc-ring-text { font-family: var(--font-display); font-size: 8px; font-weight: 700; letter-spacing: 0.2em; fill: #0c1b2c; }
.sc-kota-text { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; fill: var(--gold); }
.sc-list, .sc-pecat, .sc-orbit, .sc-ring, .sc-plav { transform-box: fill-box; transform-origin: center; }
.scena-zalozna { display: grid; place-items: center; height: 100%; }
.scena-zalozna svg { width: 40%; height: auto; }
/* a narrow stage (phones, and the 960-1180 px desktop band) sets the chips in a row under the picture */
@container scena (max-width: 580px) {
  .scena__obraz { aspect-ratio: auto; padding: 1.1rem 0.4rem 0; }
  .scena__obraz > svg { height: auto; }
  .scena__stitky { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.5rem 0.6rem 0; }
  .scena__stitok { position: static; font-size: var(--fs-small); padding: 0.32rem 0.75rem 0.32rem 0.55rem; } /* the facts are information: not under 14 px (S8) */
  .scena__popis { padding-top: 1.1rem; }
}

.price-card { position: relative; padding: calc(var(--space-md) + 4px) var(--space-md) var(--space-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
/* the gold bar stays inside the rounded corners instead of tapering around them */
.price-card::before { content: ""; position: absolute; top: 0; left: var(--radius-lg); right: var(--radius-lg); height: 4px; border-radius: 0 0 4px 4px; background: var(--gold); }
@media (min-width: 960px) { .price-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.price-card .eyebrow { color: var(--ink-soft); }
.price-card__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.5em; margin-top: var(--space-sm); font-family: var(--font-display); color: var(--ink); }
.price-card__from { font-size: var(--fs-h3); font-weight: 600; color: var(--gold-text); }
.price-card__value { font-size: clamp(2.6rem, 1.9rem + 2.2vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-card__vat { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.price-card__unit { margin-top: 0.6rem; font-weight: 500; color: var(--ink); }
.price-card__note { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--ink-soft); }
.price-card .btn { margin-top: var(--space-md); }
.price-card__trust { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: var(--fs-small); color: var(--ink-faint); }
.price-card__trust svg { flex: none; color: var(--navy-600); }

/* ------------------------------------------------------------------ *
 * 12. Steps — vertical timeline (service pages), horizontal row
 * ------------------------------------------------------------------ */
.postup-detail { display: grid; gap: var(--space-lg); }
@media (min-width: 960px) {
  .postup-detail { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: start; }
  .postup-detail__bok { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.kroky { list-style: none; margin: 0; padding: 0; }
.krok { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; margin: 0; padding-bottom: var(--space-lg); }
.krok:last-child { padding-bottom: 0; }
.krok::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 3.1rem; bottom: 0.35rem; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--navy-600) 24%, transparent); }
.krok:last-child::before { display: none; }
.krok__znak { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--navy-600) 40%, transparent); background: var(--surface); color: var(--navy-700); font-family: var(--font-display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.krok__obsah { padding-top: 0.5rem; }
.krok__nazov { font-size: var(--fs-h3); line-height: 1.25; }
.krok__text { margin-top: 0.4rem; max-width: 38rem; color: var(--ink-soft); }
@media (max-width: 680px) {
  .krok { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.9rem; padding-bottom: var(--space-md); }
  .krok::before { left: calc(1.125rem - 1px); top: 2.6rem; }
  .krok__znak { width: 2.25rem; height: 2.25rem; font-size: var(--fs-small); }
  .krok__obsah { padding-top: 0.3rem; }
}

/* ------------------------------------------------------------------ *
 * 13. Closing call to action — the top half of the night finale. The footer
 *     (section 18) is the bottom half: same ground, one full-bleed band.
 * ------------------------------------------------------------------ */
.vyzva {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--section-y) var(--section-y-tight);
  background: var(--night); color: var(--night-ink);
  --grid-c: var(--grid-light); --grid-mask: radial-gradient(60% 125% at 100% 0%, #000 0%, transparent 70%);
}
/* the glows sit on the top edge only, so the band melts into the footer without a seam */
.vyzva::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 95% at 0% 0%, rgba(58, 116, 176, 0.26), transparent 62%), radial-gradient(45% 85% at 100% 0%, rgba(33, 85, 130, 0.55), transparent 62%); background-size: 150% 150%; background-position: 0 0, 100% 0; }
.vyzva::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask);
}
.vyzva__rama { display: grid; gap: var(--space-xl); }
/* from 1140 px the call to action sits on the footer's column lines (see F:finale): text over columns 1-2, contact over 3-4 */
.vyzva__kontakt { max-width: 34rem; }
@media (min-width: 1140px) { .vyzva__rama { grid-template-columns: var(--fin-cols); column-gap: var(--fin-gap); align-items: start; } .vyzva__kontakt { max-width: none; } }
.vyzva__nadpis { max-width: 26ch; font-size: var(--fs-h2); color: #fff; }
.vyzva__text { margin-top: var(--space-sm); max-width: 36rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--night-ink-soft); }
.vyzva__hlavna .hero__actions { margin-top: var(--space-lg); }
.vyzva__note { margin-top: var(--space-sm); font-size: var(--fs-small); line-height: 1.6; color: var(--night-ink-soft); }
@media (max-width: 700px) { .vyzva__hlavna .btn { width: 100%; } }
.kontakt-riadky { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.kontakt-riadky li { margin: 0; display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0; border-bottom: 1px dashed var(--border-strong); }
.kontakt-riadky li:last-child { border-bottom: 0; }
.kontakt-riadky__popis { display: block; font-size: var(--fs-small); color: var(--ink-faint); }
.kontakt-riadky a { display: inline-block; padding-block: 0.45rem; margin-block: -0.45rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.kontakt-riadky a:hover { color: var(--link); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 14. Chips (the 404's service chips). The hub's situation router lives in the P:hub region at the end of this file.
 * ------------------------------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.45rem 1rem 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-soft); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--navy-600); text-decoration: none; transition: border-color 0.15s, background 0.15s, transform 0.2s var(--ease); }
.chip svg { flex: none; color: var(--navy-700); }
.chip:hover { border-color: var(--navy-600); background: var(--surface); transform: translateY(-2px); }

/* 15. About: replaced by the P:onas region at the end of this file (task 87). */

/* ------------------------------------------------------------------ *
 * 16. Prose, callout (the FAQ accordion lives in the P:faq region)
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 18. Footer — the bottom half of the night finale: brand, services in a
 *     2 x 5 grid under the two category names, company, contact, then the
 *     operator and the legal links drawn as a title block (F:finale region)
 * ------------------------------------------------------------------ */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-ink-soft); padding-block: 0 2rem; --grid-c: var(--grid-light); --grid-mask: radial-gradient(60% 110% at 100% 100%, #000 0%, transparent 70%); }
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask);
}
.site-footer a { color: var(--night-ink-soft); text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); }
/* the wordmark stays white: .site-footer a (0,1,1) used to out-rank .brand--footer */
.site-footer a.brand--footer { min-height: 2.75rem; color: #fff; text-decoration: none; }
/* after the closing call to action the hairline separates the two halves; on its own the footer starts with padding */
.footer-grid { display: grid; gap: var(--space-lg) var(--fin-gap); align-items: start; grid-template-columns: var(--fin-cols); padding-top: clamp(2rem, 1.4rem + 1.5vw, 2.5rem); border-top: 1px solid var(--night-border); }
.site-footer--solo { padding-top: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); }
.site-footer--solo .footer-grid { padding-top: 0; border-top: 0; }
.footer-brand__tagline { max-width: 22rem; font-size: 0.95rem; line-height: 1.55; }
.footer-col h2 { margin-bottom: 0.25rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-ink); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0; }
/* every link row is a 44 px target (padding, not bigger type); the grid below keeps the footer part near 430 px at 1440 */
.footer-col li > a { display: flex; align-items: center; min-height: 2.75rem; font-size: 0.95rem; line-height: 1.4; }

/* ------------------------------------------------------------------ *
 * 19. Utilities, dark-mode surfaces, 404, print
 * ------------------------------------------------------------------ */
.notfound__block + .notfound__block { margin-top: var(--space-xl); }

/* In dark mode the night ground is close to the page (or darker than it), so the finale gets a hairline on top. */
@media (prefers-color-scheme: dark) {
  .vyzva, .site-footer--solo { border-top: 1px solid var(--night-border); }
  .page-hero__bg { opacity: 0.8; }
  /* night is only 1.19:1 against the dark page: a hairline marks where it ends */
  .page-hero { border-bottom: 1px solid var(--night-border); }
  .band-night { border-block: 1px solid var(--night-border); }
  /* S7: the soft sections are only a few points lighter than the page: a hairline marks both of their edges */
  .section-soft { border-block: 1px solid var(--border); }
  /* where a night surface (its own hairline) meets a soft section the two lines would double up */
  .page-hero + .section-soft, .band-night + .section-soft { border-top: 0; }
  .section-soft:has(+ .vyzva), .section-soft:has(+ .band-night), .section-soft:has(+ .site-footer) { border-bottom: 0; }
}

/* Tap targets >= 44 px for links in lists and chips (padding, not bigger type); the footer rows are set in section 18 */
.suvisiace a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Page transitions: a short cross-fade between pages (browsers without support just navigate) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); }
}

@media print {
  .page-hero::before, .page-hero::after, .band-night::before { display: none; }
  .site-header, .site-footer, .vyzva, .page-hero__bg, .fakty-pas, .page-hero__graphic, .mobile-bar, .price-strip { display: none; }
  * { color: #000 !important; background: #fff !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ *
 * 20. Motion. Only with JS (html.js, set in <head>) and only for people
 *     who have not asked for reduced motion; otherwise everything is
 *     simply visible and still.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* reveal on scroll: script.js adds .is-in (with --d, the stagger inside one
     batch) and, once the transition is over, .is-done — from then on the
     element's own transitions (card hover lifts) apply again */
  html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
  html.js [data-reveal="right"]:not(.is-in) { transform: translateX(28px); }
  html.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.965); }
  html.js [data-reveal]:not(.is-done) { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }

  /* hero entrance: text rises line by line, facts follow (the blended photo
     itself is never animated — a composited blend layer can drop out) */
  html.js .page-hero__inner > * { animation: rise 0.8s var(--ease) both; }
  html.js .page-hero__inner > :nth-child(2) { animation-delay: 0.08s; }
  html.js .page-hero__inner > :nth-child(3) { animation-delay: 0.16s; }
  html.js .page-hero__inner > :nth-child(4) { animation-delay: 0.24s; }
  html.js .page-hero__inner > :nth-child(5) { animation-delay: 0.32s; }
  html.js .fakty-pas { animation: fadeIn 0.8s var(--ease) 0.45s both; }
  html.js .fakty__polozka { animation: rise 0.7s var(--ease) 0.45s both; }
  html.js .fakty__polozka:nth-child(2) { animation-delay: 0.55s; }
  html.js .fakty__polozka:nth-child(3) { animation-delay: 0.65s; }

  /* the graphic beside a page headline (documents, 404) rises in; script.js pauses it while it is off screen */
  html.js .page-hero__graphic { animation: graphicIn 1s var(--ease) 0.3s both; }

  /* product stage: plays once the card is revealed and has faded in — paper
     rises and floats a little, the seal stamps, the chips arrive */
  html.js .scena.is-in .sc-list { animation: rise 0.7s var(--ease) 0.25s both, floatY 8s ease-in-out 1.2s 3 alternate; }
  html.js .scena.is-in .sc-plav { animation: floatY 7s ease-in-out 1.4s 3 alternate; }
  html.js .scena.is-in .sc-pecat { animation: stamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s both; }
  html.js .scena.is-in .sc-ring { animation: spin 60s ease-out 1; }
  html.js .scena.is-in .scena__stitok { animation: chipIn 0.5s var(--ease) 1s both; }
  html.js .scena.is-in .scena__stitok:nth-child(2) { animation-delay: 1.1s; }
  html.js .scena.is-in .scena__stitok:nth-child(3) { animation-delay: 1.2s; }
  @container scena (max-width: 580px) {
    html.js .scena.is-in .sc-list { animation: rise 0.7s var(--ease) 0.25s both; }
    html.js .scena.is-in .sc-plav { animation: none; }
  }
  .scena.is-paused .sc-list, .scena.is-paused .sc-plav, .scena.is-paused .sc-ring { animation-play-state: paused; }

  /* spot illustrations draw themselves in */
  html.js .ill--draw .ill-blob { transform-box: fill-box; transform-origin: center; animation: blobIn 0.9s var(--ease) both; }
  html.js .ill--draw .ill-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease) both; animation-delay: calc(0.25s + var(--i, 0) * 80ms); }
  html.js .ill--draw .ill-fill { animation: fadeIn 0.5s var(--ease) both; animation-delay: calc(0.6s + var(--i, 0) * 80ms); }

  /* invoice: the bars draw, then the totals count up (script.js) */
  html.js .faktura .faktura__pas-suma, html.js .faktura .faktura__pas-zrazka { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease); }
  html.js .faktura.is-in .faktura__pas-suma { transform: none; transition-delay: 0.45s; }
  html.js .faktura.is-in .faktura__pas-zrazka { transform: none; transition-delay: 1.25s; }

  /* timelines draw as the steps come into view */
  html.js .krok::before { transform: scaleY(0); transform-origin: top; transition: transform 0.8s var(--ease) 0.25s; }
  html.js .krok.is-in::before { transform: none; }
  .krok__znak { transition: border-color 0.5s var(--ease) 0.15s, background 0.5s var(--ease) 0.15s; }

  /* ambient glow on the closing panel: drifts for a minute, then rests */
  .vyzva::before { animation: glowDrift 18s ease-in-out 4 alternate; }
  .vyzva.is-paused::before { animation-play-state: paused; }
}
/* phones: "from the right" blocks rise instead, so nothing pokes past the viewport before it is revealed */
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  html.js [data-reveal="right"]:not(.is-in) { transform: translateY(18px); }
}
/* the gold step badge is a state, not motion: shown to everyone once the step is in view */
.krok.is-in .krok__znak { border-color: var(--gold); background: var(--gold-soft); }
.ill-blob { transform-box: fill-box; transform-origin: center; transform: rotate(var(--rot, -8deg)); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes graphicIn { from { opacity: 0; transform: translate(28px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes floatY { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.7) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blobIn { from { opacity: 0; transform: rotate(var(--rot, -8deg)) scale(0.6); } to { opacity: 1; transform: rotate(var(--rot, -8deg)) scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glowDrift { to { background-position: 14% 10%, 86% 0%; } }

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

/* ------------------------------------------------------------------ *
 * 21. Reader review (17. 09. 2026): telefón v hlavičke, jednoriadkové
 *     vysvetlenia v zozname služieb, doplnky k cene, mobilná cenová lišta
 * ------------------------------------------------------------------ */
.call-btn { display: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--gold); color: #0c1b2c; transition: background 0.15s; }
.call-btn:hover { background: var(--gold-hover); }
@media (max-width: 1024px) { .call-btn { display: inline-grid; } }

.hero__note { margin-top: var(--space-sm); font-size: var(--fs-small); line-height: 1.6; color: var(--night-ink-soft); }

/* riadok služby bez popisu: názov + jednoriadkové vysvetlenie */
.index-row__sub { grid-area: sub; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-faint); }
.index-row--nodesc { grid-template-areas: "ikona name price arrow" "ikona sub price arrow"; row-gap: 0.12rem; padding-block: 0.95rem; }
@media (max-width: 680px) {
  .index-row--nodesc { grid-template-areas: "ikona name price" "ikona sub sub"; }

}

/* the price card's notes, link and consult line (service pages only): see the P:service region */

/* phone dock (<= 959 px), every page: price · "Získať cenu" · call on service pages, [Zavolať] + [Nezáväzný dopyt]
   elsewhere. A floating night pill; script.js adds .is-on after about one screen of scrolling and takes it away
   over the finale, while the menu is open and while a form field has focus. Without JS it never shows. */
.mobile-bar {
  --focus: var(--gold);
  position: fixed; z-index: 80;
  left: max(0.6rem, env(safe-area-inset-left, 0px)); right: max(0.6rem, env(safe-area-inset-right, 0px));
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  max-width: 34rem; margin-inline: auto;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-pill);
  background: var(--night); color: var(--night-ink);
  box-shadow: 0 18px 40px -14px rgba(7, 17, 28, 0.65);
  transform: translateY(calc(100% + 1.5rem)); opacity: 0; visibility: hidden;
  transition: transform 0.3s var(--ease), opacity 0.2s, visibility 0s linear 0.3s;
}
.mobile-bar.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-bar .btn { flex: 1 1 auto; min-height: 2.75rem; padding: 0.5em 1.1em; font-size: 1rem; }
.mobile-bar--service .btn { flex: none; }
.mobile-bar__price { flex: 1; min-width: 0; padding-left: 0.85rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; white-space: nowrap; color: #fff; }
.mobile-bar__price small { display: block; margin-top: 0.1rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-ink-soft); }
.mobile-bar__call { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-pill); color: #fff; transition: background 0.2s var(--ease); }
.mobile-bar__call:hover { background: rgba(255, 255, 255, 0.1); }
@media (min-width: 960px) { .mobile-bar { display: none !important; } }

/* 22. Documents (hub, document pages, forms, 404): replaced in the P:legal region at the end of this file (task 87). */

/* ==================================================================== *
 * 23. Redesign 2026-10 (task 87, DESIGN_PLAN.md). One region per package:
 *     write only inside your own region so parallel work merges cleanly.
 * ==================================================================== */
/* === F:svc-card === */
/* svc-card: a service as a card (render.py svc_card / svc_cards, scenes.scene_thumb). A night media
   area with the drawn scene and one glass fact chip, then the light part: name, short text, the price
   in the price card's voice ("od 109 €" + "bez DPH" + unit). The whole card is one link.
   Variants: grid (default, 3 + 2 rows), wide (thumbnail left, text right), row (compact row; phones
   turn every variant into it). The DOM order is body, media (so the link reads name, text, price,
   fact); the grid areas put the media on top. */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.svc-grid__item { grid-column: span 2; display: flex; min-width: 0; margin: 0; }
.svc-grid__item--half { grid-column: span 3; }

.svc-card {
  --svc-glow-gold: rgba(240, 182, 75, 0.2);
  --svc-glow-blue: rgba(58, 116, 176, 0.42);
  --svc-grid-line: var(--grid-light);
  --svc-edge: rgba(255, 255, 255, 0.07);
  position: relative; isolation: isolate; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media" "body";
  color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
/* the gold bar on the top edge: hover and keyboard focus */
.svc-card::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.svc-card:hover, .svc-card:focus-visible { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.svc-card:hover::after, .svc-card:focus-visible::after { transform: none; }
.svc-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-lg); }

/* the night media area: the stage's ground (glows, blueprint grid) around the scene thumbnail */
.svc-card__media {
  grid-area: media; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; color: var(--night-ink);
  background:
    radial-gradient(55% 60% at 84% 6%, var(--svc-glow-gold), transparent 62%),
    radial-gradient(70% 70% at 6% 88%, var(--svc-glow-blue), transparent 58%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
  box-shadow: inset 0 0 0 1px var(--svc-edge);
}
.svc-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--svc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--svc-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 45%, #000 0%, transparent 85%); mask-image: radial-gradient(80% 75% at 50% 45%, #000 0%, transparent 85%);
}
/* the picture: fitted to the full width and standing on the bottom edge (the empty strip above it is the chip's room).
   The crop modes (half, wide, the lone last card on tablets) fit the HEIGHT instead and centre the picture; there the scene
   box starts --svc-strip below the top edge (1.9 rem = the chip's lower edge, 0.7 rem + 1.75 rem, less the 20 units
   of empty margin every drawing has) so the chip never sits on the paper. Row thumbnails have no chip: strip 0. */
.svc-card__scene { position: absolute; inset: var(--svc-strip, 0px) 0 0 0; overflow: hidden; }
.scena-svg--mini { position: absolute; left: 0; bottom: 0; display: block; width: 100%; max-width: none; height: auto; overflow: visible; }
.svc-card--half, .svc-card--wide { --svc-strip: 1.9rem; }
.svc-card--half .scena-svg--mini, .svc-card--wide .scena-svg--mini, .svc-card--row .scena-svg--mini { left: 50%; top: 0; bottom: auto; width: auto; height: 100%; aspect-ratio: 560 / 300; translate: -50% 0; }
/* smoked glass, as on the product stage, in a smaller size */
.svc-card__chip {
  position: absolute; z-index: 2; left: 0.7rem; top: 0.7rem; max-width: calc(100% - 1.4rem);
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem; border-radius: var(--radius-pill);
  background: rgba(12, 27, 44, 0.42); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.25; color: #fff; white-space: nowrap;
}
.svc-card__chip svg { flex: none; color: var(--gold); }
.svc-card__chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.svc-card--half .svc-card__media { aspect-ratio: 2.2 / 1; }

/* the light part */
.svc-card__body { grid-area: body; display: flex; flex-direction: column; min-width: 0; padding: 1.15rem var(--card-pad) var(--card-pad); }
.svc-card__name {
  /* one plain title, sized so that the longest name ("Bauabzugsteuer — vrátenie", 306 px at 24 px) fits a three-up card from
     1100 px up (20 px at 1024, 24 px at 1440; the 3-up card body is 268 px wide at 1100, 326 at 1280); it wraps by itself only
     when a card is narrower than its name */
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.5vw + 0.25rem, 1.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink); hyphens: manual; text-wrap: pretty;
}
@media (min-width: 1700px) { .svc-card__name { font-size: var(--fs-h3); } } /* the cards are wider there */
.svc-card__text { margin: 0.4rem 0 1.1rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.svc-card__foot { margin-top: auto; padding-top: 0.95rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--border); }
.svc-card__price { margin: 0; display: grid; gap: 0.3rem; min-width: 0; }
.svc-card__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15em 0.4em; font-family: var(--font-display); color: var(--ink); }
.svc-card__from { font-size: 0.95rem; font-weight: 600; color: var(--gold-text); }
.svc-card__value { font-size: var(--step-2); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.svc-card__vat { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.svc-card__unit { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); }
/* cards side by side keep two lines for the unit, so the rule above the price and the price itself line up across the row */
@media (min-width: 681px) { .svc-card--grid:not(.svc-card--half) .svc-card__unit { min-height: 2.8em; } }
.svc-card__go { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); }
.svc-card:hover .svc-card__go, .svc-card:focus-visible .svc-card__go { background: var(--gold); color: #0c1b2c; }
.svc-card:hover .svc-card__name, .svc-card:focus-visible .svc-card__name { color: var(--navy-600); }

/* wide: one card per row; the thumbnail on the left fills the card's height (the picture is cropped to the middle, never letterboxed), text right */
.svc-grid--wide { grid-template-columns: minmax(0, 1fr); }
.svc-grid--wide .svc-grid__item { grid-column: auto; }
.svc-card--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; grid-template-areas: "media body"; }
.svc-card--wide .svc-card__media { aspect-ratio: auto; min-height: 13rem; }
.svc-card--wide .svc-card__body { justify-content: center; }
.svc-card--wide .svc-card__text { font-size: var(--step--1); }
.svc-card--wide .svc-card__foot { margin-top: 0; }

/* tablets: two per row; a lone last card takes the full width and turns into the wide arrangement */
@media (min-width: 681px) and (max-width: 1023px) {
  .svc-grid--grid .svc-grid__item, .svc-grid--grid .svc-grid__item--half { grid-column: span 3; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .svc-grid--grid .svc-card--half { --svc-strip: 0px; }
  .svc-grid--grid .svc-card--half .svc-card__unit { min-height: 2.8em; }
  .svc-grid--grid .svc-card--half .svc-card__media { aspect-ratio: 16 / 10; }
  .svc-grid--grid .svc-card--half .scena-svg--mini { left: 0; top: auto; bottom: 0; width: 100%; height: auto; translate: none; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) > .svc-card { --svc-strip: 1.9rem; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) .scena-svg--mini { left: 50%; top: 0; bottom: auto; width: auto; height: 100%; aspect-ratio: 560 / 300; translate: -50% 0; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) .svc-card__unit { min-height: 0; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) > .svc-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; grid-template-areas: "media body"; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) .svc-card__media { aspect-ratio: auto; min-height: 13rem; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) .svc-card__body { justify-content: center; }
  .svc-grid--grid .svc-grid__item:last-child:nth-child(odd) .svc-card__foot { margin-top: 0; }
}

/* row: the compact card — a 88 px thumbnail tile, name, price, unit. Below 681 px every variant is this
   (keep the two blocks in sync). The chip and the short text stay out: a phone reader scans names and prices. */
.svc-grid--row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.svc-grid--row .svc-grid__item { grid-column: auto; }
.svc-card--row {
  grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "media body";
  align-items: center; column-gap: 0.9rem; min-height: 6.5rem; padding: 0.6rem 0.75rem 0.6rem 0.6rem; border-radius: var(--radius);
}
.svc-card--row:focus-visible { border-radius: var(--radius); }
.svc-card--row .svc-card__media { aspect-ratio: 1; width: 5.5rem; border-radius: 10px; }
.svc-card--row .svc-card__chip, .svc-card--row .svc-card__text { display: none; }
.svc-card--row .svc-card__body { padding: 0; justify-content: center; gap: 0.3rem; }
.svc-card--row .svc-card__name { font-size: 1.05rem; line-height: 1.2; }
.svc-card--row .svc-card__foot { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
.svc-card--row .svc-card__value { font-size: 1.3rem; }
.svc-card--row .svc-card__unit { font-size: var(--fs-small); line-height: 1.35; } /* >= 14 px: the price's unit is information (FX-shared S2) */
.svc-card--row .svc-card__go { width: 2rem; height: 2rem; }
.svc-card--row .svc-card__go svg { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .svc-grid__item, .svc-grid__item--half { grid-column: auto; }
  .svc-card {
    grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "media body";
    align-items: center; column-gap: 0.9rem; min-height: 6.5rem; padding: 0.6rem 0.75rem 0.6rem 0.6rem; border-radius: var(--radius);
  }
  .svc-card, .svc-card--half, .svc-card--wide { --svc-strip: 0px; }
  .svc-card:focus-visible { border-radius: var(--radius); }
  .svc-card__media, .svc-card--half .svc-card__media, .svc-card--wide .svc-card__media { aspect-ratio: 1; width: 5.5rem; min-height: 0; border-radius: 10px; }
  .svc-card__chip, .svc-card__text { display: none; }
  .scena-svg--mini { left: 50%; top: 0; bottom: auto; width: auto; height: 100%; aspect-ratio: 560 / 300; translate: -50% 0; }
  .svc-card__body, .svc-card--wide .svc-card__body { padding: 0; justify-content: center; gap: 0.3rem; }
  .svc-card__name { font-size: 1.05rem; line-height: 1.2; }
  .svc-card__foot, .svc-card--wide .svc-card__foot { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
  .svc-card__value { font-size: 1.3rem; }
  .svc-card__unit { font-size: var(--fs-small); line-height: 1.35; }
  .svc-card__go { width: 2rem; height: 2rem; }
  .svc-card__go svg { width: 16px; height: 16px; }
}

/* hover and focus motion: only for pointers that hover and people who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .svc-card { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s; }
  .svc-card::after { transition: transform 0.3s var(--ease); }
  .svc-card__go { transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--ease); }
  .svc-card__name { transition: color 0.15s; }
  .scena-svg--mini { transition: transform 0.5s var(--ease); }
  @media (hover: hover) {
    .svc-card:hover { transform: translateY(-4px); }
    .svc-card:hover .svc-card__go { transform: translateX(2px); }
    .svc-card:hover .scena-svg--mini { transform: scale(1.04); }
  }
}

/* dark mode: the night media area is darker than the card and the page, so it gets an edge and a brighter grid */
@media (prefers-color-scheme: dark) {
  .svc-card { --svc-grid-line: rgba(143, 184, 227, 0.12); --svc-edge: rgba(255, 255, 255, 0.12); border-color: var(--border-strong); }
}

/* the mega menu's preview (the F2 hook, filled by script.js from js/mega-sceny.json): the stage ground of a card's media
   area behind the picture; while the hook is empty (no JS, fetch pending) F2's framed grid shows instead */
.mega__nahlad-obraz:not(:empty) {
  background:
    radial-gradient(55% 60% at 84% 6%, rgba(240, 182, 75, 0.2), transparent 62%),
    radial-gradient(70% 70% at 6% 88%, rgba(58, 116, 176, 0.42), transparent 58%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
}

/* the demo page (web/_svc-demo.html) */
.svc-demo__lead { max-width: var(--measure); margin-top: var(--space-sm); }
.svc-demo__phone { max-width: 24.5rem; }
/* === /F:svc-card === */

/* === F:header === */
/* F2 · header, mega menu, phone navigation (task 87). The base rules are in section 6 (header, nav, mega rows,
   off-canvas sheet), the call button in section 21; this region holds what is new: bar height, skip link, scrim,
   the mega preview column, the pinned sheet bar and the no-JS header. */
:root { --header-h: 4.25rem; } /* 68 px; sticky price card, anchors and the desktop price strip read this */

/* the skip link must not vanish on the night bar */
.skip-link { --focus: #fff; background: var(--gold); color: #0c1b2c; font-family: var(--font-display); font-weight: 600; box-shadow: var(--shadow-md); }

/* scrim: dims the page under the open mega menu (a click on it closes the menu, see script.js) */
.mega-scrim { position: fixed; inset: calc(var(--header-h) + 1px) 0 0 0; z-index: 0; background: rgba(7, 17, 28, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.16s var(--ease), visibility 0s linear 0.16s; }
.site-header.is-mega .mega-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (max-width: 1024px) { .mega-scrim { display: none; } }

/* the night part of the mega panel: from 1025 a band under the columns with the finder prompt, from 1200 a column
   with the preview of the hovered / focused service (or the finder prompt while no row is active); both carry the grid */
.mega__nahlad { display: none; }
@media (min-width: 1025px) {
  .mega__nahlad {
    grid-area: n; position: relative; isolation: isolate; display: flex; align-items: center; min-height: 0; padding: 0.75rem 1.75rem;
    background: var(--night); color: var(--night-ink); border-top: 1px solid var(--night-border); --focus: var(--gold);
  }
  .mega__nahlad::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(95% 140% at 100% 0%, #000 10%, transparent 80%); mask-image: radial-gradient(95% 140% at 100% 0%, #000 10%, transparent 80%);
  }
  .mega__prevs { display: none; }
  /* the finder prompt is one real link */
  .mega__start { display: flex; align-items: center; gap: 0.9rem; min-height: 2.75rem; color: var(--night-ink-soft); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
  .mega__start-ikona { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: rgba(240, 182, 75, 0.16); color: var(--gold); }
  .mega__start-q { margin-right: 0.35rem; font-family: var(--font-display); font-weight: 600; color: #fff; }
  .mega__start-a { color: var(--gold); font-weight: 600; }
  .mega__start-sipka { display: inline-block; vertical-align: -3px; margin-left: 0.15rem; transition: transform 0.2s var(--ease); }
  .mega__start:hover .mega__start-sipka { transform: translateX(4px); }
  .mega__start:hover .mega__start-a { text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 1200px) {
  .mega__nahlad { flex-direction: column; align-items: stretch; padding: 1.25rem; border-top: 0; border-left: 1px solid var(--night-border); }
  .mega__nahlad::before { -webkit-mask-image: radial-gradient(95% 80% at 100% 0%, #000 10%, transparent 78%); mask-image: radial-gradient(95% 80% at 100% 0%, #000 10%, transparent 78%); }
  .mega__prevs { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .mega__prev { display: none; flex: 1 1 auto; flex-direction: column; gap: 0.4rem; color: inherit; text-decoration: none; }
  .mega__prev.is-on { display: flex; animation: fadeIn 0.18s var(--ease) both; }

  /* F4 hook: the scene thumbnail (scenes.scene_thumb) is placed inside .mega__nahlad-obraz[data-scena="<slug>"];
     until then the empty hook shows a framed blueprint field with a gold dimension line */
  .mega__nahlad-obraz { position: relative; aspect-ratio: 16 / 9; margin-bottom: 0.7rem; border: 1px solid var(--night-border); border-radius: 12px; overflow: hidden; background: var(--night-soft); }
  .mega__nahlad-obraz > svg { display: block; width: 100%; height: 100%; }
  .mega__nahlad-obraz:empty {
    background-color: var(--night-soft);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1.5 1v8M32.5 1v8M1.5 5h31' fill='none' stroke='%23f0b64b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
      linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
    background-repeat: no-repeat, repeat, repeat;
    background-position: center, 0 0, 0 0;
    background-size: 34px 10px, 20px 20px, 20px 20px;
  }
  .mega__prev-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
  .mega__prev-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 0.875rem; line-height: 1.5; color: var(--night-ink-soft); }
  .mega__prev-price { margin-top: auto; padding-top: 0.75rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
  .mega__prev-price small { margin-left: 0.3rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--night-ink-soft); }
  .mega__prev-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: #fff; }
  .mega__prev:hover .mega__prev-link { text-decoration: underline; text-underline-offset: 4px; }

  /* the finder prompt is a small row under the preview (S6: the preview shows the first service until a row is hovered or focused) */
  .mega__start { font-size: 0.8125rem; }
  .mega__start-ikona { display: none; }
  .mega__nahlad[data-stav="sluzba"] .mega__start { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--night-border); }
  .mega__nahlad[data-stav="sluzba"] .mega__start-q { margin-right: 0; font-family: var(--font-body); font-weight: 400; color: var(--night-ink-soft); }
  .mega__nahlad[data-stav="sluzba"] .mega__start-a { display: block; color: #fff; }
  .mega__nahlad[data-stav="sluzba"] .mega__start-sipka { color: var(--gold); }
}

/* off-canvas sheet (≤ 1024): the pinned bar with the two actions (the list above it scrolls) and a faint grid on the sheet */
.nav-dock { display: none; }
@media (max-width: 1024px) {
  html.js .primary-nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(90% 55% at 100% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 55% at 100% 0%, #000 0%, transparent 75%);
  }
  html.js .primary-nav { isolation: isolate; }
  html.js .nav-dock {
    flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
    padding: 0.9rem var(--sheet-x) calc(0.9rem + env(safe-area-inset-bottom, 0px));
    background: var(--night); border-top: 1px solid var(--night-border); box-shadow: 0 -18px 28px -16px rgba(0, 0, 0, 0.5);
  }
  .nav-dock .btn { min-height: 3rem; padding-inline: 0.75rem; font-size: 1rem; }
  .nav-dock__call svg { color: var(--gold); }
}
@media (max-width: 360px) { .nav-dock { gap: 0.5rem; } .nav-dock .btn { padding-inline: 0.4rem; gap: 0.4rem; font-size: 0.9375rem; } }

/* phone sheet: the finder prompt as a card under the three destinations (the desktop menu has it in its night band) */
.nav-finder { display: none; }
@media (max-width: 1024px) {
  .primary-nav > ul > li.nav-finder { display: block; padding-top: 1.5rem; border-bottom: 0; }
  .primary-nav > ul > li.nav-finder > a:not(.btn) {
    justify-content: flex-start; gap: 1rem; min-height: 0; padding: 1.1rem 1.15rem; border: 1px solid var(--night-border); border-radius: 16px;
    background: rgba(255, 255, 255, 0.04); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--night-ink-soft); white-space: normal;
  }
  .primary-nav > ul > li.nav-finder > a:not(.btn)::after { display: none; }
  .nav-finder__ikona { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: rgba(240, 182, 75, 0.16); color: var(--gold); }
  .nav-finder__text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
  .nav-finder__q { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: #fff; }
  .nav-finder__a { font-weight: 600; color: var(--gold); }
  .nav-finder__a .mega__start-sipka { display: inline-block; vertical-align: -3px; margin-left: 0.15rem; }
}

/* without JS (or when script.js has not arrived within 3 s) the phone header stays ONE compact row:
   brand, call, and a "Menu" link to the footer navigation; the nav list is not unfolded (it was 1,100 px of links) */
.nav-fallback { display: none; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--night-border); border-radius: 12px; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: #fff; text-decoration: none; }
.nav-fallback:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 1024px) {
  html.no-js .primary-nav, html.no-js .nav-toggle { display: none; }
  html.no-js .nav-fallback { display: inline-flex; }
}
/* desktop: the "Služby" item is as tall as the bar, so the pointer never leaves it on the way to the panel;
   without JS the menu then opens on hover and on focus */
@media (min-width: 1025px) {
  .primary-nav, .primary-nav > ul { align-self: stretch; }
  .primary-nav > ul > li.has-sub { display: flex; align-items: center; align-self: stretch; }
  html.no-js .has-sub:hover .sub-menu, html.no-js .has-sub:focus-within .sub-menu { display: grid; }
  html.no-js .has-sub:hover .sub-toggle::after, html.no-js .has-sub:focus-within .sub-toggle::after { transform: scaleX(1); }
}
/* === /F:header === */

/* === F:finale === */
/* S5 · the finale is ONE grid. The closing call to action and the footer share these four column lines (brand | services A |
   services B | company) from 1140 px: the call to action's text spans columns 1-2, its contact column starts on the line of
   the second service column (x = 803 at 1440) and ends on the container edge; the footer's services group spans 2-3 and its
   inner grid uses the same gap, so the two service lists sit on columns 2 and 3 exactly. Below 1140 px the call to action
   stacks and the footer has its tablet layout. */
:root {
  --fin-gap: clamp(2.5rem, 4.4vw, 4rem); /* 50 px at 1140, 64 from 1455 */
  --fin-cols: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.75fr);
}
@media (min-width: 1140px) {
  .vyzva__hlavna { grid-column: 1 / 3; }
  .vyzva__kontakt { grid-column: 3 / 5; }
  .footer-sluzby { grid-column: 2 / 4; }
  .footer-sluzby .footer-sluzby__mriezka { column-gap: var(--fin-gap); }
}
/* Closing call to action: eyebrow with the dimension line, phone and e-mail as link rows on the night ground */
.vyzva .eyebrow { display: flex; align-items: center; color: var(--night-ink-soft); } /* block-level: its box starts at the column's top, like the H2 beside it */
.vyzva .eyebrow::before { content: ""; flex: none; width: 2.1rem; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1.5 1v8M32.5 1v8M1.5 5h31' fill='none' stroke='%23f0b64b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.vyzva__riadky { list-style: none; margin: var(--space-sm) 0 0; padding: 0; border-top: 1px solid var(--night-border); }
.vyzva__riadky li { margin: 0; border-bottom: 1px solid var(--night-border); }
.vyzva__riadok { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 4.75rem; padding: 0.85rem 0.25rem; color: #fff; text-decoration: none; transition: background 0.2s var(--ease), padding 0.25s var(--ease); }
.vyzva__riadok::before { content: ""; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 0.2s var(--ease); }
.vyzva__riadok:hover, .vyzva__riadok:focus-visible { background: rgba(255, 255, 255, 0.05); padding-inline: 1.1rem 0.6rem; }
.vyzva__riadok:hover::before, .vyzva__riadok:focus-visible::before { transform: scaleY(1); }
.vyzva__ikona { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(240, 182, 75, 0.16); color: var(--gold); }
.vyzva__riadok-text { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.vyzva__popis { font-size: var(--fs-small); line-height: 1.4; color: var(--night-ink-soft); } /* a label in words, not capitals: 14-15 px (S8) */
.vyzva__hodnota { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.vyzva__hodnota--tel { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.875rem); white-space: nowrap; overflow-wrap: normal; }
.vyzva__sipka { flex: none; color: var(--night-ink-soft); transition: transform 0.2s var(--ease), color 0.2s; }
.vyzva__riadok:hover .vyzva__sipka, .vyzva__riadok:focus-visible .vyzva__sipka { color: var(--gold); transform: translateX(4px); }

/* Footer: brand column with contact, services (collapsible on phones), company */
.footer-kontakt { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.footer-kontakt li { margin: 0; }
.footer-kontakt a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--night-ink); }
.footer-kontakt svg { flex: none; color: var(--gold); }
.footer-sluzby summary { display: none; list-style: none; }
.footer-sluzby summary::-webkit-details-marker { display: none; }
.footer-sluzby__mriezka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }

/* Legal bar as a drawing title block: bordered cells, small caps labels, gold corner ticks.
   Row 1: operator, seat, IČO, copyright (all from SITE); row 2: the legal links. */
.tblok { position: relative; margin-top: var(--space-md); border: 1px solid var(--night-border); }
.tblok::before, .tblok::after { content: ""; position: absolute; width: 0.9rem; height: 0.9rem; border: 2px solid var(--gold); pointer-events: none; }
.tblok::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.tblok::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.tblok__udaje { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, 0.8fr) minmax(0, 1.7fr); margin: 0; }
.tblok__bunka { margin: 0; padding: 0.6rem 1rem 0.65rem; border-left: 1px solid var(--night-border); }
.tblok__bunka:first-child { border-left: 0; }
.tblok__bunka dt, .tblok__stitok { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--night-ink-soft); }
.tblok__bunka dd { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--night-ink); }
.tblok__pravne { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; padding: 0 1rem; border-top: 1px solid var(--night-border); }
.tblok__stitok { margin: 0; padding-block: 0.5rem; }
.tblok__pravne ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.tblok__pravne li { margin: 0; }
.tblok__pravne a { display: flex; align-items: center; min-height: 2.75rem; font-size: 0.92rem; line-height: 1.4; }

/* tablet and small laptops: brand | services side by side, the four company links as one row beneath */
@media (max-width: 1139px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); grid-template-areas: "brand sluzby" "company company"; gap: var(--space-md) var(--space-lg); }
  .footer-brand { grid-area: brand; }
  .footer-sluzby { grid-area: sluzby; }
  .footer-col--spolocnost { grid-area: company; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); border-top: 1px solid var(--night-border); }
  .footer-col--spolocnost h2 { margin: 0 var(--space-2xs) 0 0; }
  .footer-col--spolocnost ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
}
@media (max-width: 1023px) {
  .tblok__udaje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tblok__bunka:nth-child(odd) { border-left: 0; }
  .tblok__bunka:nth-child(n + 3) { border-top: 1px solid var(--night-border); }
}
/* the contact rows of the closing call to action sit right above (stacked): do not repeat them in the footer */
@media (max-width: 899px) { .site-footer:not(.site-footer--solo) .footer-kontakt { display: none; } }
@media (max-width: 680px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "sluzby" "company"; gap: var(--space-md); }
  .footer-col--spolocnost { display: block; border-top: 0; }
  .footer-col--spolocnost h2 { margin: 0 0 0.25rem; }
  .footer-col--spolocnost ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-sm); }
  /* the ten service links fold away behind one row (script.js closes the <details> on phones; without JS they stay open) */
  .footer-sluzby summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding-inline: 0.25rem; border-block: 1px solid var(--night-border); font-family: var(--font-display); font-weight: 600; color: var(--night-ink); cursor: pointer; }
  .footer-sluzby summary svg { transition: transform 0.2s var(--ease); }
  .footer-sluzby[open] summary svg { transform: rotate(180deg); }
  .footer-sluzby__mriezka { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-top: var(--space-sm); }
  .tblok__udaje { grid-template-columns: minmax(0, 1fr); }
  .tblok__bunka { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; border-left: 0; }
  .tblok__bunka + .tblok__bunka { border-top: 1px solid var(--night-border); }
  .tblok__bunka dd { margin: 0; }
  .tblok__pravne { display: block; padding-block: 0 0.25rem; }
  .tblok__pravne ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
}
@media (max-width: 480px) { .tblok__pravne ul { grid-template-columns: minmax(0, 1fr); } }
/* === /F:finale === */

/* === F:dock === */
/* menu open: the dock and the strip step aside (they also sit below the menu in z-order: 80 / 85 vs 100) */
body.nav-open .mobile-bar, body.nav-open .price-strip { visibility: hidden; opacity: 0; transition: none; }
/* keyboard focus must never end up behind the phone dock */
@media (max-width: 959px) { html { scroll-padding-bottom: 5.5rem; } }
/* reduced motion: no sliding, the bars just appear and disappear (and leave the focus order at once) */
@media (prefers-reduced-motion: reduce) { .mobile-bar, .price-strip, .mobile-bar.is-on, .price-strip.is-on { transition: none; } }

/* Desktop (>= 960 px) service pages: a slim strip under the header once the price card has scrolled away */
.price-strip { display: none; }
@media (min-width: 960px) {
  .price-strip {
    display: block; position: fixed; z-index: 85; left: 0; right: 0; top: calc(var(--header-h) - 1px);
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.2s, visibility 0s linear 0.3s;
  }
  .price-strip.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .price-strip__bar { display: flex; align-items: center; gap: var(--space-md); min-height: 3.5rem; padding-block: 0.4rem; }
  .price-strip__name { display: flex; align-items: center; gap: 0.7rem; min-width: 0; margin: 0 auto 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
  .price-strip__ikona { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 9px; background: var(--navy-100); color: var(--navy-700); }
  .price-strip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .price-strip__price { margin: 0; white-space: nowrap; font-family: var(--font-display); color: var(--ink-soft); }
  .price-strip__price strong { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
  .price-strip__price small { margin-left: 0.15rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
  .price-strip .btn { flex: none; }
  /* anchors must not land under the header and the strip */
  html:has(.price-strip) { scroll-padding-top: calc(var(--header-h) + 4.75rem); }
}
/* === /F:dock === */

/* === P:home === */
/* P-home (task 87): the home page. Hero = text + a product stage (the Freistellung scene, three fact chips, the price tag);
   "O čo ide" = a header row and one full-width comparison panel of the two invoices on one scale (with its stamp moment),
   whose foot is ONE list (the example's facts, then the three things we do); services = svc-cards in two categories and
   one footer row. The order of the page is fixed by the owner: hero, invoice, services, closing call to action. Colours only
   through tokens; the panel and the stage are always-dark surfaces (.band-night remaps the tokens inside the panel). */

/* ---- hero: text left, the stage right (below the buttons on phones and tablets) ---- */
.page-hero--home { --grid-mask: radial-gradient(85% 140% at 74% 30%, #000 8%, transparent 76%); }
.hero-home { display: grid; align-items: center; gap: 0 var(--space-xl); }
.hero-home__text { container: hh / inline-size; max-width: none; } /* the hero's padding is the shared one (FX-shared S3): no value of its own here */
.page-hero--home h1 { max-width: none; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.03em; }
/* the two sentences of the headline each get one line: the size follows the width of the text column */
@supports (font-size: 1cqi) { .page-hero--home h1 { font-size: clamp(1.625rem, 8.9cqi, 3.75rem); } }
.page-hero--home .lead { max-width: 34rem; }
.hero-home__text .hero__actions { margin-top: var(--space-md); }
.hero-home__text .hero__note { margin-top: var(--space-sm); }

/* the price in one line (phones only; from 701 px the stage carries the price tag) */
.cena-pill {
  display: none; align-items: center; justify-content: space-between; gap: var(--space-sm); width: fit-content; max-width: 100%;
  min-height: 2.75rem; margin-top: var(--space-md); padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-display); color: #fff; text-decoration: none; transition: background var(--dur-1), border-color var(--dur-1);
}
.cena-pill:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.cena-pill__nazov { font-weight: 600; }
.cena-pill__cena { color: var(--night-ink-soft); white-space: nowrap; }
.cena-pill__od { color: var(--gold); font-weight: 600; }
.cena-pill__cena strong { font-weight: 700; color: #fff; font-size: 1.15em; letter-spacing: -0.02em; }
.cena-pill__cena small { font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.01em; } /* phones read it: 14 px and up, never the 12 px label size */
@media (max-width: 700px) { .cena-pill { display: inline-flex; } }

/* the stage: the ground, glows and blueprint grid of the product stage on the service pages */
.hero-scena { container: hs / inline-size; width: 100%; max-width: 36rem; margin: 0 0 var(--space-lg); }
.hero-scena__plocha {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); color: var(--night-ink);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: var(--shadow-lg);
  background:
    radial-gradient(55% 60% at 84% 6%, rgba(240, 182, 75, 0.2), transparent 62%),
    radial-gradient(70% 70% at 6% 88%, rgba(58, 116, 176, 0.42), transparent 58%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
}
.hero-scena__plocha::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 38%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 70% at 50% 38%, #000 0%, transparent 78%);
}
.hero-scena__obraz { position: relative; aspect-ratio: 560 / 300; padding: clamp(0.75rem, 2cqi, 1.1rem) clamp(0.25rem, 1.5cqi, 0.75rem) 0; }
.hero-scena__obraz > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-scena__stitky { list-style: none; margin: 0; padding: 0; }
.hero-scena__stitok {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0;
  padding: 0.34rem 0.75rem 0.34rem 0.5rem; border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(12, 27, 44, 0.32); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: #fff;
}
.hero-scena__stitok svg { flex: none; width: 14px; height: 14px; color: rgba(255, 255, 255, 0.8); }
.hero-scena__stitok--hlavny svg { color: var(--gold); }
.hero-scena__stitok--tl { left: 3%; top: 6%; }
.hero-scena__stitok--rm { right: 3%; top: 41%; }
.hero-scena__stitok--bl { left: 3%; bottom: 4%; }
/* the price tag: name, what it is, the price from the service's data, one link to the service */
.hero-scena__cena {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-sm) var(--space-md);
  padding: 0.95rem var(--space-md) 1.05rem; border-top: 1px solid rgba(255, 255, 255, 0.12); background: rgba(7, 17, 28, 0.42);
  color: #fff; text-decoration: none; transition: background var(--dur-1);
}
.hero-scena__cena:hover { background: rgba(7, 17, 28, 0.62); }
.hero-scena__cena:focus-visible { outline-offset: -4px; border-radius: 0; }
.hero-scena__nazov { display: block; font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.hero-scena__sub { display: block; margin-top: 0.15rem; font-size: var(--fs-small); line-height: 1.4; color: var(--night-ink-soft); }
.hero-scena__suma { text-align: right; font-family: var(--font-display); color: var(--night-ink-soft); white-space: nowrap; }
.hero-scena__od { font-weight: 600; color: var(--gold); }
.hero-scena__suma strong { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-scena__suma small { display: block; margin-top: 0.1rem; font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: 0.04em; }
.hero-scena__go { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(240, 182, 75, 0.16); color: var(--gold); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.hero-scena__cena:hover .hero-scena__go, .hero-scena__cena:focus-visible .hero-scena__go { background: var(--gold); color: #0c1b2c; transform: translateX(2px); }
/* a narrow stage (phones, small tablets) sets the chips in a row under the picture; phones drop the price tag (the pill above carries it) */
@container hs (max-width: 470px) {
  .hero-scena__obraz { aspect-ratio: auto; padding: 0.9rem 0.3rem 0; }
  .hero-scena__obraz > svg { height: auto; }
  .hero-scena__stitky { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.4rem 0.75rem 0.9rem; }
  .hero-scena__stitok { position: static; padding: 0.36rem 0.7rem 0.36rem 0.5rem; }
}
@media (max-width: 700px) { .hero-scena__cena { display: none; } }
/* tablets: the stage takes the whole width of the container (it hangs off the same edges as the text above); a flatter picture keeps it low */
@media (min-width: 701px) and (max-width: 999px) {
  .hero-scena { max-width: none; }
  .hero-scena__obraz { aspect-ratio: 2.35 / 1; }
}

@media (min-width: 1000px) {
  .hero-home { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .hero-scena { justify-self: end; max-width: none; margin: 0; }
}
@media (min-width: 1000px) and (max-width: 1199px) { .hero-home { gap: 0 var(--space-lg); } }

/* the facts strip of the hero: the middle fact is the longest, so it gets the widest cell and the strip stays low */
@media (min-width: 1000px) {
  .page-hero--home .fakty { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 0.86fr); }
  .page-hero--home .fakty__polozka { padding: 1.1rem 1.5rem; }
  .page-hero--home .fakty__polozka:first-child { padding-left: 0; }
}
.page-hero--home .fakty__titul { font-size: var(--fs-body); }

@media (prefers-reduced-motion: no-preference) {
  html.js .hero-scena { animation: rise 0.9s var(--ease) 0.2s both; }
  html.js .hero-scena .sc-list { animation: rise 0.7s var(--ease) 0.5s both; }
  html.js .hero-scena .sc-pecat { animation: stamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both; }
  html.js .hero-scena__stitok { animation: chipIn 0.5s var(--ease) 1.35s both; }
  html.js .hero-scena__stitok:nth-child(2) { animation-delay: 1.45s; }
  html.js .hero-scena__stitok:nth-child(3) { animation-delay: 1.55s; }
  html.js .hero-home__text > :nth-child(6) { animation-delay: 0.4s; }
}

/* ---- "O čo ide": the header row, the comparison panel, the three things we do ---- */
.porov-hlava { display: grid; gap: var(--space-md) var(--space-xl); align-items: start; margin-bottom: var(--head-gap); }
.porov-hlava h2 { max-width: 20ch; }
.porov-hlava__text .lead { max-width: 38rem; font-size: var(--fs-body); line-height: 1.65; }
.porov-hlava__text .link-arrow { margin-top: var(--space-md); }
@media (min-width: 900px) { .porov-hlava { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.porov {
  margin: 0; padding: clamp(1.25rem, 0.5rem + 2.6vw, 2.5rem); overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--night-border); box-shadow: var(--shadow-lg);
  --grid-mask: radial-gradient(60% 90% at 100% 0%, #000 0%, transparent 70%);
  --bar-h: clamp(2.75rem, 2rem + 2vw, 3.5rem);
}
.porov__hlava { display: flex; align-items: center; gap: 0.9rem; }
.porov__hlava-text { display: grid; gap: 0.1rem; }
.porov__titulok { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.porov__podtitul { font-size: var(--fs-small); color: var(--ink-soft); }

.porov__tabulka { display: grid; margin-top: var(--space-md); }
/* the scale: a dimension line the length of the track, labelled with the whole invoice */
.porov__skala { position: relative; display: grid; place-items: center; height: 1.75rem; margin-bottom: var(--space-sm); color: var(--gold); }
.porov__skala::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.porov__skala::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--gold), var(--gold)) left center / 1.5px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) right center / 1.5px 100% no-repeat;
  opacity: 0.7;
}
.porov__skala-text { position: relative; z-index: 1; padding-inline: 0.9rem; background: var(--night); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

.porov__stav { display: grid; gap: 0.5rem var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--border); }
.porov__stitok { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.25; }
.porov__stitok svg { flex: none; }
.porov__stav--bez .porov__stitok { color: var(--signal-text); }
.porov__stav--s .porov__stitok { color: var(--green-text); }
.porov__zrazka { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.15rem 0.6rem; margin: 0 0 0.75rem; font-size: var(--fs-small); color: var(--ink-soft); }
.porov__zrazka strong { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.porov__stav--bez .porov__zrazka strong { color: var(--signal-text); }
.porov__stav--s .porov__zrazka strong { color: var(--green-text); }
/* the track: the whole invoice = 100 %; the solid part is what is paid out, the hatched part what is withheld */
.porov__pasovy { position: relative; }
.porov__pas { display: flex; height: var(--bar-h); overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--border); }
.porov__suma, .porov__bit { flex: 0 0 calc(var(--w) * 1%); min-width: 0; }
.porov__suma { background: var(--navy-600); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.porov__bit { background: repeating-linear-gradient(-45deg, var(--signal) 0 6px, color-mix(in srgb, var(--signal) 30%, transparent) 6px 12px); }
/* the stamp moment (script.js, P-home): --p is how much of the withheld part has been filled in (1 = the finished state) */
.porov__stav--s .porov__suma { clip-path: inset(0 calc((1 - var(--p, 1)) * var(--cut, 0) * 1%) 0 0); }
.porov.is-armed { --p: 0; }
.porov.is-armed:not(.is-stamp) .porov__peciat { opacity: 0; }
.porov.is-stamp .porov__peciat { animation: stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.porov__peciat { position: absolute; z-index: 2; right: clamp(0.6rem, 2.5%, 1.5rem); top: 50%; width: calc(var(--bar-h) + 1.25rem); height: auto; translate: 0 -50%; overflow: visible; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.porov__vyplatene { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: 0; }
.porov__popis { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.porov__cislo { font-family: var(--font-display); font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.porov__pozn { margin: 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
/* the foot of the panel: ONE list — the example's own facts first, then what we do about it — with one marker for all five */
.porov__fakty { list-style: none; margin: 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--border-strong); display: grid; gap: 0.75rem var(--space-lg); }
.porov__fakty li { margin: 0; display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.porov__znak { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-top: 0.05rem; border-radius: 50%; background: var(--gold-soft); color: var(--gold-text); }
@media (min-width: 700px) { .porov__fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 899px) { .porov__fakty li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* wide: three columns - the two facts of the example in the first row, the three things we do in the second */
@media (min-width: 900px) {
  .porov__fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .porov__fakty .porov__nas { grid-column: 1; }
}

/* wide: one row per state, the three columns of every row (label | track | figure) share their edges with the scale */
@media (min-width: 900px) {
  .porov__tabulka { grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr) minmax(11.5rem, 14.5rem); column-gap: var(--space-lg); }
  .porov__skala { grid-column: 2; margin-bottom: var(--space-md); }
  .porov__stav { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto auto auto; row-gap: 0.75rem; }
  .porov__stitok { grid-column: 1; grid-row: 2; align-self: center; }
  .porov__draha, .porov__vyplatene { display: grid; grid-template-rows: subgrid; grid-row: 1 / 3; }
  .porov__draha { grid-column: 2; }
  .porov__zrazka { margin: 0; align-self: end; }
  .porov__pasovy { align-self: center; }
  .porov__vyplatene { grid-column: 3; justify-content: end; justify-items: end; text-align: right; }
  .porov__popis { align-self: end; }
  .porov__cislo { align-self: center; }
  .porov__pozn { grid-column: 2; grid-row: 3; }
}
@media (max-width: 899px) {
  .porov__stav--s .porov__peciat { right: 0.5rem; }
}

/* phones: the comparison is the longest block of the page, so it sits closer: tight section, smaller gaps, a lower track */
@media (max-width: 699px) {
  .section--porov { padding-block: var(--section-y-tight); }
  .porov-hlava { gap: var(--space-sm); margin-bottom: var(--space-md); }
  .porov-hlava__text .lead { line-height: 1.55; }
  .porov-hlava__text .link-arrow { margin-top: var(--space-sm); }
  .porov { padding: 1.1rem var(--space-sm); --bar-h: 2.5rem; }
  .porov__skala { height: 1.5rem; margin-bottom: 0.25rem; }
  .porov__tabulka { margin-top: var(--space-sm); }
  .porov__stav { gap: 0.4rem; padding-block: var(--space-sm); }
  .porov__zrazka { margin-bottom: 0.4rem; }
  .porov__fakty { padding-top: var(--space-sm); gap: 0.6rem; }
}

/* ---- services: two categories of cards, then the finder link and the VAT note in one row ---- */
.sluzby-kat + .sluzby-kat { margin-top: var(--space-xl); }
.sluzby-kat__hlava { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-md); margin-bottom: var(--space-md); }
.sluzby-kat__hlava .eyebrow { grid-column: 1 / -1; margin-bottom: 0.25rem; }
.sluzby-kat__hlava h3 { grid-column: 1; }
.sluzby-kat__hlava::after { content: ""; grid-column: 2; grid-row: 2; height: 1px; background: var(--border-strong); }
@media (max-width: 680px) { .sluzby-kat__hlava::after { display: none; } .sluzby-kat__hlava h3 { grid-column: 1 / -1; } }
.sluzby-pata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); padding: var(--space-md) var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.sluzby-pata__hladac { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 2.75rem; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--link); text-decoration: none; }
.sluzby-pata__hladac:hover { text-decoration: underline; text-underline-offset: 4px; }
.sluzby-pata__sipka { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.sluzby-pata__hladac:hover .sluzby-pata__sipka, .sluzby-pata__hladac:focus-visible .sluzby-pata__sipka { background: var(--gold); color: #0c1b2c; transform: translateX(3px); }
.sluzby-pata__dph { margin: 0; font-size: var(--fs-small); color: var(--ink-faint); }

/* the bars of the comparison draw in when the panel is revealed (JS and motion allowed; otherwise the finished state shows) */
@media (prefers-reduced-motion: no-preference) {
  html.js .porov .porov__suma, html.js .porov .porov__bit { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease); }
  html.js .porov.is-in .porov__suma { transform: none; transition-delay: 0.4s; }
  html.js .porov.is-in .porov__bit { transform: none; transition-delay: 1.15s; }
}
@media print { .porov.is-armed { --p: 1; } .porov.is-armed .porov__peciat { opacity: 1; } }
/* === /P:home === */

/* === P:hub === */
/* Services hub (task 87 · P-hub). Order: compact night hero (no photo, no breadcrumb, no strip) → the situation
   stage floating over the hero's lower edge → the ten services as cards in two categories → the finale.
   The stage is one DOM for three states (render.py hub_stage, script.js "Hub"):
   - not enhanced (no JS): a situation row (link to its service) followed by its panel, one column, interleaved by grid
     placement (--i), two columns from 900 px; every panel stays readable;
   - phones and tablets (< 1100 px, html.js): an accordion, the same interleaving, one panel open;
   - desktop (>= 1100 px, html.js): ARIA tabs — the list on the left, the night panel of the chosen situation on the right. */

/* ---- hero ---- */
.page-hero--hub, .hub-stage { --hub-lift: clamp(2.75rem, 4.5vw, 4rem); } /* how far the stage reaches up into the hero */
.page-hero--hub .page-hero__inner { max-width: none; padding-block: var(--hero-pt) calc(var(--hub-lift) + var(--hero-pb-compact)); } /* top: the shared hero's; bottom: room for the stage that reaches up */
.page-hero--hub h1 { max-width: 30ch; font-size: var(--fs-h2); } /* a 62-character title: phones take the H2 size, from 700 px the H1 size */
@media (min-width: 700px) { .page-hero--hub h1 { font-size: var(--fs-h1); } }
.page-hero--hub .lead { max-width: 48rem; }

/* phones: the price in one line under the lead (the picker below is closed, so a price is on the first screen); a link to the catalogue */
.hub-pill { display: none; }
@media (max-width: 699px) {
  .hub-pill {
    display: inline-flex; align-items: center; gap: 0.7rem; width: fit-content; max-width: 100%; min-height: 2.75rem; margin-top: var(--space-md); padding: 0.45rem 0.9rem 0.45rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.07);
    font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.3; color: #fff; text-decoration: none;
    transition: background var(--dur-1), border-color var(--dur-1);
  }
  .hub-pill:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
  .hub-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .hub-pill__text { color: var(--night-ink-soft); }
  .hub-pill__text strong { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
  .hub-pill__dot { margin-inline: 0.15em; color: var(--gold); }
  .hub-pill__sipka { flex: none; color: var(--gold); transform: rotate(90deg); }
}
@media (max-width: 339px) { .hub-pill { gap: 0.4rem; padding: 0.45rem 0.6rem 0.45rem 0.85rem; } .hub-pill__sipka { width: 16px; height: 16px; } } /* 320 px: the line still fits on one row */

/* ---- the situation stage ---- */
.hub-stage { position: relative; z-index: 2; margin-top: calc(var(--hub-lift) * -1); }
.stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
/* base state (no JS, phones, tablets): the wrappers vanish and rows and panels interleave */
.stage__rail, .stage__tabs, .stage__view { display: contents; }
.stage__title { grid-column: 1; grid-row: 1; margin: 0; padding: var(--card-pad) var(--card-pad) 0.9rem; font-size: var(--fs-h3); line-height: 1.2; }
.stage__tab { grid-column: 1; grid-row: calc(var(--i) * 2 + 2); }
.stage__panel { grid-column: 1; grid-row: calc(var(--i) * 2 + 3); }

/* a situation: a row (a link until script.js turns it into a button) */
.stage__tab {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 3.25rem; margin: 0; padding: 0.7rem var(--card-pad);
  border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none;
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-align: left;
  color: var(--ink); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1);
}
.stage__tab::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); transform: scaleY(0); transition: transform var(--dur-2) var(--ease); }
.stage__tab:hover { background: var(--row-hover); }
.stage__tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }
.stage__tab-arrow, .stage__tab-chev { flex: none; color: var(--ink-faint); transition: transform var(--dur-2) var(--ease), color var(--dur-1); }
.stage__tab-chev { display: none; }
.stage__tab:hover .stage__tab-arrow { color: var(--navy-600); transform: translateX(3px); }
/* accordion (script.js sets .is-accordion below 1100 px): a down chevron that turns up while the row is open; the arrow is for tabs and links */
.stage.is-accordion .stage__tab-arrow { display: none; }
.stage.is-accordion .stage__tab-chev { display: block; }
.stage.is-accordion .stage__tab:hover .stage__tab-chev { color: var(--navy-600); }
.stage__tab[aria-selected="true"], .stage__tab[aria-expanded="true"] { background: var(--navy-50); }
.stage__tab[aria-selected="true"]::before, .stage__tab[aria-expanded="true"]::before { transform: none; }
.stage__tab[aria-selected="true"] .stage__tab-arrow { color: var(--gold-text); transform: translateX(3px); }
.stage__tab[aria-expanded="true"] .stage__tab-chev { color: var(--gold-text); transform: rotate(180deg); }

/* "other situation": the way out, a bar under the card */
.stage__other {
  display: flex; align-items: center; gap: 0.85rem; min-height: 3.5rem; margin-top: clamp(1.5rem, 1.1rem + 1vw, 2rem); padding: 0.8rem var(--card-pad);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); border-radius: var(--radius); background: var(--gold-soft);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.stage__other > svg:first-child { flex: none; color: var(--gold-text); }
.stage__other > span { flex: 1; min-width: 0; }
.stage__other-arrow { flex: none; color: var(--gold-text); transition: transform var(--dur-2) var(--ease); }
.stage__other:hover { color: var(--ink); border-color: var(--gold); box-shadow: var(--shadow-sm); }
.stage__other:hover .stage__other-arrow { transform: translateX(4px); }
.stage__other:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }

/* the panel: a night block (band-night remaps the tokens) with the stage's glows; its inner layout follows its own width */
.stage__panel {
  container: sp / inline-size;
  margin: 0.2rem 0.6rem 0.8rem; padding: clamp(1.1rem, 4vw, 1.5rem); border-radius: var(--radius);
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(240, 182, 75, 0.16), transparent 62%),
    radial-gradient(75% 80% at 0% 100%, rgba(58, 116, 176, 0.4), transparent 60%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 62%);
}
.stage__panel[hidden] { display: none; }
.stage__body { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 1rem; align-content: start; grid-template-areas: "eyebrow media" "name media" "sub media" "price price" "go go" "also also"; }
.stage__text { display: contents; }
.stage__eyebrow { grid-area: eyebrow; margin: 0 0 0.45rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-text); }
.stage__name { grid-area: name; font-size: var(--fs-h3); line-height: 1.15; color: var(--ink); }
.stage__dop { display: block; font-weight: 500; color: var(--navy-600); }
.stage__sub { grid-area: sub; margin: 0.4rem 0 0; font-size: var(--fs-body); line-height: 1.45; color: var(--ink-soft); }
.stage__price { grid-area: price; margin: 1.1rem 0 0; display: grid; gap: 0.35rem; }
.stage__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15em 0.45em; font-family: var(--font-display); color: var(--ink); }
.stage__from { font-size: var(--fs-body); font-weight: 600; color: var(--gold-text); }
.stage__value { font-size: var(--fs-h2); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; }
.stage__vat { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.stage__unit { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.stage__go { grid-area: go; margin-top: 1.1rem; }

/* the picture: the card thumbnail on the stage ground; a small square (cropped to the middle) while the panel is narrower than 30 rem */
.stage__media {
  grid-area: media; position: relative; isolation: isolate; overflow: hidden; align-self: start; width: 5.5rem; aspect-ratio: 1; border-radius: 10px;
  background:
    radial-gradient(55% 60% at 84% 6%, rgba(240, 182, 75, 0.2), transparent 62%),
    radial-gradient(70% 70% at 6% 88%, rgba(58, 116, 176, 0.42), transparent 58%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.stage__media::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 45%, #000 0%, transparent 85%); mask-image: radial-gradient(80% 75% at 50% 45%, #000 0%, transparent 85%);
}
.stage__scene { position: absolute; inset: 0; overflow: hidden; }
.stage__media .scena-svg--mini { position: absolute; left: 50%; top: 0; bottom: auto; width: auto; height: 100%; aspect-ratio: 560 / 300; translate: -50% 0; }
.stage__chip {
  position: absolute; z-index: 2; left: 0.7rem; top: 0.7rem; max-width: calc(100% - 1.4rem); display: none; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem; border-radius: var(--radius-pill);
  background: rgba(12, 27, 44, 0.42); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.25; color: #fff; white-space: nowrap;
}
.stage__chip svg { flex: none; color: var(--gold); }
.stage__chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* the second recommendation, small */
.stage__also {
  grid-area: also; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem; grid-template-areas: "label label label label" "ikona name price arrow" ". note note .";
  column-gap: 0.75rem; align-items: center; margin: 1.25rem -0.5rem 0; padding: 0.7rem 0.5rem; position: relative;
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; transition: background var(--dur-1) var(--ease);
}
.stage__also::before { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; top: 0; border-top: 1px solid var(--border); }
.stage__also:hover { background: var(--row-hover); }
.stage__also-label { grid-area: label; margin-bottom: 0.55rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.stage__also-ikona { grid-area: ikona; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.65rem; background: var(--navy-100); color: var(--navy-700); }
.stage__also-name { grid-area: name; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.stage__also-name .stage__dop { display: inline; font-size: var(--fs-small); }
.stage__also-price { grid-area: price; white-space: nowrap; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.stage__also-from { font-weight: 600; color: var(--gold-text); }
.stage__also-note { grid-area: note; margin-top: 0.2rem; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.stage__also-arrow { grid-area: arrow; color: var(--ink-faint); transition: transform var(--dur-2) var(--ease), color var(--dur-1); }
.stage__also:hover .stage__also-arrow { color: var(--gold-text); transform: translateX(3px); }
.stage__also:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* panel wider than 30 rem (tablets, desktop): text beside a big picture, the second recommendation at the foot */
@container sp (min-width: 30rem) {
  .stage__body { height: 100%; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: clamp(1.5rem, 3.4vw, 2.75rem); grid-template-areas: "text media" "also also"; }
  .stage__text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
  .stage__go { margin-top: 1.4rem; }
  .stage__media { align-self: start; width: auto; aspect-ratio: 16 / 10; border-radius: var(--radius); }
  .stage__scene { top: 0; }
  .stage__media .scena-svg--mini { left: 0; top: auto; bottom: 0; width: 100%; height: auto; aspect-ratio: auto; translate: none; }
  .stage__chip { display: inline-flex; }
  .stage__also { margin-top: 1.5rem; }
}

/* a very narrow panel (320 px phones): no thumbnail, the text takes the width */
@container sp (max-width: 16rem) {
  .stage__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "name" "sub" "price" "go" "also"; }
  .stage__media { display: none; }
}

/* not enhanced: the picture stays out of the way (nine rows of text, each readable and linked) */
.no-js .stage__media { display: none; }
.no-js .stage__body { display: block; height: auto; }
.no-js .stage__also { margin-top: 1.25rem; }
@media (min-width: 900px) {
  .no-js .stage { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); }
  .no-js .stage__title { grid-column: 1 / -1; }
  .no-js .stage__tab { grid-column: 1; grid-row: calc(var(--i) + 2); }
  .no-js .stage__panel { grid-column: 2; grid-row: calc(var(--i) + 2); margin-block: 0.6rem; }
  .no-js .stage__tab { align-items: flex-start; padding-top: 1.3rem; }
  .no-js .stage__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .no-js .stage__text, .no-js .stage__also { grid-area: auto; }
  .no-js .stage__also { margin-top: 0; }
  .no-js .stage__also::before { display: none; }
}
/* enhanced but not yet running: only the first panel shows on desktop (script.js takes over and keeps the attribute `hidden` in step);
   below 1100 px the accordion loads closed, so no panel shows until script.js has set the stage up */
.js .stage__panel.is-off { display: none; }
@media (max-width: 1099px) { .js .stage:not(.is-live) .stage__panel { display: none; } }

/* enhanced, >= 1100 px: tabs on the left, the night panel on the right (below that the accordion keeps the panel at the full card width) */
@media (min-width: 1100px) {
  .js .stage { grid-template-columns: clamp(19rem, 38%, 29rem) minmax(0, 1fr); }
  .js .stage__rail { display: flex; flex-direction: column; grid-column: 1; min-width: 0; }
  .js .stage__title { padding-bottom: 1rem; }
  .js .stage__tabs { display: flex; flex-direction: column; }
  .js .stage__view { position: relative; isolation: isolate; display: flex; grid-column: 2; min-width: 0; color: var(--night-ink);
    background:
      radial-gradient(55% 70% at 100% 0%, rgba(240, 182, 75, 0.16), transparent 62%),
      radial-gradient(75% 80% at 0% 100%, rgba(58, 116, 176, 0.4), transparent 60%),
      linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 62%);
  }
  .js .stage__view::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(90% 90% at 70% 30%, #000 0%, transparent 85%); mask-image: radial-gradient(90% 90% at 70% 30%, #000 0%, transparent 85%);
  }
  .js .stage__panel { flex: 1; min-width: 0; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 0; background: none; }
  .js .stage__panel::before { display: none; }
}

/* ---- the catalogue: category head and the cards ---- */
.hub-stage + .hub-cat { padding-top: var(--section-y-tight); }
.cat-head { display: grid; gap: var(--space-md) var(--space-xl); margin-bottom: var(--head-gap); }
@media (min-width: 900px) { .cat-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2.5rem, 6vw, 6rem); } }
.cat-head h2 { max-width: 20ch; }
.cat-head__text { max-width: 34rem; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 899px) { .cat-head__text { font-size: var(--fs-small); line-height: 1.55; } }
.cat-head__meta { display: inline-flex; flex-wrap: wrap; margin: var(--space-sm) 0 0; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; background: var(--surface); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--ink-soft); }
.cat-head__meta > span { padding: 0.5rem 1rem; }
.cat-head__meta strong { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---- motion: the panel comes in when a situation is chosen; nothing moves for people who asked for less ---- */
@keyframes hubIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .stage__panel:not([hidden]) .stage__text, .js .stage__panel:not([hidden]) .stage__media, .js .stage__panel:not([hidden]) .stage__also { animation: hubIn 0.45s var(--ease) both; }
  .js .stage__panel:not([hidden]) .stage__media { animation-delay: 0.06s; }
  .js .stage__panel:not([hidden]) .stage__also { animation-delay: 0.12s; }
}
/* === /P:hub === */

/* === P:service === */
/* Service pages (task 87 · P-service, fix round FX-service). Builds on sections 8, 11 and 12 above (stage, price card,
   steps, invoice, misconceptions), which only service pages use; everything that changes is overridden here so the
   region merges cleanly. Order: seams and the page grid, product row (name | stage + card), price card, stage card
   (dark picture + light footer), Freistellung band, steps with the sticky scene, related cards, dark mode.
   One grid down the page: the wide column is 1fr, the narrow one --cena-w. The product row and the Freistellung
   band run wide | narrow, the steps run narrow | wide. */

/* seams: one tighter rhythm for every band of a service page (the global --section-y is 60-112 px per side) */
.section--produkt, .svc-sec {
  --svc-y: clamp(2.75rem, 1.6rem + 3.2vw, 4.5rem);
  --cena-w: clamp(22rem, 28vw, 25rem);
  --kol-gap: clamp(2.5rem, 1rem + 3.4vw, 3.75rem);
  --stage-cap: 42rem; /* the drawing (scene + chips) never gets wider than this, however wide the stage card is */
}
.svc-sec { padding-block: var(--svc-y); }
.section--produkt { padding-block: clamp(1.75rem, 1rem + 2vw, 2.5rem) var(--svc-y); }

/* --- product row: name + stage card | price card. The card is as high as its content and sticks under the header
       while the stage card scrolls; it can never leave the row, so it never reaches the next band. --- */
.produkt { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); grid-template-areas: "hlava" "cena" "prehlad"; }
.produkt__hlava, .produkt__prehlad { min-width: 0; }
@media (min-width: 960px) {
  .produkt {
    grid-template-columns: minmax(0, 1fr) var(--cena-w); grid-template-rows: auto 1fr;
    grid-template-areas: "hlava cena" "prehlad cena";
    column-gap: var(--kol-gap); row-gap: 1.75rem; align-items: start;
  }
  .produkt__cena { align-self: start; }
}
/* a viewport too short for the card plus the header: no sticking (the price strip takes over once the card is gone) */
@media (min-width: 960px) and (max-height: 739px) { .price-card { position: relative; top: auto; } }
.price-card.is-free { position: relative; top: auto; } /* script.js: card + header taller than the window, so it scrolls along instead of hiding its lower part */

/* --- price card: price, unit, button, trust line, the amber notes, then the fine print under a hairline --- */
.price-card { display: flex; flex-direction: column; padding: calc(var(--card-pad) + 4px) var(--card-pad) var(--card-pad); }
.price-card .eyebrow { color: var(--ink-soft); }
.price-card__amount { margin-top: var(--space-xs); }
.price-card__value { font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem); }
.price-card__unit { margin-top: 0.75rem; font-size: var(--fs-body); font-weight: 500; line-height: 1.4; color: var(--ink); }
.price-card__unit-more { display: block; margin-top: 0.25rem; font-size: var(--fs-small); font-weight: 400; line-height: 1.5; color: var(--ink-soft); }
.price-card__akcia { margin-top: 1.25rem; }
.price-card .price-card__akcia .btn { margin-top: 0; }
.price-card__trust { margin-top: 0.85rem; color: var(--ink-soft); }
.price-card__trust svg { color: var(--navy-600); }
/* the amber notes ("included", "first time") are ONE block: paragraphs, then the link as its last line */
.price-card__extras { display: grid; gap: 0.6rem; margin-top: 1.25rem; padding: 0.85rem 1rem 0.9rem; border-radius: var(--radius); background: var(--gold-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.price-card .price-card__extras > * { margin: 0; }
.price-card__extra + .price-card__extra { padding-top: 0.6rem; border-top: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); }
.price-card__extra-link { white-space: nowrap; font-size: inherit; } /* ends the first note; the arrow link's own ::before is the 44 px tap area */
.price-card__drobne { display: grid; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.price-card .price-card__drobne > * { margin: 0; }
.price-card__note, .price-card__consult { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.price-card__consult { display: flex; align-items: flex-start; gap: 0.5rem; }
.price-card__consult svg { flex: none; margin-top: 0.15rem; color: var(--ink-faint); }
/* tablets: the card is one row (price and unit | button and trust line), the notes and the fine print beneath */
@media (min-width: 600px) and (max-width: 959px) {
  .price-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); grid-template-areas: "hlavne akcia" "extras extras" "drobne drobne"; column-gap: var(--space-lg); align-items: end; }
  .price-card__hlavne { grid-area: hlavne; }
  .price-card__akcia { grid-area: akcia; margin: 0; }
  .price-card__extras { grid-area: extras; }
  .price-card__drobne { grid-area: drobne; }
}
/* phones: the card comes before the stage, so it stays short - tighter spacing, the consult line is left to the
   finale (the line stays in the markup for the other widths) */
@media (max-width: 599px) {
  .price-card { padding: calc(var(--card-pad) + 2px) var(--card-pad) var(--card-pad); }
  .price-card .eyebrow { display: none; } /* "od 189 €" says it; the aside keeps its aria-label "Cena" */
  .price-card__amount { margin-top: 0.25rem; }
  .price-card__unit { margin-top: 0.5rem; }
  .price-card__akcia { margin-top: 1.1rem; }
  .price-card__trust { margin-top: 0.65rem; }
  .price-card__extras { gap: 0.5rem; margin-top: 1rem; padding: 0.7rem 0.85rem 0.75rem; }
  .price-card__extra + .price-card__extra { padding-top: 0.5rem; }
  .price-card__drobne { margin-top: 1rem; padding-top: 1rem; }
  .price-card__consult { display: none; }
}

/* --- the stage card: the dark picture on top, "when you need it" / "what we need" as its light footer --- */
.scena__obraz { width: 100%; max-width: var(--stage-cap); margin-inline: auto; padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.5rem, 2vw, 1.25rem) 0; }
.scena__popis { padding: 0.75rem var(--card-pad) 1.25rem; gap: 0.5rem; font-size: var(--fs-h3); line-height: 1.25; }
/* a narrow stage (phones, the 960-1180 desktop band): the picture is enlarged a little (every drawing's content stays inside
   its own frame up to 1.2), the extra height is paid for with margin so the chips row below keeps its distance */
@container scena (max-width: 580px) {
  .scena__obraz { contain: paint; }
  .scena__obraz > svg { transform: scale(1.16); transform-origin: 50% 42%; margin-bottom: 1.15rem; }
  .scena__popis { padding-top: 0.9rem; }
}
/* the footer: two columns on a surface of their own, a hairline between them; one column when the card is narrow */
.scena__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border-top: 1px solid var(--scena-border); }
.scena__stlpec { padding: var(--card-pad); background: none; }
.scena__stlpec + .scena__stlpec { border-top: 1px solid var(--border); }
@container scena (min-width: 34rem) {
  .scena__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scena__stlpec + .scena__stlpec { border-top: 0; border-left: 1px solid var(--border); }
}
.scena__nadpis { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.info-ikona { --s: 2.25rem; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: var(--navy-100); color: var(--navy-700); }
.scena__stlpec p { margin-top: var(--space-xs); max-width: 36rem; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.scena__zoznam { display: grid; gap: 0.65rem; margin: var(--space-xs) 0 0; }
.scena__zoznam li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); }
.scena__zoznam li::before { content: none; }
/* the check keeps its 14 px box when a line wraps and sits on the first line's midline (the box is one line high) */
.check-list__icon { flex: none; display: grid; place-items: center; align-self: flex-start; width: 1.25rem; height: 1.5em; color: var(--navy-600); }
.check-list__icon svg { flex: none; width: 14px; height: 14px; }

/* --- Freistellung: invoice example and misconceptions are one band, wide | narrow like the product row --- */
.frei { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 960px) { .frei { grid-template-columns: minmax(0, 1fr) var(--cena-w); column-gap: var(--kol-gap); align-items: start; } }
.frei__priklad .lead { max-width: var(--measure); margin-top: var(--space-sm); font-size: var(--fs-body); line-height: 1.65; }
.frei__priklad .faktura { margin-top: var(--space-lg); }
/* the two mini-cards hold only figures; the explanation is one note under both */
.faktura__vysvetlenie { display: flex; align-items: flex-start; gap: 0.75rem; margin: var(--space-sm) 0 0; padding: 0.85rem 1rem 0.9rem; border-radius: var(--radius); background: var(--bg-soft); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.faktura__vysvetlenie svg { flex: none; margin-top: 0.15rem; color: var(--navy-600); }
.frei h2 { font-size: calc(var(--fs-h2) * 0.8); } /* both headings of the band: the right one sits in the narrow column */
.frei__omyly .omyly { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.frei__omyly .link-arrow { margin-top: var(--space-md); }
.frei .omyl:hover { transform: none; box-shadow: var(--shadow-sm); }
.frei .omyl__hore { padding: 1rem var(--card-pad) 1.05rem; }
.frei .omyl__dole { padding: 1rem var(--card-pad) 1.15rem; }
.frei .omyl__citat { min-height: 0; margin-top: 0.4rem; font-size: var(--fs-lead); line-height: 1.3; }
.frei .omyl__text { margin-top: 0.4rem; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
.frei .omyly:focus-visible { outline-offset: 4px; }
/* phones: the three claims are a swipe rail (next card peeks, the rail is focusable), not 1.4 screens of stacked cards */
@media (max-width: 680px) {
  .frei .omyly { display: flex; gap: var(--space-sm); margin-inline: calc(var(--gutter) * -1); padding: 0.25rem var(--gutter) 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .frei .omyly::-webkit-scrollbar { display: none; }
  .frei .omyly:focus-visible { outline-offset: -3px; border-radius: var(--radius); } /* the rail bleeds to the screen edges: ring inside */
  .frei .omyl { flex: 0 0 min(84%, 22rem); scroll-snap-align: start; }
}

/* --- steps: heading + sticky scene on the left (narrow), the note and the steps on the right (wide, to the container edge) --- */
.postup-detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 960px) {
  .postup-detail { grid-template-columns: var(--cena-w) minmax(0, 1fr); column-gap: var(--kol-gap); }
  .postup-detail__bok { top: calc(var(--header-h) + 5rem); } /* clears the header and the price strip */
}
.postup-detail__hlavne { min-width: 0; }
.krok-poznamka { margin: 0 0 var(--space-lg); padding: 0.95rem 1.15rem 1rem; border-radius: var(--radius); background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
/* markers: 48 px navy discs with the numeral, a gold rail that fills as the steps come into view, a gold check at the end */
.krok { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: var(--space-lg); }
.krok::before, .krok::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.5rem; bottom: 0.4rem; width: 2px; border-radius: 2px; }
.krok::before { background: color-mix(in srgb, var(--navy-600) 22%, transparent); }
.krok::after { background: var(--gold); }
.krok:last-child::before, .krok:last-child::after { display: none; }
.krok .krok__znak, .krok.is-in .krok__znak { width: 3rem; height: 3rem; border: 0; background: var(--navy-700); color: var(--bg); font-size: var(--fs-body); }
.krok:last-child .krok__znak, .krok.is-in:last-child .krok__znak { background: var(--gold); color: #0c1b2c; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 24%, transparent); }
.krok__obsah { padding-top: 0.55rem; }
.krok__nazov { text-wrap: balance; }
.krok__text { max-width: 42rem; }
@media (prefers-reduced-motion: no-preference) {
  html.js .krok:not(.is-in)::after { transform: scaleY(0); }
  .krok::after { transform-origin: top; transition: transform 0.8s var(--ease) 0.35s; }
}
@media (max-width: 680px) {
  .krok { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.9rem; padding-bottom: var(--space-md); }
  .krok::before, .krok::after { left: calc(1.25rem - 1px); top: 2.9rem; }
  .krok .krok__znak, .krok.is-in .krok__znak { width: 2.5rem; height: 2.5rem; font-size: var(--fs-small); }
  .krok__obsah { padding-top: 0.4rem; }
}

/* the sticky scene: the service's own drawing on a small dark stage, always in full colour; only the seal stamps in at the
   last step (script.js: .is-live, .is-stamped). Hidden under 960 px; without JS and with reduced motion it simply shows
   the finished picture. */
.krok-scena { display: none; }
@media (min-width: 960px) {
  .krok-scena {
    display: block; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 4; margin-top: var(--space-lg);
    border: 1px solid var(--scena-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--night-ink);
    background:
      radial-gradient(55% 60% at 84% 6%, rgba(240, 182, 75, 0.18), transparent 62%),
      radial-gradient(70% 70% at 6% 88%, rgba(58, 116, 176, 0.42), transparent 58%),
      linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
    transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
  }
  .krok-scena::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 70% at 50% 45%, #000 0%, transparent 78%);
  }
  .krok-scena__obraz { position: absolute; inset: 0; display: grid; place-items: center; }
  .krok-scena__obraz > svg { width: 100%; height: auto; overflow: visible; transform: scale(var(--zoom, 1.15)); }
  html.js .krok-scena.is-live:not(.is-stamped) .sc-pecat, html.js .krok-scena.is-live:not(.is-stamped) .krok-scena__peciat { opacity: 0; }
  html.js .krok-scena.is-live.is-stamped .sc-pecat, html.js .krok-scena.is-live.is-stamped .krok-scena__peciat { animation: stamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .krok-scena.is-stamped { border-color: var(--gold); box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
  /* scenes without a seal of their own (Steuernummer, ELSTER): the same gold disc, drawn here */
  .krok-scena__peciat { position: absolute; right: 13%; bottom: 14%; width: 4.25rem; height: auto; overflow: visible; transform-box: fill-box; transform-origin: center; }
  .ks-kruh { fill: var(--gold); }
  .ks-ring { stroke: var(--night); opacity: 0.5; }
  .ks-fajka { stroke: var(--night); }
}

/* --- related services: the F4 row card (scene tile, name, price, unit), two by two from 681 px, one column below
       (three cards there, not four); the heading is a step smaller than the main bands' --- */
.svc-sec .svc-grid { margin-top: 0; }
.svc-sec .section-head--row h2 { font-size: calc(var(--fs-h2) * 0.8); }
@media (min-width: 681px) {
  .svc-sec .svc-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
  .svc-sec .svc-card--row { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.25rem; min-height: 8.5rem; padding: 0.85rem 1.1rem 0.85rem 0.85rem; }
  .svc-sec .svc-card--row .svc-card__media { width: 6.5rem; }
  .svc-sec .svc-card--row .svc-card__name { font-size: var(--fs-lead); }
  .svc-sec .svc-card--row .svc-card__unit { font-size: var(--fs-small); }
}
@media (max-width: 680px) { .svc-sec .svc-grid--row .svc-grid__item:nth-child(n + 4) { display: none; } }

/* --- dark mode: the stage keeps its night gradient (darker than the page, so it stands out) and gets a visible hairline;
       the price card is a card: --surface plus a clear border. Notes keep their gold edge. --- */
@media (prefers-color-scheme: dark) {
  .scena, .krok-scena { --scena-border: rgba(255, 255, 255, 0.18); }
  .price-card { border-color: var(--border-strong); }
}
/* === /P:service === */

/* === P:onas === */
/* P-onas (task 87, fix round FX-onas): O nás. Photo hero (the one photograph left on the site; its veil follows the text column),
   the story beside a night map stage (Germany with the Chemnitz pin, the page's only drawing), the promises as four compact
   cells of one panel, "what you hold at the end" as one calm two-column list on the page's one night band, what the service
   handles and what it does not, then the closing call to action. Colours only through tokens (the night stage ground is the
   product stage's own; see --onas-glow-*). */

/* ---- hero: photograph, grid, the caption as a glass chip on the right ---- */
.onas-hero { --grid-mask: radial-gradient(80% 110% at 78% 25%, #000 18%, transparent 74%); }
.onas-hero .page-hero__bg { object-position: 62% 46%; }
.onas-hero .page-hero__inner { max-width: 44rem; } /* padding: the shared hero's (FX-shared S3) */
.onas-hero .lead { max-width: 40rem; }
@media (min-width: 701px) {
  /* the photo is meant to be seen on the right. The veil is anchored to the text, not to the width: it stays dense (>= 90 %,
     which keeps the lead above 4.5:1 on the brightest paper) as far as the right edge of the text column - container edge +
     gutter + the 40 rem of the lead, so it follows the container at every width - and only then thins out to the photo */
  .onas-hero { --veil-text: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + 41rem); }
  @media (max-width: 1024px) { /* tablets: a narrower text column leaves a strip of the photograph on the right */
    .onas-hero { --veil-text: calc(var(--gutter) + 33rem); }
    .onas-hero .lead { max-width: 32rem; }
  }
  .onas-hero::after {
    background:
      radial-gradient(50% 70% at 100% 100%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 65%),
      linear-gradient(90deg, color-mix(in srgb, var(--night) 96%, transparent) 0%, color-mix(in srgb, var(--night) 92%, transparent) var(--veil-text),
        color-mix(in srgb, var(--night) 54%, transparent) calc(var(--veil-text) + 7rem), color-mix(in srgb, var(--night) 16%, transparent) calc(var(--veil-text) + 20rem), color-mix(in srgb, var(--night) 16%, transparent) 100%);
  }
}
.onas-hero__cap {
  position: absolute; right: var(--gutter); bottom: clamp(1.25rem, 2.2vw, 2rem); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.55rem 1.1rem 0.55rem 0.9rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--night) 48%, transparent); border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; line-height: 1.2; color: #fff;
}
/* the dimension-line mark of the eyebrow, once more, as the picture's measure */
.onas-hero__cap::before { content: ""; flex: none; width: 1.7rem; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1.5 1v8M32.5 1v8M1.5 5h31' fill='none' stroke='%23f0b64b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 999px) { .onas-hero__cap { display: none; } } /* it needs the free right half of the photo */

/* ---- story: text left, night map stage right ---- */
.onas-story { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
  .onas-story { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  /* the stage stays beside the text while the terms are read (only where it fits under the header) */
  .onas-mapa { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.onas-story__intro { margin-top: var(--space-md); max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.onas-terms { margin: var(--space-md) 0 0; max-width: var(--measure); border-top: 1px solid var(--border-strong); }
.onas-term { padding: 0.85rem 0 0.95rem; border-bottom: 1px solid var(--border); }
.onas-term dt { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.onas-term dd { margin: 0.25rem 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.onas-warn {
  max-width: var(--measure); margin: var(--space-lg) 0 0; padding: var(--card-pad); display: flex; align-items: center; gap: var(--space-md);
  background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
}
.onas-warn__cislo { flex: none; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--gold-text); }
.onas-warn__text { font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--ink); }
.onas-story__close { max-width: var(--measure); margin-top: var(--space-md); color: var(--ink-soft); }

/* the stage: the product stage's ground (glows + blueprint grid), a drawn map, glass chips, a caption */
.onas-mapa { --onas-glow-gold: rgba(240, 182, 75, 0.2); --onas-glow-blue: rgba(58, 116, 176, 0.42); }
.onas-mapa { margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--scena-border); box-shadow: var(--shadow-md); background: var(--scena-bg); }
.onas-mapa__plocha {
  --pad: clamp(1.1rem, 3vw, 1.6rem);
  position: relative; isolation: isolate; overflow: hidden; color: var(--night-ink);
  background:
    radial-gradient(55% 60% at 84% 6%, var(--onas-glow-gold), transparent 62%),
    radial-gradient(70% 70% at 6% 88%, var(--onas-glow-blue), transparent 58%),
    linear-gradient(160deg, var(--scena-bg-2) 0%, var(--scena-bg) 60%);
}
.onas-mapa__plocha::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-light) 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 38%, #000 0%, transparent 78%); mask-image: radial-gradient(75% 70% at 50% 38%, #000 0%, transparent 78%);
}
.onas-mapa__obraz { padding: clamp(1rem, 3vw, 1.5rem) clamp(0.5rem, 2vw, 1rem) 0; }
.onas-mapa__svg { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; overflow: visible; }
.onas-mapa__mesto { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; fill: var(--gold); }
.onas-mapa__puls { transform-box: fill-box; transform-origin: center; opacity: 0.4; }
.onas-mapa__stitky { list-style: none; margin: 0; padding: 0.35rem var(--pad) 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.onas-mapa__stitok {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.4rem 0.8rem 0.4rem 0.6rem; border-radius: var(--radius-pill);
  background: rgba(12, 27, 44, 0.32); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.25; color: #fff;
}
.onas-mapa__stitok svg { flex: none; color: rgba(255, 255, 255, 0.8); }
.onas-mapa__stitok--hlavny svg { color: var(--gold); }
.onas-mapa__popis {
  display: flex; flex-direction: column; gap: 0.4rem; margin: clamp(1rem, 2.5vw, 1.4rem) 0 0; padding: clamp(1rem, 2.4vw, 1.25rem) var(--pad) clamp(1.15rem, 2.6vw, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-wrap: balance;
}
.onas-mapa__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold); }

/* ---- promises: four compact cells of one panel, hairlines between them (icon tile, title, text; no scenes) ---- */
.onas-sluby__zoznam {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; overflow: hidden;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) { .onas-sluby__zoznam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onas-sluby__bunka { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-sm) var(--space-md); padding: var(--card-pad); background: var(--surface); }
.onas-sluby__ikona { --s: 3rem; }
.onas-sluby__telo h3 { font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.015em; }
.onas-sluby__telo p { margin: 0.35rem 0 0; max-width: 34rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 700px) {
  .onas-sluby__bunka { padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); gap: var(--space-md); }
  .onas-sluby__telo p { font-size: var(--fs-body); line-height: 1.5; }
}
@media (max-width: 699px) {
  .onas-sluby__bunka { gap: 0.9rem; padding: 1rem var(--space-sm); }
  .onas-sluby__ikona { --s: 2.75rem; }
}

/* ---- "Čo budete mať na konci v ruke": one calm list on the page's night band; from 760 px the two columns
   (the hub's two categories) stand side by side and the hairlines run straight across ---- */
.onas-ruka__zoznam { list-style: none; margin: 0; padding: 0; }
.onas-ruka__zoznam > li { margin: 0; border-top: 1px solid var(--border); }
.onas-ruka__zoznam > li:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 760px) {
  .onas-ruka__zoznam { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--riadkov, 5), auto); column-gap: clamp(2.5rem, 6vw, 5rem); }
  .onas-ruka__zoznam > li.onas-ruka__kon { border-bottom: 1px solid var(--border); }
}
.onas-vystup {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-sm);
  margin-inline: -0.9rem; padding: 0.75rem 0.9rem; border-radius: 12px; color: var(--ink); text-decoration: none; /* the row's box reaches 0.9 rem past the hairlines: room for the hover tint and the focus ring */
}
.onas-vystup:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.onas-vystup__telo { display: block; min-width: 0; }
.onas-vystup__sluzba { display: block; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.onas-vystup__vyrok { display: block; margin-top: 0.25rem; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.onas-vystup__go { display: grid; place-items: center; flex: none; color: var(--ink-faint); }
.onas-vystup__go svg { width: 20px; height: 20px; }
@media (min-width: 760px) { .onas-vystup { padding-block: 1.1rem; column-gap: var(--space-md); } }
/* phones: the arrow is smaller; under 360 px the long German words need its place */
@media (max-width: 559px) { .onas-vystup__go svg { width: 18px; height: 18px; } }
@media (max-width: 359px) { .onas-vystup { grid-template-columns: minmax(0, 1fr); } .onas-vystup__go { display: none; } }

/* ---- what the service handles and what it does not: one panel, two columns ---- */
.onas-hranice__panel { display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (min-width: 800px) { .onas-hranice__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .onas-hranice__stlpec + .onas-hranice__stlpec { border-left: 1px solid var(--border); } }
@media (max-width: 799px) { .onas-hranice__stlpec + .onas-hranice__stlpec { border-top: 1px solid var(--border); } }
.onas-hranice__stlpec { display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); }
.onas-hranice__stlpec--nie { background: var(--bg-soft); }
.onas-hranice__stitok { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-h3); }
.onas-hranice__znak { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.onas-hranice__stlpec--ano .onas-hranice__znak { background: var(--green-soft); color: var(--green-text); }
.onas-hranice__stlpec--nie .onas-hranice__znak { background: var(--bg-sunk); color: var(--ink-soft); }
.onas-zoznam { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: 1px solid var(--border); }
.onas-zoznam li { display: flex; align-items: flex-start; gap: 0.8rem; margin: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-weight: 500; line-height: 1.4; color: var(--ink); }
.onas-zoznam__znak { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-top: 0.1rem; border-radius: 50%; }
.onas-hranice__stlpec--ano .onas-zoznam__znak { background: var(--green-soft); color: var(--green-text); }
.onas-hranice__stlpec--nie .onas-zoznam__znak { background: var(--bg-sunk); color: var(--ink-faint); }
.onas-hranice__pozn { margin: var(--space-md) 0 0; max-width: 28rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.onas-hranice .section-head .lead { max-width: none; }

/* phones: the page is long on a small screen, so its four bodies take the tight section padding, the map stage is a little smaller, rows a little closer */
@media (max-width: 699px) {
  .onas-historia, .onas-sluby, .onas-ruka, .onas-hranice { padding-block: var(--section-y-tight); }
  .onas-story { gap: var(--space-lg); }
  .onas-story__intro { margin-top: var(--space-sm); }
  .onas-term { padding-block: 0.65rem 0.7rem; }
  .onas-warn { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); }
  .onas-mapa__svg { max-width: 18rem; }
  .onas-vystup { padding-block: 0.55rem; }
}

/* ---- motion: the row's hover and the pin's one-off pulse; none of it for people who asked for less ---- */
@media (prefers-reduced-motion: no-preference) {
  .onas-vystup { transition: background-color var(--dur-2) var(--ease); }
  .onas-vystup__go { transition: color var(--dur-1), transform var(--dur-2) var(--ease); }
  @media (hover: hover) {
    /* the same hover as the index rows: a soft tint behind the row and a gold bar on its left edge */
    .onas-vystup::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform var(--dur-2) var(--ease); }
    .onas-vystup:hover { background: var(--row-hover); }
    .onas-vystup:hover::before { transform: scaleY(1); }
    .onas-vystup:hover .onas-vystup__go { color: var(--gold); transform: translateX(4px); }
  }
  html.js .onas-mapa.is-in .sc-plav { animation: floatY 7s ease-in-out 1.2s 3 alternate; }
  html.js .onas-mapa.is-in .onas-mapa__puls { animation: onasPuls 2.8s ease-out calc(1s + var(--n, 0) * 0.9s) 3 both; }
  html.js .onas-mapa.is-in .onas-mapa__stitok { animation: chipIn 0.5s var(--ease) 0.9s both; }
  html.js .onas-mapa.is-in .onas-mapa__stitok:nth-child(2) { animation-delay: 1.05s; }
}
@keyframes onasPuls { from { transform: scale(0.5); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }
/* === /P:onas === */

/* === P:faq === */
/* P-faq (task 87): compact night hero (a title and one line, no counts), a rail of the question groups (a chip row that
   scrolls with the page on phones, a sticky left column from 1000 px), the answer-first accordion on native <details>.
   Without JS everything still works: the details open by hand, the rail is a list of anchors, nothing is hidden. */
.faq { --faq-inset: 0.75rem; --faq-q: clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem); --faq-scroll: 0px; padding-top: 0; }

/* hero: the shared compact hero sets size and padding; the title keeps one line */
.faq-hero h1 { max-width: none; }

/* rail: phones = a chip row under the hero (NOT sticky: header + strip + dock would pin a quarter of a small screen);
   from 1000 px = sticky left column */
.faq-layout { display: block; }
.faq-rail {
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.faq-nav__title { display: none; }
.faq-nav__list {
  display: flex; gap: 0.5rem; list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0.5rem var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.faq-nav__list::-webkit-scrollbar { display: none; }
.faq-nav__list li { flex: none; scroll-snap-align: start; }
.faq-nav__link {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.faq-nav__link[aria-current] { background: var(--navy-600); border-color: var(--navy-600); color: var(--bg); }
.faq-help { display: none; }

/* groups */
.faq-main { padding-top: var(--space-lg); }
.faq-group { scroll-margin-top: var(--faq-scroll); }
.faq-group + .faq-group { margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.faq-group__head { margin-bottom: 1.25rem; }
.faq-group__head h2 { font-size: var(--fs-h2); } /* the shared H2 size, as on every other page */
.faq-group__head .eyebrow { display: block; } /* plain text flow: a long topic name wraps like a sentence */

/* accordion: hairline rows; the open item is a card with a rail on its left edge. The rows bleed by --faq-inset on
   both sides, so the text lines up with the group heading while the card has room around it. */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { position: relative; margin-inline: calc(var(--faq-inset) * -1); padding-inline: var(--faq-inset); border-radius: var(--radius); scroll-margin-top: var(--faq-scroll); }
.faq-item::after { content: ""; position: absolute; inset: auto var(--faq-inset) 0; height: 1px; background: var(--border); pointer-events: none; }
.faq-item::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 3px; border-radius: 3px; background: var(--navy-600); opacity: 0; transform: scaleY(0.4); transform-origin: top; pointer-events: none; }
.faq-item[open]:not(.is-closing) { margin-block: 0.5rem; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.faq-item[open]:not(.is-closing)::before { opacity: 1; transform: none; }
.faq-item[open]:not(.is-closing)::after { opacity: 0; }
.faq-item:target { outline: 2px solid color-mix(in srgb, var(--navy-600) 55%, transparent); outline-offset: 2px; } /* arrived by a link: marked (no JS: the item is found, opening it is a click) */

.faq-item__q {
  display: grid; grid-template-columns: minmax(0, 1fr) 2rem; column-gap: 1rem; align-items: start; align-content: center;
  min-height: 4rem; margin-inline: calc(var(--faq-inset) * -1); padding: 1.125rem var(--faq-inset);
  border-radius: var(--radius); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }
.faq-item__q:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.faq-item__main { display: block; min-width: 0; }
.faq-item__title { display: block; font-family: var(--font-display); font-size: var(--faq-q); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }

/* bordered plus: fills navy on hover, turns into a cross while the item is open */
.faq-item__icon {
  position: relative; width: 2rem; height: 2rem; margin-top: calc((var(--faq-q) * 1.3 - 2rem) / 2);
  border: 1px solid var(--border-strong); border-radius: 50%; color: var(--ink);
}
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 2px; margin: -1px 0 0 -0.375rem; border-radius: 2px; background: currentColor; }
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item[open]:not(.is-closing) .faq-item__icon { transform: rotate(45deg); background: var(--navy-600); border-color: var(--navy-600); color: var(--bg); }

/* answer-first line: the first sentence of the answer, only while the item is closed (build-time text, aria-hidden;
   the summary points at it with aria-describedby). It folds away as the item opens. */
.faq-item__peek-wrap { display: grid; grid-template-rows: 1fr; margin-top: 0.375rem; }
.faq-item__peek {
  min-height: 0; max-width: 70ch; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft);
}
.faq-item__peek strong { font-weight: 600; color: var(--ink); }
.faq-item[open] .faq-item__peek-wrap { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.faq-item.is-closing .faq-item__peek-wrap { grid-template-rows: 1fr; margin-top: 0.375rem; opacity: 1; }

.faq-item__body { padding: 0 3rem 1.5rem 0; color: var(--ink); }
.faq-item__body p { max-width: 62ch; line-height: 1.65; }
.faq-item__body strong { color: var(--ink); }

@media (hover: hover) {
  .faq-item__q:hover .faq-item__title { color: var(--link); }
  .faq-item:not([open]) > .faq-item__q:hover { background: var(--row-hover); }
  .faq-item__q:hover .faq-item__icon { background: var(--navy-600); border-color: var(--navy-600); color: var(--bg); }
  .faq-nav__link:hover { border-color: var(--navy-600); }
}

@media (max-width: 699px) {
  .faq-item__body { padding-right: 0; }
  .faq-item__q { column-gap: 0.75rem; }
}

@media (min-width: 1000px) {
  .faq { --faq-inset: 1.25rem; padding-top: var(--section-y-tight); }
  .faq-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
  .faq-rail { position: sticky; top: calc(var(--header-h) + 2rem); margin: 0; padding: 0; background: none; border: 0; }
  .faq-main { padding-top: 0; } /* the list runs to the container's edge: only the answer text keeps a measure */
  .faq-item { margin-right: 0; } /* the rows and the open card end on the container's edge (they bleed only to the left, into the gap beside the rail) */
  .faq-item__q { margin-right: calc(var(--faq-inset) * -1); }
  .faq-item::after { right: 0; }
  .faq-nav__title { display: block; margin: 0 0 0.75rem 0.75rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
  .faq-nav__list { display: grid; gap: 0.125rem; margin: 0; padding: 0; overflow: visible; }
  .faq-nav__link {
    position: relative; width: 100%; justify-content: flex-start; gap: 1rem; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--ink-soft); font-size: 0.9375rem; white-space: normal;
  }
  .faq-nav__link::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 3px; border-radius: 3px; background: var(--navy-600); opacity: 0; }
  .faq-nav__link[aria-current] { background: var(--navy-100); border: 0; color: var(--ink); }
  .faq-nav__link[aria-current]::before { opacity: 1; }
  .faq-help { display: block; margin-top: var(--space-lg); padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .faq-help__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
  .faq-help__rows { list-style: none; margin: 0.5rem 0 1rem; padding: 0; }
  .faq-help__rows a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding-block: 0.25rem; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
  .faq-help__rows a:hover { color: var(--link); text-decoration: underline; }
  .faq-help__rows small { display: block; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; color: var(--ink-faint); }
}

@keyframes faq-ping { from { outline-color: color-mix(in srgb, var(--navy-600) 55%, transparent); } to { outline-color: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .faq-item { transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), margin var(--dur-2) var(--ease); }
  .faq-item::before { transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease); }
  .faq-item::after { transition: opacity var(--dur-2) var(--ease); }
  .faq-item__icon { transition: transform var(--dur-2) var(--ease), background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .faq-item__peek-wrap { transition: grid-template-rows 0.28s var(--ease), margin-top 0.28s var(--ease), opacity 0.2s var(--ease); }
  .faq-nav__link { transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .faq-item:target { animation: faq-ping 2.6s var(--ease) 0.4s both; } /* the mark fades out */
}
/* === /P:faq === */

/* === P:kontakt === */
/* P-kontakt (task 87). Compact night hero with tap-to-call, one grouped form card, the contact sheet (before the form
   on phones), the after-submit panel and the money timeline "Platíte až po podaní". Colours through tokens only. */

/* hero: the shared compact hero sets the title size and the padding; here only the layout: text left, the two actions
   right from 960; below that the contact card under the hero carries them */
.page-hero--kontakt .page-hero__inner { max-width: none; display: grid; gap: var(--space-sm) var(--space-xl); }
.page-hero--kontakt .kh__text h1 { max-width: none; }
.page-hero--kontakt .kh__text .lead { max-width: 46rem; font-size: var(--fs-body); } /* body-size lead: it stays one line beside the two buttons */
.kh__akcie { display: none; }
@media (min-width: 960px) {
  .page-hero--kontakt .page-hero__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .kh__akcie { display: flex; flex-direction: column; gap: 0.6rem; }
}

/* form card + contact sheet. Phones: sheet card, form, then tip and checklist (DOM = form, sheet; CSS order). */
.kontakt-mriezka { display: grid; gap: var(--space-md); }
@media (max-width: 959px) {
  .kbok { display: contents; }
  .kbok__karta { order: -1; }
  .kbok__vsetko { order: 1; }
}
@media (min-width: 960px) {
  .kontakt-mriezka { grid-template-columns: minmax(0, 45rem) minmax(0, 24rem); justify-content: space-between; align-items: start; gap: var(--space-xl); }
  .kbok { position: sticky; top: calc(var(--header-h) + 1.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
}

.kf-wrap { position: relative; }
.kf { padding: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.kf__hlava { margin-bottom: var(--space-md); }
.kf__nadpis { font-size: var(--fs-h3); }
.kf__podnadpis { margin-top: 0.35rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.kf__skupina { display: grid; gap: var(--space-md); }
.kf__skupina + .kf__skupina { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.kf__riadok { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .kf__riadok { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kf-pole { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.kf-pole label, .kf-kedy legend { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); line-height: 1.35; color: var(--ink); }
.kf-opt { display: inline-block; margin-left: 0.25rem; padding: 0.05rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-soft); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; line-height: 1.5; color: var(--ink-faint); white-space: nowrap; vertical-align: 0.05em; }
.kf-hint { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.kf-pole input, .kf-pole textarea, .kf-pole select { width: 100%; min-height: 3.25rem; padding: 0.8rem 0.95rem; font: inherit; font-size: 1rem; /* 16 px: no zoom on iOS */ color: var(--ink); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-sm); transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.kf-pole select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237f8c99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}
.kf-pole textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.kf-pole input:focus, .kf-pole textarea:focus, .kf-pole select:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--ring); }
.kf-pole [aria-invalid="true"] { border-color: var(--signal); }
.kf-pole [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 28%, transparent); }
.kf-chyba { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; font-size: var(--fs-small); font-weight: 500; line-height: 1.45; color: var(--signal-text); }
.kf-chyba::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; border-radius: 50%; background: var(--signal-text); color: var(--surface); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; line-height: 1; }
.kf-chyba[hidden], .kf-cena[hidden], .kf-panel[hidden] { display: none; }
.kf-cena { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.kf-cena strong { color: var(--ink); }

/* "Kedy to potrebujete?" as four radio cards: the input covers its card (native keyboard and arrow keys), the card draws the state */
.kf-kedy { min-width: 0; margin: 0; padding: 0; border: 0; }
.kf-kedy legend { padding: 0; margin-bottom: 0.6rem; }
.kf-kedy__mriezka { display: grid; gap: 0.6rem; }
@media (min-width: 520px) { .kf-kedy__mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kf-karta { position: relative; display: block; cursor: pointer; }
.kf-karta input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.kf-karta__telo { display: flex; align-items: center; gap: 0.75rem; height: 100%; min-height: 3.5rem; padding: 0.6rem 0.9rem; border: 1px solid var(--border-input); border-radius: var(--radius); background: var(--surface); transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1); }
.kf-karta__znak { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 1.5px solid var(--border-input); border-radius: 50%; color: transparent; transition: background var(--dur-1), border-color var(--dur-1); }
.kf-karta__text { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--ink); }
.kf-karta:hover .kf-karta__telo { border-color: var(--navy-600); }
.kf-karta input:checked + .kf-karta__telo { border-color: var(--gold-deep); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.kf-karta input:checked + .kf-karta__telo .kf-karta__znak { border-color: var(--gold); background: var(--gold); color: #0c1b2c; }
.kf-karta input:focus-visible + .kf-karta__telo { outline: 2px solid var(--focus); outline-offset: 2px; }

/* submit + the hand-over row that says what the button really does */
.kf__odoslanie { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.kf__odoslanie .btn { justify-self: start; }
.kf-odovzdanie { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-soft); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.kf-odovzdanie p { margin: 0; }
.kf-odovzdanie strong { color: var(--ink); }
.kf-odovzdanie__ikona { flex: none; margin-top: 0.1rem; color: var(--navy-600); }
.kf__privacy { margin: var(--space-md) 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-faint); }
@media (max-width: 640px) { .kf__odoslanie .btn { justify-self: stretch; width: 100%; } }

/* after submit: the composed message, ready to copy for people whose e-mail program did not open */
.kf-panel { margin-top: var(--space-md); padding: var(--card-pad); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--bg-soft); }
.kf-panel__lead { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.kf-panel__meta { display: grid; gap: 0.3rem; margin: var(--space-sm) 0 0; font-size: var(--fs-small); }
.kf-panel__meta > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; }
.kf-panel__meta dt { color: var(--ink-faint); }
.kf-panel__meta dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.kf-panel__stitok { display: block; margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.kf-panel__stitok + .kf-hint { margin-top: 0.15rem; }
.kf-panel__text { display: block; width: 100%; margin-top: 0.5rem; padding: 0.8rem 0.95rem; font: inherit; font-size: var(--fs-small); line-height: 1.55; color: var(--ink); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-sm); resize: vertical; }
.kf-panel__text:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--ring); }
.kf-panel__akcie { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-sm); }
.kf-panel__stav { margin: 0.65rem 0 0; font-size: var(--fs-small); font-weight: 500; color: var(--green-text); }
.kf-panel__stav:empty { margin: 0; }
@media (max-width: 520px) { .kf-panel__akcie .btn { flex: 1 1 100%; } }

/* contact sheet: sticky beside the form from 960, a card under the hero on phones; tip and checklist follow the form there */
.kbok__karta, .kbok__vsetko { padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.kbok .eyebrow { color: var(--ink-soft); }
.kbok__riadky { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.kbok__riadky li { margin: 0; }
.kbok__riadok { display: flex; align-items: center; gap: 0.9rem; min-height: 3.5rem; padding: 0.55rem 0.9rem 0.55rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); color: var(--ink); text-decoration: none; transition: border-color var(--dur-1), background var(--dur-1); }
.kbok__riadok:hover { border-color: var(--navy-600); background: var(--surface); }
.kbok__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.kbok__popis { font-size: var(--fs-label); color: var(--ink-faint); }
.kbok__hodnota { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.kbok__sipka { flex: none; color: var(--ink-faint); transition: transform var(--dur-2) var(--ease), color var(--dur-1); }
.kbok__riadok:hover .kbok__sipka { color: var(--navy-600); transform: translateX(3px); }
.kbok__tip { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 var(--space-md); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.pripravit { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.pripravit li { margin: 0; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px dashed var(--border-strong); font-size: var(--fs-small); line-height: 1.5; }
.pripravit li:first-child { border-top: 0; }
@media (min-width: 960px) {
  .kbok__karta, .kbok__vsetko { padding: 1.5rem; border: 0; border-radius: 0; background: none; }
  .kbok__vsetko { border-top: 1px solid var(--border); }
}

/* money timeline "Platíte až po podaní": five nodes of one size, "0 € dnes" in the text of the first step, the gold seal at the invoice */
.peniaze { list-style: none; margin: 0; padding: 0; display: grid; }
.peniaze__krok { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.1rem; margin: 0; padding-bottom: var(--space-md); }
.peniaze__krok:last-child { padding-bottom: 0; }
.peniaze__krok::before { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--navy-600) 28%, transparent); }
.peniaze__krok:last-child::before { display: none; }
.peniaze__krok:nth-last-child(2)::before { background: linear-gradient(180deg, color-mix(in srgb, var(--navy-600) 28%, transparent), var(--gold)); }
.peniaze__znak { display: block; grid-column: 1; grid-row: 1; position: relative; z-index: 1; width: 3rem; height: 3rem; }
.peniaze__cislo { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid color-mix(in srgb, var(--navy-600) 40%, transparent); border-radius: 50%; background: var(--surface); color: var(--navy-700); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color 0.5s var(--ease) 0.15s, background 0.5s var(--ease) 0.15s; }
.peniaze__krok.is-in .peniaze__cislo { border-color: var(--gold); background: var(--gold-soft); }
.peniaze__peciat { display: block; width: 100%; height: 100%; overflow: visible; transform-box: fill-box; transform-origin: center; }
.peniaze__peciat-kruh { fill: var(--gold); }
.peniaze__peciat-ring { stroke: var(--night); opacity: 0.5; }
.peniaze__peciat-fajka { stroke: var(--night); }
.peniaze__krok--faktura .peniaze__znak { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--gold) 45%, transparent)); }
.peniaze__telo { grid-column: 2; grid-row: 1; padding-top: 0.45rem; }
.peniaze__nazov { font-size: var(--fs-h3); line-height: 1.25; }
.peniaze__text { max-width: 36rem; margin: 0.4rem 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.peniaze__tag { display: inline-block; margin: 0.75rem 0 0; padding: 0.3rem 0.9rem; border: 1px solid var(--gold); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--ink); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 900px) {
  .peniaze { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .peniaze__krok { display: block; padding: 0 1.25rem 0 0; }
  .peniaze__krok::before { left: 3.75rem; right: 0.75rem; top: calc(1.5rem - 1px); bottom: auto; width: auto; height: 2px; }
  .peniaze__krok:nth-last-child(2)::before { background: linear-gradient(90deg, color-mix(in srgb, var(--navy-600) 28%, transparent), var(--gold)); }
  .peniaze__telo { padding-top: 1.1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .peniaze__krok::before { transform: scaleY(0); transform-origin: top; transition: transform 0.8s var(--ease) 0.35s; }
  html.js .peniaze__krok.is-in::before { transform: none; }
  html.js .peniaze__krok--faktura.is-in .peniaze__peciat { animation: stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  html.js .peniaze__krok::before { transform: scaleX(0); transform-origin: left; }
}
/* === /P:kontakt === */

/* === P:legal === */
/* P-legal (task 87, audit/kontakt-legal.md): the documents hub, the eight documents (contents, hung clause numbers,
   print), the two forms on paper, and the 404. The rules that section 22 used to hold for these are replaced here. */

/* ---- title block of the hero: effective date, version, print (documents and the hub) ---- */
.dokument-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.dm { display: flex; margin: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; }
.dm__bunka { margin: 0; padding: 0.55rem 1.1rem 0.6rem; }
.dm__bunka + .dm__bunka { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.dm dt { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.4; color: var(--night-ink-soft); }
.dm dd { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dokument-meta__pozn { font-size: var(--fs-small); color: var(--night-ink-soft); }
.doc-print[hidden] { display: none; }
.doc-print svg { color: var(--gold); }
.doc-hero .page-hero__graphic { width: clamp(220px, 21vw, 300px); }
/* the two hero graphics of this package are static: with the entrance animation they were missing from full-page captures */
html.js .doc-hero .page-hero__graphic, html.js .notfound .page-hero__graphic { animation: none; }
.doc-hero h1 { max-width: 30ch; }
.doc-hero .lead { max-width: 44rem; }
/* phones, a document: the trail "Domov / Dokumenty / <title>" would wrap with the separator opening line two, and the last
   item only repeats the title below it, so one back link "‹ Dokumenty" stays (the full trail is still in the markup) */
@media (max-width: 639px) {
  .doc-hero--doc .breadcrumbs li { display: none; }
  .doc-hero--doc .breadcrumbs li:nth-last-child(2) { display: block; }
  .doc-hero--doc .breadcrumbs li::before { content: none; }
  .doc-hero--doc .breadcrumbs a { display: inline-flex; align-items: center; gap: 0.35rem; padding-inline: 0.5rem 0.75rem; margin-inline: -0.5rem; }
  .doc-hero--doc .breadcrumbs a::before { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* ---- documents hub: three groups, a row per document (icon tile, name, tag, one line of text) ---- */
.dokumenty { display: grid; gap: clamp(2.75rem, 5vw, 4.5rem); }
.dokumenty__skupina { display: grid; gap: var(--space-sm) var(--space-xl); align-content: start; }
.dokumenty__skupina > h2 { font-size: var(--fs-h3); line-height: 1.2; }
@media (min-width: 960px) {
  .dokumenty__skupina { grid-template-columns: 14rem minmax(0, 1fr); }
  .dokumenty__skupina > h2 { padding-top: 1.15rem; }
}
.dokumenty__zoznam { list-style: none; margin: 0; padding: 0; } /* runs to the container's right edge, like the header's button above it */
.dokumenty__zoznam > li { margin: 0; }
.dokumenty__odkaz {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto 1.25rem;
  grid-template-areas: "ik nazov tagy sipka" "ik popis popis sipka";
  column-gap: 1.1rem; row-gap: 0.3rem; align-items: baseline;
  padding: 1.1rem 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none;
}
.dokumenty__zoznam > li:last-child .dokumenty__odkaz { border-bottom: 1px solid var(--border); }
/* the same hover language as the service rows: a soft pill, a gold rule, the tile turns gold, the arrow moves 4 px */
.dokumenty__odkaz::before { content: ""; position: absolute; inset: 4px -0.9rem; z-index: -1; border-radius: 12px; background: var(--row-hover); opacity: 0; transition: opacity 0.2s var(--ease); }
.dokumenty__odkaz:hover::before, .dokumenty__odkaz:focus-visible::before { opacity: 1; }
.dokumenty__odkaz::after { content: ""; position: absolute; left: -0.9rem; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 0.2s var(--ease); }
.dokumenty__odkaz:hover::after, .dokumenty__odkaz:focus-visible::after { transform: scaleY(1); }
.dokumenty__ikona { grid-area: ik; align-self: start; display: grid; place-items: center; --s: 2.6rem; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: var(--navy-100); color: var(--navy-700); transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--ease); }
.dokumenty__odkaz:hover .dokumenty__ikona, .dokumenty__odkaz:focus-visible .dokumenty__ikona { background: var(--gold); color: #0c1b2c; transform: translateX(3px); }
.dokumenty__nazov { grid-area: nazov; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); transition: color 0.15s; }
.dokumenty__odkaz:hover .dokumenty__nazov, .dokumenty__odkaz:focus-visible .dokumenty__nazov { color: var(--link); }
.dokumenty__popis { grid-area: popis; max-width: 40rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.dokumenty__tagy { grid-area: tagy; align-self: center; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.dokumenty__tag { font-size: var(--fs-small); color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dokumenty__tag--formular { padding: 0.18rem 0.7rem; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--gold-text); font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.dokumenty__sipka { grid-area: sipka; align-self: center; justify-self: end; color: var(--ink-faint); transition: transform 0.2s var(--ease), color 0.2s; }
.dokumenty__odkaz:hover .dokumenty__sipka, .dokumenty__odkaz:focus-visible .dokumenty__sipka { transform: translateX(4px); color: var(--link); }
@media (max-width: 680px) {
  .dokumenty__odkaz { grid-template-columns: 2.3rem minmax(0, 1fr); grid-template-areas: "ik nazov" "ik popis" "ik tagy"; column-gap: 0.85rem; padding-block: 1rem; }
  .dokumenty__ikona { --s: 2.3rem; }
  .dokumenty__ikona svg { width: 18px; height: 18px; }
  .dokumenty__nazov { font-size: var(--fs-body); }
  .dokumenty__tagy { justify-content: flex-start; margin-top: 0.2rem; }
  .dokumenty__sipka { display: none; }
  .dokumenty__odkaz::before { inset: 3px -0.6rem; }
  .dokumenty__odkaz::after { left: -0.6rem; }
}

/* ---- a document: contents column + a reading column of --measure with hung numbers ---- */
.doc-body { --cl-hang: 3.25rem; --doc-w: calc(var(--measure) + var(--cl-hang)); padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) var(--section-y-tight); }
.doc-hub { padding-top: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }
.doc-body--papier { --doc-w: calc(var(--measure) + var(--cl-hang) + 2 * clamp(1.25rem, 3.5vw, 3rem)); background: var(--bg-soft); }
@media (max-width: 639px) { .doc-body { --cl-hang: 0rem; } }
.doc-main { min-width: 0; max-width: var(--doc-w); }
/* the contents + reading column pair is centred in the container (no dead strip on one side); from 900 to 1099 px the
   reading column and the contents <details> are centred on their own, narrower than that they hang off the left edge
   like the hero text above them (the strip left over is under 70 px) */
@media (min-width: 900px) { .doc-fold, .doc-main { margin-inline: auto; } }
@media (min-width: 1100px) {
  .doc-layout { display: grid; grid-template-columns: 15rem minmax(0, var(--doc-w)); justify-content: center; gap: clamp(3rem, 5vw, 5rem); align-items: start; }
  .doc-main { margin-inline: 0; }
}

/* contents: a sticky column from 1100 px, a native <details> below; without JS both are plain links */
.doc-toc { display: none; }
.doc-fold { max-width: var(--doc-w); margin-bottom: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.doc-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.5rem 1.1rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; }
.doc-fold summary::-webkit-details-marker { display: none; }
.doc-fold summary::after { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--ink-faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.25s var(--ease); }
.doc-fold[open] summary::after { transform: rotate(180deg); }
.doc-fold nav { max-height: min(60vh, 28rem); overflow-y: auto; padding: 0 1.1rem 0.9rem; border-top: 1px solid var(--border); }
.doc-fold .toc { padding-top: 0.5rem; }
@media (min-width: 1100px) {
  .doc-fold { display: none; }
  .doc-toc { display: block; position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); max-height: calc(100dvh - var(--header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.doc-toc__nadpis { margin-bottom: 0.6rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { position: relative; display: block; min-height: 2.75rem; padding: 0.5rem 0.5rem 0.5rem calc(0.9rem + 2rem); border-left: 2px solid var(--border); font-size: var(--fs-small); line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1); }
.toc a:hover { background: var(--row-hover); border-left-color: var(--border-strong); color: var(--ink); }
.toc a[aria-current="true"] { border-left-color: var(--gold); color: var(--ink); font-weight: 600; }
.toc__n { position: absolute; left: 0.9rem; top: 0.5rem; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
@media (min-width: 1100px) { .toc a { min-height: 0; padding-block: 0.42rem; } .toc__n { top: 0.42rem; } }

/* the reading column: 17 px (16 on phones), --measure wide, clause numbers hung in a narrow left column */
.doc-article { max-width: calc(var(--measure) + var(--cl-hang)); padding-left: var(--cl-hang); font-size: 1rem; line-height: 1.7; }
.doc-article p, .doc-article li { font-size: 1rem; line-height: 1.7; }
@media (min-width: 640px) { .doc-article p, .doc-article li { font-size: 1.0625rem; } }
.cl-intro p { font-size: 1.125rem; line-height: 1.65; }
.cl-intro p + p { margin-top: 1rem; }
.cl-art { margin-top: clamp(2.25rem, 3vw, 3rem); padding-top: clamp(1.25rem, 2vw, 1.75rem); border-top: 1px solid var(--border); }
.cl-intro + .cl-art { margin-top: clamp(2rem, 3vw, 2.75rem); }
.cl-head { position: relative; display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.1rem; }
.cl-head h2 { position: relative; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
.cl-art p, .cl-art ul, .cl-art .formular { margin-top: 1rem; }
.cl-art p.cl { position: relative; }
.cl-art ul { margin-top: 0.7rem; padding-left: 1.25em; }
.cl-art > .cl-head + * { margin-top: 0; }
.cl-art li { margin-top: 0.45rem; padding-left: 0.2em; }
.cl-art li::marker { color: var(--ink-faint); }
.cl-n { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-faint); }
.cl-head .cl-n { font-weight: 600; }
@media (min-width: 640px) {
  .cl-art .cl-n { position: absolute; left: calc(-1 * var(--cl-hang)); width: calc(var(--cl-hang) - 0.6rem); top: 0; white-space: nowrap; }
}
@media (max-width: 639px) { .cl-art p.cl .cl-n { font-weight: 600; } .cl-head .cl-n { margin-right: 0.15em; } }

/* a link to the article (visible on hover and keyboard focus), and on smaller screens one back to the contents */
.cl-anchor { display: none; }
@media (hover: hover) {
  .cl-anchor { position: relative; flex: none; display: inline-grid; place-items: center; align-self: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; color: var(--ink-faint); opacity: 0; transition: opacity var(--dur-1), background var(--dur-1), color var(--dur-1); }
  .cl-anchor::after { content: ""; position: absolute; inset: -0.5rem; } /* a 44 px tap area around the 28 px mark, no layout shift */
  .cl-anchor::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E") center / contain no-repeat; }
  .cl-head:hover .cl-anchor, .cl-anchor:focus-visible { opacity: 1; }
  .cl-anchor:hover { background: var(--row-hover); color: var(--link); }
}
.cl-up { flex: none; display: inline-grid; place-items: center; align-self: center; width: 2.75rem; height: 2.75rem; margin: -0.7rem 0 -0.7rem auto; border-radius: var(--radius-sm); color: var(--ink-faint); }
.cl-up:hover { color: var(--link); background: var(--row-hover); }
@media (min-width: 1100px) { .cl-up { display: none; } }

/* ---- forms on paper: a label and its writing line share one baseline (the rule is the bottom of the row, the label stands
   on it); every row is at least one --fx-row tall; short labels side by side; long answers on three ruled lines ---- */
.formular { --fx-row: 3.25rem; position: relative; display: grid; padding: clamp(1rem, 2.6vw, 1.5rem) clamp(1rem, 3vw, 1.75rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.formular__riadok { display: grid; grid-template-columns: minmax(8.5rem, 14rem) minmax(0, 1fr); gap: 0 1.25rem; align-items: end; min-height: var(--fx-row); }
.formular__riadok > span:first-child { display: grid; align-content: end; padding-bottom: 0.2rem; font-size: var(--fs-small); line-height: 1.3; color: var(--ink-soft); }
.formular__pole { align-self: stretch; min-height: var(--fx-row); border-bottom: 1px solid var(--border-input); }
.formular__skupina { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 0 1.75rem; }
.formular__skupina--2 { --n: 2; }
.formular__skupina--3 { --n: 3; }
.formular__skupina .formular__riadok { grid-template-columns: auto minmax(0, 1fr); gap: 0 0.8rem; }
/* a long answer: three ruled lines; the label stands on the first one */
.formular__riadok--dlhy { align-items: start; }
.formular__riadok--dlhy > span:first-child { min-height: var(--fx-row); }
.formular__riadok--dlhy .formular__pole { position: relative; min-height: calc(3 * var(--fx-row)); }
.formular__riadok--dlhy .formular__pole::before, .formular__riadok--dlhy .formular__pole::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-input); }
.formular__riadok--dlhy .formular__pole::before { top: calc(var(--fx-row) - 1px); }
.formular__riadok--dlhy .formular__pole::after { top: calc(2 * var(--fx-row) - 1px); }
@media (max-width: 599px) {
  .formular { --fx-row: 2.75rem; }
  .formular__riadok, .formular__skupina .formular__riadok { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .formular__skupina { grid-template-columns: minmax(0, 1fr); }
  .formular__riadok > span:first-child { padding-top: 0.5rem; padding-bottom: 0.15rem; }
  .formular__riadok--dlhy > span:first-child { min-height: 0; }
}
/* a document that is mostly a form (the complaint protocol) is one sheet; the forms inside it need no sheet of their own */
.doc-article--papier { position: relative; --pad: clamp(1.25rem, 3.5vw, 3rem); max-width: var(--doc-w); padding: var(--pad) var(--pad) var(--pad) calc(var(--pad) + var(--cl-hang)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.doc-article--papier .formular { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.doc-article--papier .cl-intro + .cl-art { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }

/* ---- related documents ---- */
.suvisiace { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.suvisiace__nadpis { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.suvisiace ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.75rem; }
.suvisiace li { margin: 0; }
.suvisiace__karta { display: flex; align-items: center; gap: 0.8rem; min-height: 4rem; height: 100%; padding: 0.7rem 0.95rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; transition: border-color 0.15s, transform 0.2s var(--ease); }
.suvisiace__karta:hover { border-color: var(--navy-600); transform: translateY(-2px); }
.suvisiace__ikona { --s: 2.25rem; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: var(--navy-100); color: var(--navy-700); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.suvisiace__karta:hover .suvisiace__ikona { background: var(--gold); color: #0c1b2c; }
.suvisiace__vsetky { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; padding-inline: 0.25rem; font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.suvisiace__vsetky svg { transition: transform 0.2s var(--ease); }
.suvisiace__vsetky:hover svg { transform: translateX(4px); }

/* ---- 404 ---- */
/* The right half of the hero is the "Mitteilung" scene; its left edge, the left edge of the Kontakt block below and the
   third column line of the footer (services | services | company) are one line: the right column is 44.872 % of the
   content width + 0.1026 x --space-xl - 0.5 x --space-md wide (the footer grid is 1.15fr 2fr .75fr with --space-xl gaps and
   two sub-columns 2fr / 2 with --space-md between them). The hero text keeps clear of it. */
.notfound h1 { max-width: 13ch; }
.notfound__scene { position: relative; aspect-ratio: 560 / 300; }
.notfound__scene .scena-svg--mini { left: -10%; width: 120%; } /* the drawing has wide empty margins: a little larger, still centred */
/* tablets (760-1024 px): the scene stays, smaller, so the hero keeps a right half there too */
@media (min-width: 760px) and (max-width: 1024px) {
  .notfound .page-hero__inner { max-width: calc(100% - clamp(17rem, 40vw, 24rem) - var(--space-md)); }
  .notfound .page-hero__graphic { display: block; position: absolute; right: var(--gutter); top: 50%; width: clamp(17rem, 40vw, 24rem); transform: translateY(-50%); pointer-events: none; }
}
@media (min-width: 1025px) {
  .notfound .page-hero__inner { max-width: calc(55.128% - 1.1026 * var(--space-xl) + 0.5 * var(--space-md)); }
  .notfound .page-hero__graphic { right: var(--gutter); width: calc(44.872% - 0.8974 * var(--gutter) + 0.1026 * var(--space-xl) - 0.5 * var(--space-md)); }
}
.notfound__mriezka { display: grid; gap: var(--space-xl); }
@media (min-width: 1140px) { /* from here the footer has three columns; below, the contact block sits under the services */
  .notfound__mriezka { grid-template-columns: minmax(0, 1fr) calc(44.872% + 0.1026 * var(--space-xl) - 0.5 * var(--space-md)); column-gap: var(--space-xl); align-items: start; }
}
.notfound__ponuka h2 { margin-bottom: var(--space-md); font-size: var(--fs-h3); }
/* the ten services: two columns of equal cells, one height per row */
.notfound__sluzby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; }
.notfound__sluzby li { margin: 0; }
.notfound__sluzby .chip { display: flex; width: 100%; height: 100%; min-height: 3.25rem; }
@media (max-width: 559px) { /* phones: one column (two would wrap "Potvrdenie o daňovej rezidencii" onto three lines) */
  .notfound__sluzby { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .notfound__sluzby .chip { min-height: 3rem; }
}
.notfound__kontakt .kontakt-riadky { margin-top: 0; }

/* ---- motion: nothing moves for people who asked for less ---- */
@media (prefers-reduced-motion: reduce) {
  .dokumenty__odkaz::before, .dokumenty__odkaz::after, .dokumenty__ikona, .dokumenty__sipka, .suvisiace__karta, .suvisiace__vsetky svg, .toc a, .cl-anchor, .doc-fold summary::after { transition: none; }
  .dokumenty__odkaz:hover .dokumenty__ikona, .dokumenty__odkaz:focus-visible .dokumenty__ikona, .dokumenty__odkaz:hover .dokumenty__sipka, .suvisiace__karta:hover { transform: none; }
}

/* ---- print: black on white, A4 margins, no site chrome, no contents; headings stay with their text ---- */
@page { margin: 18mm 16mm; }
@media print {
  .skip-link, .breadcrumbs, .doc-toc, .doc-fold, .doc-print, .suvisiace, .cl-anchor, .cl-up, .dokument-meta__pozn, .nav-dock, .mobile-bar, .mega-scrim { display: none !important; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .container { max-width: none; padding-inline: 0; }
  .doc-hero { padding: 0; margin-bottom: 6mm; border: 0; border-bottom: 1.5pt solid #000; overflow: visible; }
  .doc-hero .page-hero__inner { max-width: none; padding: 0 0 4mm; animation: none; }
  .doc-hero .page-hero__inner > * { animation: none; }
  .doc-hero h1 { max-width: none; font-size: 18pt; letter-spacing: 0; }
  .doc-hero .lead { max-width: none; margin-top: 2mm; font-size: 10.5pt; }
  .dokument-meta { margin-top: 3mm; }
  .dm { border: 0.5pt solid #000; border-radius: 0; }
  .dm__bunka { padding: 1mm 3mm; }
  .dm__bunka + .dm__bunka { border-left: 0.5pt solid #000; }
  .dm dt { font-size: 7.5pt; letter-spacing: 0.06em; }
  .dm dd { font-size: 10pt; }
  .doc-body { padding: 0; background: #fff; }
  .doc-layout { display: block; }
  .doc-main, .doc-article, .doc-body--papier .doc-main { max-width: none; }
  .doc-article--papier { padding: 0 0 0 var(--cl-hang); border: 0; border-radius: 0; box-shadow: none; }
  .doc-article p, .doc-article li, .cl-intro p { font-size: 10.5pt; line-height: 1.5; }
  .cl-art { margin-top: 7mm; padding-top: 3mm; border-top: 0.5pt solid #000; }
  .cl-art ul { margin-top: 1.5mm; }
  .cl-art p, .cl-art .formular { margin-top: 2.5mm; }
  .cl-art li { margin-top: 1mm; }
  .cl-head { margin-bottom: 2.5mm; break-after: avoid; page-break-after: avoid; }
  .cl-head h2 { font-size: 13pt; break-after: avoid; page-break-after: avoid; }
  .cl-art p, .cl-art li { orphans: 3; widows: 3; }
  .cl-art p.cl .cl-n, .cl-head .cl-n { font-weight: 600; }
  .formular { --fx-row: 2.6rem; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .formular__riadok, .formular__skupina { break-inside: avoid; page-break-inside: avoid; }
  .formular__pole { border-bottom: 0.75pt solid #000 !important; }
  .formular__riadok--dlhy .formular__pole::before, .formular__riadok--dlhy .formular__pole::after { border-top: 0.75pt solid #000; }
  .formular__riadok > span:first-child { font-size: 9.5pt; }
  .notfound__graphic { display: none; }
}
/* === /P:legal === */

/* === P:clanky === */
/* Articles and the glossary (tasks 91/92). The article page is a sibling of the legal documents: the same compact night hero
   (doc-hero, dokument-meta), the same contents column (doc-toc / doc-fold / toc) and reading rhythm; on top of it the pieces an
   article needs: the "V skratke" box, callouts, tables in their own scroll box, the FAQ page's accordion, quiet sources and the
   band with the service card. The index and the glossary speak the documents hub's language: hairline rows, a gold rule and a
   tile that turns gold on hover. Colours are tokens only; every motion is inside prefers-reduced-motion: no-preference. */

/* the header item: an article page marks its section (the index itself carries aria-current) */
.primary-nav > ul > li > a:not(.btn)[data-active="true"] { color: var(--night-ink); }
.primary-nav > ul > li > a:not(.btn)[data-active="true"]::after { transform: scaleX(1); }
/* the fifth item takes ~65 px: from 1100 to 1159 px the tagline stays under the wordmark (as below 1100), so the bar never squeezes the chevron of "Služby" */
@media (min-width: 1100px) and (max-width: 1159px) {
  .site-header[data-articles] .brand__stack { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .site-header[data-articles] .brand__word { font-size: 1.25rem; }
  .site-header[data-articles] .brand__unit { padding-left: 0; border-left: 0; font-size: 0.75rem; line-height: inherit; }
}

/* ---- hero: a title that may run to two or three lines; the date and the print button are the documents' title block ---- */
.clanok-hero h1 { max-width: none; }
/* the trail's links are 44 px tall; the topic's name can be short ("DPH", 31 px wide): the tap area widens, nothing moves */
@media (min-width: 640px) { .clanok-hero .breadcrumbs a, .clanky-hero .breadcrumbs a { padding-inline: 0.5rem; margin-inline: -0.5rem; } }

/* ---- the page: contents column + the reading column (--measure); phones and tablets get the contents as a <details> ---- */
.clanok-body { --doc-w: var(--measure); padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) var(--section-y-tight); }
.clanok-body .doc-fold { margin-inline: 0; }
.clanok-body .toc a { padding-left: 0.9rem; }
.clanok { min-width: 0; max-width: var(--measure); font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
@media (min-width: 900px) and (max-width: 1099px) { .clanok-body .doc-fold, .clanok { margin-inline: auto; } } /* as the documents: the column sits in the middle until the contents column joins it */
@media (min-width: 1100px) {
  .clanok-layout { display: grid; grid-template-columns: 15rem minmax(0, var(--measure)); column-gap: clamp(3rem, 5vw, 5rem); justify-content: center; align-items: start; }
  .clanok-body .toc a { padding-block: 0.42rem; }
}

/* ---- "V skratke": the answer first. A soft box with the dimension line of the heroes and a gold rule at its edge ---- */
.clanok-skratka { position: relative; padding: 1.25rem 1.5rem 1.4rem 1.65rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); }
.clanok-skratka::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 3px; background: var(--gold); }
.clanok-skratka__stitok { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-text); }
.clanok-skratka__stitok::before { content: ""; flex: none; width: 2.1rem; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1.5 1v8M32.5 1v8M1.5 5h31' fill='none' stroke='%23f0b64b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.clanok-skratka__text { margin-top: 0.7rem; font-size: var(--fs-body); font-weight: 500; line-height: 1.6; color: var(--ink); }

/* ---- sections: a hairline above, the heading row of the documents (anchor on hover, "back to contents" on small screens) ---- */
.clanok-sekcia { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: clamp(1.25rem, 2vw, 1.75rem); border-top: 1px solid var(--border); }
.clanok-skratka + .clanok-sekcia { margin-top: clamp(2.25rem, 1.8rem + 1.8vw, 3rem); }
.clanok-sekcia > * + * { margin-top: 1rem; }
.clanok-sekcia > .cl-head { margin-bottom: 0; }
.clanok-sekcia > .cl-head + * { margin-top: 1.1rem; }
.clanok-sekcia > h3 { margin-top: 1.9rem; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.015em; }
.clanok-sekcia > h3 + * { margin-top: 0.6rem; }
.clanok-sekcia > h4 { margin-top: 1.5rem; font-size: var(--fs-body); line-height: 1.35; }
.clanok-sekcia > ul, .clanok-sekcia > .clanok-kroky { margin-top: 1rem; }
.clanok-sekcia > .clanok-callout, .clanok-sekcia > .clanok-tabulka { margin-top: 1.5rem; }
.clanok-callout + *, .clanok-tabulka + * { margin-top: 1.5rem; }
.clanok ul { padding-left: 1.25em; }
.clanok li { margin-top: 0.5rem; padding-left: 0.2em; }
.clanok li::marker { color: var(--navy-600); }
.clanok blockquote:not([class]) { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--border-strong); color: var(--ink-soft); }
.clanok-pojem { text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* steps: an ordered list as the numbered circles of the service pages' steps */
.clanok-kroky { list-style: none; padding: 0; counter-reset: krok; }
.clanok-kroky > li { position: relative; margin-top: 0.8rem; padding-left: 2.9rem; counter-increment: krok; }
.clanok-kroky > li::before {
  content: counter(krok); position: absolute; left: 0; top: 0.1em; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--navy-600) 40%, transparent); background: var(--surface); color: var(--navy-700);
  font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* ---- callouts: Pozor (gold), Príklad (navy), Tip (green): an icon tile, a small label, the text ---- */
.clanok-callout {
  --k: var(--gold-deep); --k-soft: var(--gold-soft); --k-ink: var(--gold-text);
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start;
  padding: 1rem 1.15rem 1.1rem 1rem; border: 1px solid color-mix(in srgb, var(--k) 32%, transparent); border-radius: var(--radius); background: var(--k-soft);
}
.clanok-callout--priklad { --k: var(--navy-600); --k-soft: var(--navy-50); --k-ink: var(--navy-700); }
.clanok-callout--tip { --k: var(--green); --k-soft: var(--green-soft); --k-ink: var(--green-text); }
.clanok-callout__ikona { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: calc(2.25rem * 0.28); background: color-mix(in srgb, var(--k) 20%, transparent); color: var(--k-ink); }
.clanok-callout__telo { min-width: 0; }
.clanok-callout__telo > * + * { margin-top: 0.6rem; }
.clanok-callout__stitok { padding-top: 0.15rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--k-ink); }
.clanok-callout__stitok + p { margin-top: 0.3rem; }

/* ---- tables: their own scroll box (focusable, labelled), a soft header, hairline rows; the shadows at the edges say "more" ---- */
.clanok-tabulka {
  overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border); border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--surface), var(--surface)) left center / 1.25rem 100% no-repeat local,
    linear-gradient(to left, var(--surface), var(--surface)) right center / 1.25rem 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 0.75rem 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 0.75rem 100% no-repeat scroll,
    var(--surface);
}
.clanok-tabulka:focus-visible { outline-offset: 2px; border-radius: var(--radius); }
.clanok-tabulka table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; font-variant-numeric: tabular-nums; }
.clanok-tabulka th, .clanok-tabulka td { padding: 0.7rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.clanok-tabulka thead th { border-top: 0; background: var(--bg-soft); font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.clanok-tabulka tbody th, .clanok-tabulka td:first-child { font-weight: 600; color: var(--ink); }
.clanok-tabulka td:first-child { min-width: 7rem; }
.clanok-tabulka a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
@media (max-width: 639px) { /* every column keeps a readable width, the box scrolls instead */
  .clanok-tabulka th, .clanok-tabulka td { min-width: 8.5rem; padding-inline: 0.8rem; }
  .clanok-tabulka td:first-child { min-width: 9.5rem; }
}

/* ---- the FAQ page's accordion (faq-item, in P:faq) inside the reading column ---- */
.clanok-otazky { --faq-inset: 0.75rem; --faq-q: clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem); --faq-scroll: 0px; }
.clanok-otazky .faq-item__body { padding-right: 0; }
.clanok-otazky .faq-item__body > p + p { margin-top: 0.75rem; }
.clanok-otazky .faq-item__body p { max-width: none; }

/* ---- sources: quiet, numbered, the host under the link; and the line about what the text is ---- */
.clanok-zdroje .cl-head h2 { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.clanok-zdroje__zoznam { list-style: none; margin: 0; padding: 0; counter-reset: zdroj; }
.clanok-zdroje__zoznam > li { position: relative; margin-top: 0; padding: 0.55rem 0 0.55rem 2rem; counter-increment: zdroj; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); border-top: 1px solid var(--border); }
.clanok-zdroje__zoznam > li:first-child { border-top: 0; }
.clanok-zdroje__zoznam > li::before { content: counter(zdroj) "."; position: absolute; left: 0; top: 0.55rem; width: 1.5rem; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.clanok-zdroje__zoznam a { display: inline-block; padding-block: 0.85rem; margin-block: -0.85rem; overflow-wrap: anywhere; }
.clanok-zdroje__host { display: block; font-size: var(--fs-label); color: var(--ink-faint); overflow-wrap: anywhere; }
.clanok-pozn { margin-top: var(--space-lg); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-faint); }

/* ---- the band after the article: the service as a card (and the other services small), more articles of the cluster ---- */
.clanok-dalej { padding-block: var(--section-y-tight); }
.clanok-dalej__nadpis { margin-bottom: var(--space-md); font-size: var(--fs-h3); line-height: 1.2; }
.clanok-dalej__sluzby { display: grid; gap: var(--space-xl); }
.clanok-dalej .svc-grid { margin-top: 0; }
.clanok-dalej__sluzby--sam { max-width: var(--row-max); }
@media (min-width: 681px) and (max-width: 1199px) { .clanok-dalej__ostatne .svc-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .clanok-dalej__sluzby { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .clanok-dalej__sluzby--sam { grid-template-columns: minmax(0, 1fr); }
}
.clanok-dalej__clanky { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.clanok-dalej__hlava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-md); margin-bottom: var(--space-md); }
.clanok-dalej__hlava .clanok-dalej__nadpis { margin-bottom: 0; }
.clanok-dalej__vsetky { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--link); text-decoration: none; }
.clanok-dalej__vsetky:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- a list of articles: hairline rows (the index), cards (the "more articles" band) ---- */
.clanok-zoznam { list-style: none; margin: 0; padding: 0; }
.clanok-zoznam > li { margin: 0; }
.clanok-riadok {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 1.25rem; grid-template-areas: "ik nazov sipka" "ik popis sipka" "ik tag sipka";
  column-gap: 1.1rem; row-gap: 0.3rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none;
}
.clanok-zoznam > li:last-child > .clanok-riadok { border-bottom: 1px solid var(--border); }
.clanok-riadok::before { content: ""; position: absolute; inset: 4px -0.9rem; z-index: -1; border-radius: 12px; background: var(--row-hover); opacity: 0; }
.clanok-riadok::after { content: ""; position: absolute; left: -0.9rem; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); }
.clanok-riadok:hover::before, .clanok-riadok:focus-visible::before { opacity: 1; }
.clanok-riadok:hover::after, .clanok-riadok:focus-visible::after { transform: scaleY(1); }
.clanok-riadok:focus-visible { outline-offset: 2px; border-radius: var(--radius-sm); }
.clanok-riadok__ikona { grid-area: ik; align-self: start; display: grid; place-items: center; --s: 2.6rem; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); background: var(--navy-100); color: var(--navy-700); }
.clanok-riadok:hover .clanok-riadok__ikona, .clanok-riadok:focus-visible .clanok-riadok__ikona { background: var(--gold); color: #0c1b2c; }
.clanok-riadok__nazov { grid-area: nazov; font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.clanok-riadok:hover .clanok-riadok__nazov, .clanok-riadok:focus-visible .clanok-riadok__nazov { color: var(--link); }
.clanok-riadok__popis { grid-area: popis; max-width: 42rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.clanok-riadok__tag { grid-area: tag; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.clanok-riadok__sipka { grid-area: sipka; align-self: center; justify-self: end; color: var(--ink-faint); }
.clanok-riadok:hover .clanok-riadok__sipka, .clanok-riadok:focus-visible .clanok-riadok__sipka { color: var(--link); }
@media (max-width: 680px) {
  .clanok-riadok { grid-template-columns: 2.3rem minmax(0, 1fr); grid-template-areas: "ik nazov" "ik popis" "ik tag"; column-gap: 0.85rem; padding-block: 1rem; }
  .clanok-riadok__ikona { --s: 2.3rem; }
  .clanok-riadok__ikona svg { width: 18px; height: 18px; }
  .clanok-riadok__nazov { font-size: var(--fs-body); }
  .clanok-riadok__sipka { display: none; }
  .clanok-riadok::before { inset: 3px -0.6rem; }
  .clanok-riadok::after { left: -0.6rem; }
}
/* the compact card of the band: icon tile, title, the service */
.clanok-zoznam--stlpce { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .clanok-zoznam--stlpce { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
@media (min-width: 1000px) { .clanok-zoznam--stlpce { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
.clanok-riadok--kratky {
  grid-template-columns: 2.6rem minmax(0, 1fr) 1rem; grid-template-areas: "ik nazov sipka" "ik tag sipka"; align-items: start; column-gap: 0.9rem;
  height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
.clanok-zoznam > li:last-child > .clanok-riadok--kratky { border-bottom: 1px solid var(--border); }
.clanok-riadok--kratky::before, .clanok-riadok--kratky::after { display: none; }
.clanok-riadok--kratky:hover, .clanok-riadok--kratky:focus-visible { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.clanok-riadok--kratky .clanok-riadok__nazov { font-size: var(--fs-body); line-height: 1.3; }
.clanok-riadok--kratky .clanok-riadok__sipka { align-self: start; margin-top: 0.3rem; }
@media (max-width: 680px) { .clanok-riadok--kratky { grid-template-columns: 2.3rem minmax(0, 1fr); grid-template-areas: "ik nazov" "ik tag"; } }

/* ---- the index: a search field (JavaScript only) above a grid of topic cards; a topic page keeps the other topics beside its rows ---- */
.clanky-hub { padding-top: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); }
.clanky { min-width: 0; }

/* search: shown only while JavaScript works (html.js), the grid of topics is the navigation without it */
.clanky-hladanie { display: none; }
.js .clanky-hladanie { display: block; max-width: 46rem; margin-bottom: var(--space-md); }
@media (min-width: 680px) { .js .clanky-hladanie { margin-bottom: var(--space-lg); } }
.clanky-hladanie__pole { position: relative; }
.clanky-hladanie__pole svg { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.clanky-hladanie input {
  width: 100%; min-height: 3.5rem; padding: 0.8rem 1rem 0.8rem 3.1rem; font: inherit; font-size: var(--fs-body); line-height: 1.3; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-sm); -webkit-appearance: none; appearance: none;
}
.clanky-hladanie input::placeholder { color: var(--ink-faint); opacity: 1; }
.clanky-hladanie input:focus { border-color: var(--navy-600); }
.clanky-hladanie__vysledky { margin-top: var(--space-xs); }
.hladanie__zoznam { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.hladanie__zoznam > li { margin: 0; }
.hladanie__odkaz {
  position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 1.25rem;
  min-height: 3rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none;
}
.hladanie__odkaz::before { content: ""; position: absolute; inset: 2px -0.9rem; z-index: -1; border-radius: 12px; background: var(--row-hover); opacity: 0; }
.hladanie__odkaz:hover::before, .hladanie__odkaz:focus-visible::before { opacity: 1; }
.hladanie__odkaz:focus-visible { outline-offset: 2px; border-radius: var(--radius-sm); }
.hladanie__nazov { flex: 1 1 18rem; min-width: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.35; color: var(--ink); }
.hladanie__odkaz:hover .hladanie__nazov, .hladanie__odkaz:focus-visible .hladanie__nazov { color: var(--link); }
.hladanie__tema { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.hladanie__viac {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--space-sm); padding: 0 1.1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink); font: inherit; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; cursor: pointer;
}
.hladanie__viac:hover { border-color: var(--navy-600); color: var(--link); }
.hladanie__nic { margin: 0; padding-block: var(--space-xs); font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); }

/* the topics: a card each - heading, lead, the first three articles, the link to the topic's page (stretched over the card).
   From 680 px the cards of a row share their rows (subgrid): headings, leads, lists and links line up across the row. */
.tema-mriezka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.tema-mriezka[hidden] { display: none; }
@media (min-width: 680px) { .tema-mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 1000px) { .tema-mriezka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tema-karta {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 1.25rem var(--card-pad) 0.35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.tema-karta::before { content: ""; position: absolute; left: var(--card-pad); top: -1px; z-index: -1; width: 2.5rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.tema-karta:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.tema-karta__nadpis { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
.tema-karta__popis { margin-top: 0.4rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.tema-karta__clanky { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.tema-karta__clanky li { margin: 0; }
.tema-karta__clanky li + li { border-top: 1px solid var(--border); }
.tema-karta__clanky a { position: relative; z-index: 1; display: flex; align-items: center; min-height: 2.75rem; padding-block: 0.35rem; font-size: var(--fs-small); font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none; }
.tema-karta__clanky a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.tema-karta__viac { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; min-height: 2.75rem; margin-top: auto; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--link); text-decoration: none; }
.tema-karta__viac::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius); }
.tema-karta__viac:focus-visible { outline: none; }
.tema-karta__viac:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 900px) { /* a pointer, not a thumb: the rows of the list are tighter */
  .tema-karta { padding-top: calc(var(--card-pad) - 0.1rem); }
  .tema-karta__popis { margin-top: 0.5rem; }
  .tema-karta__clanky { margin-top: 0.9rem; }
  .tema-karta__clanky a { min-height: 0; padding-block: 0.5rem; }
}
@media (min-width: 680px) {
  @supports (grid-template-rows: subgrid) {
    .tema-mriezka { row-gap: 0; margin-bottom: calc(var(--space-md) * -1); }
    .tema-karta { display: grid; grid-row: span 4; grid-template-rows: subgrid; margin-bottom: var(--space-md); }
    .tema-karta__viac { align-self: end; }
  }
}

/* a topic page and the rest of the section: the other topics as the contents column of the documents (a chip row on phones) */
.clanky-nav { margin-bottom: var(--space-lg); }
.clanky-nav .toc a { padding-left: 0.9rem; }
.clanky-nav .toc a[aria-current="page"] { border-left-color: var(--gold); color: var(--ink); font-weight: 600; }
@media (max-width: 999px) { /* one row that scrolls sideways, like the FAQ's chips */
  .clanky-nav .doc-toc__nadpis { display: none; }
  .clanky-nav .toc { display: flex; gap: 0.5rem; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.25rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .clanky-nav .toc::-webkit-scrollbar { display: none; }
  .clanky-nav .toc li { flex: none; }
  .clanky-nav .toc a, .clanky-nav .toc a:hover {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 500; line-height: 1.2; white-space: nowrap;
  }
  .clanky-nav .toc a[aria-current="true"], .clanky-nav .toc a[aria-current="page"] { background: var(--navy-600); border-color: var(--navy-600); color: var(--bg); font-weight: 500; }
}
@media (min-width: 1000px) {
  .clanky-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5rem); align-items: start; }
  .clanky-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); margin-bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
  .clanky-nav .toc a { min-height: 0; padding-block: 0.42rem; }
}

/* ---- the glossary: a letter bar (sticky on desktop), a group per letter, an entry per term with its own anchor ---- */
.slovnik-hub { padding-top: 0; }
.slovnik-nav ul { list-style: none; margin: 0 0 0 -0.75rem; padding: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.slovnik-nav li { margin: 0; }
.slovnik-nav a { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; color: var(--ink); text-decoration: none; }
.slovnik-nav a:hover { background: var(--row-hover); color: var(--link); }
@media (min-width: 960px) {
  .slovnik-nav { position: sticky; top: var(--header-h); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
  .slovnik-nav ul { padding-block: 0.375rem; }
}
/* html's scroll-padding-top (6 rem) clears the header; from 960 px the sticky letter bar (~3.5 rem) needs this much more under it */
@media (min-width: 960px) { .slovnik-skupina, .slovnik-heslo { scroll-margin-top: 3rem; } }
.slovnik { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.slovnik-skupina { display: grid; gap: 0.5rem var(--space-xl); align-content: start; }
.slovnik-skupina__pismeno { font-size: var(--fs-h2); line-height: 1; color: var(--navy-600); }
@media (min-width: 960px) {
  .slovnik-skupina { grid-template-columns: 6rem minmax(0, 1fr); }
  .slovnik-skupina__pismeno { position: sticky; top: calc(var(--header-h) + 5rem); align-self: start; padding-top: 0.9rem; }
}
.slovnik-skupina__zoznam { list-style: none; margin: 0; padding: 0; }
.slovnik-skupina__zoznam > li { margin: 0; }
.slovnik-heslo { position: relative; padding: 1.25rem 0 0.75rem; border-top: 1px solid var(--border); }
.slovnik-skupina__zoznam > li:last-child .slovnik-heslo { border-bottom: 1px solid var(--border); }
.slovnik-skupina:first-child .slovnik-skupina__zoznam > li:first-child .slovnik-heslo { border-top: 0; }
.slovnik-heslo .cl-head { margin-bottom: 0.1rem; }
.slovnik-heslo .cl-head h3 { line-height: 1.2; letter-spacing: -0.015em; }
.slovnik-heslo__sk { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.slovnik-heslo__text { max-width: var(--measure); margin-top: 0.65rem; line-height: 1.65; color: var(--ink); }
.slovnik-heslo__odkazy { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 0.35rem; }
.slovnik-odkaz { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--link); text-decoration: none; }
.slovnik-odkaz:hover .slovnik-odkaz__text { text-decoration: underline; text-underline-offset: 3px; }
.slovnik-odkaz__stitok { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.slovnik-odkaz svg { flex: none; }
.slovnik-odkaz--zdroj { font-weight: 500; color: var(--ink-soft); }
.slovnik-heslo:target { background: linear-gradient(90deg, var(--navy-50), transparent 85%); box-shadow: inset 3px 0 0 var(--gold); padding-left: 1rem; }

/* ---- "Články k téme": the one quiet line at the end of a service page's related band ---- */
.clanky-k-teme { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.75rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.clanky-k-teme__stitok { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.clanky-k-teme__zoznam { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.clanky-k-teme__zoznam li { margin: 0; }
.clanky-k-teme__zoznam a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-small); font-weight: 500; }

/* ---- motion: only for pointers that hover and people who have not asked for less ---- */
@media (prefers-reduced-motion: no-preference) {
  .clanok-riadok::before { transition: opacity 0.2s var(--ease); }
  .clanok-riadok::after { transition: transform 0.2s var(--ease); }
  .clanok-riadok__ikona { transition: background 0.2s var(--ease), color 0.2s var(--ease); }
  .clanok-riadok__nazov { transition: color 0.15s; }
  .clanok-riadok__sipka { transition: transform 0.2s var(--ease), color 0.2s; }
  .clanok-riadok:hover .clanok-riadok__sipka { transform: translateX(4px); }
  .clanok-riadok--kratky { transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
  .clanok-riadok--kratky:hover { transform: translateY(-3px); }
  .hladanie__odkaz::before { transition: opacity 0.2s var(--ease); }
  .hladanie__nazov { transition: color 0.15s; }
  .tema-karta { transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
  .tema-karta:hover { transform: translateY(-3px); }
  .tema-karta::before { transition: width 0.25s var(--ease); }
  .tema-karta:hover::before { width: 4rem; }
  .tema-karta__viac svg, .clanok-dalej__vsetky svg { transition: transform 0.2s var(--ease); }
  .tema-karta:hover .tema-karta__viac svg, .clanok-dalej__vsetky:hover svg { transform: translateX(4px); }
  .slovnik-odkaz svg { transition: transform 0.2s var(--ease); }
  .slovnik-odkaz:hover svg { transform: translateX(3px); }
  .slovnik-heslo:target { animation: clanky-ping 2.6s var(--ease) 0.3s both; }
}
@keyframes clanky-ping { from { background-color: var(--navy-100); } to { background-color: transparent; } }

/* ---- print: the article on its own, like a document (the hero title block, the sections, the questions open) ---- */
@media print {
  .clanok-dalej, .clanky-nav, .clanky-hladanie, .slovnik-nav, .clanky-k-teme, .clanok-callout__ikona { display: none !important; }
  .tema-karta { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  .tema-karta__viac::after { display: none; }
  .clanok-body { padding: 0; }
  .clanok-layout { display: block; }
  .clanok { max-width: none; font-size: 10.5pt; line-height: 1.5; }
  .clanok-skratka { padding: 2mm 4mm; border: 0.5pt solid #000; border-radius: 0; }
  .clanok-skratka::before, .clanok-skratka__stitok::before { display: none; }
  .clanok-sekcia { margin-top: 6mm; padding-top: 3mm; border-top: 0.5pt solid #000; }
  .clanok-sekcia .cl-head h2 { font-size: 13pt; break-after: avoid; page-break-after: avoid; }
  .clanok-sekcia > h3 { font-size: 11.5pt; break-after: avoid; page-break-after: avoid; }
  .clanok-sekcia p, .clanok-sekcia li { orphans: 3; widows: 3; }
  .clanok-callout, .clanok-tabulka tr, .clanok-zdroje__zoznam > li { break-inside: avoid; page-break-inside: avoid; }
  .clanok-callout { border: 0.5pt solid #000; border-radius: 0; }
  .clanok-tabulka { overflow: visible; border: 0.5pt solid #000; border-radius: 0; }
  .clanok-tabulka table { min-width: 0; }
  .faq-item__body { display: block !important; height: auto !important; opacity: 1 !important; padding-bottom: 2mm; }
  .faq-item::before, .faq-item::after, .faq-item__icon { display: none; }
  .clanok-pozn { font-size: 9pt; }
  .slovnik-skupina { display: block; }
  .slovnik-heslo { break-inside: avoid; page-break-inside: avoid; }
}
/* === /P:clanky === */

/* === S:seo === (technical SEO pass: two quiet internal-link lines, tokens only; they exist only while the articles do) */
/* hub: one row under the catalogue, the same quiet line as "Články k téme" */
.hub-viac { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--border); }
.hub-viac a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-small); font-weight: 500; }
/* FAQ: "Viac v článku: <title>" under an answer, inside the answer's panel so it opens and closes with it */
.faq-item__body .faq-item__more { margin-top: 0.75rem; max-width: none; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.faq-item__more a { font-weight: 500; }
@media print { .hub-viac, .faq-item__more { display: none; } }
/* === /S:seo === */

/* === Z:polish === (site-wide corrections found by probe_all.py after the page packages were merged) */
/* phones and tablets: every button is a full 44 px target (the 40 px size stays for the desktop header) */
@media (max-width: 959px) { .btn--sm { min-height: 2.75rem; } }
.kontakt-riadky a { padding-block: 0.55rem; margin-block: -0.55rem; }
/* 320 px phones: a long button label wraps instead of being cut */
@media (max-width: 359px) { .btn:not(.btn--sm) { white-space: normal; text-align: center; padding-block: 0.7em; line-height: 1.25; } }
/* === /Z:polish === */