/* ==========================================================================
   CYBERpojisteni.eu - single page
   Brand tokens sampled directly from the printed leaflets.

   Accent lock ....... one accent (brand blue) drives every CTA, link, chart
                       mark and icon on the page.
   Semantic colours .. teal / red appear ONLY in the cost comparison, where
                       they encode prevention vs. consequence, and always ship
                       with a label + icon. They are never "series colours".
   Radius scale ...... --r-lg panels & cards · --r-md buttons, chips, images
                       · --r-sm data marks. No pills anywhere.
   ========================================================================== */

/* ==========================================================================
   Fonts

   Both families are served from this origin. Manrope was previously hotlinked
   from fonts.googleapis.com, which cost a render-blocking stylesheet on a third
   origin (plus its DNS and TLS handshake) while Geist Mono sat self-hosted two
   lines below it - and hotlinking Google Fonts is the contested practice for an
   EU-facing site. Same file, served from here.

   Manrope is declared across its whole 200-800 axis because it IS one variable
   file. The old Google request asked for `wght@400;500;600;700;800`, which
   returns five @font-face blocks per subset all pointing at that same variable
   file but each PINNING the axis to one stop. The type scale below asks for
   650 (15 places) and 750 (4 places); against pinned instances CSS font
   matching walked down to the nearest lower stop, so every 650 rendered as 600
   and every 750 as 700. Nineteen deliberate weight declarations were silently
   collapsing into their neighbours. Declaring the range restores them.
   ========================================================================== */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope_latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  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;
}
/* Czech lives here: ě š č ř ž ů ň ť ď all sit in latin-ext, so this subset is
   never optional on this site the way it would be on an English one. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope_latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  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;
}
/* Metric-matched fallback, so the swap from system text to Manrope reflows as
   little as possible. Every number here was measured in the browser against the
   actual file, not copied from a table:

     Manrope   advance 1256.42  x-height 55  ascent 1.07em  descent 0.30em
     Arial     advance 1228.56  x-height 54  ascent 0.91em  descent 0.21em

   size-adjust 102.3% = 1256.42 / 1228.56, which lines the two advance widths up
   so a paragraph occupies the same number of lines either way. The ascent and
   descent overrides are then divided by that same 1.023, because they resolve
   against the ADJUSTED em: 1.046 x 1.023 = 1.07em, 0.293 x 1.023 = 0.30em.

   It targets Arial's metrics specifically. Segoe UI and SF Pro sit within about
   2% of Arial on both axes, so they land close; the point is to remove the
   coarse mismatch, not to be exact on every platform at once. */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102.3%;
  ascent-override: 104.6%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geistmono_latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  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: 'Geist Mono';
  src: url('fonts/geistmono_latin-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  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;
}

/* ==========================================================================
   Tokens

   The BRAND / ACCENT / SEMANTIC / NEUTRAL block below is the supplied palette,
   verbatim, and is the single source of truth. Everything under "roles" is an
   alias onto it, so a colour change happens in one place.

   Three usage rules come out of measuring the palette, not from taste:
     --teal, --cyan, --warning  fail 4.5:1 as text on white (2.6 / 2.4 / 2.2).
                                They are on-dark and mark-only colours. The
                                light-surface equivalent for "protected" text
                                is --success (5.21:1).
     --text-faint               is 3.13:1 on white and 2.99:1 on --background-soft,
                                so it is large-text-only. Small captions use
                                --text-muted (5.36 / 5.12) instead.
     CTAs on dark bands         use --cyan, not --primary: a --primary fill on a
                                navy bar is 1.85:1 against it, so the button edge
                                would disappear (WCAG 1.4.11 wants 3:1). Cyan is
                                7.18:1 there, with --navy-deep as its label.
   ========================================================================== */
:root {
  /* ---- brand ---- */
  --navy-deep: #0F172A;         /* Dark - hero, footer, dark sections */
  --navy: #1E3A8A;              /* brand navy, pairs with primary */
  --primary: #1E40AF;           /* Primary - CTA, links */
  --primary-hover: #2952CC;

  /* ---- accent ---- */
  --secondary: #7C3AED;         /* Secondary accent - highlights */
  --secondary-hover: #6D28D9;
  --teal: #14B8A6;              /* secure / protected mark */
  --cyan: #38BDF8;              /* data / tech mark */

  /* ---- semantic ---- */
  --success: #0F766E;           /* Success / Security */
  --warning: #D97706;
  --danger: #DC2626;

  /* ---- neutral ---- */
  --white: #FFFFFF;
  --ink: #1E293B;               /* Text */
  --slate: #475569;
  --border: #E2E8F0;
  --surface: #F1F5F9;

  /* ---- background ---- */
  --background: #F8FAFC;        /* Background */
  --background-soft: #F1F5F9;
  --primary-soft: #E8EEFB;
  --secondary-soft: #F1EBFE;

  /* ---- text ---- */
  --text: var(--ink);
  --text-muted: var(--slate);
  --text-faint: #64748B;
  --text-on-navy: #E2E8F0;
  --text-on-navy-muted: #94A3B8;

  /* ---- links ---- */
  --link: var(--accent);
  --link-hover: var(--accent-hover);

  /* ======================================================================
     Roles - what the components actually reference.
     Derived values (no supplied equivalent) are marked.
     ====================================================================== */
  --bg: var(--background);
  --bg-soft: var(--surface);
  --bg-raised: var(--white);

  --text-dim: var(--text-muted);        /* small captions: faint fails 4.5:1 */
  --border-strong: #CBD5E1;             /* derived: one step past --border */
  --grid: var(--border);

  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-wash: var(--primary-soft);
  --accent-wash-2: #D6E0FA;             /* derived: stronger --primary-soft */
  --on-accent: var(--white);

  --accent-2: var(--secondary);         /* secondary accent - eyebrows, highlights */
  --accent-2-hover: var(--secondary-hover);
  --accent-2-wash: var(--secondary-soft);

  --on-navy: var(--text-on-navy);
  --on-navy-2: var(--text-on-navy-muted);

  --positive: var(--success);           /* teal is not legible as light text */
  --positive-wash: #E6F3F1;             /* derived */
  --negative: var(--danger);
  --negative-wash: #FCE9E7;             /* derived */

  --mark: var(--primary);               /* chart marks */
  --mark-wash: rgba(30, 64, 175, .10);

  --brand-ring: var(--navy-deep);
  --brand-core: var(--cyan);

  /* CTA on an always-dark band (nav bar, footer, back-to-top) */
  --cta-dark: var(--cyan);
  --cta-dark-hover: #7DD3FC;            /* derived */
  --on-cta-dark: var(--navy-deep);

  /* ---- families ---- */
  --sans: 'Manrope', 'Manrope Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Mono is not the page's "technical" costume - it earns its place only where
     figures have to hold a fixed advance: chart axis labels and the data table.
     The numbered badges that used to take it are sans now; a circled "3" gains
     nothing from a monospace advance. */
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ======================================================================
     Type roles

     One ramp. Before this the page carried 29 distinct font sizes, five pairs
     of them inside 3% of each other - .875/.9/.92, .9375/.95/.97, 1/1.02,
     .6875/.7/.72, .75/.78. Differences that small cannot encode anything; they
     are just drift. Each step below has a job, and repeated roles now resolve
     to the same token instead of to a nearby number.

     Text roles, smallest first:
     ====================================================================== */
  --fs-micro:   .6875rem;    /* 11px - chart axis figures, the tightest caps */
  --fs-caption: .75rem;      /* 12px - sources, kickers, table heads, fine print */
  --fs-small:   .8125rem;    /* 13px - dense support: chart subs, hints, deltas */
  --fs-detail:  .875rem;     /* 14px - metadata and labels beside a control */
  --fs-ui:      .9375rem;    /* 15px - controls, form labels, compact card copy */
  /* 16px is the floor for anything a visitor actually reads a paragraph of, and
     the floor for form inputs specifically: below 16px iOS Safari zooms the
     viewport on focus. */
  --fs-base:    1rem;        /* 16px - form inputs, touch list rows, FAQ answers */
  --fs-copy:    1.0625rem;   /* 17px - running prose and card titles */
  --fs-prose:   1.125rem;    /* 18px - the page's own body size */
  --fs-figure:  1.5rem;      /* 24px - a money figure inside a card */

  /* Card and block titles sit at --fs-copy and are told apart from the prose
     beside them by weight, not by a fourth size. */
  --fs-title:   var(--fs-copy);

  /* Display roles. Every one of these was already a clamp in the file; they are
     tokens now because three of them were written out twice at different
     places and had started to drift apart. */
  --fs-d1:      clamp(2.5rem, 1.55rem + 3.8vw, 3.5rem);   /* page h1 */
  --fs-d1-hero: clamp(2.4rem, 1.5rem + 3.6vw, 3.5rem);    /* hero h1: long Czech lines start smaller */
  --fs-d1-form: clamp(1.7rem, 1.15rem + 2.1vw, 2.6rem);   /* form-page h1 */
  --fs-d2:      clamp(2rem, 1.4rem + 2.4vw, 2.5rem);      /* section h2 */
  --fs-d3:      clamp(1.45rem, 1.1rem + 1.3vw, 2rem);     /* sub-section h2 */
  --fs-d4:      clamp(1.4rem, 1.15rem + 1vw, 1.75rem);    /* h3 */
  --fs-d5:      clamp(1.15rem, 1rem + .6vw, 1.45rem);     /* block title inside a section */
  --fs-lead:    clamp(1.05rem, .98rem + .35vw, 1.2rem);   /* hero standfirst */

  /* Weight roles. 650 and 750 are real axis positions now, not requests that
     round down to 600 and 700. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-strong: 650;
  --fw-bold:   700;
  --fw-black:  750;

  /* Leading. Tuned to Manrope, which has a tall x-height and therefore wants
     less air than a neutral face at the same measure. */
  --lh-display: 1.18;
  --lh-snug:    1.3;
  --lh-copy:    1.6;
  --lh-body:    1.65;

  /* Reading measure. 68ch, not the 45-75 midpoint, because Czech averages
     longer words than English and the shorter end of that band starts to
     hyphenate badly. Blocks that had no cap were running past 120ch. */
  --measure:      68ch;
  --measure-note: 78ch;   /* fine print, which is scanned rather than read */

  --r-lg: 16px;                /* cards, panels */
  --r-md: 10px;                /* buttons, chips */
  --r-sm: 6px;                 /* data marks */
  --r-chart: 20px;             /* chart / data panels */
  --r-input: 8px;              /* form inputs */

  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-io: cubic-bezier(.77, 0, .175, 1);
  --t-fast: 160ms;
  --t-mid: 220ms;
  --t-reveal: 480ms;

  --shadow-sm: 0 1px 2px rgba(10, 20, 54, .05), 0 2px 8px rgba(10, 20, 54, .04);
  --shadow-md: 0 2px 4px rgba(10, 20, 54, .05), 0 12px 32px rgba(10, 20, 54, .07);

  --wrap: 1200px;              /* charts, data grids */
  --wrap-prose: 760px;         /* running text blocks */
  --wrap-faq: 900px;           /* FAQ column */
  --wrap-cta: 720px;           /* CTA blocks */
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  /* Unified vertical rhythm. Every section - tinted band or not - uses the same
     block padding, and every section head the same gap below it. One system, so
     the page never drifts into uneven or jumpy spacing. */
  --sec-pad: clamp(3.75rem, 6.5vw, 5.5rem);
  --sec-head-gap: clamp(2rem, 4vw, 3rem);
  --nav-h: 76px;
  /* One hit-target height for every control in the bar. */
  --ctl-h: 40px;             /* one height for nav items and the quote CTA */
  /* How far the key-figures panel rides up over the hero. The hero's bottom
     padding and the video pause control both key off this. */
  --kpi-overlap: clamp(2.5rem, 7vw, 7rem);

  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-prose);           /* 18px body */
  /* 1.65, not 1.7: at 18px Manrope over a 68ch measure, 1.7 opened the lines
     enough that the eye lost the return sweep on the longer paragraphs. */
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--fs-d1); line-height: 1.16; font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-d2); line-height: var(--lh-display); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-d4); line-height: 1.2; font-weight: var(--fw-semi); }
p, ul, ol, dl, dd { margin: 0; }
/* Last-line orphans, where the browser will do it. Headings are on `balance`
   above instead: they are short enough for it and it is the better algorithm
   for two or three lines. Both degrade to `wrap: normal` where unsupported. */
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Parked above the viewport rather than off to the left, so it can never widen
   the document on narrow screens. */
.skip {
  position: absolute; left: 0; top: 0; z-index: 100;
  transform: translateY(-150%);
  padding: .7rem 1rem; background: var(--accent); color: var(--on-accent);
  border-radius: 0 0 var(--r-md) 0; text-decoration: none; font-weight: var(--fw-semi);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* The nav is fixed, so anchored sections must offset by its height or their
   headings land underneath it. */
/* #utok lives on the attack-flow panel inside #hrozba, so this cannot be scoped
   to section[id] alone. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand__mark { width: 30px; height: auto; flex: none; }
.brand__mark-ring { stroke: var(--brand-ring); }
.brand__mark-core { fill: var(--brand-core); }
.brand__mark-gleam { stroke: var(--bg); }
.brand__type { display: grid; gap: 1px; }
.brand__word { font-size: 1.155rem; letter-spacing: -.028em; line-height: 1.1; white-space: nowrap; }
.brand__word b { font-weight: var(--fw-black); color: var(--text); }
.brand__word i { font-style: normal; font-weight: var(--fw-medium); color: var(--accent-hover); }
.brand__tag {
  font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: .055em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.2;
}
@media (max-width: 560px) { .brand__tag { display: none; } }
/* Phone widths cannot hold the shield, the wordmark, the burger and the CTA at
   once - measured, the row is ~3px short at 360px and worse below. Rather than
   shrink the CTA toward illegibility or truncate the word to "CYBE...", the
   wordmark drops out and the shield carries the brand; it reads as a deliberate
   mark rather than a bug. Measured: at 360px the row is 2.9px short, at 375px it
   has 12px spare in a browser with a persistent scrollbar - more on a phone, which
   overlays it - so 375px is where the wordmark comes back.
   The link keeps its aria-label, so the accessible name is unchanged, and the
   ellipsis on .brand__word stays as a valve for anything unforeseen. */
@media (max-width: 374px) { .brand__word { display: none; } }

/* ==========================================================================
   Nav - a boxed bar that hangs off the top edge and floats over the hero video,
   rounded on its bottom corners only, and pinned there
   and staying put on scroll: it is always available, never hidden.

   Its values live in --nav-* rather than shadowing --text and friends, so the
   dropdown panel further down can still use ordinary page tokens and follow
   the active theme.
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  pointer-events: none;             /* the gutters beside the bar stay clickable */
}
.nav__bar {
  /* White bar in the light theme, which also restores the logo to its printed
     colours: navy wordmark, blue "pojisteni", navy shield. Links take the
     strongest ink because they are the interactive content, and hover shifts to
     the accent rather than merely brightening. The dark theme overrides all of
     this back to a navy bar further down. */
  --nav-surface: rgba(255, 255, 255, .94);
  --nav-surface-solid: var(--white);
  --nav-border: var(--border);
  --nav-shadow: 0 12px 34px -12px rgba(15, 23, 42, .30);
  --nav-fg: var(--primary);            /* hover / open state */
  --nav-fg-2: var(--text);             /* links, 18:1 on white */
  --nav-fg-3: var(--text-muted);       /* tagline */
  --nav-brand: var(--navy);
  --nav-brand-accent: var(--primary-hover);
  --nav-mark-ring: var(--navy-deep);
  --nav-mark-core: var(--primary-hover);

  pointer-events: auto;
  width: 100%;
  margin-inline: 0;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.25rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  /* 94%, not lower: the bar is translucent, so whatever shows through shifts it
     and eats the contrast. Keeping it near-opaque holds every pairing in every
     scroll position. */
  background: var(--nav-surface);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 0; border-bottom: 1px solid var(--nav-border);
  border-radius: 0;
  box-shadow: var(--nav-shadow);
  /* containing block for the mobile sheet below. Explicit, because backdrop-filter
     already makes this a containing block for fixed descendants and relying on
     that implicitly would break the moment the filter is dropped. */
  position: relative;
}
@media (prefers-reduced-transparency: reduce) {
  .nav__bar { background: var(--nav-surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(1px)) { .nav__bar { background: var(--nav-surface-solid); } }

/* Dark theme: back to the navy bar, with the light-on-dark ink tiers. */
.nav__bar .brand__word b { color: var(--nav-brand); }
.nav__bar .brand__word i { color: var(--nav-brand-accent); }
.nav__bar .brand__tag { color: var(--nav-fg-3); }
.nav__bar .brand__mark-ring { stroke: var(--nav-mark-ring); }
.nav__bar .brand__mark-core { fill: var(--nav-mark-core); }
.nav__bar .brand__mark-gleam { stroke: var(--nav-surface-solid); }

.nav__links { display: flex; align-items: center; gap: clamp(.85rem, 1.6vw, 1.45rem); margin-left: auto; }
.nav__links > a, .nav__top {
  /* Same height for all three kinds of control in the bar. A <button> does not
     inherit line-height, so the trigger computed `normal` and came out 4.5px
     shorter than the plain links; the explicit line-height and the shared
     min-height put them on identical footprints. */
  min-height: var(--ctl-h); line-height: 1.7;
  font-family: inherit; font-size: var(--fs-ui); font-weight: var(--fw-medium); letter-spacing: -.01em;
  color: var(--nav-fg-2); text-decoration: none;
  background: none; border: 0; padding: .45rem 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.nav__links > a:hover, .nav__top:hover,
.nav__item[data-open] .nav__top { color: var(--nav-fg); }
.nav__end { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
/* Sits off to the right of the anchors rather than tight against them, so the
   CTA reads as its own thing and not as one more menu item. */
.nav__links + .nav__end { margin-left: clamp(.75rem, 2.5vw, 2.25rem); }

/* On the white bar the CTA is the ordinary primary fill, which already clears
   3:1 against white so its edge is visible. The dark bar needs the brighter
   step instead, because a --primary fill on navy is only 1.85:1 against it. */
/* ---------- nav dropdown ---------- */
.nav__item { position: relative; }
.nav__top svg { width: 13px; height: 13px; fill: currentColor; transition: transform var(--t-fast) var(--e-out); }
.nav__item[data-open] .nav__top svg { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + 12px); left: -.7rem;
  min-width: 252px; padding: .45rem;
  display: grid; gap: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 14px 44px -8px rgba(15, 23, 42, .34);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;       /* scales out of its trigger, not its centre */
  transition: opacity 160ms var(--e-out), transform 160ms var(--e-out), visibility 160ms;
}
.nav__item[data-open] .nav__sub { opacity: 1; visibility: visible; transform: none; }
/* Invisible bridge across the gap between the trigger and the panel. The panel
   is absolutely positioned, so it adds nothing to .nav__item's hover box, and
   without this the pointer leaves that box while crossing the gap - closing the
   panel before it can be reached. Hidden along with the panel when closed, so it
   never leaves a phantom hover zone. */
.nav__sub::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.nav__sub a {
  min-height: var(--ctl-h); display: flex; align-items: center;
  padding: 0 .7rem; border-radius: var(--r-md);
  font-size: var(--fs-ui); color: var(--text-muted); text-decoration: none;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.nav__sub a:hover { background: var(--accent-wash); color: var(--accent-hover); }

/* Hamburger. Hidden above the breakpoint where the full link row fits; below it,
   this is the only way to the section links, so it replaces the row rather than
   sitting alongside it. */
.nav__burger {
  display: none;
  width: var(--ctl-h); height: var(--ctl-h);
  align-items: center; justify-content: center;
  padding: 0; background: none; cursor: pointer;
  color: var(--nav-fg-2);
  border: 1px solid var(--nav-border); border-radius: var(--r-md);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.nav__burger:hover { color: var(--nav-fg); border-color: var(--nav-fg); }
.nav__burger svg { width: 20px; height: 20px; fill: currentColor; }
.nav__burger-close { display: none; }
.nav[data-menu] .nav__burger-open { display: none; }
.nav[data-menu] .nav__burger-close { display: block; }

/* --------------------------------------------------------------------------
   Mobile navigation. The desktop link row becomes a sheet that drops out of the
   bar - same markup, so there is no second copy of the link list to keep in sync.
   The dropdown group inside it flattens to a static indented list instead of a
   floating card, and JS opens the group with the sheet so every link is one tap
   away.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav__burger { display: inline-flex; }

  .nav__links {
    display: none;                      /* the open state below re-shows it */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .35rem clamp(1rem, 4vw, 2.5rem) .9rem;
    /* dvh so an iOS toolbar appearing cannot push the last link out of reach */
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--nav-surface-solid);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
  }
  .nav[data-menu] .nav__links { display: flex; }

  .nav__links > a, .nav__top {
    /* 48px: a comfortable touch target, not the 40px desktop hit area */
    min-height: 48px; width: 100%;
    padding: .5rem 0; font-size: var(--fs-base);
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  .nav__item { position: static; width: 100%; }
  .nav__item .nav__top { border-bottom: 1px solid var(--border); }

  /* Flatten the floating panel into an indented list in the flow. */
  .nav__sub {
    position: static; display: none;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 .3rem .9rem;
    background: none; border: 0; box-shadow: none;
  }
  .nav__item[data-open] .nav__sub { display: block; }
  .nav__sub a {
    min-height: 44px; width: 100%;
    padding: 0; border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav__sub a:last-child { border-bottom: 0; }
  /* No trailing rule under the last row - it would read as a divider to nothing. */
  .nav__links > *:last-child, .nav__links > *:last-child > .nav__top { border-bottom: 0; }
}
/* Keep the bar on one line at the narrowest widths: the page itself is the nav,
   so the anchors drop and only the brand plus the single CTA remain. */
@media (max-width: 560px) {
  .nav__bar { gap: .5rem; width: 100%; border-radius: 0; padding-inline: .75rem; }
  .brand__mark { width: 24px; flex: none; }
  /* A literal, not a ramp step: the wordmark is a logotype, and its size answers
     to the mark beside it rather than to the text hierarchy. */
  .brand__word { font-size: .875rem; }
  /* The burger costs the bar ~50px that the brand + CTA row used to have. Rather
     than let the CTA fall off the right edge, both ends give a little back, and
     the brand keeps a shrink-and-ellipsis safety valve so no font or locale can
     push the CTA out of the bar. */
  .brand { min-width: 0; gap: .4rem; }
  .brand__word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__end { flex: none; gap: .45rem; }
  .nav__burger { width: 38px; height: 38px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap;
  padding: .78rem 1.25rem; border-radius: var(--r-md);
  font-size: var(--fs-ui); font-weight: var(--fw-semi); letter-spacing: -.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, transform var(--t-fast) var(--e-out);
}
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
/* "Získat nabídku" is uppercased wherever it appears, via a class rather than in
   the markup so the accessible name stays sentence case (some screen readers
   spell out literal all-caps). Caps need tracking to stay legible. */
/* The "Získat nabídku" CTA is one component wherever it appears - nav bar, hero,
   page footers - so the modifier carries its whole appearance rather than
   inheriting a size from its surroundings. padding-block: 0 makes the height
   exactly --ctl-h instead of padding plus line-height plus border. Fill colour
   stays --accent from .btn--primary, which is the same value as --primary. */
.btn--quote {
  text-transform: uppercase; letter-spacing: .06em;
  min-height: var(--ctl-h); padding: 0 1rem;
  font-size: var(--fs-small); font-weight: var(--fw-strong);
}
/* Narrow phones cannot fit the bar at full size. This has to come after the rule
   above, not earlier in the file: same specificity, so source order decides. It
   targets every .btn--quote rather than only the one in the bar, so the CTA stays
   one consistent component at every width instead of matching the nav on desktop
   and drifting on a phone. */
@media (max-width: 560px) {
  .btn--quote { padding-inline: .6rem; font-size: var(--fs-caption); letter-spacing: .03em; }
}
.btn--lg { padding: .95rem 1.6rem; font-size: var(--fs-base); }
/* Oversized, high-lift CTA for the questionnaire hero: bigger tap target, heavier
   weight and a coloured shadow so it reads as the single strongest action. */
.btn--hero {
  padding: 1.1rem 2.4rem; font-size: 1.18rem; font-weight: var(--fw-black);
  border-radius: var(--r-md); box-shadow: 0 16px 34px -10px rgba(30, 64, 175, .5);
}
.btn--hero:hover { box-shadow: 0 20px 40px -10px rgba(30, 64, 175, .6); }

/* ---------- section scaffolding ----------
   One rhythm for the whole site: every section - tinted band or not - uses the
   same block padding (--sec-pad), so nothing reads as odd or jumpy. */
.sec { padding-block: var(--sec-pad); }
.sec--band { background: var(--bg-soft); padding-block: var(--sec-pad); }
/* The project intro is head-only (no body block), so it drops its bottom padding
   and head margin - otherwise it stacks its own padding on top of the next
   section's, leaving a cavernous gap before the threat section. */
#o-projektu { padding-bottom: 0; }
#o-projektu .sec__head { margin-bottom: 0; }
/* IT-maturity page opens as a hero: copy on the left, image on the right. The
   dark .qhead band above it already reserves room for the fixed nav. */
.ithero { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; margin-bottom: var(--sec-head-gap); }
.ithero .sec__head { margin-bottom: 0; max-width: none; }
/* The three payoffs as an icon list in the hero copy column. */
.ithero__list { display: grid; gap: 1rem; }
.ithero__list li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: center; list-style: none; }
.ithero__list li svg { width: 21px; height: 21px; fill: var(--accent); }
.ithero__list p { margin: 0; font-size: var(--fs-detail); color: var(--text-muted); line-height: 1.6; }
.ithero__list strong { color: var(--text); font-weight: var(--fw-strong); }
/* Closing reassurance below the hero: the expert-review lead and the two
   data-safety notes merged into one full-width soft panel, normal reading size. */
.safenote {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid; gap: 1.1rem;
}
.safenote p { margin: 0; font-size: var(--fs-copy); color: var(--text-muted); line-height: var(--lh-body); }
.safenote strong { color: var(--text); font-weight: var(--fw-strong); }
.safenote a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
@media (min-width: 900px) { .ithero { grid-template-columns: 1fr minmax(0, 44%); } }
.ithero__media {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ithero__media img { width: 100%; height: auto; display: block; }
.sec__head { max-width: var(--wrap-prose); margin-bottom: var(--sec-head-gap); }
/* No font-size here: it restated the global h2 clamp verbatim, which is how two
   copies of one value start drifting apart. balance comes from the h1-h4 rule. */
/* No hard character cap: let headings use the prose width so short and medium
   ones stay on one line; only genuinely long headings wrap (balanced). */
.sec__head h2 { max-width: 100%; }
.sec__head p { margin-top: 1rem; color: var(--text-muted); font-size: var(--fs-copy); max-width: var(--measure); }
.sec__head p + p { margin-top: .9rem; }
/* Centred variant, for a section whose own sub-blocks are centred too, so the
   whole thing shares one axis instead of mixing left and centre. */
.sec__head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: .75rem;
}
/* On the dark qhead band the accent-2 blue is too low-contrast; lift it to the
   same cyan the qhead meta uses. */
.eyebrow--ondark { color: var(--cyan); }
.src { margin-top: .9rem; font-size: var(--fs-caption); color: var(--text-dim); }
/* --wide meant "not inside a panel", which in a 1200px wrap left this fine print
   running to about 130 characters. Fine print is scanned, so it gets the looser
   --measure-note rather than the reading measure, but it gets one. */
.src--wide { margin-top: 1rem; max-width: var(--measure-note); }

/* ==========================================================================
   Hero - full-bleed video with the copy held in the right column, because the
   source footage puts the globe on the left and leaves that side open. Keeping
   the composition asymmetric also avoids the centred-hero default.

   Scrim values are measured, not eyeballed: sampled across 8 frames of the
   actual clip, a flat .30 fill plus the right-side gradient to .32 leaves the
   worst-case (2px-blurred) background behind the copy at 6.9:1 for white,
   while the globe on the left stays clearly visible.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Short of a full viewport on purpose: the key-figures panel rides up over the
     bottom of the hero, and it has to be readable on load rather than only after
     a scroll. This reserves room for it. */
  min-height: max(30rem, calc(100dvh - clamp(7rem, 13vw, 11rem)));
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: calc(var(--kpi-overlap) + clamp(2rem, 4vw, 3.5rem));
  background: var(--navy-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--navy-deep); }
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%;
  /* The poster is the clip's own first frame, so the handoff is seamless. */
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0) 24%, rgba(15, 23, 42, .62) 58%, rgba(15, 23, 42, .62) 100%),
    rgba(15, 23, 42, .34);
}
.hero__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
.hero__copy h1 {
  font-size: var(--fs-d1-hero);
  font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1.05;
  max-width: 18ch; text-wrap: balance; color: var(--white);
}
/* Light copy on the navy scrim. Light-on-dark needs a little more air and a
   little more tracking to stay as readable as the same words on white, so the
   leading opens from 1.6 to 1.65 and the letters get .006em. Weight stays at
   400: Manrope's stems are sturdy enough here that the extra step would only
   feed the halation, not fight it. */
.hero__sub {
  margin-top: 1.25rem; font-size: var(--fs-lead);
  line-height: var(--lh-body); letter-spacing: .006em;
  color: var(--text-on-navy); max-width: 46ch;
}
.hero__cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 44% 56%; }
  .hero__copy { grid-column: 2; }
}
/* Narrow screens crop the footage, so bias it towards the globe and let the
   copy sit over the full width. */
@media (max-width: 899px) {
  .hero { min-height: min(100dvh, 660px); }
  .hero__video { object-position: 38% 42%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .20) 0%, rgba(15, 23, 42, .46) 52%, rgba(15, 23, 42, .54) 100%),
      rgba(15, 23, 42, .34);
  }
}

/* Pause control for the background loop (WCAG 2.2.2). */
.hero__vidbtn {
  position: absolute; z-index: 2;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: calc(var(--kpi-overlap) + clamp(1rem, 2vw, 1.75rem));
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-md);
  background: rgba(15, 23, 42, .62); color: var(--white); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
              transform var(--t-fast) var(--e-out);
}
.hero__vidbtn:hover { background: rgba(15, 23, 42, .84); border-color: rgba(255, 255, 255, .6); }
.hero__vidbtn:active { transform: scale(.94); }
.hero__vidbtn svg { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.hero__vidbtn .hero__vidbtn-play { display: none; }
.hero__vidbtn[data-paused] .hero__vidbtn-play { display: block; }
.hero__vidbtn[data-paused] .hero__vidbtn-pause { display: none; }

/* ==========================================================================
   Key figures - a raised white panel that overlaps the bottom of the hero, the
   way the service cards do on category.cz. It is a sibling of the hero rather
   than a child, because the hero is overflow:hidden and would clip it.
   ========================================================================== */
.kpi {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--kpi-overlap));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.kpi__panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: grid;
  overflow: hidden;              /* keeps the cell dividers inside the radius */
}
.kpi__cell {
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1rem, 1.7vw, 1.35rem);
  display: grid; align-content: start; gap: .3rem;
}
.kpi__ico { width: 21px; height: 21px; fill: var(--accent); margin-bottom: .4rem; }
.kpi__val {
  font-size: clamp(1.4rem, 1.1rem + .85vw, 1.7rem);
  font-weight: var(--fw-bold); letter-spacing: -.03em; color: var(--accent); line-height: 1.1;
}
/* balance stops a two-line label leaving a single orphaned word */
.kpi__lbl { font-size: var(--fs-detail); color: var(--text); text-wrap: balance; }
.kpi__note { font-size: var(--fs-caption); color: var(--text-dim); }

/* One column: hairlines do the separating that the vertical rules do wider up. */
@media (max-width: 639px) {
  .kpi__cell + .kpi__cell { border-top: 1px solid var(--border); }
}
@media (min-width: 640px) {
  .kpi__panel { grid-template-columns: repeat(2, 1fr); }
  .kpi__cell:nth-child(even) { border-left: 1px solid var(--border); }
  .kpi__cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (min-width: 1000px) {
  .kpi__panel { grid-template-columns: repeat(4, 1fr); }
  .kpi__cell { border-left: 1px solid var(--border); border-bottom: 0; }
  .kpi__cell:first-child { border-left: 0; }
}

/* ---------- panels & charts ---------- */
.panel {
  margin: 0; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-chart); padding: clamp(1.1rem, 2.5vw, 1.75rem);
}
/* Tips inside a chart are absolutely positioned and their offsets are measured
   against the panel, so the panel has to be the containing block. */
.chart { position: relative; }
.chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
.chart__head--stack { display: block; }
.chart__title { font-size: var(--fs-title); font-weight: var(--fw-strong); }
.chart__sub { margin-top: .2rem; font-size: var(--fs-small); color: var(--text-dim); }
.chart__delta {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--accent);
  background: var(--accent-wash); border-radius: var(--r-md); padding: .35rem .65rem;
}
.chart__delta svg { width: 15px; height: 15px; fill: currentColor; }

/* Line chart: the SVG holds only geometry and is free to stretch; the gutters,
   gridlines, dots and every label are HTML so nothing distorts. */
.chart__plot {
  position: relative;
  height: 300px;
  padding: 10px 62px 26px 52px;
}
@media (max-width: 640px) { .chart__plot { height: 250px; padding: 10px 52px 24px 44px; } }

.plot { position: relative; height: 100%; }

.plot__ylabs { position: absolute; left: 0; top: 10px; bottom: 26px; width: 44px; }
.plot__ylabs span {
  position: absolute; right: 8px; bottom: var(--v); transform: translateY(50%);
  font-family: var(--mono); font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--text-dim); white-space: nowrap;
}
@media (max-width: 640px) { .plot__ylabs { width: 38px; } .plot__ylabs span { right: 6px; } }

.plot__xlabs { position: absolute; left: 52px; right: 62px; bottom: 4px; height: 16px; }
.plot__xlabs span {
  position: absolute; left: var(--x); transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
@media (max-width: 640px) { .plot__xlabs { left: 44px; right: 52px; } }

.plot__grid i { position: absolute; left: 0; right: 0; bottom: var(--v); height: 1px; background: var(--grid); }
.plot__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wash { fill: var(--mark-wash); }
.ln { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.plot__dots i {
  position: absolute; left: var(--x); bottom: var(--y);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mark); box-shadow: 0 0 0 2px var(--bg-raised);
  transform: translate(-50%, 50%);
}
/* Proportional, for the same reason as .trio__price span: the start and end
   labels sit at opposite ends of the line, not stacked in a column. */
.plot__val {
  position: absolute; font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--text);
  white-space: nowrap;
}
.plot__val--start { left: 0; bottom: 48.22%; transform: translate(14px, -40%); }
.plot__val--end { left: 100%; bottom: 96.78%; transform: translate(14px, 50%); font-size: var(--fs-detail); }

.plot__cross {
  position: absolute; top: 0; bottom: 0; left: var(--cx, 0); width: 1px;
  background: var(--border-strong); visibility: hidden;
}
.plot__cross[data-on] { visibility: visible; }
.plot__hits div { position: absolute; top: 0; bottom: 0; cursor: crosshair; }

.tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  opacity: 0; transform: translate(-50%, -100%) scale(.97);
  transform-origin: bottom center;
  background: var(--text); color: var(--bg);
  font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35;
  padding: .4rem .6rem; border-radius: var(--r-sm); white-space: nowrap;
  max-width: min(280px, 78vw);
  transition: opacity 125ms ease-out, transform 125ms var(--e-out);
}
@media (max-width: 560px) { .tip { white-space: normal; } }
.tip[data-on] { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); }
.tip b { font-weight: var(--fw-strong); }

/* data table disclosure */
.dataview { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: .85rem; }
.dataview summary {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--text-muted); list-style: none;
}
.dataview summary::-webkit-details-marker { display: none; }
.dataview summary:hover { color: var(--accent-hover); }
.dataview summary svg { width: 14px; height: 14px; fill: currentColor; transition: transform var(--t-mid) var(--e-out); }
.dataview[open] summary svg { transform: rotate(180deg); }
.dataview table { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: var(--fs-detail); }
.dataview caption { text-align: left; font-size: var(--fs-caption); color: var(--text-dim); padding-bottom: .5rem; }
.dataview th, .dataview td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.dataview thead th { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: var(--fw-strong); }
.dataview tbody th { font-weight: var(--fw-medium); }
.dataview td { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ==========================================================================
   Threat section (#hrozba) - one section, two rows: growth chart beside the
   attack mix, then the attack flow with its cost band. The row split is what
   keeps it to roughly one screen instead of four stacked blocks.
   ========================================================================== */
.threat { display: grid; gap: 1rem; }
/* 1000px, not 940: below that the two panels squeeze the 300px plot's gutters
   and the year labels start colliding. */
@media (min-width: 1000px) { .threat { grid-template-columns: 1.15fr .85fr; gap: 1.25rem; } }

.bars { display: grid; gap: 1.05rem; }
/* Paired with the line chart, the mix has to end near the same height. */
.bars--tight { gap: .8rem; }
.bars li { display: grid; gap: .4rem; }
.bars__lbl { font-size: var(--fs-detail); font-weight: var(--fw-medium); color: var(--text); }
.bars__lbl em { font-style: normal; color: var(--text-dim); font-weight: var(--fw-normal); }
.bars__lbl em::before { content: ' · '; }
.bars__track { position: relative; display: block; height: 20px; }
.bars__fill {
  position: absolute; inset-block: 0; left: 0; width: var(--w);
  background: var(--mark); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.bars__val {
  position: absolute; left: var(--w); top: 50%; transform: translateY(-50%);
  /* Sans, not mono: these tips are not a vertical column, and mono widens the
     space before the percent sign into a visible gap. */
  margin-left: 10px; font-size: var(--fs-small); font-weight: var(--fw-strong);
  color: var(--text-muted); white-space: nowrap;
}
/* Attack-mix chart: each category carries its own palette colour so the mix
   reads as five distinct threats, not one blue stack. The value label sits
   outside the fill, so fill hue never touches its legibility. Colour is
   redundant here - every bar keeps its text label and percentage. */
#bars li:nth-child(1) { --mark: var(--primary); }   /* Ransomware */
#bars li:nth-child(2) { --mark: var(--secondary); } /* Phishing */
#bars li:nth-child(3) { --mark: var(--success); }   /* Únik dat */
#bars li:nth-child(4) { --mark: var(--cyan); }      /* Zneužití zranitelností */
#bars li:nth-child(5) { --mark: var(--warning); }   /* DDoS */
.bars li:hover .bars__fill { filter: brightness(.9); }

/* ---------- icon lists ---------- */
.ilist { display: grid; gap: .7rem; }
.ilist li { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; align-items: start; font-size: var(--fs-ui); color: var(--text-muted); }
.ilist svg { width: 18px; height: 18px; fill: var(--accent); margin-top: .13rem; }
.ilist--lock svg { fill: var(--positive); }
.ilist--x svg { fill: var(--negative); }

/* ---------- cost trio ---------- */
.trio { display: grid; gap: 1rem; align-items: stretch; }
.trio__card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.15rem, 2.2vw, 1.6rem);
  display: grid; align-content: start; gap: .9rem;
  border-top: 3px solid var(--accent);
}
.trio__card--prev { border-top-color: var(--positive); }
.trio__card--ins { border-top-color: var(--accent); }
.trio__card--risk { border-top-color: var(--negative); }
.trio__card header svg { width: 26px; height: 26px; margin-bottom: .55rem; }
.trio__card--prev header svg { fill: var(--positive); }
.trio__card--ins header svg { fill: var(--accent); }
.trio__card--risk header svg { fill: var(--negative); }
/* One card-title size across the page. This was 1.125rem while .scen__head h3
   and .pcard__name were 1.0625rem and .covers__cell h3 was .9375rem - four card
   types, three "card title" sizes, no rule saying which got which. */
.trio__card h3 { font-size: var(--fs-title); }
.trio__role { font-size: var(--fs-caption); font-weight: var(--fw-semi); letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-top: .2rem; }
.trio__desc { font-size: var(--fs-ui); color: var(--text-muted); }
.trio__price { display: grid; gap: .15rem; padding: .85rem 0; border-block: 1px solid var(--border); }
/* Proportional figures, deliberately. Tabular belongs to a column, and these
   three sit in three separate cards - nothing to align down. Measured, tabular
   widened "0,1 - 0,3 %" by 6.35px because Manrope's tabular 1 takes a full digit
   advance, which opened a gap around it and made the decimal read as two numbers. */
.trio__price span {
  font-size: var(--fs-figure); font-weight: var(--fw-bold);
  letter-spacing: -.03em; line-height: var(--lh-display);
}
.trio__price em { font-style: normal; font-size: var(--fs-caption); color: var(--text-dim); }
.trio__card--prev .trio__price span { color: var(--positive); }
.trio__card--ins .trio__price span { color: var(--accent); }
.trio__card--risk .trio__price span { color: var(--negative); }
.trio__card--risk { background: var(--negative-wash); border-color: color-mix(in srgb, var(--negative) 22%, transparent); }
.trio__card--prev { background: var(--positive-wash); border-color: color-mix(in srgb, var(--positive) 20%, transparent); }
.trio__op { display: grid; place-items: center; padding: .25rem 0; }
.trio__op svg { width: 20px; height: 20px; fill: var(--text-dim); }
.trio__op--vs span {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}
@media (min-width: 1080px) {
  .trio { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.25rem; }
  .trio__op { padding: 0 .1rem; }
}

/* This is the section's takeaway sentence and it had no measure at all: inside
   the 1200px wrap it ran to roughly 125 characters, about twice a comfortable
   line. The cap is --measure plus the icon column, its gap and the side padding,
   so it is the TEXT that lands at 68ch rather than the box. */
.insight {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: 22px 1fr; gap: .85rem; align-items: start;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
  font-size: var(--fs-copy); line-height: var(--lh-copy); color: var(--text);
  max-width: calc(var(--measure) + 22px + .85rem + 2.5rem);
}
.insight svg { width: 20px; height: 20px; fill: var(--accent); margin-top: .2rem; }
/* Centred variant: a closing note under the cards - icon on top, centred text,
   no accent rail - so it reads as a calm summary that follows on from the grid. */
.insight--center {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
  border-left: 1px solid var(--border);
  max-width: var(--measure); margin-inline: auto;
  font-size: var(--fs-detail); line-height: var(--lh-body);
}
.insight--center svg { margin: 0 0 .15rem; }
.src--center { text-align: center; max-width: var(--measure); margin-inline: auto; }

/* ==========================================================================
   Coverage grid (#kryti). Plain cells on purpose: it answers the threat section
   directly above it, so the section heading carries the emphasis, not the cards.
   ========================================================================== */
.covers__grid { display: grid; gap: 1rem; }
.covers__cell {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.1rem, 2.1vw, 1.5rem);
  display: grid; align-content: start; gap: .5rem;
  transition: border-color var(--t-mid) ease, transform var(--t-mid) var(--e-out);
}
.covers__cell > svg { width: 22px; height: 22px; fill: var(--accent); margin-bottom: .25rem; }
.covers__cell h3 { font-size: var(--fs-ui); font-weight: var(--fw-strong); letter-spacing: -.01em; }
.covers__cell p { font-size: var(--fs-detail); color: var(--text-muted); }
/* The coverage grid sits on the banknote image as a backdrop: the photo is the
   bottom layer, a dark scrim tones it so the white cards pop, and the cards ride
   on top. The image shows through the padding frame and the gutters between
   cells, which ties it to the section instead of floating below it. */
.covers {
  position: relative; isolation: isolate;
  border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2.35rem);
}
.covers__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.covers::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 23, 42, .5), rgba(15, 23, 42, .62));
}
@media (hover: hover) and (pointer: fine) {
  .covers__cell:hover { border-color: var(--border-strong); transform: translateY(-2px); }
}
@media (min-width: 640px) { .covers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .covers__grid { grid-template-columns: repeat(3, 1fr); } }
/* Four-up sets read better as a 2x2 block than 3+1; cap this variant at two. */
.covers__grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .covers__grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Photo placeholder. Reserves the real aspect ratio so dropping an image in
   later does not reflow the page. Each one is marked with a TODO in the markup
   giving the size it expects.
   ========================================================================== */
/* --text-muted, not --text-faint: faint is 2.79:1 on this tinted surface and
   this is small text. Hierarchy comes from the size instead. */
/* Photo cell runs two rows deep in one column: the portrait crop suits it and
   no neighbouring cell is left stretched around a dead zone. */

.acc { margin-top: 1.75rem; border-top: 1px solid var(--border-strong); }
.acc details { border-bottom: 1px solid var(--border-strong); }
.acc summary {
  display: grid; grid-template-columns: 22px 1fr 18px; gap: .8rem; align-items: center;
  padding: 1.05rem .1rem; cursor: pointer; list-style: none;
  transition: color var(--t-fast) ease;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--accent-hover); }
.acc summary > span { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.acc__ico { width: 21px; height: 21px; fill: var(--accent); }
.acc__caret { width: 17px; height: 17px; fill: var(--text-dim); transition: transform var(--t-mid) var(--e-out); }
.acc details[open] .acc__caret { transform: rotate(180deg); }
.acc__body { padding: 0 .1rem 1.15rem 3rem; }
/* Answers are the one place on the page where a visitor reads several sentences
   in a row, and they had neither a reading size nor a measure: .92rem across the
   900px FAQ column is ~100 characters at 14.7px. Both are set now - the size on
   .acc--faq .acc__body p at the bottom of this file, the measure here. */
.acc__body p, .acc__body li { max-width: var(--measure); }
.acc__body { line-height: var(--lh-copy); }
@media (max-width: 560px) { .acc__body { padding-left: 0; } }

/* Native disclosure animation where supported; instant elsewhere. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acc details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--t-mid) var(--e-out), content-visibility var(--t-mid);
    transition-behavior: allow-discrete;
  }
  .acc details[open]::details-content { block-size: auto; }
}

/* ==========================================================================
   Form. Labels sit above their control, hints above the error slot, errors
   below. No placeholders standing in for labels. Every state the form can be
   in is styled: idle, invalid, submitting, sent, failed.
   ========================================================================== */
.form {
  display: grid; gap: 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-detail); font-weight: var(--fw-semi); color: var(--text); }
.field input, .field textarea {
  font-family: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--bg);
  /* --text-faint, not --border-strong: a control's boundary needs 3:1 (WCAG
     1.4.11) and --border-strong is only 1.52:1 on white. The large-text-only
     caveat on --text-faint is about text, not about a border. */
  border: 1px solid var(--text-faint); border-radius: var(--r-input);
  padding: .7rem .85rem; width: 100%;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:hover, .field textarea:hover { border-color: var(--accent); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash-2);
}
.field__hint { font-size: var(--fs-small); color: var(--text-muted); }
.field__err { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--negative); }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--negative); }
.field[data-invalid] input:focus-visible, .field[data-invalid] textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--negative-wash);
}

.form__submit { justify-self: start; }
.form[data-state='sending'] .form__submit { opacity: .7; pointer-events: none; }
.form__status {
  display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start;
  font-size: var(--fs-ui); padding: .8rem .95rem; border-radius: var(--r-md);
}
.form__status svg { width: 18px; height: 18px; margin-top: .1rem; }
.form__status[data-kind='ok'] {
  color: var(--success); background: var(--positive-wash);
}
.form__status[data-kind='ok'] svg { fill: var(--success); }
.form__status[data-kind='error'] {
  color: var(--negative); background: var(--negative-wash);
}
.form__status[data-kind='error'] svg { fill: var(--negative); }
/* Neutral, for "not wired up yet" - red would overstate it. */
.form__status[data-kind='note'] {
  color: var(--text); background: var(--accent-wash);
}
.form__status[data-kind='note'] svg { fill: var(--accent); }

/* ==========================================================================
   Footer - four equal columns on a dark band, after category.cz. Their column
   set is brand+copyright / contact+social / site links / external and legal
   links. Ours keeps the shape but only carries content that actually exists:
   no social icons (the brand has no accounts in the leaflets) and no legal or
   cookie links (there are no such pages to point at). The fourth column
   carries the data sources instead, which were previously buried in a single
   footnote line.
   ========================================================================== */
/* Light footer, matching the menu bar: same near-white surface and the same
   dark brand logo top and bottom, so the wordmark reads as one mark, not two. */
.foot {
  background: var(--white); color: var(--text);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}
.foot__grid { display: grid; gap: 2.25rem 2rem; }
.foot__col h2 {
  font-size: var(--fs-small); font-weight: var(--fw-strong); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin-bottom: 1.1rem;
}
.brand--foot .brand__mark { width: 28px; }
.brand--foot .brand__word b { color: var(--navy); }
.brand--foot .brand__word i { color: var(--primary-hover); }
.brand--foot .brand__mark-ring { stroke: var(--navy-deep); }
.brand--foot .brand__mark-core { fill: var(--primary-hover); }
.brand--foot .brand__mark-gleam { stroke: var(--white); }
.foot__claim { margin-top: 1.1rem; font-size: var(--fs-detail); color: var(--text-muted); max-width: 40ch; }
.foot__copy { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--text-dim); }

.foot__contact { display: grid; gap: .8rem; }
.foot__contact li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: start; }
.foot__contact svg { width: 17px; height: 17px; fill: var(--accent); margin-top: .15rem; }
.foot__contact a { font-size: var(--fs-ui); color: var(--text-muted); text-decoration: none; }
.foot__contact a:hover { color: var(--accent); text-decoration: underline; }
/* A phone line that carries the person and their role under the number. */
.foot__person { display: grid; gap: .1rem; }
.foot__role { font-size: var(--fs-caption); color: var(--text-dim); }
/* The band is dark in both themes, so the CTA takes the same fixed treatment as
   the one in the nav rather than following the theme accent. */

.foot__links { display: grid; gap: .55rem; }
.foot__links a {
  display: inline-flex; gap: .5rem; font-size: var(--fs-ui);
  color: var(--text-muted); text-decoration: none;
  transition: color var(--t-fast) ease;
}
.foot__links a:hover { color: var(--accent); }

.foot__srcs { display: grid; gap: .55rem; }
.foot__srcs li { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-muted); }
/* Spans the whole 1200px footer, so it needs its own cap: fine print at 12px
   running the full width is the least readable line on the page. */
.foot__note {
  margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption); color: var(--text-dim);
  max-width: var(--measure-note);
}

@media (min-width: 620px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .foot__grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); }
}

/* ==========================================================================
   Assessment areas + process steps, inside #it. Two patterns: a six-up icon
   grid on a raised panel, and a numbered horizontal process joined by a dotted
   rule. The rule is drawn behind the badges and only where the row is actually
   horizontal, so it never dangles under a stacked layout.
   ========================================================================== */
.wheel__title,
.steps__title {
  font-size: var(--fs-d5); font-weight: var(--fw-strong);
  letter-spacing: -.015em; text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
/* Both sub-titles align to the section's left edge - the same column the intro
   paragraph and the heading sit on - rather than centring over their diagrams. */
.wheel__title { text-align: left; }
.steps__title { text-align: left; max-width: 600px; margin-inline: 0; }
/* Payoff heading on the questionnaire page: a touch larger and closer to its cards. */
.dozvite-head { font-size: var(--fs-d2); margin-bottom: clamp(.9rem, 2vw, 1.35rem); }

/* Process flow: five connected steps with arrows (replaces the old .steps block). */
.flow__head { margin-top: clamp(2.25rem, 5vw, 3.75rem); }
.flow {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(.5rem, 1.5vw, 1rem);
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
}
.flow__step { flex: 1 1 150px; max-width: 210px; display: grid; justify-items: center; text-align: center; gap: .5rem; }
.flow__node {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.flow__node svg { width: 26px; height: 26px; fill: var(--accent); }
.flow__n {
  position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: var(--fw-black);
}
.flow__step h4 { font-size: var(--fs-ui); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.flow__step p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.flow__arrow { flex: 0 0 auto; margin-top: 24px; color: var(--text-dim); }
.flow__arrow svg { width: 22px; height: 22px; fill: currentColor; display: block; }
@media (max-width: 760px) {
  .flow { flex-direction: column; align-items: center; }
  .flow__step { max-width: 340px; }
  .flow__arrow { margin: 0; rotate: 90deg; }
}

/* Plain warning-style notice (no card). */
.qnote { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; }
.qnote > svg { width: 22px; height: 22px; fill: var(--accent); margin-top: .2rem; }
.qnote p { margin: 0; font-size: var(--fs-detail); color: var(--text-muted); line-height: var(--lh-body); }
.qnote p + p { margin-top: .7rem; }
.qnote a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.qbar + .qnote { margin-top: 1.1rem; }

/* ==========================================================================
   Assessment wheel. A six-segment ring with the areas placed around it. The
   radial layout is gated behind @supports for trigonometric calc(): where that
   is unavailable the items stay a plain grid rather than collapsing into a heap.
   Each of the six segments carries its own palette colour, echoed on the area's
   icon so the ring reads as a legend. Colour is redundant here - every area
   keeps its label and icon - so the categorical palette is safe.
   ========================================================================== */
.wheel { margin-inline: auto; margin-block: clamp(2rem, 5vw, 4rem); }
/* Solid Seecure-navy disc with the logo in the middle; the six areas point into
   it with coloured arrows (desktop) instead of the ring being segmented. */
.wheel__disc {
  position: relative; width: min(245px, 64vw); aspect-ratio: 1;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #2E2B78 0%, #201E5A 55%, #181640 100%);
  display: grid; place-items: center;
}
.wheel__ring { width: 100%; height: auto; display: block; }
.wheel__arrow { display: none; }
.wheel__arrow svg { width: 32px; height: 32px; display: block; fill: var(--c, var(--accent)); }
.wheel__hub {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-content: center; text-align: center;
  font-size: var(--fs-small); line-height: 1.3; color: var(--text-muted);
}
/* Seecure logo centred on the navy disc. */
.wheel__logo { display: inline-flex; }
.wheel__logo a { display: inline-flex; transition: opacity .18s ease; }
.wheel__logo a:hover { opacity: .88; }
.wheel__logo img { width: clamp(135px, 18vw, 205px); height: auto; display: block; }

.wheel__items { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.wheel__item { display: grid; justify-items: center; align-content: start; gap: .4rem; text-align: center; }
.wheel__ico {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: .3rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.wheel__ico svg { width: 22px; height: 22px; fill: var(--accent); }
/* Numbered badge on each area, coloured to match its ring segment. */
.wheel__num {
  position: absolute; top: -7px; right: -7px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: var(--fw-black); color: #fff;
  background: var(--accent); box-shadow: var(--shadow-sm);
}
.wheel__item:nth-child(1) .wheel__num { background: #1E40AF; }
.wheel__item:nth-child(2) .wheel__num { background: #7C3AED; }
.wheel__item:nth-child(3) .wheel__num { background: #0F766E; }
.wheel__item:nth-child(4) .wheel__num { background: #D97706; }
.wheel__item:nth-child(5) .wheel__num { background: #38BDF8; }
.wheel__item:nth-child(6) .wheel__num { background: #DC2626; }
/* Each area's icon matches its ring segment, so the wheel doubles as a legend:
   the colour ties the label to the slice it belongs to. Order follows the six
   paths, which run clockwise from twelve o'clock, same as the items. */
.wheel__item:nth-child(1) .wheel__ico svg { fill: #1E40AF; }
.wheel__item:nth-child(2) .wheel__ico svg { fill: #7C3AED; }
.wheel__item:nth-child(3) .wheel__ico svg { fill: #0F766E; }
.wheel__item:nth-child(4) .wheel__ico svg { fill: #D97706; }
.wheel__item:nth-child(5) .wheel__ico svg { fill: #38BDF8; }
.wheel__item:nth-child(6) .wheel__ico svg { fill: #DC2626; }
.wheel__item h4 { font-size: var(--fs-ui); font-weight: var(--fw-strong); letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.wheel__item p { font-size: var(--fs-small); color: var(--text-muted); }

@media (min-width: 560px) { .wheel__items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .wheel__items { grid-template-columns: repeat(3, 1fr); } }

/* Radial arrangement: x = R sin(a), y = -R cos(a), with a measured clockwise
   from twelve o'clock so each item lands on its own segment. */
@supports (left: calc(1px * sin(30deg))) and (translate: 0 0) {
  @media (min-width: 1040px) {
    .wheel { position: relative; height: 810px; max-width: 1010px; }
    .wheel__items { display: block; }
    .wheel__disc, .wheel__item {
      position: absolute; left: 50%; top: 50%;
      /* The `translate` property, not `transform`: .reveal animates transform and
         wins on specificity, so a centring transform here would be overwritten.
         These two properties compose. */
      translate: -50% -50%;
    }
    .wheel__disc { margin: 0; width: 342px; }
    .wheel__arrow {
      display: block; position: absolute;
      left: calc(50% + 227px * sin(var(--a)));
      top: calc(50% - 227px * cos(var(--a)));
      translate: -50% -50%;
      rotate: calc(var(--a) + 180deg);
    }
    .wheel__item {
      width: 220px;
      left: calc(50% + 368px * sin(var(--a)));
      top: calc(50% - 368px * cos(var(--a)));
    }
    /* Labels scaled to the ring so the infographic reads as one. */
    .wheel__item .wheel__ico { width: 56px; height: 56px; margin-bottom: .45rem; }
    .wheel__item .wheel__ico svg { width: 25px; height: 25px; }
    .wheel__num { width: 26px; height: 26px; font-size: .8rem; top: -7px; right: -7px; }
    .wheel__item h4 { font-size: 1.08rem; }
    .wheel__item p { font-size: var(--fs-detail); }
  }
}

/* "tato opatření" refers to the six areas, so it has to sit after them. Icon
   inline so one short centred line stays one line. */
.assess__note {
  margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: var(--measure);
  text-align: center; font-size: var(--fs-detail); color: var(--text-muted);
}
.assess__note svg {
  display: inline-block; vertical-align: -.2em; margin-right: .45rem;
  width: 17px; height: 17px; fill: var(--accent);
}

.steps { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
/* Process beside a supporting image: the stepper keeps the left column it shares
   with the section's paragraphs, the image fills the space to its right. Stacks
   on narrow screens with the image below the steps. */
.steps__layout { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .steps__layout { grid-template-columns: minmax(0, 520px) 1fr; }
}
.steps__media {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.steps__media img { width: 100%; height: auto; display: block; }
/* Vertical stepper: a marker column on the left (icon circle + number badge)
   with the text on its right, joined by a dotted rail down the markers' centre.
   One column at every width - the process reads top to bottom as a sequence. */
.steps__row {
  display: grid; gap: 0;
  max-width: 600px; margin-inline: 0;
}
.steps__cell {
  display: grid; grid-template-columns: 56px 1fr; column-gap: 1.35rem;
  text-align: left; align-items: start;
  padding-bottom: clamp(1.9rem, 3.5vw, 2.75rem);
  position: relative;
}
.steps__cell:last-child { padding-bottom: 0; }
/* dotted rail from just below one marker down to the next marker's top */
.steps__cell:not(:last-child)::before {
  content: ''; position: absolute; z-index: 0;
  left: 27px; top: 62px; bottom: -4px;
  border-left: 2px dotted var(--border-strong);
}
.steps__marker { position: relative; width: 56px; height: 56px; z-index: 1; }
.steps__ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--border);
}
.steps__ico svg { width: 25px; height: 25px; fill: var(--accent); }
.steps__n {
  position: absolute; top: -5px; right: -5px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-caption); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg-soft);
}
.steps__text { padding-top: .3rem; }
.steps__cell h4 { font-size: var(--fs-base); font-weight: var(--fw-strong); letter-spacing: -.01em; margin: 0; line-height: 1.3; }
.steps__cell p { font-size: var(--fs-detail); color: var(--text-muted); margin-top: .35rem; max-width: 46ch; }
.steps__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }

/* ==========================================================================
   Contact page (kontakt.html). Two profiles as image/text splits, alternating
   so the page does not read as a repeated stack. Reuses .qhead.
   ========================================================================== */

.bio { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
.bio + .bio { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--border); }
/* The portrait source is square, so it is shown square. Forcing the 4:5 the
   placeholder assumed would upscale it and crop a fifth of the frame away. */
.bio__photo {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  display: block; border-radius: var(--r-lg);
}

/* The partner mark is a white SVG, so it needs a dark field to exist against -
   on the section background it would be invisible. Contained, never covered: a
   logo must not be cropped. Height follows the mark plus padding rather than a
   fixed ratio, which would leave a cavern of empty navy under a 5.4:1 logotype. */
.bio__logo {
  display: grid; place-items: center;
  min-height: clamp(132px, 16.5vw, 162px);
  padding: clamp(1rem, 2.6vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  background: #201E5A; border-radius: var(--r-lg);
}
.bio__logo img { width: 100%; max-width: 260px; height: auto; display: block; }
/* MAXIMA: brand red; its wordmark is smaller, so it is forced wider to sit at
   roughly the same size as Seecure in an equally sized badge. */
.bio__logo--maxima { background: #DA1A32; }
.bio__logo--maxima img { width: 250px; max-width: 100%; }
/* PAFIN gets a white badge so all three medailonky share a solid rectangle
   (navy / red / white). Its logo is square, so it is capped by height to keep the
   badge the same height as the others. */
.bio__logo--light { background: #fff; overflow: hidden; }
.bio__logo a { display: block; transition: opacity .18s ease; }
.bio__logo a:hover { opacity: .85; }
.bio__body h2 {
  font-size: var(--fs-d3);
  letter-spacing: -.02em; margin-bottom: .9rem;
}
.bio__body p { color: var(--text-muted); max-width: var(--measure); }
.bio__body p + p { margin-top: .9rem; }
.bio__quote {
  margin-top: 1.35rem !important; padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--text) !important; font-size: var(--fs-copy);
}
@media (min-width: 860px) {
  .bio { grid-template-columns: 34% 1fr; }
  /* Text stays top-aligned so the names line up, but the image/logo is centred
     in its column - short logos no longer float at the top with a gap below,
     which gave the three profiles an uneven, inconsistent look. */
  .bio__photo, .bio__logo { align-self: center; }
  /* Pafin now carries a longer text, so its logo sits at the top next to the
     heading rather than floating in the vertical middle. */
  .bio__logo--light { align-self: center; }
  .bio--flip { grid-template-columns: 1fr 34%; }
  .bio--flip .bio__photo, .bio--flip .bio__logo { order: 2; }
}

/* ==========================================================================
   Questionnaire page (dotaznik.html). Reuses .form, .field and the status
   styles; adds the page header, the question groups and the option controls.
   Radios and checkboxes stay native and are tinted with accent-color, so
   keyboard and assistive-tech behaviour is the browser's, not a reimplementation.
   ========================================================================== */
.qhead {
  background: var(--navy-deep); color: var(--text-on-navy);
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.qhead h1 {
  font-size: var(--fs-d1-form);
  font-weight: var(--fw-black); letter-spacing: -.03em; line-height: var(--lh-display);
  color: var(--white); max-width: 34ch;
}
/* Same light-on-dark compensation as .hero__sub: more leading, a little tracking. */
.qhead__lead {
  margin-top: 1rem; color: var(--text-on-navy);
  max-width: var(--measure); font-size: var(--fs-copy);
  line-height: var(--lh-body); letter-spacing: .006em;
}
.qhead__meta {
  margin-top: 1.35rem; display: inline-grid; grid-template-columns: 20px 1fr; gap: .6rem;
  align-items: center; font-size: var(--fs-detail); color: var(--text-on-navy-muted);
}
.qhead__meta svg { width: 18px; height: 18px; fill: var(--cyan); }

/* Benefit bar under a questionnaire intro: a tinted box with an icon and a short
   sentence, so the key points read as one designed element, not a bullet list. */
.qbar {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem;
  margin-top: 1.4rem; max-width: var(--measure);
  background: var(--accent-wash); border: 1px solid var(--accent-wash-2);
  border-radius: var(--r-lg);
  padding: clamp(.8rem, 1.6vw, 1rem) clamp(1rem, 2.2vw, 1.3rem);
}
.qbar svg { width: 24px; height: 24px; fill: var(--accent); flex: none; }
.qbar p { margin: 0; font-size: var(--fs-detail); color: var(--text); line-height: var(--lh-body); }
.qbar strong { color: var(--accent); font-weight: var(--fw-strong); }
/* The CTA lives inside the bar, centred directly under its sentence. */
.qbar__body { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.qbar__body .hero__cta { margin: 0; }
.qbar__body .btn { padding: .72rem 1.84rem; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; }

/* Seecure section: logo badge, outline CTA and a two-card closing block. */
.seecure-mark {
  display: inline-flex; margin-bottom: 1.15rem;
  background: #201E5A; border-radius: var(--r-md); padding: .8rem 1.5rem;
}
.seecure-mark img { width: 200px; height: auto; display: block; }
.btn--outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--outline:hover { background: var(--accent-wash); color: var(--accent-hover); border-color: var(--accent-hover); }
.cta-split { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 720px) { .cta-split { grid-template-columns: 1fr 1fr; } }
.cta-split__card {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: grid; align-content: start; gap: .85rem;
}
.cta-split__card h3 { font-size: var(--fs-d5); font-weight: var(--fw-strong); letter-spacing: -.01em; }
.cta-split__card p { margin: 0; color: var(--text-muted); font-size: var(--fs-detail); line-height: var(--lh-body); }
.cta-split__card .btn { justify-self: start; margin-top: .25rem; }
.cta-split__card .src { margin-top: 0; }
.cta-split__contact { display: grid; gap: .55rem; }
.cta-split__contact li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: center; }
.cta-split__contact svg { width: 17px; height: 17px; fill: var(--accent); }
.cta-split__contact a { font-size: var(--fs-detail); color: var(--text-muted); text-decoration: none; }
.cta-split__contact a:hover { color: var(--accent); text-decoration: underline; }

/* Regulatory disclosure as quiet fine print, tucked under the Pafin profile and
   set off by a hairline rather than its own band. */
.disclosure {
  max-width: var(--measure);
  margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border);
  text-align: center;
}
.disclosure h2 {
  font-size: var(--fs-caption); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-muted); margin-bottom: .85rem;
}
.disclosure p { font-size: var(--fs-detail); color: var(--text-dim); line-height: 1.7; }
.disclosure p + p { margin-top: .9rem; }
.disclosure a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.disclosure a:hover { color: var(--accent-hover); }

/* ---------- legal / policy document ---------- */
.legal { max-width: var(--measure); }
.legal > * + * { margin-top: .9rem; }
.legal h2 {
  font-size: var(--fs-d3); font-weight: var(--fw-black); letter-spacing: -.02em;
  line-height: 1.2; margin-top: clamp(2.25rem, 4.5vw, 3rem);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: var(--fs-copy); font-weight: var(--fw-strong); letter-spacing: -.01em;
  margin-top: 1.6rem;
}
.legal p, .legal li { color: var(--text); line-height: var(--lh-body); }
.legal ul { list-style: disc; padding-left: 1.4rem; display: grid; gap: .4rem; }
.legal address { font-style: normal; line-height: 1.7; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent-hover); }
.legal__updated {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-detail); color: var(--text-muted);
}

/* Kontakt page: give the band extra room at the bottom, then lift the contact
   cards up so they emerge from the dark band and straddle the light section. */
.qhead--contacts { padding-bottom: clamp(4.5rem, 9vw, 6.5rem); }
.qcontacts {
  display: grid; gap: 1rem;
  margin-top: clamp(-4.5rem, -8vw, -3rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 2;
}
@media (min-width: 560px) { .qcontacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .qcontacts { grid-template-columns: repeat(3, 1fr); } }
.qcontacts__cell {
  display: grid; gap: .3rem; align-content: start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.15rem, 2.5vw, 1.6rem);
  box-shadow: 0 14px 34px -18px rgba(15, 23, 42, .45);
  text-decoration: none; color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.qcontacts__cell:hover {
  transform: translateY(-2px); border-color: var(--border-strong);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .5);
}
.qcontacts__cell svg { width: 24px; height: 24px; fill: var(--accent); }
.qcontacts__label { font-size: var(--fs-detail); color: var(--text-muted); }
.qcontacts__val { font-size: 1.0625rem; font-weight: var(--fw-semi); }
.qcontacts__note { font-size: var(--fs-detail); color: var(--text-dim); margin-top: .1rem; }

.qsec { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.form--q { gap: 0; max-width: 56rem; margin-inline: auto; }

.qgroup { display: grid; gap: 1.6rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.qgroup + .qgroup { border-top: 1px solid var(--border); }
.qgroup:first-of-type { padding-top: 0; }
/* --fw-strong, not the inherited 400: this is a group heading and at 17px/400 it
   was the same weight as the option rows under it, so it read as one more line
   of the form rather than as the thing that divides it. */
.qgroup__title {
  font-size: var(--fs-copy); font-weight: var(--fw-strong); letter-spacing: -.01em;
}
/* Short instruction line(s) under a group heading, e.g. "Potvrďte prosím, že...". */
.qgroup__intro { margin-top: -1rem; font-size: var(--fs-detail); color: var(--text-muted); line-height: var(--lh-body); max-width: var(--measure); }
.qgroup__intro + .qgroup__intro { margin-top: -1.2rem; }

/* A question, whether it is a fieldset of options or a single text field. */
.q { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; }
.q > legend, .q > label {
  font-size: var(--fs-ui); font-weight: var(--fw-semi); color: var(--text);
  display: block; padding: 0; line-height: 1.45;
}
/* The question number has to hold a column so all 20 legends start on the same
   x - but min-width does that, and tabular-nums keeps "1." and "18." on the same
   advance inside it. Neither needs a second typeface. */
.q__n {
  display: inline-block; min-width: 2em;
  font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.q__n::after { content: '.'; }
.q__opt-tag {
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--text-muted); white-space: nowrap;
}
.q__opts { display: grid; gap: .1rem; margin-top: .2rem; }

/* The whole row is the hit target, not just the 16px control. */
.opt {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .5rem .65rem; margin-inline: -.65rem;
  border-radius: var(--r-md); cursor: pointer;
  font-size: var(--fs-ui); color: var(--text-muted);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.opt input { accent-color: var(--accent); width: 17px; height: 17px; margin-top: .16rem; }
.opt:hover { background: var(--accent-wash); color: var(--text); }
.opt:has(input:checked) { color: var(--text); font-weight: var(--fw-medium); }
.opt:has(input:focus-visible) { background: var(--accent-wash); box-shadow: 0 0 0 2px var(--accent); }
.opt__other { margin-top: .35rem; margin-left: 1.65rem; max-width: 22rem; }

.qfoot {
  display: grid; gap: 1rem; justify-items: start;
  padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--border);
}
.qfoot__count { font-size: var(--fs-detail); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qfoot .form__status { width: 100%; }

/* A questionnaire is long, so the invalid-question summary needs to be findable. */
.q[data-invalid] > legend, .q[data-invalid] > label { color: var(--negative); }
.q[data-invalid] .q__n { color: var(--negative); }

.foot--slim { padding-block: 2rem; }
.foot--slim .foot__in { grid-template-columns: 1fr; gap: 1rem; }
.foot--slim .foot__claim { color: var(--text-muted); max-width: 60ch; }
.foot--slim .foot__claim a { color: var(--accent); }

/* ---------- back to top ---------- */
.totop {
  position: fixed; z-index: 50;
  right: clamp(1rem, 2.5vw, 1.5rem); bottom: clamp(1rem, 2.5vw, 1.5rem);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .5);
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out),
              background-color var(--t-fast) ease;
}
.totop[data-on] { opacity: 1; transform: none; }
.totop:hover { background: var(--accent-hover); }
.totop:active { transform: scale(.94); }
.totop svg { width: 19px; height: 19px; fill: currentColor; }

/* ==========================================================================
   Motion - MOTION_INTENSITY 4.
   Every animation here does one job: reveal-on-scroll establishes reading
   order, the line draw and bar growth carry the magnitude story, and press
   states confirm input. Nothing loops, nothing hijacks the scroll.
   ========================================================================== */
/* Everything below is scoped to .js so the page is fully readable without
   scripting: no opacity 0, no zero-width bars, no undrawn line. */
.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out);
  transition-delay: var(--d, 0ms);
}
/* Draw-in is a left-to-right clip sweep, NOT stroke-dash. The plot SVG is
   stretched non-uniformly and the line carries vector-effect: non-scaling-stroke,
   which makes dash lengths resolve in screen space - pathLength cannot normalise
   that, so a dasharray leaves the finished line rendered as dashes. Clipping is
   immune to the scaling and sweeps the area wash in with the line. */
.js .plot__svg { clip-path: inset(0 100% 0 0); }
.js .chart.in .plot__svg { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--e-out) 120ms; }
.js .plot__dots i, .js .plot__val { opacity: 0; }
.js .chart.in .plot__dots i { opacity: 1; transition: opacity 300ms ease 700ms; }
.js .chart.in .plot__val { opacity: 1; transition: opacity 300ms ease 820ms; }
.js .bars__fill { width: 0; }
.js .chart.in .bars__fill { width: var(--w); transition: width 700ms var(--e-out) var(--d, 0ms), background-color var(--t-fast) ease; }
.js .bars__val { opacity: 0; }
.js .chart.in .bars__val { opacity: 1; transition: opacity 260ms ease calc(var(--d, 0ms) + 420ms); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .js .plot__svg, .js .chart.in .plot__svg { clip-path: none; transition: none; }
  .js .plot__dots i, .js .plot__val, .js .bars__val { opacity: 1; }
  .js .bars__fill { width: var(--w); }
  .js .chart.in .plot__dots i, .js .chart.in .plot__val,
  .js .chart.in .bars__fill, .js .chart.in .bars__val { transition: none; }
  .btn, .tip, .acc__caret, .dataview summary svg { transition: none; }
  .pcard, .pcard:hover { transition: none; transform: none; }
  .nav__sub { transition: opacity 1ms linear, visibility 1ms linear; transform: none; }
  .nav__item[data-open] .nav__sub { transform: none; }
  .hero__vidbtn { transition: none; }
  .hero__vidbtn:active { transform: none; }
  .totop { transition: opacity 1ms linear; transform: none; }
  .totop[data-on] { transform: none; }
  .totop:active { transform: none; }
  .btn:active { transform: none; }
  .acc details::details-content { transition: none; }
}

/* Texture / high-contrast backup: keep every mark visible without relying on hue. */
@media (forced-colors: active) {
  .bars__fill, .plot__dots i, .ln { forced-color-adjust: none; }
  .bars__fill { background: CanvasText; }
  .ln { stroke: CanvasText; }
  .plot__dots i { background: CanvasText; box-shadow: 0 0 0 2px Canvas; }
  .plot__grid i { background: GrayText; }
  .panel, .trio__card, .insight { border: 1px solid CanvasText; }
}

@media print {
  .nav, .tip { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .plot__svg { clip-path: none; }
  .js .plot__dots i, .js .plot__val, .js .bars__val { opacity: 1; }
  .js .bars__fill { width: var(--w); }
  .dataview[open] { break-inside: avoid; }
}

/* ======================================================================
   Added sections: case examples, price table, FAQ
   Uses existing design tokens only.
   ====================================================================== */

/* ---------- Příklady škod z praxe ----------
   Three scenarios across, each split into a tinted head (what happened) and a
   plain body (what the policy pays). The split is what carries the meaning here,
   so the cards do not need the accent top rule the earlier version used. */
.scens { display: grid; gap: 1rem; }
@media (min-width: 900px) { .scens { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.scen {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  display: grid; grid-template-rows: auto 1fr;
  /* No overflow: hidden - a subgrid that is a scroll container falls back to an
     independent grid, which is exactly what the row alignment below needs. The
     head rounds its own top corners instead. */
  transition: border-color var(--t-mid) ease, transform var(--t-mid) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .scen:hover { border-color: var(--border-strong); transform: translateY(-2px); }
}
.scen__head {
  display: grid; gap: .85rem; align-content: start;
  /* --accent-wash-2, not --accent-wash: on the section's soft band the lighter
     wash is nearly the same tone and the split stops reading. */
  background: var(--accent-wash-2); border-bottom: 1px solid var(--border);
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  /* -1px so the tint stops inside the card's own border rather than on top of it. */
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.scen__head h3 { font-size: var(--fs-title); }
.scen__ico {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-raised); box-shadow: var(--shadow-sm);
}
.scen__ico svg { width: 22px; height: 22px; fill: var(--accent); }
.scen__body { padding: clamp(1.15rem, 2.2vw, 1.5rem); display: grid; align-content: start; gap: .75rem; }
.scen__lbl { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: var(--fw-strong); }

/* Subgrid so the three tinted heads share one row height: a title that wraps to
   two lines would otherwise push its own band deeper than its neighbours' and
   the row would read as three misaligned cards. Must come after the .scen rules
   above, which set grid-template-rows at the same specificity. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .scens { grid-template-rows: auto auto; }
    .scen { grid-row: span 2; grid-template-rows: subgrid; }
  }
}

/* ---------- Orientační cena, table ---------- */
/* --------------------------------------------------------------------------
   Pricing examples. Three photo cards instead of a table: the point of this
   block is the contrast between the three prices, not row-by-row comparison,
   so each figure gets room to be read. The price is the only accent-coloured
   number in the card, which makes it the thing the eye lands on.
   -------------------------------------------------------------------------- */
/* Left-aligned to match every other section head on the page; only #it centres. */
.pcards-head { max-width: 52ch; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); }
.pcards-head h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: var(--fw-strong); letter-spacing: -.015em; margin-bottom: .5rem; }
.pcards-head p { color: var(--text-muted); font-size: var(--fs-ui); }

.pcards { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 720px)  { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pcards { grid-template-columns: repeat(3, 1fr); } }

.pcard {
  display: flex; flex-direction: column;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;                       /* clips the photo to the card radius */
  transition: box-shadow var(--t-mid) ease, transform var(--t-mid) var(--e-out);
}
@media (hover: hover) {
  .pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
/* height: auto is load-bearing: the width/height attributes on the <img> (there to
   reserve layout space) otherwise set a used height of 660px that beats aspect-ratio. */
.pcard__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.pcard__name { font-size: var(--fs-title); font-weight: var(--fw-strong); letter-spacing: -.015em; line-height: 1.25; margin: 0; }
.pcard__name span {
  display: block; margin-top: .2rem;
  font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: 0;
  color: var(--text-dim); text-transform: none;
}

.pcard__facts { margin: .95rem 0 0; display: grid; gap: .45rem; }
.pcard__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.pcard__facts dt { font-size: var(--fs-small); color: var(--text-muted); }
.pcard__facts dd {
  /* Body font, not --mono: the page is set in Manrope and Geist Mono beside it
     read as a different typeface rather than as figures. tabular-nums still keeps
     the digits on a fixed advance so the amounts line up down the column. */
  margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* margin-top: auto pins the price to the card floor so all three line up even
   when the industry names wrap to different heights. */
.pcard__price {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .15rem;
  margin-top: auto;
}
.pcard__price span { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: var(--fw-strong); }
.pcard__price strong {
  font-size: var(--fs-figure); font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--accent); line-height: 1.1;
}

/* ---------- FAQ (reuses .acc) ---------- */
.acc--faq { margin-top: clamp(1.5rem, 3vw, 2.2rem); max-width: var(--wrap-faq); }
.acc--faq .acc__body p { font-size: var(--fs-base); color: var(--text-muted); }
.acc--faq .acc__body p + p { margin-top: .9rem; }
.acc--faq .acc__body .ilist { margin: .7rem 0; }