/* TPA E-commerce — jeden štýl pre celý web.
   Zlúčené z piatich kópií, ktoré sa navzájom rozišli; pri kolízii vyhral
   index.html ako najaktuálnejší. Staré CSS dashboardu (.ch__, .rk__, .kpi,
   .db__panel), ktoré si nieslo osem stránok bez zodpovedajúceho markupu,
   je odstránené. Servíruje sa z /assets/site.css. */

/* ---------------------------------------------------------------------------
   Písma — vlastný hosting

   Do v3.75 sa ťahali z Google Fonts. Znamenalo to, že pri každom načítaní
   odišla IP adresa návštevníka Googlu **skôr, než sa ho stihol niekto na
   čokoľvek spýtať** — cookie lišta na tom nič nezmení, lebo požiadavka
   odchádza pri prvom vykreslení. Je to presne ten typ nálezu, aký mala
   Baker Tilly k analytike, a jediná odpoveď naň je nemať to tam.

   Vedľajší zisk je rýchlosť: odpadli dve spojenia na cudzie servery
   (`fonts.googleapis.com` na štýl, `fonts.gstatic.com` na súbory), z toho
   jedno blokovalo vykreslenie. Písma teraz chodia po spojení, ktoré je už
   otvorené.

   Podmnožiny sú len `latin` a `latin-ext` — slovenčina potrebuje obe (ľ, ť,
   ď, ĺ, ŕ, ô, ä sú v `latin-ext`) a viac ich netreba. Cyriliku, gréčtinu
   a vietnamčinu, ktoré Google ponúka, tu nemá kto prečítať.

   Prehliadač stiahne len tie rezy, ktoré stránka naozaj použije. Geist Mono
   600 je deklarovaný, ale dnes ho nič nepoužíva, takže sa nesťahuje; keby
   niekde pribudol, funguje bez ďalšej práce.

   Zdroj a licencia: `assets/fonts/README.md`.
--------------------------------------------------------------------------- */
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/geist-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/geist-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/geist-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/geist-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/geist-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/geist-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('/assets/fonts/schibsted-grotesk-400-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('/assets/fonts/schibsted-grotesk-400-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   TPA E-commerce
   Green as the page's material. Grotesk for everything that
   reads; mono reserved for micro-labels.
   ============================================================ */

:root{
  color-scheme: light;

  --ink:#031A0F;          /* taken from the wordmark itself */
  --ink-2:#3F5648;
  --ink-3:#526B5B;

  --paper:#FFFFFF;
  /* --field-0 je najsvetlejší stupeň zelenej. Existuje kvôli jedinému
     miestu — postupnosti „Ako to funguje", kde sa plocha kariet stupňuje
     cez tri tóny. Inde sa nepoužíva. */
  --field-0:#F5FAF6;
  --field:#EDF4EE;
  --field-2:#E3EDE6;
  /* Podklad sekcie, na ktorej stoja biele karty — viď `.sec--tint`.
     Jeden stupeň nad svetlozelenou kartou, nie dva: #D9E7DE bolo na
     celú sekciu priveľa tmavé. */
  --sec-zelena:var(--field-2);
  --dark:#051E12;
  --dark-2:#0C2A1B;

  --brand:#005233;
  --brand-dk:#003A23;
  --mint:#8FE0AE;

  /* the brighter accent, on both grounds. 5.03:1 against --dark, and 3.08:1 on
     the pale panel — over the 3:1 floor, and every light-ground use of it is
     display type: the rotating word, the scroll statement, the hero figures.
     Nothing at body size is painted in it. */
  --accent:#3F9B55;
  --accent-dk:#3F9B55;
  /* The same green, dark enough to be read rather than admired. The two above
     are display sizes only — at 13px they land on 3.48:1, under the 4.5 floor —
     so anything accent-coloured at body size takes this one instead: 5.08:1. */
  --accent-txt:#2F7D42;
  --line:#CBDCD0;
  --line-dk:rgba(255,255,255,.14);

  /* Text na tmavom podklade — zrkadlo k --ink/-2/-3, rovnako ako --line-dk
     je zrkadlom k --line. Sú to štyri stupne jednej škály a používa ich
     pätka, tmavé karty, plávajúce lišty aj tmavý prepínač; do auditu
     21. 9. 2026 boli rozpísané v 23 hexoch po celom hárku. */
  --ink-dk:#E6F0E9;      /* bežný text */
  --ink-dk-2:#D3E3D9;    /* tichší — menovky, odkazy v pätke */
  --ink-dk-3:#A9C0B3;    /* doplnkový — popisy pod nadpismi */
  --ink-dk-4:#7C9989;    /* najtichší — náhradný text, drobné odkazy */

  /* Jediná červená na webe. Boli dve, líšili sa o tri body v odtieni
     a obe označovali to isté: chybu vo formulári. */
  --chyba:#A8322B;

  /* Výstražná rodina pre diagnostické ukážky v Problémoch. Nie je to chyba
     formulára — je to stav dát: nespárované, neúplné, neaktuálne, čakajúce.
     Preto vlastný, tlmenejší odtieň, nie `--chyba`.

     Delenie je to isté ako pri `--accent` / `--accent-txt` a z tej istej
     príčiny: `--pozor` má na bielej 3,53:1, čo stačí na plochy a značky, ale
     nie na text. Čokoľvek písané berie `--pozor-txt` — 5,86:1 na bielej
     a 5,55:1 na karte. Použitie je úsporné: nanajvýš desatina kresby. */
  --pozor:#C96F64;       /* plochy, bodky, pásy — nikdy text */
  --pozor-txt:#A24A3D;   /* text a čísla */
  --pozor-100:#F5E3E0;   /* výplň štítku */

  --demo:#7A5E12; --demo-bg:#F7F2E4; --demo-line:#E3D5A8;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;

  /* ---- rádiusy ----
     **Štyri stupne podľa veľkosti prvku, nič medzi tým.** Zaoblenie je mierka:
     čím väčšia plocha, tým väčší rádius, inak sa rovnaké číslo na drobnom
     štítku číta ako kapsula a na celej sekcii ako ostrý roh.

       --r-sm   drobnosti: štítky, značky, ohniskové rámčeky, malé štvorčeky
       --r-md   ovládače a moduly: tlačidlá, polia, panely v kartách
       --r-lg   karty: experti, články, ohlasy, dlaždice problémov
       --r-xl   celé plochy: hero panel, stoh služieb

     Do v2.78 ich bolo šesť a dva z nich (--r-sm a --r-md) mali tú istú
     hodnotu, takže stupnica v skutočnosti nebola stupnica: dlaždica problému
     mala 22 px, panel v nej 15, karta 14 a stoh služieb 20–24. Vedľa seba
     z toho boli štyri rôzne dizajnové jazyky.

     `--r-btn`, `--r-float`, `--pole-r` a `--pole-r-ta` zanikli — boli to mená
     pre hodnoty, ktoré už v stupnici sú. Meno má niesť **veľkosť, nie
     komponent**; inak pribudne s každým novým prvkom ďalší rádius. */
  --r-sm:8px; --r-md:14px; --r-lg:19px; --r-xl:25px; --r-pill:999px;

  /* ---- ovládače ----
     Jeden systém pre všetko, čo sa dá stlačiť alebo prepnúť. Miery sú tu,
     nie pri komponentoch — výška tlačidla a výška prepínača sa nesmú rozísť.
     Viď blok „ovládače: jeden systém“ nižšie. */
  --ctl-h:50px;            /* výška tlačidla aj prepínača */
  --ctl-pad:22px;          /* vodorovné odsadenie tlačidla aj segmentu */
  --ctl-fs:1rem;           /* popiska tlačidla, 16 px */
  --seg-fs:.9375rem;       /* popiska segmentu, 15 px */
  --seg-pad:5px;           /* vzduch v puzdre prepínača */
  /* Tieň má len to, čo naozaj pláva nad stránkou: plávajúce lišty a bublina
     vysvetlivky. Karty, tlačidlá ani prepínače v toku ho nemajú a mať nesmú.
     Sú to dva stupne jedného tieňa, nie dva tiene — nad tmavým podkladom by
     svetlejší z nich nebolo vidieť vôbec. */
  --tien-float:0 12px 32px rgba(3,26,15,.18);      /* nad svetlým */
  --tien-float-dk:0 10px 28px rgba(0,0,0,.34);     /* nad tmavým */
  /* Mäta pod kurzorom a stlačená. Sú to stupne existujúcej mätovej, nie
     nová farba — dovtedy to boli magické hexy pri komponentoch. */
  --mint-dk:#7BD69C;
  --mint-press:#6CC98C;

  /* ---- formulárové polia ----
     Do v2.54 mal každý formulár na webe vlastné čísla — kontakt, onboarding,
     hľadanie v Z praxe aj odber v pätke. Teraz ich má na jednom mieste.
     Rádius si polia neberú vlastný, majú `--r-md` ako každý iný ovládač. */
  --pole-h:50px;              /* výška jednoriadkového poľa */
  --pole-pad:15px;            /* vodorovné odsadenie */
  --pole-ph:#8FA598;          /* náhradný text na svetlom */
  --pole-ph-dk:var(--ink-dk-4);   /* a na tmavom — najtichší stupeň škály */
  --pole-prsten:0 0 0 3px rgba(0,82,51,.12);
  --pole-prsten-dk:0 0 0 3px rgba(143,224,174,.18);

  /* Prechod medzi stránkami. Jediný zdroj pravdy — `site-a.js` si obe hodnoty
     číta odtiaľto, aby sa dĺžka v skripte a v štýloch nerozišli. */
  --wipe-dur:.7s;                /* jeden stĺpec */
  --wipe-krok:44ms;              /* odstup medzi susednými stĺpcami */

  --hdr:84px;                    /* header height, referenced by every sticky offset */
  --gut:clamp(20px,4vw,48px);
  --maxw:1360px;

  --sans:"Schibsted Grotesk",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* ---- motion ----
     Three curves and five duration bands, and nothing else. None of the curves
     overshoot: no bounce, no elastic, no back. Which curve applies is decided
     by what moves, not by which section it lives in.
       --e        travels a real distance: reveals, cards, carousel, dropdowns
       --e-micro  stays under the cursor: hover, colour, small state changes
       --e-enter  a large element arriving for the first time
     The bands run hover .2s, small UI .22s, card .35s, section .6s, carousel
     .7s. The one deliberate exception is the press on a button, which stays at
     .14s — feedback to a finger has to land before the finger lifts. */
  --e:cubic-bezier(.22,1,.36,1);
  --e-micro:cubic-bezier(.4,0,.2,1);
  --e-enter:cubic-bezier(.16,1,.3,1);
  --t-hover:.2s; --t-ui:.22s; --t-card:.35s; --t-sec:.6s; --t-car:.7s;
  --fast:var(--t-hover) var(--e-micro);
}

*,*::before,*::after{ box-sizing:border-box; }
/* Farba pruhu, ktorý sa objaví pri odpružení. **Prehliadače sa nezhodnú
   v tom, odkiaľ ju berú:** Chrome z `<html>`, teda podľa normy, a máme tam
   `--dark`, takže má oba konce zelené. Safari ju berie z `<body>`, takže má
   oba konce biele. Odmerané na tom istom CSS 28. 9. 2026.

   **Je to jedna farba pre oba konce a vybrať sa dá len jedna.** Hore je biela
   správna: sedí s hlavičkou a je to ten koniec, ktorý človek uvidí, keď
   potiahne stránku na obnovu. Biely pruh pod pätkou v Safari je cena za to
   a nechávame ho.

   Skúšali sme to obísť tieňom na pätke (v3.90), ktorý mal svoju tmavú
   namaľovať 600 px pod seba. Nezabralo: Safari do toho pásu obsah stránky
   nekreslí, iba ho vyplní. Tieň je preto preč, aby sa k nemu nikto nevracal.

   **`overscroll-behavior-y:none` tu bolo do v3.89 a bránilo odpruženiu úplne.**
   Vypínalo tým aj ťahanie na obnovu, ktoré má Safari na macOS aj na telefóne:
   keď je stránka navrchu a potiahneš ju nadol, objaví sa koliesko a stránka sa
   načíta znova. Marek to videl na treams.com a supply.family a chcel to aj
   u nás; overil som im kód a žiadne koliesko v ňom nemajú, je prehliadačov.
   Jediné, čo tie weby robia inak, je že si ho nevypínajú.

   Cena je druhý koniec: odpruženie je odteraz aj navrchu a pruh nad hlavičkou
   má farbu plátna, teda tmavú. Pod pätkou to je správne, nad bielou hlavičkou
   je to rozhodnutie, nie omyl. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--dark); }
html,body{ width:100%; }

/* ---------- scrollbar ----------
   Whether WebKit overlays its own scrollbar or gives it a layout column is a
   machine setting, not something CSS decides — and the column version paints a
   light track that cuts a strip beside every dark section. So the native bar is
   removed, the document keeps the whole viewport, and the bar below is drawn
   over the page instead: nothing is reserved, nothing shifts, and the page runs
   underneath it. Wheel, keyboard and trackpad scrolling are untouched; the
   thumb adds back the one thing hiding the native bar would cost, dragging. */
html{ scrollbar-width:none; }
html::-webkit-scrollbar{ width:0; height:0; display:none; }

.sbar{
  position:fixed; top:0; right:3px; bottom:0; width:10px; z-index:9500;
  pointer-events:none; opacity:0; transition:opacity .28s var(--e-micro);
}
.sbar[data-on="true"]{ opacity:1; }
.sbar__t{
  position:absolute; right:2px; width:6px; min-height:40px; border-radius:999px;
  /* one translucent mid-tone reads on the pale sections and on the dark ones,
     so the bar never needs to know what it is passing over */
  background:rgba(116,142,127,.62);
  pointer-events:auto; cursor:default;
  transition:background var(--t-hover) var(--e-micro), width var(--t-hover) var(--e-micro);
}
.sbar__t:hover,.sbar[data-drag="true"] .sbar__t{ background:rgba(88,116,101,.85); width:8px; }
@media (prefers-reduced-motion:reduce){ .sbar,.sbar__t{ transition:none; } }
@media (hover:none){ .sbar{ display:none; } }   /* touch already overlays its own */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
::selection{ background:var(--mint); color:var(--ink); }
/* reachable by a screen reader, invisible to everyone else */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* a class with its own display would otherwise beat the UA rule for [hidden] */
[hidden]{ display:none !important; }
body{ caret-color:var(--brand); }
:where(a){ color:inherit; text-underline-offset:.2em; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.035em; }
p{ margin:0; }

.d1{ font-size:clamp(2.9rem,7.2vw,5.8rem); line-height:.97; letter-spacing:-.045em; font-weight:600; text-wrap:balance; }
.d2{ font-size:clamp(2.1rem,4.2vw,3.4rem); line-height:1.04; letter-spacing:-.04em; font-weight:600; text-wrap:balance; }
.lede{ font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.55; color:var(--ink-2); max-width:56ch; }
.small{ font-size:.9375rem; }

.lab{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand); display:inline-flex; align-items:center;
  gap:.45rem; line-height:1.4;
}
.lab::before{ content:"\25B8"; font-size:.85em; }
.on-dark .lab{ color:var(--mint); }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:clamp(64px,7.5vw,var(--s9)); }
/* Zelená sekcia. Rytmus stránky nie je zebra — farba zoskupuje to, čo patrí
   k sebe: hero, referencie, experti. Medzi nimi sú svetlé sekcie, takže každá
   zmena farby niečo znamená.

   Tón je o stupeň tmavší než svetlozelená karta (`--field`) a mení sa na
   jednom mieste, v `--sec-zelena`. Pri `--field` biela karta na sekcii
   splývala; o dva stupne nižšie (#D9E7DE) zasa sekcia pôsobila zatiaľ
   najtmavšie zo všetkých svetlých plôch na webe. */
.sec--tint{ background:var(--sec-zelena); }
/* Sekcia, ktorá si odstup pod sebou nesie sama. Stoh Služieb končí chvostom
   pre lepkavosť a ten už oddelenie od ďalšej sekcie urobí — sekčné odsadenie
   by sa k nemu len pripočítalo. */
.sec--bez-spodku{ padding-bottom:0; }
/* Sekcia, ktorá končí stíšením: veta a tlačidlo na stred, nie plocha ani
   mriežka. Taký koniec nesie vlastný vzduch už v `.prb__cta`, a keď sa pod
   neho pripočíta plné sekčné odsadenie a nad ďalšiu sekciu ďalšie, medzi
   dvoma drobnými objektmi na stred ostane prázdna celá šírka. Merané je to
   pritom rovnako ako inde — rozdiel je optický, preto sa rieši tu a nie
   v `.sec`. */
.sec--tichy-koniec{ padding-bottom:clamp(32px,3.8vw,56px); }
/* a route that names a section scrolls to it, and the sticky header must not
   sit on top of what it landed on */
main section[id]{ scroll-margin-top:calc(var(--hdr) + 8px); }
/* ---------- úvod sekcie ----------
   Jeden rytmus pre všetky úvody, nech sú zarovnané akokoľvek: nadtitulok,
   24 px, nadpis, 24 px, veta, a pod ňou 48–72 px do obsahu sekcie. Hodnoty sú
   tu, nie v atribútoch `style` na stránkach — inak sa každá nová sekcia
   odsadzuje odznova a po piatich sa to rozíde. */
.head{ margin-bottom:clamp(var(--s7),4.6vw,var(--s8)); }
.head h2{ margin-top:var(--s5); }
.head p{ margin-top:var(--s5); }

/* ---------- úvod sekcie na stred (ukážka) ----------
   O zarovnaní nerozhoduje šírka obsahu pod úvodom, ale **úloha sekcie**:

     rozprávanie  — problém, služba, postup, otázky, výzva  → vľavo (`.head`)
     ukážka       — dôkaz, výsledok, rozsah, technológie, ľudia → na stred

   Na stred sú preto Čísla, V praxi, Ekosystém, Experti a od v2.51 aj Služby —
   tie sa prestavbou stali prehľadom portfólia, nie rozprávaním. Vľavo
   zostávajú Problémy, Ako to funguje a Časté otázky. Sekcia, ktorá zmení úlohu,
   zmení aj triedu — nie naopak.

   Dve šírky, nie jedna: nadpis znesie a potrebuje viac než veta pod ním.
   Nadpis ~1088 px drží dva riadky, veta ~736 px drží riadok čitateľný.
   Spodné odsadenie sa nemení, aby stredové sekcie neboli vyššie než ostatné. */
.head--ukazka{ text-align:center; margin-inline:auto; max-width:min(72rem,100%); }
.head--ukazka .lab{ justify-content:center; }
.head--ukazka h2{ max-width:min(68rem,100%); margin-inline:auto; }
.head--ukazka .lede{ max-width:min(46rem,100%); margin-inline:auto; }

/* Four corner marks: a full border masked down to its corners. Used on the
   testimonial stat cells, where the surrounding space lets them read. One
   pseudo-element, no extra markup, and it degrades to a hairline border where
   mask is unsupported. */
/* ---------- karty: jedna plocha pre celý web ----------
   Kartu nedrží obrys ani rohové značky, ale **plocha**. Rohové značky
   (`.frame`) sme 20. 9. 2026 zrušili: na bielej stránke boli príliš tiché,
   bloky sa zlievali a každý komponent si k nim dopisoval vlastné rozmery.

   Pravidlo je jednoduché a platí všade:

     svetlá sekcia  → svetlozelená karta (`.card--tint`)
     zelená sekcia  → biela karta (`.card`)
     tmavá karta    → zámerná výnimka, nie ďalší variant

   Biela karta na bielej sekcii nie je karta. Žiadny obrys, žiadny tieň,
   žiadny prechod — kontrast robí farba plochy a priestor okolo nej. */
.card{
  background:var(--paper); border-radius:var(--r-lg);
  padding:clamp(24px,2.2vw,32px);
}
.card--tint{ background:var(--field); }
.card--compact{ padding:clamp(20px,1.8vw,26px); }
/* Karta s obrázkom po okraj: plochu a rádius si drží, odsadenie si rieši
   obsah vnútri. */
.card--media{ padding:0; overflow:hidden; }

/* Jediné správanie pod kurzorom, aké karta má — dva pixle nahor. Žiadny tieň,
   žiadne zväčšenie. Nesie ho trieda, nie komponent: karta, ktorá nikam
   nevedie, ju nedostane a netvári sa, že je klikateľná. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card--live{ transition:transform var(--t-hover) var(--e-micro); }
  .card--live:hover{ transform:translateY(-2px); }
}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color var(--t-hover) var(--e-micro);
}
.hdr[data-scrolled="true"]{ border-bottom-color:var(--line); }
.hdr__in{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut); height:var(--hdr); display:flex; align-items:center; gap:var(--s5); }
.logo{ display:block; flex:none; color:var(--ink); text-decoration:none; }
.logo svg{ height:44px; width:auto; fill:currentColor; }
/* **Navigácia je na strede stránky, nie na strede zvyšku.** Do v2.91 ju
   centroval `margin-inline:auto` vo flexe — ten ale rozdelí len voľné miesto,
   a keďže výzva vpravo je štyrikrát širšia než značka vľavo (211 proti 53 px),
   rad odkazov sedel o 79 px vľavo od stredu okna. Vidno to, aj keď to nikto
   nevie pomenovať.

   Rieši to mriežka s rovnakými bokmi (`1fr auto 1fr`) o kus nižšie: stredný
   stĺpec je presne v strede bez ohľadu na to, čo je po stranách. Tu zostáva
   len rozostup odkazov. */
.nav{ display:flex; align-items:center; gap:clamp(20px,2.7vw,40px); }
/* sans, not mono: mono stays for microcopy and labels */
.nav a{ font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:-.005em; color:var(--ink); text-decoration:none; padding:8px 0; transition:color var(--fast); }
.nav a:hover{ color:var(--brand); }
/* Nad 1140 px drží hlavičku mriežka, nie flex — inak sa navigácia nedá
   vycentrovať voči stránke (viď `.nav`). Boky sú rovnako široké a prázdne
   miesto si delia rovným dielom; značka aj výzva si v nich sadnú na svoj
   kraj, takže nikde nevzniká klikateľná plocha navyše. */
@media (min-width:1141px){
  .hdr__in{ display:grid; grid-template-columns:1fr auto 1fr; }
  .hdr__in .logo{ justify-self:start; }
  .hdr__in .hdr__cta{ justify-self:end; }
}
.hdr__cta{ flex:none; }
/* No box: the page draws with hairlines, not with framed controls, so the mark
   is two of them and nothing else. They are right-aligned and unequal, which is
   what makes it read as a mark rather than a stock hamburger; on open the short
   one grows to match and the pair crosses. The 44px button stays for the thumb
   even though nothing about it is drawn. */
.burger{
  display:none; flex:none; appearance:none; cursor:pointer;
  width:44px; height:44px; padding:0; margin-right:-11px;
  background:none; border:0; color:var(--ink); place-items:center;
  transition:opacity var(--fast), transform .14s var(--e-micro);
}
.burger:hover{ opacity:.62; }
.burger:active{ transform:scale(.94); }
.burger i{ position:relative; display:block; width:22px; height:12px; }
.burger i::before,.burger i::after{
  content:""; position:absolute; right:0; height:1.5px; border-radius:1px; background:currentColor;
  transition:width var(--t-ui) var(--e-micro), transform var(--t-ui) var(--e-micro);
}
.burger i::before{ top:0; width:22px; }
.burger i::after{ top:10px; width:13px; }
.burger[aria-expanded="true"] i::before{ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after{ width:22px; transform:translateY(-5px) rotate(-45deg); }

/* The panel rolls out rather than appearing: 0fr to 1fr on a grid row is the
   one way to animate to a height nobody has measured, and it is what the FAQ
   already uses. display:none cannot be transitioned, which is why it jumped. */
.mnav{ display:none; }
.mnav__in{ min-height:0; overflow:hidden; background:var(--paper); }
.mnav a{ display:block; padding:16px var(--gut); border-bottom:1px solid var(--line); text-decoration:none; font-size:1.05rem; font-weight:500; }
.mnav a:last-child{ border-bottom:0; }
/* Prah je 1140, nie 1080: so šiestym odkazom (Ekosystém) mal rad pri 1081 px
   k výzve len 33 px a takmer sa jej dotýkal. Tablet dostane ponuku pod
   tlačidlom, čo je tam aj tak pohodlnejšie. */
@media (max-width:1140px){
  .nav{ display:none; }
  .burger{ display:grid; }
  /* The same call sits at the top of the menu, so the header keeps only the
     mark and the way in. Scoped to the bar rather than bare, because .btn sets
     its own display further down the sheet and would win a tie on order. */
  .hdr__in .hdr__cta{ display:none; }
  .hdr__in{ justify-content:space-between; }
  .mnav{
    display:grid; grid-template-rows:0fr; border-top:1px solid transparent;
    transition:grid-template-rows var(--t-card) var(--e), border-color var(--t-hover) var(--e-micro);
  }
  .mnav[data-open="true"]{ grid-template-rows:1fr; border-top-color:var(--line); }
  /* the rows arrive just behind the panel, close enough to read as one move */
  .mnav a{
    opacity:0; transform:translateY(-7px);
    transition:opacity var(--t-hover) var(--e-micro), transform var(--t-hover) var(--e-micro);
  }
  .mnav[data-open="true"] a{ opacity:1; transform:none; }
  .mnav[data-open="true"] a:nth-child(1){ transition-delay:.10s; }
  .mnav[data-open="true"] a:nth-child(2){ transition-delay:.14s; }
  .mnav[data-open="true"] a:nth-child(3){ transition-delay:.18s; }
  .mnav[data-open="true"] a:nth-child(4){ transition-delay:.22s; }
  .mnav[data-open="true"] a:nth-child(5){ transition-delay:.26s; }
  .mnav[data-open="true"] a:nth-child(6){ transition-delay:.30s; }
  .mnav[data-open="true"] a:nth-child(7){ transition-delay:.34s; }
  .mnav[data-open="true"] a:nth-child(n+8){ transition-delay:.38s; }
}
@media (prefers-reduced-motion:reduce){
  .mnav{ transition:none; }
  .mnav a{ transition:none; }
  .mnav[data-open="true"] a{ transition-delay:0s; }
}
/* CTA v hlavičke je pod 1140 px skryté (ponuka ho nesie sama), takže jeho
   vlastné zmenšovanie pod 560 px bolo mŕtvy kód — zostala len medzera. */
@media (max-width:560px){ .hdr__in{ gap:var(--s3); } }

/* ---------- ovládače: jeden systém ----------

   Všetko, čo sa dá stlačiť alebo prepnúť, stojí na troch primitívoch:

     .btn    tlačidlo        — plné (značková zelená), .btn--ghost, .btn--mint
     .seg    prepínač        — pilulka so segmentmi, .seg--dark, .seg--mini
     .fbar   plávajúca lišta — schránka, ktorá sa vysúva od spodnej hrany

   Sekcie si ich neprepisujú. Keď niečo v Službách, v otázkach a v článku robí
   to isté, má to aj vyzerať rovnako — inak vzniknú štyri systémy, ktoré sa
   o pol roka nikto neodváži zjednotiť.

   Miery sú v `:root` (--ctl-h, --ctl-pad, --ctl-fs, --r-md),
   nie pri komponentoch: výška tlačidla a výška prepínača sa nesmú rozísť. */

/* Odkaz „Preskočiť na obsah": mimo obrazovky, kým naň nepríde klávesnica.
   Kedysi to riešili inline onfocus/onblur, ktoré CSP zakazuje. */
.btn.skip{ position:absolute; left:-9999px; top:0; z-index:100; }
.btn.skip:focus{ left:12px; top:12px; }

/* Výšku drží `min-height`, nie zvislé odsadenie: tlačidlo a segment tak sedia
   na tej istej linke bez ohľadu na to, akú má písmo výšku riadka. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:var(--ctl-fs); font-weight:600; line-height:1; white-space:nowrap;
  min-height:var(--ctl-h); padding:0 var(--ctl-pad); border-radius:var(--r-md);
  border:1px solid var(--brand); background:var(--brand); color:#fff;
  text-decoration:none; cursor:pointer;
  transition:background var(--fast), border-color var(--fast);
}
/* Stlačenie je posun tónu, nie zmena veľkosti. Zmenšenie tlačidla pod prstom
   bolo jediný skok mierky na celom webe a od v2.50 ho nemá ani jeden ovládač.
   Obrys je v plnej variante v tej istej farbe ako plocha — nie je to linka,
   len to drží rovnaký rám všetkým variantom. */
.btn:hover{ background:var(--brand-dk); border-color:var(--brand-dk); }
.btn:active{ background:var(--dark); border-color:var(--dark); }
.btn--ghost{ background:var(--field); color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--field-2); border-color:var(--ink-3); }
.btn--ghost:active{ background:var(--line); }
/* Mätová je len obrátená plná varianta — na tmavom podklade. Nie je to tretí
   druh tlačidla. */
.btn--mint{ background:var(--mint); border-color:var(--mint); color:var(--ink); }
.btn--mint:hover{ background:var(--mint-dk); border-color:var(--mint-dk); }
.btn--mint:active{ background:var(--mint-press); border-color:var(--mint-press); }

/* Material Symbols, used sparingly. .ico is the only way they enter the page,
   so the size band that keeps their stroke matched to the drawn icons is
   enforced in one place rather than remembered at every call site. */
/* the fill has to be set on the host, not on the symbol: a symbol's own
   presentation attribute never reaches through <use>, and the default black
   would be invisible on the dark buttons */
.ico{ width:18px; height:18px; flex:none; fill:currentColor; }
.ico--sm{ width:16px; height:16px; }
.ico--lg{ width:20px; height:20px; }
/* the arrow leans into the direction it points when the button is pressed */
.btn .ico{ margin-right:-2px; transition:transform var(--t-hover) var(--e-micro); }
@media (hover:hover) and (pointer:fine){ .btn:hover .ico{ transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce){ .btn .ico{ transition:none; } .btn:hover .ico{ transform:none; } }

@media (prefers-reduced-motion:reduce){ .burger:active{ transform:none; } }

/* ---------- ovládače: segmentový prepínač (`.seg`) ----------

   Výber kategórie, nie navigácia: neopúšťa sa ním stránka. Používajú ho
   Služby (desktop), kategórie otázok, plávajúci prepínač Služieb na telefóne
   a prepínač jazyka v onboardingu.

   Aktívny segment je **vyplnený**, nie podčiarknutý. Podčiarknutie je jazyk
   navigácie a otázky ho do v2.49 používali — vedľa vyplneného prepínača
   v Službách to boli dva ovládače toho istého druhu s dvoma rôznymi tvarmi.

   Puzdro sa v prípade potreby posúva vodorovne. Pravidlo zo zadania: skôr
   posuv než nečitateľné písmo. */
.seg{
  position:relative;   /* ukazovateľ sa pozicuje voči puzdru */
  display:inline-flex; align-items:center; gap:4px; max-width:100%;
  padding:var(--seg-pad); min-height:var(--ctl-h);
  background:var(--field); border-radius:var(--r-pill);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.seg::-webkit-scrollbar{ display:none; }
.seg__b{
  appearance:none; border:0; background:none; cursor:pointer; white-space:nowrap; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:var(--seg-fs); font-weight:500; letter-spacing:-.015em;
  line-height:1; color:var(--ink-3);
  min-height:calc(var(--ctl-h) - 2 * var(--seg-pad)); padding:0 var(--ctl-pad);
  border-radius:var(--r-pill);
  transition:background var(--t-hover) var(--e-micro), color .26s var(--e-micro);
}
.seg__b:hover{ color:var(--ink); }
.seg__b:active{ background:var(--field-2); }
/* Rez sa pri výbere **nemení**. Zosilnenie na 600 by segment rozšírilo, susedia
   by sa posunuli a ukazovateľ by zmeral zlú šírku — prepnutie by sa triaslo.
   Rozdiel nesie farba, tá šírku nemení. */
.seg__b[aria-selected="true"],
.seg__b[aria-current="true"],
.seg__b[aria-pressed="true"]{ background:var(--paper); color:var(--brand); }
.seg__b:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- kĺzavý ukazovateľ ----------
   Jedna plocha, ktorá sa presúva medzi segmentmi, namiesto toho, aby každý
   segment rozsvecoval vlastné pozadie. Vkladá ho `site-b.js` — bez skriptu
   zostáva vyplnený aktívny segment, takže prepínač funguje aj tak. Len čo
   ukazovateľ existuje, puzdro dostane `data-ind` a vlastné pozadie segmentu
   sa vypne; odtiaľ ho kreslí už len ukazovateľ.

   Polohu aj rozmer nesú vlastné premenné a nastavuje ich skript z rámčeka
   práve vybraného tlačidla. Preto `translate3d` a `width`, nie `left`. */
.seg__ind{
  position:absolute; left:0; top:0; pointer-events:none; z-index:0;
  width:var(--seg-w,0px); height:var(--seg-h,0px);
  transform:translate3d(var(--seg-x,0px), var(--seg-y,0px), 0);
  background:var(--paper); border-radius:var(--r-pill);
  opacity:0;
  transition:transform .32s var(--e), width .32s var(--e),
             height .32s var(--e), opacity .18s var(--e-micro);
}
.seg[data-ind] .seg__ind{ opacity:1; }
/* Text musí byť nad plochou, ktorá sa pod ním presúva. */
.seg[data-ind] .seg__b{ position:relative; z-index:1; }
.seg[data-ind] .seg__b[aria-selected="true"],
.seg[data-ind] .seg__b[aria-current="true"],
.seg[data-ind] .seg__b[aria-pressed="true"]{ background:none; }
/* Prvé umiestnenie a zmena rozmeru okna nesmú kĺzať — skript vtedy prechod
   na jednu snímku vypne cez tento príznak. */
.seg__ind[data-bez]{ transition:none; }

/* Tmavá varianta — tá istá geometria, obrátený kontrast. Na tmavom podklade
   je značková zelená v obryse neviditeľná, preto fokus svieti mätovou. */
.seg--dark{ background:var(--dark); }
.seg--dark .seg__b{ color:var(--ink-dk-3); }
.seg--dark .seg__b:hover{ color:#fff; }
.seg--dark .seg__b:active{ background:rgba(255,255,255,.08); }
.seg--dark .seg__b[aria-selected="true"],
.seg--dark .seg__b[aria-current="true"],
.seg--dark .seg__b[aria-pressed="true"]{ background:var(--mint); color:var(--ink); }
.seg--dark .seg__ind{ background:var(--mint); }
.seg--dark .seg__b:focus-visible{ outline-color:var(--mint); }

/* Kompaktná varianta pre prepínač jazyka v onboardingu. Stavba a stavy sú
   tie isté, len miery a mono verzálky zostávajú — je to popiska v hlavičke
   formulára, nie ovládač na šírku sekcie. */
.seg--mini{ min-height:auto; padding:3px; gap:2px; }
.seg--mini .seg__b{
  min-height:auto; padding:6px 14px;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}

/* Obmedzený pohyb: ukazovateľ preskočí, nekĺže. */
@media (prefers-reduced-motion:reduce){
  .seg__ind{ transition:opacity .15s linear; }
}

/* ---------- ovládače: plávajúca lišta (`.fbar`) ----------

   Schránka, ktorá sa vysúva od spodnej hrany okna. Nesie polohu, bezpečnú
   zónu, šírku, vysunutie aj zasunutie — a nič viac. Čo je v nej, si rieši
   komponent: v článku veta s tlačidlom (`.acta`), v Službách prepínač
   kategórií (`.sfab`).

   Životný cyklus je spoločný a skripty oboch ho dodržujú: `hidden` v značke,
   `data-on` riadi cestu, `inert` počas odchodu a `hidden` späť až na skutočný
   koniec prechodu. */
.fbar{
  position:fixed; z-index:50;
  left:0; right:0; margin-inline:auto;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:min(1040px, 100% - 48px);
  /* Kam až musí zísť, aby bola naozaj preč: vlastná výška, odstup od spodku,
     bezpečná zóna a ešte kus na tieň — inak by jeho spodný okraj zostal
     visieť nad hranou okna. */
  --fbar-odchod:calc(100% + 20px + env(safe-area-inset-bottom, 0px) + 44px);
  opacity:0; transform:translateY(var(--fbar-odchod));
  /* Toto je **odchod** — pravidlo pri cieľovom stave riadi cestu doň. Lišta
     zíde celá a nepriehľadná; krytie klesá až v poslednej štvrtine, inak by
     zmizla skôr, než je vidieť, že sa zasúva. */
  transition:transform .35s var(--e-micro), opacity .1s var(--e-micro) .25s;
}
.fbar[hidden]{ display:none; }
.fbar[data-on="true"]{
  opacity:1; transform:none;
  transition:transform .4s var(--e), opacity .4s var(--e);
}
@media (max-width:640px){
  .fbar{
    left:12px; right:12px; width:auto; margin-inline:0;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    --fbar-odchod:calc(100% + 12px + env(safe-area-inset-bottom, 0px) + 44px);
  }
}
@media (prefers-reduced-motion:reduce){
  .fbar,.fbar[data-on="true"]{ transform:none; transition:opacity .2s linear; }
}

.mlink{ font-family:var(--mono); font-size:.8125rem; font-weight:500; color:var(--brand); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; transition:gap var(--fast); }
.mlink::before{ content:"\25B8"; }
.mlink:hover{ gap:.7rem; text-decoration:underline; }
.on-dark .mlink{ color:var(--mint); }

/* ---------- text highlight ----------
   A marker stroke behind a run of text, reusable anywhere:

     <mark class="hl">celý headline</mark>
     Účtovníctvo <mark class="hl">bez naháňania dokladov</mark>.

   Everything tunable is a custom property, so a variant is a style attribute
   and never a new rule:

     <mark class="hl" style="--hl:#CFE9D7; --hl-dur:.9s; --hl-delay:.3s">…</mark>

   The stroke is not a background on the text. A background cannot be drawn on
   from the left with a transform, and a pseudo-element cannot follow text that
   wraps — it only ever covers the first line. So the script measures the run's
   line boxes and lays one bar under each, which is the only way to get both a
   compositor-driven scaleX and text that is free to break wherever it likes. */
mark.hl{
  --hl:var(--mint);
  --hl-dur:.78s;
  --hl-delay:.14s;
  --hl-height:.8;      /* of the line box */
  --hl-bleed:6px;      /* overshoot at each end */
  background:none; color:inherit;
  position:relative; z-index:1;   /* the text stays over its own stroke */
}
.hl-bars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hl-bar{
  position:absolute; border-radius:2px; background:var(--hl);
  transform:scaleX(0); transform-origin:0 50%;
  /* --e-enter, not --e: the stroke should leave the left edge fast and spend
     its last third easing to a stop, the way a hand lifts a marker */
  transition:transform var(--hl-dur) var(--e-enter);
  transition-delay:calc(var(--hl-delay) + var(--line, 0) * 90ms);
}
.hl-bar.is-on{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .hl-bar{ transition:none; transform:scaleX(1); }
}

/* ---------- tooltip ----------
   A reusable explainer for a mark that cannot explain itself. Anything that can
   take focus becomes a trigger by carrying the text:

     <button class="tip" type="button" aria-label="ISO 9001"
             data-tip="Systém manažérstva kvality…">…</button>

   The trigger has to be focusable and activatable, which is why it is a button
   and not a span with a tabindex: a button is what a phone gives focus to on
   tap, and it is what a keyboard reaches without being told to. The script
   below builds the bubble, gives it role="tooltip" and points aria-describedby
   at it, so the description reaches a screen reader whether or not anything is
   hovered. */
.tip{
  position:relative; appearance:none; border:0; padding:0; background:none;
  display:inline-flex; cursor:help; color:inherit; font:inherit;
}
.tip__b{
  position:absolute; bottom:calc(100% + 12px); left:50%;
  transform:translate(calc(-50% + var(--nudge, 0px)), 6px);
  width:max-content; max-width:min(19rem, calc(100vw - 32px));
  z-index:60; pointer-events:none;
  background:var(--dark-2); color:var(--ink-dk);
  /* Bublina je modul, nie štítok a nie karta: `--r-md`, ten istý stupeň ako
     tlačidlo alebo panel v karte. Vo v2.78 dostala omylom `--r-sm`, lebo sa
     triedila podľa toho, že je malá — rozhoduje ale rola, nie rozmer. */
  border:1px solid var(--line-dk); border-radius:var(--r-md);
  /* a floating layer has to read as floating, and on the dark footer the box is
     barely a shade off its ground; the shadow is what separates them, and it is
     what will carry the bubble when this is used over a light section */
  box-shadow:var(--tien-float-dk);
  padding:var(--s4) var(--s5);
  font-size:.8125rem; line-height:1.5; text-align:left; font-weight:400;
  letter-spacing:0; text-transform:none;
  /* display:none drží zavretú bublinu mimo rozloženia; skript ju zapne o snímku
     skôr, než pustí priehľadnosť, takže prechod má z čoho začať. */
  display:none; opacity:0;
  transition:opacity .2s var(--e), transform .2s var(--e);
}
.tip__t{ display:block; font-weight:600; color:#fff; margin-bottom:4px; }
/* the arrow is the bubble's own corner turned under it, so it can never drift
   away from the box it belongs to — only along it, when the box is nudged.

   Zarážka na 24 px je poistka na rádius: bublina má `--r-md`, takže prvých
   14 px od rohu je oblúk a šípka postavená doň by z neho trčala. Pri dnešnom
   obsahu sa neuplatní — najbližšie, kam sa šípka dostane, je 25 px na telefóne
   — ale užšie okno alebo dlhší popis by ju tam inak zaviedli. */
.tip__b::after{
  content:""; position:absolute; top:100%;
  left:clamp(24px, calc(50% - var(--nudge, 0px)), calc(100% - 24px));
  width:10px; height:10px; margin:-6px 0 0 -5px;
  background:var(--dark-2);
  border-right:1px solid var(--line-dk); border-bottom:1px solid var(--line-dk);
  transform:rotate(45deg);
}

/* Preklopená pod spúšťač: bublina aj šípka si vymenia stranu, takže značka
   stále ukazuje na to, čo vysvetľuje. */
.tip[data-tip-below="true"] .tip__b{
  bottom:auto; top:calc(100% + 12px);
  transform:translate(calc(-50% + var(--nudge, 0px)), -6px);
}
.tip[data-tip-below="true"][data-open="true"] .tip__b{
  transform:translate(calc(-50% + var(--nudge, 0px)), 0);
}
.tip[data-tip-below="true"] .tip__b::after{
  top:auto; bottom:100%; margin:0 0 -6px -5px;
  border:0; border-left:1px solid var(--line-dk); border-top:1px solid var(--line-dk);
}
.tip[data-open="true"] .tip__b{
  opacity:1;
  transform:translate(calc(-50% + var(--nudge, 0px)), 0);
}
@media (prefers-reduced-motion:reduce){
  /* Preklopená varianta má vyššiu špecifickosť než .tip__b, takže ju treba
     umlčať menom — inak by sa práve tá jediná ešte stále posúvala. */
  .tip__b,
  .tip[data-tip-below="true"] .tip__b{
    transition:opacity .2s var(--e);
    transform:translate(calc(-50% + var(--nudge, 0px)), 0);
  }
}

.on-dark{ background:var(--dark); color:var(--ink-dk); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark .lede{ color:var(--ink-dk-3); }

/* ---------- hero ---------- */
/* inset scales with the viewport: 14px on a phone, 34px from ~1420px up */
/* The white above the logo and the white below the header now match: the
   header is --hdr tall around a 44px mark, leaving 20px, and the panel is
   inset by the same 20px at the top. The sides keep their larger inset. */
.hero{ padding:20px clamp(14px,2.4vw,34px) 0; }
.hero__panel{
  position:relative; background:var(--field); border-radius:var(--r-xl);
  /* the panel runs to the fold — the header, the 20px inset above it and
     nothing else. dvh, not vh, so a phone's collapsing toolbar cannot cut it. */
  min-height:calc(100dvh - var(--hdr) - 20px);
  /* Two rows: the copy centres itself in whatever height is left over, the
     figures sit on the floor of the panel. The bottom padding is the only
     thing between them and the edge, so the air below them is a fixed,
     deliberate amount instead of half of whatever the viewport spares. */
  display:grid; grid-template-rows:1fr auto; align-content:stretch;
  /* Odsadenie hore sa okrem šírky riadi aj výškou okna: od 1000 px nadol
     ubúda, nižšie sa nedostane než na 26 px. Spolu s rovnakým stiahnutím
     vzduchu nad štatistikami (`.hcards`) je to presun, ktorý text ani
     štatistiky nikam neposunie — pribudne len výška pásmu s kartami, takže
     hero neprerastie okno a čísla dole zostanú v prvom zábere.
     Nad 1000 px výšky sa nemení nič. */
  padding:max(26px, min(clamp(40px,4.8vw,76px), calc(76px - (1000px - 100vh) * .25)))
          var(--gut)
          min(clamp(14px,1.6vw,24px), 2.4vh);
  overflow:hidden;
}
.hero__in{ grid-area:1/1; max-width:1120px; margin-inline:auto; text-align:center; position:relative; z-index:2; align-self:center; }
/* The break is explicit so the changing word can only move things sideways.
   balance would re-break the lines on every frame of the width transition. */
/* Spodná hranica je 2,5rem, nie 2rem: pod ~680 px je 5,9vw menšie než 40 px
   a na telefóne potom hlavný nadpis stránky vyzeral ako podnadpis. Horná
   hranica ani sklon sa nemenia, takže na desktope je to presne ako bolo. */
.hero h1{ margin-bottom:var(--s6); text-wrap:balance; font-size:clamp(2.9rem,5.9vw,4.9rem); }

/* ---------- štyri komplikácie („Keď e-shop rastie") ----------
   Karta nesie číslo, nadpis, vetu a pod nimi **kresbu**. Kresba nie je ďalšia
   vnorená kartička — je to plocha oddelená vzduchom, s pevnou výškou, aby sa
   kresby v jednom riadku zarovnali aj pri rôzne dlhých vetách.

   Slovník tvarov je spoločný pre všetky štyri: biela je doklad, záznam alebo
   údaj, mätová je objem, tenká linka je väzba a prerušovaný obrys je to, čo
   chýba. Kresby sa zámerne nepodobajú na dashboardy v hero — tam sú čísla
   a grafy, tu iba schémy.

   Sekcia pomenúva problém, preto každá kresba ukazuje nesúlad, chýbajúci
   prehľad alebo pribúdajúcu prácu. Vyriešené procesy patria do „Ako to
   funguje" a nesmú sa sem zatúlať. */
/* Bento. Problémy nemajú rovnakú váhu, tak to priznáva aj rozloženie.

   Vľavo sú dva riadky, vpravo **stĺpec troch menších buniek** — do v2.63 tam
   stála jedna vysoká karta a pravá polovica bola ťažkopádna. Dve bunky vľavo
   dole siahajú cez oba spodné riadky, takže sa ich výška riadi pravým stĺpcom,
   nie naopak:

   Štyri rovnocenné karty v rade. Bento zostava (v2.62–v2.67) je zrušená:
   dlaždica cez dva riadky sa dá urobiť bez diery len vtedy, keď má obsah na
   dva riadky, a pri tomto texte ho nemala — kotva mala 388 px prázdna.
   Rovnocenné problémy znesú rovnocenné karty. */
.prb{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,1.7vw,24px);
}

/* Panel má šírku karty — v štyroch úzkych stĺpcoch nie je čo orezávať; strop
   by len tlačil riadky do zalomenia. Výšku má podľa obsahu: párovanie platieb
   je nízke, rozpis marže stredný, reporting najnižší. Zjednotené je pozadie,
   orámovanie, rádius, typografia a farby — nie rozmer. */

.prb__i{
  display:flex; flex-direction:column;
  /* Dlaždice majú **dva veľmi blízke tóny**, striedané tak, aby susedia
     v riadku neboli rovnaké. Rozdiel je na hranici viditeľnosti a to je
     zámer: mriežka má mať vrstvy, nie šachovnicu. Biely panel na oboch sedí
     ako objekt na ploche. */
  padding:clamp(22px,2.1vw,30px); background:var(--field); border-radius:var(--r-lg);
}
/* Rovnaká typografia ako v kartách „Ako to funguje" — obe sekcie majú rovnako
   široké karty a rovnakú úlohu, takže nemajú dôvod znieť inak.
   `balance` nenechá na poslednom riadku jedno krátke slovo. */
.prb__i h3{
  font-size:clamp(1.1875rem,1.45vw,1.375rem); font-weight:600; letter-spacing:-.024em;
  line-height:1.22; text-wrap:balance;
}
/* Odstup od nadpisu je väčší než odsek od odseku: veta pod ním je doplnenie,
   nie pokračovanie. */
.prb__i p{ margin-top:10px; font-size:.9375rem; line-height:1.5; color:var(--ink-2); }

/* ---------- diagnostická ukážka v karte (`.prb__m`) ----------
   Do v2.59 tu bola kresba. Od v2.60 je tu **ukážka rozhrania v tom istom
   jazyku ako hero** — tie isté triedy `.hdash__*`, tá istá typografia, tie
   isté animácie. Nie je to druhá knižnica komponentov: karta si len požičia
   hotový widget a ukáže v ňom problémový stav namiesto ideálneho.

   Hero hovorí „takto to vyzerá, keď je to pod kontrolou". Táto sekcia
   ukazuje ten istý panel vtedy, keď pod kontrolou nie je. Preto sa nesmie
   líšiť ničím okrem obsahu — inak sa tá dvojica nedá prečítať.

   **Výška widgetu je daná jeho obsahom.** Vo v2.61 boli všetky naťahované na
   rovnakú výšku; v bento zostave to prestalo dávať zmysel — políčka majú rôznu
   veľkosť zámerne a nútená zhoda robila z panelov nábytok. Rozpis marže je
   vysoký, párovanie platieb nízke, synchronizácia krátka. Spoločný je systém,
   nie rozmer. */
.prb__m{ margin-top:auto; padding-top:clamp(14px,1.2vw,20px); display:block; }

/* Widget v karte je tichší než plávajúci panel v hero, a líši sa **jedinou
   vlastnosťou**: nemá tieň. Tieň v hero hovorí „pláva nad sekciou"; tu nič
   nepláva, je to dátový objekt vnútri karty. Rádius zostáva `--r-lg`, teda
   ten istý ako v hero — keby sa líšil aj tvar, prestala by to byť tá istá
   ukážka a dvojica hero/problém by sa rozpadla.

   Menšie sú len odsadenie a výška grafu: karta je užšia než hero panel. */
/* Panel je **modul vnútri karty, nie druhá karta**. Do v2.62 mal rovnaké
   odsadenie ako hero a v bledej karte z toho bol dojem škatule v škatuli.
   Teraz je tichší: tenšie odsadenie, tesnejšie riadky — a v jednej karte
   (roztrúsené dáta) nemá plochu vôbec.

   Rádius si neberie vlastný. Je to modul, takže má `--r-md` ako každý iný
   panel; hierarchiu voči karte (`--r-lg`) robí stupnica sama.

   Celkovo je o štvrtinu až tretinu nižší než vo v2.62. Nie zmenšením písma,
   ale odobratím prázdna a troch oddeľovačov, ktoré nič nedelili. */
.prb__m .pdash{
  --kp:clamp(11px,0.95vw,14px);
  --gh:clamp(30px,2.6vw,38px);
  box-shadow:none; font-size:.8125rem;
}
.prb__m .pdash .hdash__t{ font-size:.8125rem; }
.prb__m .pdash .hdash__v{ margin-top:5px; font-size:clamp(1.125rem,1.2vw,1.3125rem); }
.prb__m .pdash .hdash__line{ margin-top:6px; }
.prb__m .pdash .hdash__sep{ margin-top:10px; }
.prb__m .pdash .hdash__bars{ margin-top:9px; }
.prb__m .pdash .hdash__seg{ margin-top:10px; }
.prb__m .pdash .hdash__pair{ margin-top:8px; }
.prb__m .pdash .hdash__ok{ margin-top:9px; }

@media (max-width:760px){
  .pdash .hdash__p{ font-size:.75rem; }
}

/* Štítok stavu v hlavičke. Tvar si berie od `.hdash__p` (mono, verzálky,
   drobné), pridáva len plochu a farbu — je to tá istá menovka, len hovorí
   o probléme. */
.prb__m .pdash__stitok{
  padding:3px 7px; border-radius:var(--r-sm);
  background:var(--pozor-100); color:var(--pozor-txt);
}

/* Spona pri párovaní je tá istá ako v hero, len vo výstražnej farbe: keď
   dvojica nesedí, nesmie ju držať značková zelená. */
.prb__m .pdash__link{ border-color:var(--pozor); }

/* Riadok s problémovou hodnotou. Meno riadku zostáva tiché, farbu nesie
   len číslo — inak by sa z karty stala červená plocha. */
.prb__m .hdash__line--pozor b{ color:var(--pozor-txt); }

/* Stav pod widgetom. Rozloženie je `.hdash__ok`, takže sedí na pixel;
   mení sa farba a namiesto fajky je bodka — tvrdenie „nie je to hotové"
   nepotrebuje ikonu, stačí že nie je zelené. */
.prb__m .pdash__stav{ color:var(--pozor-txt); }
.prb__m .pdash__stav i{
  width:8px; height:8px; flex:none; border-radius:50%; background:var(--pozor);
}

/* Duchové stĺpce: obdobie, za ktoré dáta ešte neprišli. Sú v tichej zelenej
   s prerušovaným obrysom, nie vo výstražnej — chýbajúce dáta nie sú chyba,
   iba diera. Výstražná farba zostáva vyhradená pre vetu o veku dát. */
.prb__m .pdash__duch{
  background:var(--field); border:1.5px dashed var(--line); border-bottom:0;
}

/* Rozdelenie objemu: spracované vs. čakajúce. Podklad pásu je výstražná
   plocha, vyplnená časť značková — pomer sa tak dá prečítať bez popisu. */
.prb__m .pdash__seg{ background:var(--pozor-100); }

/* Nedostupná hodnota v súčtovom riadku. Nie je to číslo, takže nesmie mať
   veľkosť čísla — inak by „Neúplné dáta" kričalo viac než tržby nad ním. */
.prb__m .pdash__sum b{ font-size:.8125rem; font-weight:600; color:var(--pozor-txt); }

/* Karta na kurzor neodpovedá vôbec — žiadne stmavnutie, nadvihnutie, tieň
   ani zmena plochy. Je to informačný blok, nie tlačidlo: keď sa hýbe, sľubuje
   kliknutie, ktoré nikam nevedie. Jediný pohyb v sekcii je vykreslenie
   widgetu pri vstupe do obrazu, a to zbehne raz. */

/* Prah 1180 nie je od názvu zariadenia: pri ňom má karta ešte 254 px, nižšie
   už klesne pod 250 a nadpis sa začne lámať na útržky. */
/* ---------- zakončenie sekcie ----------
   Nie je to CTA blok: žiadna plocha, žiadny rám, žiadny nadpis. Štyri karty
   sú diagnózy a táto veta je otázka, ktorú si po nich čitateľ kladie sám —
   tlačidlo na ňu len odpovedá. Preto stojí voľne na pozadí sekcie a preto je
   veta tichšia (`--ink-2`) než text v kartách.

   Tlačidlo je bežné `.btn`, žiadny nový variant. Na telefóne sa neroztiahne
   na celú šírku: tak sa na webe správa aj dvojica v hero. */
.prb__cta{
  margin-top:clamp(40px,3.6vw,56px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px,1.5vw,20px);
  text-align:center;
}
.prb__cta p{
  max-width:32rem; margin:0;
  font-size:1.0625rem; line-height:1.5; color:var(--ink-2); text-wrap:balance;
}

@media (max-width:1179px){ .prb{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:759px){
  .prb__cta{ margin-top:clamp(28px,6.5vw,36px); }
  .prb__cta p{ font-size:1rem; }
  .prb{ grid-template-columns:minmax(0,1fr); }
  .prb__i{ padding:clamp(20px,5vw,24px); }
  /* Na telefóne dostane panel viac vzduchu k okraju. Na širokom okne je
     odsadenie odvodené od `--kp` a je tesné zámerne — karta je tam úzka.
     V jednom stĺpci je karta široká, panel s ňou narastie a to isté tesné
     odsadenie potom pôsobí, že obsah tlačí na sklo.

     Zväčšuje sa **iba odsadenie**: písmo, graf ani riadky sa nemenia, takže
     panel zostáva kompaktný a karta narastie len o ten vzduch. */
  .prb__m .pdash{ padding:18px 21px; }
}
/* Pod 375 px sa popiska na jeden riadok nezmestí: samotný text má 263 px,
   k tomu šípka a odsadenie tlačidla, spolu 333 — a obsah stránky má pri
   320 px len 280. Skrátiť odsadenie nestačí (ušetrí 28 z potrebných 53),
   tak sa popiska zalomí a tlačidlo si vezme celú šírku.

   Nad týmto prahom sa nemení nič: pri 375 px sa tlačidlo zmestí a zostáva
   na svoju šírku ako dvojica v hero. */
@media (max-width:374px){
  .prb__cta .btn{
    width:100%; white-space:normal; text-align:center;
    line-height:1.3; padding:13px var(--s4);
  }
}

/* ---------- V médiách: editoriálny zoznam (`.mxl`) ----------
   Do v2.69 tu boli kartičky s plochou a značkou média — tie isté ako v Z praxe.
   Lenže vlastný článok a odkaz na cudzí web nie sú tá istá vec: kartička ich
   tlačila do rovnakej roly a stránka pôsobila ako druhý blog. Archív má byť
   pokojnejší, lebo pointou sú samotné výstupy, nie ich obaly.

   Váhy sú jasne rozdelené: **názov je obsah, značka je zdroj, údaje sú kontext,
   šípka je akcia.** Preto má názov takmer 60 % šírky a najtmavšiu farbu, kým
   značka je stíšená a údaje sú najmenšie. */
.mxl{ position:relative; display:block; margin-top:clamp(6px,0.8vw,12px); }
.mxl__r{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:clamp(156px,13vw,180px) minmax(0,1fr) clamp(152px,13vw,188px) 30px;
  column-gap:clamp(26px,3vw,52px);
  /* Vodorovné odsadenie s protiľahlým záporným okrajom: plocha na klikanie
     presahuje von za stĺpce, no text zostáva zarovnaný s obsahom stránky. */
  padding:clamp(32px,2.8vw,38px) clamp(12px,1.2vw,20px);
  margin-inline:calc(-1 * clamp(12px,1.2vw,20px));
  color:inherit; text-decoration:none;
}

/* Deliaca čiara **nezačína na kraji**, ale tam, kde začína obsah. Cez celú
   šírku robila zo zoznamu tabuľku; takto zostane značka voľnejšia a rytmus
   drží stĺpec názvu. Je aj o stupeň tichšia než `--line`.

   Spodná čiara patrí **zoznamu**, nie poslednému riadku: je to uzáver celého
   archívu, nie súčasť položky. Preto má `.mxl` vlastný `position:relative`. */
.mxl__r + .mxl__r::before,
.mxl::after{
  content:""; position:absolute; left:calc(clamp(156px,13vw,180px) + clamp(26px,3vw,52px));
  right:clamp(12px,1.2vw,20px); height:1px; background:var(--line); opacity:.55;
}
.mxl__r + .mxl__r::before{ top:0; }
.mxl::after{ bottom:0; }

/* ---------- značka zdroja ----------
   Slot má pevnú šírku, značka v ňom nie: logá majú pomery strán od 2,9 : 1
   (AmCham) po 8,2 : 1 (Trend) — a jedna je takmer štvorec (Tatra banka) —
   a naťahovať ich na spoločnú šírku by z úzkej
   spravilo obra. Zjednocuje ich **výška**, nie šírka.

   Farbu majú z `currentColor` — pevné výplne sú zo symbolov odstránené, inak
   by sa cez `<use>` nedali prefarbiť. Monochromaticky preto, že červený Trend
   vedľa modrého AmChamu preberal pozornosť, ktorá patrí názvu článku. */
.mxl__m{
  display:flex; align-items:center;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.4; color:var(--ink-2);
}
.mxl__m svg{
  display:block; width:auto; height:var(--lg-v,28px); max-width:100%;
  fill:currentColor; opacity:.72;
  transition:opacity var(--t-card) var(--e);
}
/* Výšky sú vyvážené **opticky, nie matematicky**. Nejde len o pomer strán:
   Trend je plný tučný nápis, takže pri rovnakej výške váži najviac a musí ísť
   nižšie; Bridge je tenký a riedky, takže pri malej výške pôsobil stratený
   a dostal najväčší prírastok. AmCham nesie znak aj dva riadky textu, preto je
   najvyšší, ale šírkou zostáva kompaktný. */
/* Tatra banka je **stohovaná** značka — znak nad nápisom — takže pomer strán
   je skoro štvorec (1,05 : 1), kým ostatné sú široké nápisy od 2,9 : 1 po
   8,2 : 1. Pri výške ostatných by z nej zostal štvorček 35 px široký a v rade
   by vyzerala ako najmenšia zo všetkých. Optická váha sa tu vyrovnáva výškou,
   nie šírkou — preto je najvyššia, a aj tak zostáva najužšia.

   Výška je **jediná plynulá v celom rade** a nie je to rozmar: rastie presne
   tak, ako dvojriadkový titulok vedľa, takže logo je vždy najväčšie, aké sa
   do riadku zmestí, a riadok pritom nikdy neprerastie susedné. Odmerané —
   pri 1024 px má riadok 116 px ako ostatné (logo 52), pri 1440 aj 1920 má
   132 proti 133 (logo 56). Pevná hodnota by v jednom konci pásma trčala
   a v druhom nechávala miesto ležať.

   Plochou sedí medzi Bridge a AmCham, hoci je dvakrát užšia než ktorákoľvek
   iná: pri 1440 je to 59 × 56, kým Trend má 115 × 14 a AmCham 100 × 33. */
.mxl__r[data-lg="tatra-banka"] .mxl__m svg{ --lg-v:clamp(52px,3.95vw,56px); }
.mxl__r[data-lg="amcham"] .mxl__m svg{ --lg-v:33px; }
.mxl__r[data-lg="bridge"] .mxl__m svg{ --lg-v:29px; }
.mxl__r[data-lg="trend"] .mxl__m svg{ --lg-v:14px; }
.mxl__r[data-lg="shoptet-blog"] .mxl__m svg{ --lg-v:19px; }

/* ---------- názov ----------
   Takmer čierna, nie značková zelená: sýto zelený názov vyzeral ako odkaz
   a zoznam sa čítal ako navigácia. Zeleň pridá až kurzor. */
.mxl__t{
  font-size:clamp(1.375rem,1.7vw,1.5rem); font-weight:600; letter-spacing:-.024em;
  line-height:1.18; color:var(--ink); text-wrap:balance;
  transition:transform var(--t-card) var(--e), color var(--t-card) var(--e);
}

/* ---------- kontext ---------- */
.mxl__d{
  display:flex; flex-direction:column; gap:4px;
  font-size:.875rem; line-height:1.35; color:var(--ink);
}
.mxl__d time{ font-size:.8125rem; color:var(--ink-3); }
.mxl__typ{ font-weight:500; }
.mxl__pay{ font-size:.8125rem; color:var(--accent-txt); }

/* ---------- akcia ---------- */
.mxl__a{ justify-self:end; display:flex; color:var(--accent-txt); }
.mxl__a .ico{
  display:block; width:17px; height:17px;
  transition:transform var(--t-card) var(--e);
}

/* Celá odozva na kurzor je **tento jemný posun** — názov a šípka o 3 px,
   značka sa dosýti. Žiadne podfarbenie riadku: v archíve, kde sú riadky
   vysoké, bola vyfarbená plocha hlučnejšia než odkaz, ktorý ohlasovala. */
@media (hover:hover) and (pointer:fine){
  .mxl__r:hover .mxl__t{ transform:translateX(3px); color:var(--brand); }
  .mxl__r:hover .mxl__m svg{ opacity:1; }
  .mxl__r:hover .mxl__a .ico{ transform:translate(3px,-3px); }
}
/* Na dotyku nič, čo by po klepnutí zostalo visieť — len okamžité stlmenie,
   ktoré zmizne so zdvihnutím prsta. */
@media (hover:none),(pointer:coarse){
  .mxl__r:active{ opacity:.96; }
}
.mxl__r:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }

/* ---------- telefón ----------
   Nie je to zvislý stĺpec štyroch prvkov: značka a šípka držia horný riadok,
   názov je pod nimi a kontext na spodku v jednom riadku. Zoznam tým dostane
   rytmus aj v jednom stĺpci. */
@media (max-width:759px){
  .mxl__r{
    grid-template-columns:1fr auto; row-gap:18px; column-gap:16px;
    min-height:0; align-items:center;
    padding:clamp(24px,6vw,28px) clamp(10px,2.6vw,14px);
    margin-inline:calc(-1 * clamp(10px,2.6vw,14px));
  }
  .mxl__m{ grid-column:1; grid-row:1; }
  .mxl__a{ grid-column:2; grid-row:1; }
  .mxl__t{ grid-column:1 / -1; grid-row:2; font-size:clamp(1.3125rem,5.6vw,1.4375rem); }
  .mxl__d{ grid-column:1 / -1; grid-row:3; flex-direction:row; align-items:baseline; gap:0; }
  /* Oddeľovač je v CSS, nie v značkách — na širokom okne sú údaje pod sebou
     a bodka by tam bola navyše. */
  .mxl__d > * + *::before{ content:"·"; margin:0 7px; color:var(--ink-3); }
  .mxl__m svg{ height:calc(var(--lg-v,28px) * .85); }
  .mxl__r + .mxl__r::before,.mxl::after{ left:clamp(10px,2.6vw,14px); }
}
@media (prefers-reduced-motion:reduce){
  .mxl__t,.mxl__a .ico,.mxl__m svg{ transition:none; }
}

/* ---------- postupnosť (Ako to funguje) ----------
   Štyri kroky ako štyri panely, nie ako riadok textu s bodkami. Povrch sa
   s každým krokom upokojuje — biely, svetlozelený, tmavší zelený a nakoniec
   tmavý — takže cieľ je vidieť skôr, než sa začne čítať. Kresba v každom
   paneli hovorí to isté beztextovo: roztrúsené čiary → dráhy → mriežka →
   rozhodnutie. Smer medzi panelmi drží malá šípka v medzere.

   Poradie panelov je tu obsah, preto `nth-child`: keď sa krok presunie,
   presunie sa aj jeho povrch, a nič sa nemusí dopisovať. */
.flw{
  list-style:none; margin:0; padding:0;
  /* Medzera je širšia než pri ostatných mriežkach, lebo v nej stojí spojnica.
     Obe hodnoty sú premenné — spojnica si z nich počíta, kam sa postaviť. */
  --flw-medzera:clamp(20px,2vw,28px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--flw-medzera);
}
/* Plochu, rádius aj odsadenie nesie `.card`; tu je stavba panela a postupnosť
   tónu. Karty sa s každým krokom stupňujú — najsvetlejšia, svetlozelená,
   sýtejšia a nakoniec tmavá. Sekcia je pod nimi svetlá, takže každý z tých
   štyroch tónov má voči nej kontrast; na zelenej sekcii by druhý stupeň
   zmizol. */
.flw__i{
  --flw-odsadenie:clamp(20px,2.1vw,28px);
  position:relative; display:flex; flex-direction:column;
  padding:var(--flw-odsadenie); background:var(--field-0);
}
.flw__i:nth-child(2){ background:var(--field); }
.flw__i:nth-child(3){ background:var(--field-2); }
/* Posledný je tmavý zámerne: má pôsobiť ako cieľ, nie ako štvrtá z rovnakých
   kartičiek. Rovnaká plocha ako karta s citátom — nie je to nový materiál. */
.flw__i:nth-child(4){ background:var(--dark); color:var(--ink-dk); }

/* Číslo kroku patrí k veľkým číslam webu, nie k technickým popiskám.
   Do v3.12 bolo v `--mono` ako `.lab` a `.svc__n`, čo sú ale drobné
   popisky — tu je to údaj v rovnakej role ako „400+" v TPA v číslach alebo
   „60 000+" v referencii. Preto rovnaký register: hlavné písmo, rez 600
   a to isté stiahnutie medzier. Veľkosť ostáva. */
.flw__n{
  font-family:var(--sans); font-size:clamp(1.875rem,2.5vw,2.375rem); font-weight:600;
  letter-spacing:-.05em; line-height:1; color:var(--brand);
}
.flw__i:nth-child(4) .flw__n{ color:var(--mint); }

/* Kresba má hornú hranicu šírky, nech nenarastie s panelom — na tablete by
   inak zabrala tretinu obrazovky. */
/* Kresba má hornú hranicu šírky, nech nenarastie s panelom, a jednu farbu na
   kartu — odstupňovanie vnútri robí priehľadnosť, nie ďalšie odtiene. */
.flw__m{ position:relative; display:block; margin-top:clamp(18px,2vw,26px); color:var(--accent-txt); }
.flw__m svg{ display:block; width:100%; max-width:200px; height:auto; }
.flw__i:nth-child(3) .flw__m{ color:var(--brand); }
.flw__i:nth-child(4) .flw__m{ color:var(--mint); }
/* ---------- pohyb v procesných kresbách ----------
   Pohyb tu má jedinú úlohu: vysvetliť krok. Doklady priletia, zoradia sa
   a spárujú, zbehnú sa do jedného celku a z neho vznikne graf so smerom —
   to isté, čo hovorí text, len rýchlejšie. Nie je to ozdoba a nič sa
   neopakuje donekonečna: sekvencia zbehne raz, keď kresba vojde do
   obrazovky, a zostane stáť v koncovom stave.

   Skript len pridá `is-armed` (vtedy sa prvky skryjú) a `is-play` (vtedy
   bežia). Bez skriptu sa nepridá ani jedno a kresba je rovno hotová — preto
   je počiatočný stav v CSS viazaný na `is-armed`, nie naopak. Pri obmedzenom
   pohybe sa `is-armed` nepridá vôbec.

   Časy sú v pásme 240–520 ms na prvok, celá sekvencia do 1,3 s. Hýbe sa
   `transform`, `opacity` a `stroke-dashoffset` — nič, čo by prekresľovalo
   rozloženie. */
/* Čiara sa neskrýva krytím, ale nenakreslenou stopou — inak by jej CSS
   prebilo vlastné krytie zo značky a tichá čiara by sa vykreslila naplno. */
.flw__m.is-armed .an:not(.an-ciara){ opacity:0; }
.flw__m.is-armed .an-ciara{ stroke-dasharray:var(--dl,120); stroke-dashoffset:var(--dl,120); }
/* `.an` samo znamená objavenie sa; `an-zjav` v markupe je len jeho výslovné
   meno, aby sa kresba dala čítať bez hľadania predvoleného správania —
   vlastné pravidlo nepotrebuje. Ostatné varianty prepisujú animáciu. */
.flw__m.is-play .an{ animation:flwZjav .42s var(--e-enter) var(--d,0s) both; }
/* Doklad priletí zľava — smer, ktorým na stránke tečú dáta. */
.flw__m.is-play .an-vlavo{ animation-name:flwVlavo; }
/* Blok, ktorý sa objaví ako výsledok — z 92 %, nie z nuly. */
.flw__m.is-play .an-vyskoc{ animation:flwVyskoc .34s var(--e-enter) var(--d,0s) both; }
/* Stĺpec grafu rastie zo základne, nie zo stredu. */
.flw__m.is-play .an-stlp{ transform-box:fill-box; transform-origin:bottom; animation:flwStlp .38s var(--e-enter) var(--d,0s) both; }
/* Čiara sa kreslí od začiatku po koniec; krytie si drží svoje. */
.flw__m.is-play .an-ciara{ animation:flwCiara .52s var(--e) var(--d,0s) both; }

@keyframes flwZjav{ from{ opacity:0; } to{ opacity:1; } }
@keyframes flwVlavo{ from{ opacity:0; transform:translateX(var(--px,-14px)); } to{ opacity:1; transform:none; } }
@keyframes flwVyskoc{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
@keyframes flwStlp{ from{ opacity:0; transform:scaleY(.2); } to{ opacity:1; transform:none; } }
@keyframes flwCiara{ from{ stroke-dashoffset:var(--dl,120); } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .flw__m .an:not(.an-ciara){ opacity:1 !important; }
  .flw__m .an{ animation:none !important; stroke-dashoffset:0 !important; }
}

.flw__t{
  margin-top:clamp(24px,2.6vw,34px);
  font-size:clamp(1.125rem,1.4vw,1.3125rem); font-weight:600; letter-spacing:-.022em;
  line-height:1.25;
}
.flw__d{ margin-top:var(--s3); font-size:.9375rem; line-height:1.5; color:var(--ink-2); }
.flw__i:nth-child(4) .flw__t{ color:#fff; }
.flw__i:nth-child(4) .flw__d{ color:#B4CCBF; }

/* ---------- spojnica medzi krokmi ----------
   Medailón, nie šípka prilepená do medzery. Biely kotúč je výrez do radu —
   zasahuje kúsok do oboch susedných kariet, takže spojnica pôsobí ako súčasť
   jedného procesu a nie ako znak vložený dodatočne. Vnútorný kotúč so šípkou
   je v obrázku pozadia, aby na to nebola potrebná ďalšia značka.

   Sedí na `.flw__m`, nie na karte: os kresby je aj osou spojnice a nemusí sa
   dopočítavať z výšky čísla a odsadenia. Je to ozdoba — žiadny kurzor, žiadny
   hover, žiadny pohyb. */
.flw__i:not(:last-child) .flw__m::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  top:50%; right:calc(-1 * (var(--flw-odsadenie) + var(--flw-medzera) / 2) - 23px);
  width:46px; height:46px; margin-top:-23px; border-radius:50%;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23E3EDE6'/%3E%3Cpath d='M12.5 10l5 5-5 5' fill='none' stroke='%23005233' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}

/* Pod 1000 px idú panely pod seba. Dvojstĺpec sme skúsili a zahodili: v mriežke
   2 × 2 vedie cesta z druhého panela doľava dolu a šípka to nedokáže povedať
   bez toho, aby klamala. Zvislý rad je dlhší, ale jednoznačný. */
/* Pod 1000 px karta aj stiahne: menšie odsadenie, menšie odstupy a kresba,
   ktorá nerastie so šírkou karty — inak bola karta zbytočne vysoká a kresba
   v nej zaberala polovicu. Spojnica sa otočí nadol do 40 px medzery. */
@media (max-width:1000px){
  .flw{ --flw-medzera:44px; grid-template-columns:minmax(0,1fr); }
  .flw__i{ --flw-odsadenie:clamp(20px,4vw,24px); }
  .flw__m{ margin-top:var(--s4); }
  .flw__m svg{ max-width:180px; }
  .flw__t{ margin-top:var(--s5); }
  .flw__i:not(:last-child) .flw__m::after{ content:none; }
  .flw__i:not(:last-child)::after{
    content:""; position:absolute; z-index:3; pointer-events:none;
    left:50%; bottom:calc(-1 * var(--flw-medzera) / 2);
    width:36px; height:36px; margin:0 0 -18px -18px; border-radius:50%;
    background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23E3EDE6'/%3E%3Cpath d='M10 12.5l5 5 5-5' fill='none' stroke='%23005233' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  }
}

/* Záver postupnosti. Nie je to piaty krok ani banner — je to veta, ktorá
   patrí k celej štvorici, preto stojí pod ňou cez celú šírku a v tom istom
   svetlozelenom materiáli. */
/* Tichá veta pod procesom, nie piata karta: žiadne pozadie, žiadny pásik,
   žiadny rám. Druhá veta je zvýraznená len rezom. */
.flw__note{
  margin-top:clamp(20px,2vw,24px);
  font-size:.9375rem; line-height:1.55; color:var(--ink-3); max-width:70ch;
}
.flw__note b{ color:var(--ink-2); font-weight:600; }
.hero .lede{ margin-inline:auto; }
.hero__acts{ margin-top:var(--s7); display:flex; flex-wrap:wrap; gap:clamp(12px,1.4vw,20px); justify-content:center; }

/* ---------- ukážky rozhrania v hero ----------
   Tri zóny, deväť obsahov (assets/hero-panely.js). Každá zóna je **jedno
   stabilné miesto** — karta sa v nej nepremiestňuje, len veľmi pomaly dýcha
   hore-dole a pri výmene ju nový obsah vystrieda na tom istom mieste.

   `.hdash` je **spoločný kompozičný rámec** nadpisu a kariet: obsahový
   kontajner webu aj s okrajmi (`--maxw` + dva žľaby). Nad tou šírkou sa
   kompozícia prestane rozťahovať a pribúda len vzduch okolo nej — karty teda
   neutekajú k okrajom okna. Karty sú ukotvené k tomuto rámcu, nie k sekcii.

   Tri vrstvy, aby si dva nezávislé pohyby neprepisovali `transform`:

     .hdash__zona   miesto v rámci + rezervovaný priestor
     .hdash__kotva  výmena (odchod hore, príchod zdola)  — skript, WAAPI
     .hdash__plav   plávanie zvisle                       — CSS
     .hdash__b      karta; jej graf sa kreslí vlastnou animáciou */
.hdash{
  grid-area:1/1; justify-self:center;
  /* Obsahová šírka panela, nie jeho vonkajšia hrana: karty tak nesedia na
     okraji sekcie. `--von` ich vráti o kúsok späť do strán, aby odstup ku
     stredovému textu a odstup k hrane hero boli zhruba rovnaké — inak sú
     karty bližšie k nadpisu než k okraju. Nad 1456 px sa rámec prestane
     rozťahovať a pribúda len vzduch okolo. */
  width:min(calc(100% + 2 * var(--von)), calc(var(--maxw) + 2 * var(--gut)));
  --von:clamp(6px,1vw,14px);
  /* Aby sa tri karty zmestili nad sebou aj v nízkom okne: dve pravé zóny majú
     spolu 412 px, zvyšok je odstup medzi nimi. Hero má `min-height`, nie pevnú
     výšku, takže v naozaj nízkom okne radšej narastie a stránka sa scrolluje,
     než by mala ktorákoľvek karta zmiznúť. */
  min-height:444px;
  position:relative; z-index:4; display:none;
  /* Celá vrstva je dekorácia — nesmie zachytiť kliknutie mieriace na CTA. */
  pointer-events:none;
  /* Ľavá karta je o ~15 % väčšia než pravé a všetky sa zmenšujú s oknom. */
  --kw-l:clamp(232px,20vw,288px);
  --kw-r:clamp(204px,17.4vw,250px);
  /* Výška grafu a vnútorné odsadenie idú dole skôr než veľkosť písma. */
  --gh:clamp(58px,5.4vw,78px);
  --kp:clamp(15px,1.3vw,20px);
  --e-plav:cubic-bezier(.45,0,.55,1);
}
/* Zóna je rezervovaný priestor s výškou najvyššieho variantu a karta sa v nej
   centruje: nižší variant zostavu nepresype, nemenný zostáva stred karty.

   Ľavá drží ľavý spodný roh nadpisového bloku, pravá horná pravý horný roh
   rámca, pravá spodná je nižšie a o kus viac do stredu — tri rôzne zvislé
   polohy namiesto jedného vodorovného radu. */
.hdash__zona{ position:absolute; display:flex; align-items:center; }
/* Výška zóny = najvyšší variant plus pár pixlov. Tesnejšie, než bolo: každý
   ušetrený pixel je odstup medzi oboma pravými kartami v nízkom okne. */
.hdash__zona--l { left:0;  bottom:40px; height:202px; width:var(--kw-l); }
.hdash__zona--rt{ right:0; top:0;       height:194px; width:var(--kw-r); }
.hdash__zona--rb{ right:clamp(16px,3vw,64px); bottom:0; height:194px; width:var(--kw-r); }

/* Kotva nesie výmenu. Inline štýl na nej píše skript — preto tu nie je žiadny
   `transform`, ktorý by mu ho prepísal. */
.hdash__kotva{ width:100%; will-change:transform, opacity; }

/* Plávanie je len zvislé a veľmi malé: ±3–4 px, jeden celý cyklus 7–9 s.
   `alternate` znamená, že cyklus je dvojnásobok trvania. Každá karta má inú
   fázu, ale rovnaký pokojný charakter — žiadne vodorovné blúdenie, rotácia
   ani pulzovanie mierky. */
@media (prefers-reduced-motion:no-preference){
  .hdash__plav{ animation:hdPlav var(--dp,4s) var(--e-plav) var(--fp,0s) infinite alternate; }
}
@keyframes hdPlav{ from{ transform:translateY(calc(var(--ap) * -1)); } to{ transform:translateY(var(--ap)); } }
.hdash__zona--l { --ap:4px;   --dp:4.4s; --fp:-1.2s; }
.hdash__zona--rt{ --ap:3px;   --dp:3.6s; --fp:-2.6s; }
.hdash__zona--rb{ --ap:3.5px; --dp:4s;   --fp:-4.1s; }
/* Počas výmeny plávanie stojí, aby sa jeho rýchlosť nesčítavala s rýchlosťou
   výmeny. Pozastavenie zamrazí kartu presne tam, kde je, takže ani odchod ani
   opätovné rozbehnutie nie je skok. */
.hdash__zona.is-vymena .hdash__plav{ animation-play-state:paused; }
/* Mimo obrazu a pri skrytej karte prehliadača sa nehýbe nič. */
.hdash.is-stop .hdash__plav{ animation-play-state:paused; }

.hdash__b{
  position:relative; margin:0; padding:var(--kp) calc(var(--kp) + 2px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(3,26,15,.08);
  color:var(--ink); font-size:.8125rem; line-height:1.4;
}

/* ---------- hlavička a hodnota ---------- */
/* Označenie obdobia si drží vlastný stĺpec a nikdy netlačí do nadpisu. */
.hdash__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hdash__t{ flex:1 1 auto; min-width:0; font-weight:600; letter-spacing:-.015em; font-size:.9375rem; }
.hdash__p{ flex:none; font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.hdash__v{ margin-top:8px; font-size:clamp(1.375rem,1.55vw,1.75rem); font-weight:600; letter-spacing:-.035em; line-height:1.1; white-space:nowrap; }
.hdash__zona--rt .hdash__t,.hdash__zona--rb .hdash__t{ font-size:.875rem; }
.hdash__zona--rb .hdash__v{ font-size:clamp(1.25rem,1.35vw,1.5rem); }

/* ---------- cash flow ---------- */
.hdash__bars{ margin-top:12px; height:var(--gh); display:flex; align-items:flex-end; gap:6px; }
.hdash__bars i{ flex:1; height:calc(var(--v) * 100%); border-radius:3px 3px 0 0; background:var(--mint); transform-origin:bottom; }
.hdash__bars i.is-now{ background:var(--brand); }

/* ---------- vývoj tržieb ----------
   Ten istý stĺpcový graf ako Cash flow, len šesť mesiacov namiesto siedmich —
   dva grafy vedľa seba nemajú mať dva jazyky. Modifikátor mení len to, čím sa
   tento graf od neho naozaj líši: odsadenie zhora, ktoré si niesla predošlá
   plošná verzia (plocha stála o 2 px vyššie než stĺpce, a karta si tú výšku
   musí udržať), a tesnejšie načasovanie nábehu pre šesť stĺpcov.

   Pod 6 stĺpcov s medzerou 6 px sa v pravej dolnej zóne vojde stĺpec širší než
   v Cash flow, takže sa nemusí nič prepočítavať — šírku rieši `flex:1`. */
.hdash__bars--m6{ margin-top:10px; }

/* ---------- štruktúra nákladov ---------- */
.hdash__donut{ margin-top:12px; display:flex; align-items:center; gap:clamp(10px,1.1vw,16px); }
/* Prstenec ustúpi skôr než legenda: percentá sa nesmú lámať ani orezávať. */
.hdash__donut svg{ width:var(--dw); height:var(--dw); flex:none; transform:rotate(-90deg); --dw:clamp(62px,5.8vw,96px); }
.hdash__ring{ fill:none; stroke:var(--field); stroke-width:14; }
.hdash__arc{ fill:none; stroke-width:14; stroke-linecap:butt; stroke-dasharray:var(--dash) 201.1; stroke-dashoffset:var(--off); }
.hdash__arc--1{ stroke:var(--brand); }
.hdash__arc--2{ stroke:var(--accent-txt); }
.hdash__arc--3{ stroke:var(--mint); }
.hdash__leg{ list-style:none; margin:0; padding:0; display:grid; gap:7px; min-width:0; flex:1; }
.hdash__leg li{ display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:.8125rem; }
/* Percento nesmie nikdy prepadnúť na druhý riadok. */
.hdash__leg b{ margin-left:auto; color:var(--ink); font-weight:600; white-space:nowrap; }
.hdash__leg span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdash__leg i{ width:9px; height:9px; flex:none; border-radius:2px; }
.hdash__leg--riadok{ display:flex; gap:16px; margin-top:12px; }
.hdash__d1{ background:var(--brand); }
.hdash__d2{ background:var(--accent-txt); }
.hdash__d3{ background:var(--mint); }

/* ---------- plán a skutočnosť ---------- */
.hdash__pary{ margin-top:12px; height:calc(var(--gh) + 14px); display:flex; align-items:flex-end; gap:16px; }
.hdash__par{ flex:1; display:flex; align-items:flex-end; gap:4px; position:relative; height:100%; padding-bottom:18px; }
.hdash__par span{ position:absolute; left:0; right:0; bottom:0; text-align:center; font-family:var(--mono); font-size:.5625rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.hdash__pl,.hdash__sk{ flex:1; height:calc(var(--v) * 100%); border-radius:3px 3px 0 0; transform-origin:bottom; }
.hdash__pl{ background:var(--mint); }
.hdash__sk{ background:var(--brand); }

/* ---------- riadky s hodnotou ---------- */
.hdash__line{ display:flex; justify-content:space-between; gap:12px; margin-top:10px; }
.hdash__line span{ color:var(--ink-2); }
.hdash__line b{ font-weight:600; white-space:nowrap; }
.hdash__line--sub b{ color:var(--accent-txt); }
.hdash__bar{ display:block; height:5px; margin-top:6px; border-radius:3px; width:calc(var(--v) * 100%); background:var(--brand); transform-origin:left; }
.hdash__bar--n{ background:var(--mint); }
.hdash__sep{ height:1px; background:var(--line); margin-top:14px; }
.hdash__line--sum{ margin-top:12px; }
.hdash__line--sum span{ color:var(--ink); font-weight:600; }
.hdash__line--sum b{ color:var(--brand); font-size:1.125rem; letter-spacing:-.02em; }

/* ---------- párovanie platieb ---------- */
.hdash__pair{ position:relative; margin-top:12px; padding-left:16px; }
.hdash__row{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.hdash__row span{ color:var(--ink-2); }
.hdash__row b{ font-weight:600; white-space:nowrap; }
.hdash__link{
  position:absolute; left:0; top:10px; bottom:10px; width:8px;
  border:1.5px solid var(--accent-txt); border-right:0; border-radius:3px 0 0 3px;
  transform-origin:top; opacity:.85;
}
.hdash__ok{ margin-top:12px; display:flex; align-items:center; gap:7px; font-weight:600; color:var(--brand); }
.hdash__ok svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- prepojený e-shop ----------
   Štítky sú v toku karty, nie nalepené nad jej okrajom — tak majú vlastný
   priestor a nemajú ako zasiahnuť do nadpisu. */
/* Malý karusel platforiem. Okienko je široké presne na dve dlaždice, pás pod
   ním má všetkých päť a počas života karty sa cez ne trikrát posunie — na
   poslednej dvojici zostane stáť a kartu medzitým vystrieda ďalšia.

   Dlaždice majú jednotnú šírku, inak by krok nebol rovnaký. Výšky log v nich
   sú optické, tie isté pomery ako v páse ekosystému: šírky značiek sa líšia
   od 1,7:1 po 3,4:1 a jedna spoločná výška by z jednej urobila obra. */
.hdash__chips{
  --chw:clamp(78px,6.2vw,92px); --chg:8px;
  width:calc(2 * var(--chw) + var(--chg));
  overflow:hidden; margin-bottom:12px;
}
.hdash__pas{ display:flex; gap:var(--chg); width:max-content; }
@media (prefers-reduced-motion:no-preference){
  .hdash__b.is-kresli .hdash__pas{ animation:hdChips 7.8s cubic-bezier(.4,0,.25,1) both; }
}
.hdash.is-stop .hdash__pas{ animation-play-state:paused; }
@keyframes hdChips{
  0%,14.1%    { transform:translateX(0); }
  21.2%,41.7% { transform:translateX(calc(-1 * (var(--chw) + var(--chg)))); }
  48.7%,69.2% { transform:translateX(calc(-2 * (var(--chw) + var(--chg)))); }
  76.3%,100%  { transform:translateX(calc(-3 * (var(--chw) + var(--chg)))); }
}
.hdash__lg{
  display:grid; place-items:center; flex:none; width:var(--chw); height:32px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
}
/* Pôvodné farebné značky — nesú informáciu „toto poznáte"; sploštiť ich na
   siluetu by tú informáciu zobralo. */
.hdash__lg svg{ display:block; height:var(--lh,15px); width:auto; }
.hdash__lg--shopify{ --lh:15px; }
.hdash__lg--shoptet{ --lh:14px; }
.hdash__lg--woo    { --lh:12.5px; }
.hdash__lg--magento{ --lh:15px; }
.hdash__lg--allegro{ --lh:13px; }
.hdash__flow{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:9px; }
.hdash__flow li{ display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink-2); }
.hdash__flow li i{ width:15px; height:15px; flex:none; border-radius:50%; background:var(--mint); position:relative; }
.hdash__flow li i::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--brand); }

/* ---------- dobierky ---------- */
.hdash__seg{ margin-top:14px; height:7px; border-radius:4px; background:var(--mint); overflow:hidden; }
.hdash__seg i{ display:block; height:100%; width:calc(var(--v) * 100%); background:var(--brand); transform-origin:left; }

/* ---------- kreslenie grafu po prílete ----------
   Trieda je na karte, ktorá práve vznikla, takže sa animácia prehrá raz a
   potom obsah zostane v pokoji. Nový obsah = nová karta = nové prehratie. */
.hdash__b.is-kresli .hdash__bars i,
.hdash__b.is-kresli .hdash__pl,
.hdash__b.is-kresli .hdash__sk{ animation:hdBar .44s var(--e-enter) calc(.1s + var(--i,0) * .05s) both; }
.hdash__b.is-kresli .hdash__bar{ animation:hdRatio .5s var(--e) calc(.2s + var(--i) * .1s) both; }
.hdash__b.is-kresli .hdash__seg i{ animation:hdRatio .56s var(--e) .2s both; }
.hdash__b.is-kresli .hdash__link{ animation:hdLink .34s var(--e) .18s both; }
.hdash__b.is-kresli .hdash__ok{ animation:hdIn .3s var(--e-enter) .52s both; }
/* Šesť stĺpcov naraz musí dobehnúť skôr než sedem, inak sa nábeh vlečie:
   .38 s na stĺpec, odstup .04 s, posledný končí na .64 s od príletu karty. */
.hdash__b.is-kresli .hdash__bars--m6 i{ animation:hdBar .38s var(--e-enter) calc(.06s + var(--i,0) * .04s) both; }
.hdash__b.is-kresli .hdash__arc{ animation:hdArc .68s var(--e) .14s both; }
.hdash__b.is-kresli .hdash__flow li i::after{ animation:hdTik .3s var(--e-enter) calc(.22s + var(--i) * .16s) both; }
@keyframes hdIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes hdBar{ from{ transform:scaleY(.04); } to{ transform:none; } }
@keyframes hdLink{ from{ transform:scaleY(0); } to{ transform:none; } }
@keyframes hdRatio{ from{ transform:scaleX(0); } to{ transform:none; } }
@keyframes hdArc{ from{ stroke-dasharray:0 201.1; } }
@keyframes hdTik{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* Nadpis má vlastnú, širšiu mieru než podnadpis: na notebooku aj monitore
   musí držať práve dva riadky a nesmie byť zviazaný šírkou, ktorá vznikla
   kvôli kartám. Záporné okraje ho vytiahnu z textového bloku a nechajú
   vycentrovaný. */
.hero__h1{ max-width:100%; }

@media (min-width:1024px){
  .hdash{ display:block; }
  /* Nadpis a obe pravé karty si delia jeden riadok, takže nadpis rastie presne
     tak, ako mu koridor medzi kartami dovolí — plynulo, nie po schodoch. Pri
     ~1530 px narazí na svoj strop a ďalej sa už nezväčšuje, takže na veľkom
     monitore je presne ako predtým. */
  .hero h1{ font-size:clamp(2.65rem,7.03vw - 1.9rem,4.9rem); }
  /* Textový stĺpec sa drží mimo ľavej karty. Pri 1024 px by ho samotné 46vw
     nechalo príliš široký, tak sa tam stiahne a s rastúcim oknom sa vráti späť
     na svoju krivku — bez skoku. */
  .hero__in{ max-width:min(760px, 45vw, calc(400px + (100vw - 1024px) * .9)); }
  .hero__h1{ width:860px; max-width:none; margin-inline:calc((100% - 860px) / 2); }
  /* CTA riadok je najširší prvok spodnej časti hero a stojí presne tam, kam
     siaha ľavá karta. Na úzkom notebooku je preto kompaktnejší; nad ~1380 px
     je presne taký, ako inde na webe. Ustupuje odsadenie, nie veľkosť písma —
     popiska tlačidla je na celom webe jedna. */
  .hero__acts .btn{ padding-inline:clamp(16px,1.6vw,var(--ctl-pad)); }
}

/* Four figures under the hero copy, divided by hairlines instead of framed.
   gap is 0 so the rule sits midway between two cards rather than hard against
   one; the padding does the spacing. Each figure counts up on load through the
   same data-count hook the statistics further down the page use. */
.hcards{
  /* Rovnaká miera ako odsadenie hore v `.hero__panel` — viď tam prečo. */
  /* Spodná hranica je 34, nie 26: pravá spodná karta smie pri výmene klesnúť
     17,5 px pod pásmo a pod ňou musí zostať vzduch. */
  margin-top:max(34px, min(clamp(44px,5vw,76px), calc(76px - (1000px - 100vh) * .25))); max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  text-align:center;
}
/* Bez predelov. Štyri čísla oddeľuje vlastný odstup — pri 36 až 68 px medzi
   susednými blokmi textu je čiara navyše a v pätke hero panela robila z riadku
   tabuľku. */
.hcard{ padding:var(--s5) clamp(18px,2.2vw,34px); }
.hcard__v{
  font-size:clamp(1.9rem,2.7vw,2.5rem); font-weight:600; letter-spacing:-.045em;
  line-height:1; font-variant-numeric:tabular-nums;
  transition:color var(--t-hover) var(--e-micro), transform var(--t-hover) var(--e-micro);
}
.hcard__k{ margin-top:var(--s3); font-size:.875rem; line-height:1.45; color:var(--ink-2); transition:color var(--t-hover) var(--e-micro); }
@media (hover:hover) and (pointer:fine){
  .hcard:hover .hcard__v{ color:var(--accent-dk); transform:translateY(-3px); }
  /* the descriptor steps back so the figure is the only thing that steps
     forward — pushing both would cancel the effect out. --ink-3 is the
     lightest step that still clears AA on the panel: 5.14:1 against --field,
     down from 7.05:1 at rest, so the drop reads without failing contrast. */
  .hcard:hover .hcard__k{ color:var(--ink-3); }
}
@media (prefers-reduced-motion:reduce){
  .hcard__v{ transition:color var(--t-hover) var(--e-micro); }
  .hcard:hover .hcard__v{ transform:none; }
}
/* Dva stĺpce a nižšie už sa nedelí na jeden: štyri čísla pod sebou natiahnu
   pätku panela cez pol obrazovky a posunú ju pod ohyb. V dvoch stĺpcoch sa
   zmestia aj na 360 px — len sa vodorovné odsadenie vymení za medzeru v mriežke,
   aby na popisky zostalo viac šírky. */
@media (max-width:1000px){
  .hcards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .hcards{ gap:var(--s5) var(--s4); }
  .hcard{ padding:var(--s4) 0; }
}

/* ---------- stena klientskych log ----------
   Mriežka stojí, striedajú sa len logá v bunkách — jedno naraz. Bunka má
   pevnú výšku, takže výmena nepohne rozložením. Bez kartičiek, rámov
   a tieňov: podklad je priamo sekcia.

   Logá sú tie isté značky ako v páse Ekosystému a berú si z neho aj optické
   výšky (`.lg--<id>`), takže sa nevyvažujú šírkou boxu, ale tvarom. */
.lw{ margin-top:clamp(48px,5vw,80px); --lw-s:1.26; }
.lw__t{
  font-size:clamp(1.05rem,1.25vw,1.2rem); font-weight:600; letter-spacing:-.022em;
  color:var(--ink-2); text-align:center;
}
/* Mriežka ide cez celú obsahovú šírku sekcie. Zúžená verzia tu bola a tlačila
   riadky na seba: vodorovne mala bunka vzduchu na rozdávanie, zvisle takmer
   nič, a stena pôsobila stlačene. Vzduch je teraz v oboch smeroch porovnateľný
   — bunka je vyššia a rozstupy väčšie, a značky sú o kúsok väčšie, aby plocha
   nezostala prázdna. */
.lw__grid{
  margin:clamp(32px,3.4vw,40px) auto 0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px) clamp(18px,2vw,30px);
}
/* Bunka má pevnú výšku — výmena loga ňou nepohne. */
.lw__c{ display:grid; place-items:center; min-height:92px; }
.lw__l{
  display:grid; place-items:center;
  transition:opacity .38s var(--e-micro), transform .38s var(--e-micro);
}
/* Odchod je kratší než príchod a posun je 5 px — výmena má byť takmer
   nebadateľná, nie efekt. */
.lw__l.is-out{ opacity:0; transform:translateY(-5px); transition-duration:.22s; }
/* Rovnaká výraznosť ako v páse, o stupeň silnejšia — stena je statická,
   takže značku netreba držať tak potichu ako v pohybujúcom sa rade. */
.lw .lg{ --o:.68; }
.lw .lg--powerlogy{ --o:.56; }
/* Tenké kresby: vyrovnať ich veľkosťou by znamenalo nechať ich v rade
   fyzicky prerásť ostatné, tak sa dorovnávajú tónom. Odmerané 26. 9. 2026
   pokrytím plochy: bez tohto majú proti mediánu o 40 až 70 % menej stopy. */
.lw .lg--andyou{ --o:.84; }
.lw .lg--dulcia{ --o:.8; }
.lw .lg--zenea{ --o:.8; }
.lw .lg--perperuna{ --o:.78; }
.lw .lg--artmie{ --o:.76; }
/* Veľkosť značiek berie stena z pásu v Ekosystéme — tie isté optické výšky
   `.lg--<id>`, ktoré vyvažujú široký nápis proti kompaktnej značke — a celé
   ich len prenásobí. Vlastné výšky pre jednotlivé logá tu boli a boli chyba:
   robili z tých istých značiek menšie verzie toho, čo je o sekciu vyššie.
   Násobok je `--lw-s` pri `.lw` hore; na telefóne ho prepisuje pravidlo nižšie. */
.lw .lg svg{ height:calc(var(--h) * var(--lw-s)); }
/* Tablet 3 × 3, telefón 2 × 3. Skryté bunky skript preskakuje, takže ich logá
   zostávajú v zásobe na striedanie. */
@media (max-width:1100px){
  .lw__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Skrývanie má vlastný rozsah: keby platilo až po nulu, deviata bunka by
   zostala skrytá aj na telefóne, kde sa počet zdvihol na desať — pravidlo
   nižšie ju nemá ako odkryť, lebo hovorí len o jedenástej a ďalších. */
@media (min-width:761px) and (max-width:1100px){
  .lw__c:nth-child(n+10){ display:none; }
}
@media (max-width:760px){
  /* Menšia mierka: v dvoch stĺpcoch je bunka úzka a najširšie logotypy by sa
     do nej inak tesne vošli alebo orezali. */
  .lw{ --lw-s:1.06; }
  .lw__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px var(--s4); }
  /* Desať značiek v piatich radoch (do v2.81 ich bolo šesť v troch). Šesť
     z pätnástich bol na stenu dôvery prislabý dôkaz — pôsobilo to, akoby
     klientov bolo len toľko. Značky sa nezmenšujú: ubral sa riadkový rozstup
     a výška bunky, takže stena narastie o dva rady, nie o dvojnásobok.

     Zvyšných päť zostáva v zásobe na striedanie — skript skryté bunky
     preskakuje, takže sa logá z nich vracajú späť do výberu. */
  .lw__c{ min-height:78px; }
  .lw__c:nth-child(n+11){ display:none; }
}
/* Stena nabieha **po jednej značke zľava doprava**, nie po riadkoch. Do
   v3.58 tu bol krok 90 ms na riadok; po bunkách je krok 26 ms, dvadsať
   buniek teda zbehne za 494 ms. Je to ten istý nábeh, aký má mriežka na
   `/napojenia` a štyri čísla v hero. Číslo dáva bunke `klienti.js`.

   `.lw` v selektore je kvôli váhe: spoločné pravidlo `html.anim .rv.is-in`
   stojí v súbore nižšie a pri rovnakej váhe by vyhralo ono. */
html.anim .lw .lw__c.is-in{ transition-delay:calc(var(--rv-i, 0) * 26ms); }
@media (prefers-reduced-motion:reduce){ .lw__l{ transition:none; } }

/* ---------- ekosystém technológií ----------
   Tri pásy, každý jedna kategória, ktorú so sebou nesie kapsula na začiatku
   skupiny. Predtým tu boli dva pásy s popisom vedľa alebo nad nimi; popis
   v prúde drží celú plochu ako jednu kompozíciu a nie ako dva bloky.
   Riadky vykresľuje `assets/ekosystem.js`. */
/* Vzduch medzi podnadpisom a pásmi. Do v2.96 to bolo 14–32 px a text sa
   s prvým radom log zlieval do jedného bloku — pásy začínali skôr, než sa
   podnadpis stihol dočítať. Teraz 34–62: dosť na to, aby boli logá zjavne
   druhá vec, primálo na to, aby sa sekcia roztiahla. Rytmus samotných pásov
   ani ich hustota sa nemenia. */
.eco{ margin-top:clamp(34px,5.6vw,62px); }
/* Okraje nie sú orezané natvrdo — maska necháva logá vchádzať a odchádzať.
   Je to maska, nie prechod do farby, takže nezávisí od pozadia sekcie. */
/* Tri zastávky na každej strane, nie jedna: lineárny prechod z priehľadnej do
   plnej necháva značku na okraji ešte čitateľnú a pôsobí to ako odstrih.
   Takto sa stráca skôr a plynulejšie, a pritom nie je vidieť, že tam prechod
   je. Maska, nie prechod do farby — nezávisí od pozadia sekcie. */
.eco__row{
  overflow:hidden;
  --eco-mask:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.15) 3%, rgba(0,0,0,.5) 9%, #000 15%,
    #000 85%, rgba(0,0,0,.5) 91%, rgba(0,0,0,.15) 97%, transparent 100%);
  -webkit-mask-image:var(--eco-mask);
          mask-image:var(--eco-mask);
}
/* Dosť na to, aby sa riadky čítali samostatne, málo na to, aby sa rozpadli
   na tri nesúvisiace pásy. */
.eco__row + .eco__row{ margin-top:clamp(48px,4.6vw,68px); }
/* Animácia v CSS je záloha pre prípad, že sa spoločný ťah nespustí. S ním sa
   vypína a o posun sa stará skript snímku po snímke, aby sa pás vedel otočiť
   s rolovaním. Dĺžku kola nesie každý riadok v `style`, smer trieda. */
.eco__track{ display:flex; width:max-content; will-change:transform; animation:mq 34s linear infinite; }
.eco__track--r{ animation-name:mq-r; }
.eco__grp{ display:flex; align-items:center; flex:none; }
/* 48–72 px medzi susednými značkami: polovicu dáva každá z nich. */
.eco .lg{ padding:0 clamp(24px,2.6vw,36px); }
/* Strop v páse. Optická výška `--h` dáva každej značke rovnakú plochu, čo je
   správne v mriežke, kde má bunka 92 px na výšku; v tenkej stuhe by kompaktná
   značka stála dvakrát vyššie než susedný nápis. Strop je poistka proti tomu.

   Vo v3.49 bol 26 px a bolo to pritvrdo: Tatra banka nesie pod značkou aj
   nápis, takže z nej pri 26 px ostal nečitateľný drobec. Teraz je 34 px
   a riadky sa tým rozídu o 6 až 9 px; je to menšia cena než značky, ktoré
   sa nedajú prečítať. */
.eco .lg svg{
  height:calc(var(--h) * var(--eco-s,1));
  max-height:calc(34px * var(--eco-s,1));
}
/* Výšky len pre pás. Mriežka na `/napojenia` má vlastné, odmerané pokrytím
   plochy pri bunke vysokej 92 px; v stuhe vedľa nápisov pôsobia tie isté
   značky drobne, lebo nesú aj text pod kresbou alebo majú veľa vzduchu.
   Vyžiadané 26. 9. 2026, o deň neskôr stiahnuté zhruba o desatinu: prvý
   pokus prestrelil a šesť značiek stálo nad radom. GLS sem pribudlo bez
   toho, aby predtým rástlo — je to úzky nápis bez vzduchu, takže aj
   základných 20 px z neho v páse spraví najväčšiu značku riadku. */
.eco .lg--sps{ --h:23px; }
.eco .lg--fakturoid{ --h:23px; }
.eco .lg--superfaktura{ --h:25px; }
.eco .lg--dpd{ --h:28px; }
.eco .lg--packeta{ --h:25px; }
.eco .lg--gls{ --h:18px; }
/* ABRA je jediná z tejto šestice, ktorej mriežka žiadala menej než pás.
   Základ klesol na 15 px kvôli `/napojenia`; tu sa drží pôvodných 17,
   lebo v stuhe vedľa nápisov vyzerala správne. */
.eco .lg--abra{ --h:17px; }
@media (hover:hover) and (pointer:fine){
  .eco .lg:hover svg{ transform:scale(1.02); }
}

/* Kapsula kategórie. Typografia je `.lab` — ten istý hlas, akým sa na webe
   uvádzajú sekcie — len na svetlozelenom podklade a bez nároku na kliknutie:
   nie je to tlačidlo, je to menovka riadku. */
.eco__pill{
  flex:none; display:inline-flex; align-items:center; gap:.45rem;
  margin-inline:clamp(16px,1.6vw,22px);
  padding:.45rem .75rem; border-radius:var(--r-pill);
  background:var(--field-2); color:var(--brand);
  font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
}
.eco__pill::before{ content:"\25B8"; font-size:.85em; }

@media (max-width:620px){
  /* menšie značky, tesnejšie rozostupy, drobnejšia kapsula — ale stále čitateľné */
  .eco{ --eco-s:.86; }
  .eco .lg{ padding:0 clamp(16px,4vw,24px); }
  .eco__pill{ margin-inline:clamp(12px,3vw,16px); padding:.4rem .7rem; font-size:.625rem; letter-spacing:.1em; }
}

/* Partner artwork, supplied as SVG. Held monochrome so the row reads as one
   band rather than twelve competing palettes; hovering a mark brings its own
   colours back. brightness(0) flattens whatever fills each file carries down to
   a silhouette, and opacity sets the tone from there.
   --h is per logo below: the files run from 1.65:1 to 6.5:1, so one shared
   height would leave the wide wordmarks towering over the square marks. These
   equalise optical area instead. */
.lg{ display:flex; align-items:center; justify-content:center; flex:none; }
/* --o je tón značky v pokoji. Spoločná hodnota .58 je o stupeň tmavšia než
   pôvodných .5 — rad je stále jedna tichá stuha, ale tenké kresby sa už dajú
   prečítať. Jednotlivé značky si ju nižšie zdvihnú, ak majú tenký ťah. */
.lg svg{ display:block; height:var(--h); width:auto; filter:brightness(0); opacity:var(--o,.58);
         transition:filter var(--t-ui) var(--e-micro), opacity var(--t-ui) var(--e-micro),
                    transform var(--t-ui) var(--e-micro); }
/* Len skutočná myš: na dotyku by prst nechal značku natrvalo „zapnutú" a
   riadok by sa rozpadol na jednu farebnú a jedenásť šedých. */
@media (hover:hover) and (pointer:fine){
  /* `brightness(1)` namiesto `none`: vyzerá rovnako, ale filter zostáva
     činný. Pri prepnutí na `none` prehliadač prestane prvok skladať cez
     filter a vie ho prekresliť o pixel inam, čo vyzerá ako trhnutie. */
  .lg:hover svg{ filter:brightness(1); opacity:1; }
  /* Na stene je citlivou plochou celá bunka, nie kresba. Kresba má vlastnú
     výšku, takže u tenkého nápisu je to pás vysoký 11 px v bunke vysokej 92:
     myš doň nevojde naschvál, ale okraj prejde viackrát za sekundu a tón sa
     pritom zapína a vypína. To sa číta ako keby sa logo hýbalo. */
  .lw__c:hover .lg svg{ filter:brightness(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .lg svg{ transition:none; } }
/* Klienti (stena „Firmy, ktoré nám dôverujú"). Výšky nie sú odhad: značka
   má mať rovnakú optickú plochu ako susedia, nie rovnakú výšku. Preto
   `--h ≈ √(1500 / pomer strán)` — dlhý nápis je nižší, kompaktná značka
   vyššia, a v rade potom ani jedna netlačí na ostatné. Konštanta 1500 je
   odčítaná z pásu Ekosystému, aby obe plochy hovorili rovnako nahlas. */
.lg--dajana-rodriguez{ --h:13px; }
.lg--puella{ --h:34px; }
.lg--powerlogy{ --h:17px; }
.lg--boataround{ --h:12px; }
.lg--precise-group{ --h:33px; }
.lg--the-streets{ --h:16px; }
.lg--bloom-robbins{ --h:31px; }
.lg--crowdberry{ --h:21px; }
.lg--aukro{ --h:20px; }
.lg--emerosa{ --h:14px; }
.lg--clovecina{ --h:27px; }
.lg--takoy{ --h:16px; }
.lg--iron-aesthetics{ --h:22px; }
.lg--aha-cookies{ --h:21px; }
.lg--alfa-pureo{ --h:21px; }
.lg--race-shop{ --h:20px; }
.lg--finstat{ --h:24px; }
.lg--eatster{ --h:34px; }
.lg--sask{ --h:25px; }
.lg--kakawco{ --h:14px; }
.lg--zenea{ --h:23px; }
.lg--andyou{ --h:40px; }
.lg--perperuna{ --h:11px; }
.lg--duc-plant{ --h:29px; }
.lg--taktik{ --h:27px; }
.lg--onsaplus{ --h:22px; }
.lg--potichu{ --h:23px; }
.lg--artmie{ --h:27px; }
.lg--dulcia{ --h:28px; }
.lg--noezon{ --h:16px; }
.lg--giovani{ --h:42px; }
/* Tatra banka má symbol v spoločnom sprite kvôli „V médiách", kde sa meria
   inak (`.mxl__r`). Pre dlaždicu napojení potrebuje vlastnú optickú výšku:
   pomer strán je 1,05, takže √(1500 / 1,05) = 38 px. */
.lg--tatra-banka{ --h:41px; }
.lg--shoptet{ --h:23px; }
.lg--shopify{ --h:24px; }
.lg--woo{ --h:20px; }
.lg--magento{ --h:25px; --o:.66; }
.lg--comgate{ --h:21px; }
.lg--gopay{ --h:20px; }
.lg--payu{ --h:26px; }
.lg--gpay{ --h:19px; --o:.64; }
.lg--stripe{ --h:24px; }
.lg--paypal{ --h:24px; }
.lg--balikobot{ --h:23px; }
.lg--doklado{ --h:25px; }
/* Účtovné a integračné systémy. Tie isté pravidlá, len sú to lockupy od
   širokého nápisu po stohovanú značku s ikonou, takže rovnaká výška boxu by
   dala opticky veľmi nerovnaké logá. Výška je preto na značku, nie na box. */
.lg--abra{ --h:15px; }
.lg--base{ --h:18px; }
.lg--dativery{ --h:26px; }
@keyframes mq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes mq-r{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
@media (prefers-reduced-motion:reduce){
  /* nič sa nehýbe, takže sa riadok zalomí a ukáže všetky značky naraz —
     maska aj druhá skupina by len schovávali logá bez dôvodu */
  .eco__row{ -webkit-mask-image:none; mask-image:none; overflow:visible; padding-inline:var(--gut); }
  .eco__track{ animation:none; width:auto; flex-wrap:wrap; }
  /* flex:none z pohyblivej verzie by riadok držal v plnej šírke aj potom, čo ho
     nič neoreže, a na úzkej obrazovke by tlačil stránku nabok */
  .eco__grp{ flex:0 1 auto; min-width:0; flex-wrap:wrap; align-items:center; gap:var(--s4) 0; }
  .eco__grp[aria-hidden="true"]{ display:none; }
  .eco__pill{ margin-left:0; }
}

/* ---------- čísla ----------
   Plochu, rádius aj odsadenie nesie `.card`; tu zostáva len to, čo je vlastné
   číslam — výška, v ktorej sa zrovnajú, a poradie popis hore / číslo dole. */
/* Štyri v rade sú kompaktná mriežka — 16 px. Viac ich rozsype, menej
   zlepí. */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s4); }
.stat{ min-height:330px; display:flex; flex-direction:column; }
/* Bez horného odsadenia: do v4.26 nad popisom stála menovka („Portfólio",
   „Objem"…) a `margin-top` bol medzera pod ňou. Menovky sú preč, lebo
   popis hovoril to isté inými slovami — „Integrácie" nad vetou „aktívnych
   napojení a integrácií". Výška kartičky sa tým nemení, drží ju
   `min-height` a číslo pritlačené nadol; pribudol len vzduch. */
.stat__k{ font-size:.9375rem; color:var(--ink-2); line-height:1.45; max-width:26ch; }
/* Popis hore, číslo dole: `margin-top:auto` medzi ne vytlačí celý zvyšok
   kartičky a čísla v rade tým sedia na jednej linke bez ohľadu na to, koľko
   riadkov má popis. Rovnaká stavba ako `.tst__stat` v referenciách.

   Tabulárne číslice tu zámerne nie sú, hoci v hero ich kartičky majú: tam sú
   v čísle len číslice, tu je v ňom aj „mil.+" a tabulárna šírka dá čiarke aj
   bodke celé políčko, takže sa číslo rozpadne na „1 , 8". */
.stat__v{
  /* Spodná hranica 3,75rem, nie 3rem: na telefóne je číslo jediný dôkaz na
     obrazovke a 48 px naň bolo málo. „2 mil.+" má pri 64 px 182 px, najužšia
     kartička vnútri 198 — vojde sa v plnej veľkosti na každej šírke. */
  font-size:clamp(3.75rem,5vw,4rem); font-weight:600; letter-spacing:-.05em;
  line-height:1; margin-top:auto; padding-top:var(--s6);
}

/* ---------- úvod sekcie (Služby aj Problémy) ----------
   Blok sedí nad oboma stĺpcami, nie v ľavom, a beží asi do polovice stránky —
   dosť na to, aby sa riadok nezlomil priskoro, a nie tak, aby sa zavrela pravá
   polovica. */
.stk__head{ max-width:min(46rem,100%); margin:0 0 clamp(var(--s7),4.6vw,var(--s8)); }
/* Problémy majú byť stručné: štyri karty majú nasledovať hneď, nie po zvyčajnej
   sekčnej medzere. Ostatné miery úvodu zostávajú rovnaké ako v Službách. */
.stk__head--tesny{ margin-bottom:clamp(20px,2.1vw,30px); }
.stk__head h2{ margin-top:var(--s5); }
.stk__head .lede{ margin-top:var(--s5); max-width:40rem; }
/* Veta v Problémoch smie využiť celú šírku bloku, nie len 40rem — na užšej
   miere sa lámala na tri riadky a sekcia má byť prečítaná naraz. Musí stáť
   **za** pravidlom vyššie: obe majú rovnakú váhu, takže rozhoduje poradie. */
.stk__head--tesny .lede{ max-width:46rem; }
.nb{ white-space:nowrap; }

/* One ▸ for the whole list rather than one per row: it travels to whichever
   item is live, so the marker itself carries the movement. The left padding on
   the rows is the lane it runs in. Používa ho filter na `/z-praxe` aj obsah
   dokumentu so zásadami — od Služieb sa odsťahoval s prestavbou v2.49. */
.navptr{
  position:absolute; left:0; top:0; pointer-events:none;
  color:var(--brand); font-size:1.75rem; line-height:1;
  transition:transform var(--t-card) var(--e);
}
@media (prefers-reduced-motion:reduce){ .navptr{ transition:none; } }

/* ---------- Služby: štyri kategórie ako štyri veľké karty ----------

   Karty sa pri rolovaní kladú na seba. Robí to `position:sticky` a poradie
   v DOM: každá ďalšia má `top` o krok nižšie, takže z tých pod ňou zostane
   vidieť horný pás. Žiadny výpočet na snímku, žiadna knižnica.

   Skript hlási jedinú vec — ktorá karta je navrchu (`--svc-at` na obale).
   Zmenšenie kariet vzadu si z toho CSS odvodí samo cez `max()`, takže sa
   neprepisujú štyri prvky, ale jedno číslo. Keby prehliadač `max()` v čísle
   nevedel, `transform` sa zahodí ako celok a stoh zostane fungovať bez
   zmenšovania — kroky v `top` nesie stále.

   Medzera pod kartou nie je rozmer, ale čas: určuje, ako dlho sa karta dá
   čítať, kým ju prekryje ďalšia. Preto je vo `vh`. */
.svc{
  /* Jedno miesto, odkiaľ si odsadenie berie prepínač, karty aj kotvy:
     hlavička → vzduch → prepínač → vzduch → stoh. */
  --svc-bar-h:var(--ctl-h);
  --svc-bar-hore:clamp(10px,1.4vw,18px);   /* vzduch nad prepínačom */
  --svc-bar-dole:clamp(14px,1.8vw,24px);   /* a pod ním */
  --svc-top:calc(var(--hdr) + var(--svc-bar-hore) + var(--svc-bar-h) + var(--svc-bar-dole));
  --svc-krok:14px;   /* o koľko nižšie parkuje každá ďalšia karta */
  --svc-cas:9vh;     /* vzduch v toku = čas na prečítanie karty */
  --svc-at:0;        /* index karty navrchu; nastavuje skript */
}
/* Zvislý tok bez zlievania okrajov: značka medzi kartami má nulovú výšku
   a v bežnom toku by sa okraje cez ňu zliali, takže by ukazovala inam než
   začína karta za ňou. Vo flexe sa okraje nezlievajú a značka stojí presne
   tam, kde má. */
.svc__stack{ display:flex; flex-direction:column; }
/* Kotva, nie obsah: nulová výška, žiadne okraje, len miesto v toku. */
.svc__mark{ display:block; height:0; scroll-margin-top:var(--svc-top); }

/* Prvé tri karty majú jednu a tú istú plochu (`--field`, čo je plocha
   `.card--tint` na celom webe), štvrtá je tmavá. Odstupňovanie sme v v2.51
   zrušili ako prevzatú logiku a v v2.52 vrátili: bez neho tri zaparkované
   karty v stohu splynuli do jednej plochy a stoh prestal byť stoh.

   Rádius `--r-xl`: sú to najväčšie plochy na webe a pri ich mierke pôsobil
   rádius kartičky tvrdo. Ten istý stupeň má hero panel — druhá plocha tejto
   veľkosti na webe. */
.svc__card--a{ background:var(--field-0); }
.svc__card--b{ background:var(--field); }
.svc__card--c{ background:var(--field-2); }
.svc__card{
  border-radius:var(--r-xl);
  padding:clamp(28px,3.1vw,50px);
  scroll-margin-top:var(--svc-top);
}

/* Poradie v stohu, nie ďalší názov kategórie. Meno kategórie je na karte
   práve raz — ako jej titul. V nadtitulku stálo do v2.51 aj ono a spolu
   s prepínačom nad kartou to bolo trikrát to isté slovo. */
.svc__no{
  display:block; font-family:var(--mono); font-size:.875rem; font-weight:500;
  letter-spacing:.14em; line-height:1; color:var(--brand);
}
.on-dark .svc__no{ color:var(--mint); }
/* Názov kategórie, nie druhý nadpis stránky — ale na karte tejto veľkosti
   musí uniesť celý ľavý stĺpec. */
.svc__h{
  margin-top:clamp(18px,1.8vw,26px);
  font-size:clamp(1.75rem,3vw,2.875rem); line-height:1.08;
  letter-spacing:-.038em; font-weight:600;
}
.svc__p{
  margin-top:clamp(20px,2.1vw,30px); max-width:34ch; color:var(--ink-2);
  font-size:clamp(1rem,1.1vw,1.0625rem); line-height:1.55;
}
.on-dark .svc__p{ color:var(--ink-dk-3); }

/* Služby ako editoriálne bloky, nie ako ďalšie kartičky v kartičke. Hranicu
   robí vlasová linka nad blokom a vzduch, nič iné.

   Kategórie nemajú rovnaký počet služieb — 6 / 5 / 6 / 5 podľa toho, čo TPA
   naozaj robí. Šesť sa rozdelí na 2 × 3 samo; pätina by v dvojstĺpci nechala
   prázdne šieste políčko, preto ide cez celú šírku a jej linka sa stane
   uzatváracím pravidlom riadku. Text si aj tak drží svoju mieru — linka je
   široká, veta nie. */
.svc__items{ list-style:none; margin:0; padding:0; display:grid; align-content:start; }
/* Riadky služieb držia pri sebe: mriežka má byť jeden súvislý zoznam, nie
   šesť samostatných blokov roztiahnutých po celej výške karty. Vzduch, ktorý
   tým vznikne, sa nerozdáva medzi riadky — zostáva **pod** mriežkou, kde je
   zámerom, nie zvyškom. */
/* Linka je **spodnou hranicou obsahu, nie hornou hranicou políčka**. Keď
   stála hore, čítala sa ako horné orámovanie tabuľky a rozbíjala poradie:
   oko narazilo na linku skôr než na číslo. Teraz je poradie číslo → názov →
   popis → linka, teda linka uzatvára to, čo prečítate, a nie ohlasuje to, čo
   ešte len príde.

   Položky sa v riadku naťahujú na rovnakú výšku (predvolené `stretch`), takže
   linka je ukotvená na spodok políčka, nie hneď za textom. Pri dvoch rôzne
   dlhých popisoch vedľa seba tým vzniknú pokojné vodorovné pásy namiesto
   schodíka. */
.svc__i{ padding-bottom:24px; border-bottom:1px solid var(--line); }
.svc__i--sirsi{ grid-column:1 / -1; }
.on-dark .svc__i{ border-bottom-color:var(--line-dk); }
/* Posledný riadok linku nemá — inak by mriežka končila hranou a nie vzduchom.
   Ktoré políčka sú v poslednom riadku, závisí od toho, či kategória končí
   širokou položkou: ak áno, je v ňom sama, ak nie, sú tam dve. */
.svc__i:last-child{ border-bottom:0; padding-bottom:0; }
.svc__n{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em;
  color:var(--brand); display:block; line-height:1.4;
}
.on-dark .svc__n{ color:var(--mint); }
.svc__i h4{ margin-top:12px; font-size:1rem; font-weight:600; letter-spacing:-.022em; }
.on-dark .svc__i h4{ color:#fff; }
.svc__i p{ margin-top:12px; font-size:.9375rem; line-height:1.5; color:var(--ink-2); max-width:34ch; }
.on-dark .svc__i p{ color:var(--ink-dk-3); }

/* ---------- prepínač kategórií ----------
   Ovládač, nie navigácia: preto pilulka na stred, nie pruh cez celú šírku.
   Vzhľad nesie zdieľaný `.seg` — Služby, otázky aj plávajúca lišta majú jeden
   prepínač. Tu zostáva len umiestnenie. `--svc-bar-h` musí sedieť s `--ctl-h`,
   lebo od neho visí odsadenie celého stohu. */
.svc__bar{ justify-content:center; padding-block:var(--svc-bar-hore) var(--svc-bar-dole); }

/* ---------- pod 1100 px: žiadne stohovanie ----------
   Štyri lepkavé karty by si na tablete aj telefóne konkurovali o to isté
   miesto. Idú teda pod sebou a kategórie ovláda plávajúca lišta. */
.svc__card + .svc__mark{ margin-top:18px; }
.svc__bar{ display:none; }   /* nad 1100 px ho zapne `display:flex` nižšie */

@media (min-width:1100px){
  /* Pruh je lepkavý hneď pod hlavičkou a **nepriehľadný na celú šírku obsahu**,
     nie len pod pilulkou. Je to maska: pri odchode stohu karty stúpajú nahor
     a bez nej by ich text prechádzal za pilulkou a v medzerách vedľa nej by
     bol vidieť. Biela je farba stránky, takže pruh sám nie je vidieť —
     vidieť je len to, že karta pod ním končí. Šírka pruhu sa rovná šírke
     kariet, takže nič nepretečie po stranách. */
  .svc__bar{
    display:flex; position:sticky; top:var(--hdr); z-index:20;
    background:var(--paper);
  }
  .svc__card + .svc__mark{ margin-top:0; }
  .svc__card{
    position:sticky; top:calc(var(--svc-top) + var(--i) * var(--svc-krok));
    z-index:calc(var(--i) + 1);
    /* Karta má byť kapitola, nie riadok. Dolná hranica drží všetky štyri
       karty na rovnakej výške, hoci kategórie majú 6 / 5 / 6 / 5 služieb —
       v zaparkovanom stohu by rôzne vysoké karty vyzerali ako chyba. Obsah
       ju smie prerásť, ak treba.

       Strop 575 (do v2.80 to bolo 620). Zaparkovaná karta stojí 176 px pod
       vrchom okna a štvrtá o 42 px nižšie, takže pri 620 sa na okne vysokom
       900 px končila 63 px nad spodkom — dosť na to, aby sa vošla, primálo
       na to, aby to bolo cítiť. So 575 má rezervu 107 px a karta sadne do
       okna aj s pruhom nad ňou bez doscrollovania.

       Nie je to zhustenie obsahu: najvyššia kategória potrebuje pri 1440 aj
       s okrajmi 515 px, takže pod ňou zostáva 60 px vzduchu. Písmo, šírka,
       mriežka ani obsah sa nemenili.

       **Spodná hranica 530 nie je odhad.** Text sa v užších stĺpcoch láme
       viac, takže najvyššia karta potrebuje pri 1100 až 563 px, pri 1180
       521 a pri 1340 už len 509. Pod 530 by sa karty začali rozchádzať
       skôr než dnes; nad 530 by sa v pásme 1180–1300 zbytočne natiahli.
       Pri 1100 jedna karta hranicu aj tak prerastie — ako dnes, len o 33 px
       namiesto 39. */
    min-height:clamp(530px,40vw,575px);
    margin-bottom:var(--svc-cas);
    /* Vľavo kategória, vpravo služby. Zoznam služieb má prevážiť: je to
       obsah, kvôli ktorému sa karta číta. */
    display:grid; grid-template-columns:minmax(0,36fr) minmax(0,60fr);
    gap:clamp(56px,6vw,88px);
    align-content:start;
    /* Hĺbka = o koľko kariet je táto vzadu. `max()` odreže záporné, takže
       karty pred aktívnou zostanú v plnej veľkosti. */
    --svc-hlbka:max(0, var(--svc-at) - var(--i));
    transform-origin:top center;
    transform:scale(calc(1 - .014 * var(--svc-hlbka)));
    transition:transform .45s var(--e);
  }
  /* Koncový dobeh: čas, počas ktorého stoh stojí a posledná karta sa dá
     dočítať. Bez neho štvrtá karta zaparkuje a v tej istej chvíli ju aj
     s celým stohom vytlačí koniec obalu preč.

     Je to **samostatný prvok za kartami**, nie výplň obalu ani okraj
     poslednej karty. Odmerané, obe alternatívy sú slepé uličky: lepkavosť sa
     zaráža o obsahový rám rodiča, takže výplň je až za ním a nepridá ani
     pixel — a okraj poslednej karty patrí do jej vlastného rámu, takže jej
     lepkavosť nielenže nepredĺži, ale úplne zruší (karta s okrajom až po
     koniec obalu sa nemá kam posunúť a preletí celým stohom bez zaparkovania).
     Prvok navyše je jediné miesto, ktoré leží v ráme rodiča a nie v ráme
     karty.

     Skracovaný dvakrát: 42vh → 20 (v2.51, posledná karta stála pridlho)
     → 14 (v2.57). Chvost stohu je totiž zároveň prázdnym miestom **za** ním:
     keď štvrtá karta odíde nad okno, zvyšok chvosta zostane ako biela plocha
     pred ďalšou sekciou. Odmerané: medzera pod Službami mala 505 px, z toho
     261 bol chvost. */
  .svc__stack::after{ content:""; display:block; flex:none; height:clamp(90px,14vh,180px); }
  .svc__items{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px clamp(36px,3.4vw,48px); }
  .svc__items:not(:has(.svc__i--sirsi)) .svc__i:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
}

/* Na úzkej obrazovke je všetko v jednom stĺpci a služby pod sebou. */
@media (max-width:1099px){
  .svc__lead{ max-width:46rem; }
  /* Bez stohovania nemá zmysel držať výšku — kartu určuje obsah. */
  .svc__p{ max-width:52ch; }
  .svc__items{ margin-top:clamp(24px,3.4vw,36px); gap:20px; }
  .svc__i{ padding-bottom:20px; }
  .svc__i p{ max-width:52ch; }
}

/* Tablet nie je telefón: štyri služby pod sebou by z karty spravili stĺpec
   na dve obrazovky. Dva stĺpce zostávajú až po 700 px, pod nimi je jeden. */
@media (min-width:700px) and (max-width:1099px){
  .svc__items{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) clamp(24px,3.6vw,40px); }
  .svc__items:not(:has(.svc__i--sirsi)) .svc__i:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
  .svc__i p{ max-width:38ch; }
}

/* Obmedzený pohyb: stoh je pohyb, tak ho niet. Karty idú pod sebou aj na
   veľkej obrazovke, prepínač zostáva a funguje — skok naň rieši `rolujNa`,
   ktorý pri obmedzenom pohybe neanimuje. */
@media (prefers-reduced-motion:reduce){
  .svc__card{ position:static; transform:none; transition:none; }
  .svc__card + .svc__mark{ margin-top:18px; }
}

/* ---------- plávajúci prepínač Služieb (pod 1100 px) ----------
   Schránku nesie `.fbar`, obsah `.seg--dark`. Je to ten istý pár ako
   v článku (`.acta` + `.btn--mint`), len s iným vnútrom — plávajúce lišty sú
   jedna rodina, nie dve náhody. */
.sfab{ display:flex; justify-content:center; pointer-events:none; }
.sfab[data-on="false"] .seg{ pointer-events:none; }
/* Na dotyku je segment cieľom pre palec, nie pre kurzor — preto vyšší než
   v toku stránky (46 px na segment, 56 px puzdro).

   Odsadenie je 12 px, nie 20 ako v toku: pri 375 px má puzdro k dispozícii
   351 px a štyri kategórie potrebujú 349. Pri 14 px by to bolo 365 a pilulka
   by sa na najbežnejšej šírke telefónu posúvala. Ustupuje teda odsadenie,
   nie veľkosť písma — tá zostáva 15 px ako pri prepínači v toku. */
.sfab .seg{ min-height:56px; pointer-events:auto; box-shadow:var(--tien-float); }
.sfab .seg__b{ min-height:46px; padding:0 12px; }
/* **Puzdro vypĺňa lištu, nie svoj obsah.** Do v2.81 bolo `inline-flex`, takže
   z lišty na telefóne zostala úzka kapsula plávajúca uprostred — ovládač
   vyzeral ako ozdoba. Teraz je to to isté, čo robí tlačidlo vo výzve
   v článku: schránka je `.fbar`, obsah ju vyplní.

   Segmenty rastú `flex:1 1 auto`, nie rovnakým dielom: „Dane" a „CFO" sú
   krátke a rovnaké diely by im dali toľko miesta ako „Digitalizácii", ktorá
   by sa potom nezmestila. Takto si každý nechá svoju šírku a prebytok sa
   rozdelí. Odsadenie ustupuje, veľkosť písma nie.

   Platí to len na telefóne (do 640 px, kde sa lišta tiahne od okraja
   k okraju). Na tablete zostáva puzdro na šírku obsahu a v strede — tam nie
   je lišta úzka, tam by roztiahnutá bola: štyri segmenty po 260 px. */
@media (max-width:640px){
  .sfab .seg{ display:flex; width:100%; }
  .sfab .seg__b{ flex:1 1 auto; padding:0 6px; }
}
@media (max-width:360px){ .sfab .seg__b{ padding:0 4px; } }
@media (min-width:1100px){ .sfab{ display:none; } }

/* ---------- testimonial carousel ---------- */
.tst__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); flex-wrap:wrap; }
.tst__nav{ display:flex; align-items:center; gap:var(--s2); }
/* Ovládacie tlačidlo karuselu. Meno je zámerne bez sekcie — používajú ho
   referencie aj karusel expertov a viazať ho na jednu z nich by klamalo. */
.carbtn{
  width:30px; height:30px; border:0; background:none; padding:0;
  color:#7E9A89; cursor:pointer; display:grid; place-items:center;
  transition:color var(--fast);
}
.carbtn:hover{ color:var(--brand); }
.carbtn svg{ transition:transform var(--t-hover) var(--e-micro); }
.carbtn[data-d="prev"]:hover svg{ transform:translateX(-2px); }
.carbtn[data-d="next"]:hover svg{ transform:translateX(2px); }
/* Na kraji radu je smer, ktorý už nikam nevedie, stlmený a nekliknuteľný. */
.carbtn[disabled]{ opacity:.35; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .carbtn svg{ transition:none; } }
.tst__vp{ overflow:hidden; cursor:grab; touch-action:pan-y; }
.tst__vp[data-drag="true"]{ cursor:grabbing; user-select:none; }
.tst__vp[data-drag="true"] .tst__track{ transition:none; }
.tst__vp[data-drag="true"] a{ pointer-events:none; }
.tst__track{ display:flex; gap:var(--s4); transition:transform var(--t-car) var(--e); will-change:transform; }
/* Výška rámu sa mení s aktívnym slidom (viď skript v `index.html`), preto sa
   prelína rovnakou krivkou a časom ako posun — aby to bol jeden pohyb, nie
   dva. Nad 1000 px sa nikdy nemení, tam sú oba slidy rovnako vysoké. */
.tst__vp{ transition:height var(--t-car) var(--e); }
@media (prefers-reduced-motion:reduce){ .tst__vp{ transition:none; } }
@media (prefers-reduced-motion:reduce){ .tst__track{ transition:none; } .carbtn:active{ transform:none; } }
.tst__slide{
  flex:0 0 100%; display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.68fr) minmax(0,.68fr);
  gap:var(--s5); align-items:stretch;
}
.tst__card{
  background:var(--dark); color:var(--ink-dk); border-radius:var(--r-lg);
  padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; gap:var(--s6);
}
/* Biela karta na zelenej sekcii — protiklad tmavej karty s citátom vedľa.
   Plochu nesie `.card`, tu je len stavba: popis hore, číslo dole. */
/* Plocha nie je biela, ale najsvetlejšia zelená zo škály. Biela karta na
   `--field-2` bola najtvrdší kontrast v sekcii a pretiahla pozornosť z citátu
   vedľa na dve čísla. `--field-0` je od podkladu odlíšená dosť na to, aby
   karta zostala kartou, a dosť potichu na to, aby ňou prestala kričať.
   Tmavá karta s citátom sa nemení — tá je protiváha zámerne. */
.tst__stat.card{ background:var(--field-0); }
.tst__stat{ display:flex; flex-direction:column; }
.tst__stat p{ font-size:.9375rem; color:var(--ink-2); margin-top:var(--s3); max-width:28ch; line-height:1.45; }
/* Rovnaká škála ako `.stat__v` v sekcii TPA v číslach — sú to tie isté
   dôkazové čísla, len v inej sekcii, a líšiť sa nemajú. */
.tst__stat b{
  margin-top:auto; padding-top:var(--s6);
  font-size:clamp(3.75rem,5vw,4rem); font-weight:600; letter-spacing:-.05em; line-height:1;
}
/* A unit too long to sit on the figure's own line drops under it at body size,
   so the numeral keeps the display scale instead of wrapping into three lines. */
.tst__u{ display:block; margin-top:var(--s3); font-size:.9375rem; font-weight:500; letter-spacing:normal; line-height:1.35; color:var(--ink-2); }
@media (max-width:1000px){
  .tst__slide{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tst__card{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .tst__slide{ grid-template-columns:minmax(0,1fr); }
  .tst__stat b{ padding-top:var(--s4); }
}
.tst__q{ font-size:clamp(1.2rem,1.85vw,1.5rem); line-height:1.38; letter-spacing:-.026em; color:#fff; font-weight:500; flex:1; }
/* ---- druhý tvar slidu: samotná recenzia ----
   Klient bez prípadovej štúdie nemá čo dať do dvoch čísel ani kam odkázať,
   takže karta zaberie celú šírku. Citát dostane väčší stupeň, lebo na slide
   nie je nič iné, ale drží si mieru okolo 40 znakov na riadok — roztiahnuť ho
   na 1200 px by z neho spravil odstavec, ktorý sa nečíta ako citát. */
.tst__slide--citat{ grid-template-columns:minmax(0,1fr); }
/* Stavba karty zostáva tá istá ako na slide s prípadovou štúdiou: citát hore,
   pod ním vizitka vľavo a logo vpravo dole. Mení sa len to, že karta je na
   celú šírku. Citát si preto drží mieru okolo 46 znakov — roztiahnuť ho cez
   1400 px by z neho spravilo odstavec s riadkami cez 150 znakov a prestal by
   sa čítať ako citát. O stupeň väčšie písmo než vedľa má preto, že na slide
   nie je nič iné, čo by nieslo pohľad. */
.tst__slide--citat .tst__q{ max-width:46ch; font-size:clamp(1.25rem,1.9vw,1.6rem); }
/* Pod 1000 px sa slide s prípadovou štúdiou skladá pod seba a rastie: na
   768 px má 566 px, na 375 px už 896 px. Karusel je flex a naťahuje všetky
   slidy na najvyšší, takže karta so samotným citátom — ktorej vlastná výška
   je 270 až 426 px — dostávala 296 až 470 px tmavej prázdnoty pod vizitkou.
   Na telefóne to bolo viac prázdna než obsahu.

   Preto sa tu karta nenaťahuje. Zostane vo svojej výške a priestor pod ňou je
   pozadie sekcie, nie diera v karte. Horná hrana sedí s kartou na druhom
   slide, takže pri prepnutí nič nepodskočí.

   Dve cesty, ktoré sa skúšali a nevyšli: zväčšiť citát, aby plochu zaplnil
   sám — pri 375 px má už teraz 28 znakov na riadok a každý ďalší stupeň ho
   stlačí pod 24, čo sa na telefóne seká. A meniť výšku karusela podľa
   aktívneho slidu — prepína sa sám každých deväť sekúnd a stránka pod ním by
   sa každých deväť sekúnd posunula.

   Nad 1000 px zostáva všetko po starom: rozdiel je 77 px a natiahnutá karta
   s vizitkou na spodnej hrane je zámer. */
@media (max-width:1000px){
  /* Slidy si držia vlastnú výšku, nenaťahujú sa na najvyšší. Bez toho by rám
     zostal vysoký aj nad nízkym slidom a skript by nemal čo zmenšovať. */
  .tst__track{ align-items:flex-start; }
  .tst__slide--citat .tst__card{ grid-column:1; align-self:start; }
  .tst__slide--citat .tst__q{ flex:0 1 auto; }
  /* Automatické prepínanie je tu vypnuté (skript), takže tlačidlo pauzy nemá
     čo ovládať a zmizne. Prepína sa šípkami, bodkami alebo potiahnutím. */
  #tPlay{ display:none; }
}
/* The bottom row of the card: the way on to the case study on the left, the
   client's mark on the right, both sitting on the same baseline-ish edge. */
.tst__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); flex-wrap:wrap; }
.tst__who{ display:flex; flex-direction:column; gap:2px; }
.tst__name{ font-weight:600; color:#fff; font-size:.9375rem; }
.tst__role{ font-family:var(--mono); font-size:.75rem; color:#8AA396; }
/* Skutočné logo klienta na mieste, kde ostatné slidy zatiaľ držia rámček.
   Rozmer sa riadi **výškou**, nie šírkou — rovnaká logika ako v zozname médií
   a v páse Ekosystému. Na tmavej karte je logo `currentColor`, takže sa
   prefarbí spolu s textom a nepotrebuje vlastnú svetlú verziu. */
.tst__lg{
  flex:none; margin-left:auto; display:grid; place-items:center;
  color:var(--ink-dk); opacity:.72;
}
/* Výška je premenná, nie pevná. Logá nemajú rovnaký pomer kresby k rámu:
   Giovani má v ráme kvapku a popod ňu drobné písmo, FinStat je čistý nápis
   cez celú výšku. Pri rovnakých 56 px vyzeral FinStat zreteľne väčší. Pomer
   je prevzatý z pásu klientov, kde je tá istá korekcia spravená (Giovani
   42 px, FinStat 24 px), aby sa obe miesta nerozišli. */
.tst__lg svg{ display:block; width:auto; height:var(--h,56px); fill:currentColor; }
@media (max-width:620px){ .tst__lg svg{ height:calc(var(--h,56px) * .786); } }
.tst__lg--finstat{ --h:32px; }
/* Na telefóne si riadok v pätke karty delí vizitka klienta a jeho logo.
   `nowrap` ich drží na jednom riadku, inak by logo spadlo pod meno a pätka
   by narástla o celý riadok. */
@media (max-width:620px){
  .tst__foot{ gap:var(--s4); flex-wrap:nowrap; }
}

/* Nadpis sekcie stojí vo vlastnom stĺpci nad karuselom. Kedysi sa tu striedal
   spolu so snímkou; z toho zostalo len to, že stĺpec si šírku riadka nárokuje
   sám — obsah v ňom je vycentrovaný a inak by sa zúžil na text. */
.tst__top > div{ flex:1 1 auto; min-width:0; }
.tst__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s6); }
.tst__dots{ display:flex; gap:var(--s2); }
/* Three pixels is the right size for the mark and the wrong size for the
   target. The pseudo-element grows the area the pointer has to find to
   25px without touching the layout the bar is built on. */
.tst__dot{ position:relative; width:28px; height:3px; border-radius:2px; background:var(--line); border:0; padding:0; cursor:pointer; transition:background var(--fast); }
.tst__dot::before{ content:""; position:absolute; inset:-11px 0; }
.tst__dot[aria-selected="true"]{ background:var(--brand); }

/* ---------- contact page ---------- */
/* No panel and no artwork: the page opens on type and space, so the form below
   is the first thing on it with any weight. */
.ct-hero{ padding-block:clamp(76px,10vw,152px) clamp(44px,5.5vw,76px); }
.ct-hero h1{ margin-top:var(--s4); max-width:16ch; }
.ct-hero .lede{ margin-top:var(--s5); max-width:54ch; }

/* Two columns, one on a phone. The short fields pair up; the two that need
   room to think — the topic and the message — take the full width. */
.fm{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) clamp(20px,2.6vw,40px); scroll-margin-top:calc(var(--hdr) + var(--s6)); }
.fm__f{ display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
.fm__f--wide{ grid-column:1 / -1; }
/* Chybová hláška pri odoslaní. Stojí pod tlačidlom cez celú šírku, nie pri
   jednotlivom poli: hovorí o odoslaní ako celku, nie o tom, čo je zle
   vyplnené — to rieši validácia prehliadača. */
.fm__err{
  grid-column:1 / -1;
  margin:calc(var(--s3) * -1) 0 0;
  font-size:.9375rem; line-height:1.5; color:#8E2F2F;
}
.fm label{ font-size:.9375rem; font-weight:500; color:var(--ink); }
.fm__opt{ font-family:var(--mono); font-size:.6875rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-left:.45rem; }
/* ---------- formulárové polia: jedna geometria pre celý web ----------

   Kontakt, onboarding, hľadanie v Z praxe a odber v pätke mali do v2.54 štyri
   rôzne polia — iný rádius, iná výška, iné odsadenie, iný fokus. Boli to štyri
   kópie tej istej veci.

   Tu je raz. Zoznam selektorov je zámerne vypísaný namiesto spoločnej triedy:
   polia v onboardingu aj v hľadaní skladá skript, takže pridať triedu by
   znamenalo siahnuť do troch súborov kvôli vzhľadu. Takto vzhľad nevie o tom,
   kto pole vyrobil.

   Výšku drží `min-height`, nie zvislé odsadenie — rovnako ako pri tlačidlách
   a prepínačoch. Textové pole je výnimka: to rastie s obsahom, takže odsadenie
   potrebuje. */
/* `:not([type=checkbox])` je nutné: súhlas je tiež `input` vnútri `.fm`
   a `min-height` by mu prebilo jeho vlastných 18 px. Zaškrtávacie políčko
   nie je pole — má vlastný tvar a ten sa tu nemení. */
.fm input:not([type="checkbox"]):not([type="radio"]), .fm select, .fm textarea,
.onb-in,
.zp__search input,
.ftr__form input{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md);
  min-height:var(--pole-h); padding:0 var(--pole-pad);
  transition:border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.fm textarea, textarea.onb-in{
  border-radius:var(--r-md);
  padding:14px var(--pole-pad);
  line-height:1.55; resize:vertical;
}
.fm input:not([type="checkbox"])::placeholder, .fm textarea::placeholder,
.onb-in::placeholder,
.zp__search input::placeholder{ color:var(--pole-ph); }

/* Fokus je jeden na celom webe: silnejší obrys poľa a tichý prstenec okolo.
   `outline` zostáva priehľadný, nie zrušený — v režime vysokého kontrastu je
   to jediné, čo používateľ uvidí, lebo tieň sa tam nekreslí. */
.fm input:not([type="checkbox"]):hover, .fm select:hover, .fm textarea:hover,
.onb-in:hover,
.zp__search input:hover{ border-color:var(--ink-3); }
.fm input:not([type="checkbox"]):focus-visible, .fm select:focus-visible, .fm textarea:focus-visible,
.onb-in:focus, .onb-in:focus-visible,
.zp__search input:focus-visible{
  outline:2px solid transparent; outline-offset:2px;
  border-color:var(--brand); box-shadow:var(--pole-prsten);
}

/* Natívna šípka selectu sa kreslí na každej platforme inak, tak si kreslíme
   vlastnú. Odsadenie zľava je rovnaké ako pri vstupoch, sprava robí miesto
   šípke. */
.fm select{
  appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233F5648' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5L8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--pole-pad) center; background-size:16px 16px;
}
.fm textarea{ min-height:160px; }
.fm__act{ display:grid; gap:var(--s5); margin-top:var(--s2); }
.fm__go{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s5); }
.fm__note{ font-size:.875rem; color:var(--ink-2); max-width:34ch; }
/* the consent sits above the button, where it is read before the click and
   not after it */
/* .9375rem, nie .875rem: na kontakte je toto políčko <label> vnútri .fm a
   pravidlo `.fm label` ho tam aj tak prebíjalo na 15 px. Komponent teraz hovorí
   to, čo naozaj vykresľuje, takže vyzerá rovnako aj mimo formulára kontaktu. */
.fm__consent{
  display:flex; align-items:flex-start; gap:var(--s3);
  font-size:.9375rem; line-height:1.55; color:var(--ink-2); max-width:78ch; cursor:pointer;
}
.fm__consent input{
  appearance:none; flex:none; width:18px; height:18px; margin-top:2px; padding:0;
  display:grid; place-content:center;
  /* a step below the shared radius: on an 18px box the full six would read as
     a lozenge rather than a checkbox */
  border:1px solid var(--ink-3); border-radius:calc(var(--r-sm) - 2px); background:var(--paper); cursor:pointer;
  transition:background var(--fast), border-color var(--fast);
}
.fm__consent input::after{
  content:""; width:5px; height:9px; margin-top:-2px;
  border:solid var(--paper); border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform var(--t-hover) var(--e);
}
.fm__consent:hover input{ border-color:var(--ink-2); }
.fm__consent input:checked{ background:var(--brand); border-color:var(--brand); }
.fm__consent input:checked::after{ transform:rotate(45deg) scale(1); }
.fm__consent input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.fm__consent input:user-invalid{ border-color:var(--chyba); }
/* ---------- lišta so súhlasom (Cookiebot) ----------
   Lišta má vlastný vzhľad nastavený v ich administrácii: farby, jazyk a obsah
   sú tam. Pravidlá nižšie sú doplnky k tomu, nie náhrada — dajú sa nastaviť
   farby, nie rádius, písmo ani tieň, tie polia u nich jednoducho nie sú.
   Keď niektoré pravidlo prestane sedieť, lišta ďalej funguje, len vyzerá ako
   od Cookiebotu. Zámerne nesiahame na rozloženie.

   Značka Cookiebotu je preč. Nie je to obchádzanie ich podmienok: tieto
   selektory zverejňujú sami v článku „Remove Cookiebot CMP branding from
   Swift banner". Marek sa rozhodol nedávať do lišty ani naše logo, takže
   hlavička zostáva holá a lišta nevyzerá ako cudzí panel s dvoma značkami.

   Plávajúci krúžok v rohu je vypnutý v ich administrácii a skrytý aj tu.
   Dve poistky zámerne: ich nastavenie sa prejaví až po tom, čo im vyprší
   keš konfigurácie, a odvolanie súhlasu máme vyriešené tlačidlom v pätke. */
a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText{ display:none !important; }

/* Bez oboch značiek zostala z hlavičky lišty prázdna 31 px plocha s linkou
   pod sebou, teda pruh, ktorý nič nenesie. Preč s ňou; lišta začína rovno
   záložkami Súhlas / Detaily / O cookies. */
#CybotCookiebotDialogHeader{ display:none !important; }

#CookiebotWidget,
#CookiebotWidgetUnderlay{ display:none !important; }

/* Písmo. Najväčší rozdiel zo všetkých týchto pravidiel: bez neho má lišta
   systémový bezpätkový font a na stránke pôsobí ako cudzí panel. */
#CybotCookiebotDialog,
#CybotCookiebotDialog *{ font-family:var(--sans) !important; }

/* Plocha. Ich rádius je 8 px a tieň `0 32px 68px rgba(0,0,0,.3)`, čo je skoro
   čierny oblak pod panelom. Náš plávajúci tieň je o dve triedy jemnejší. */
#CybotCookiebotDialog{
  border-radius:var(--r-lg) !important;
  box-shadow:var(--tien-float) !important;
}

/* Tlačidlá. Ich 3,75 px je skoro hrana; web má všade 14 px. */
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton{
  border-radius:var(--r-md) !important;
  font-size:var(--ctl-fs) !important;
  font-weight:600 !important;
  padding:14px var(--ctl-pad) !important;
}

/* Nábeh. Cookiebot má `opacity .5s` bez krivky, teda lineárny polsekundový
   fade. Na webe, kde všetko nabieha krátko a s pohybom, to pôsobí ako cudzí
   panel, ktorý sa zjavil.

   Pohyb nerobíme cez `transform`: tým je okno vycentrované
   (`translate(-50%,-50%)`), a keby sme ho prepísali, odskočí mimo stred.
   Posúvame preto `margin-top`. Je to vlastnosť, ktorá spúšťa rozloženie, čo
   inde na webe zámerne nerobíme — tu je to jeden prvok mimo toku dokumentu po
   dobu 340 ms, takže niet čo prepočítavať okrem neho samého.

   Zdola nahor, rovnako ako nabieha obsah stránky. */
@keyframes cbPrichod{
  from{ opacity:0; margin-top:10px; }
  to{ opacity:1; margin-top:0; }
}
#CybotCookiebotDialog.CybotCookiebotDialogActive{
  animation:cbPrichod .34s var(--e-enter) both;
}
/* Rolovanie sa z lišty nesmie preliať na stránku za ňou.

   Pod 600 px (ich vlastný zlom) prepne Cookiebot lištu na takmer celú výšku
   obrazovky a text v nej dostane vlastné rolovacie okienko. Keď prst dôjde na
   jeho koniec, iOS pohyb nezastaví, ale ho odovzdá dokumentu za lištou: človek
   si číta, čo podpisuje, a stránka pod ním odíde do stredu. Po zavretí lišty
   tam ostane a Safari ho tam vráti aj pri ďalšom načítaní, lebo si polohu
   pamätá (`history.scrollRestoration` necháme na `auto`, viď site-a.js).

   Odmerané 6. 10. 2026 pri 375 px: lišta 796 px z 812, text 258 px viditeľných
   z 344, a všetky rolovacie plochy v nej mali `overscroll-behavior:auto`.
   Nad 600 px je lišta 488 px a text sa zmestí celý, takže sa to na počítači
   nikdy neprejavilo.

   `contain` zastaví reťazenie na hranici prvku. Platí aj na samotný dialóg:
   ten má `overflow-y:hidden`, čiže je to rolovacia plocha bez obsahu navyše,
   a bez tohto pravidla by ťah mimo textu putoval rovno na dokument. */
#CybotCookiebotDialog,
#CybotCookiebotDialog *{ overscroll-behavior:contain; }

/* Ich vlastný `transition: … opacity .5s` zostával v hre popri našej animácii,
   takže nepriehľadnosť riadili dve veci naraz. Kým animácia beží, vyhráva
   ona, ale v okamihu, keď skončí, sa hodnota vracia prechodu a mohlo to
   zacukať. Jedna vec nech riadi jednu vlastnosť. */
#CybotCookiebotDialog{ transition:none !important; }
@media (prefers-reduced-motion:reduce){
  #CybotCookiebotDialog.CybotCookiebotDialogActive{ animation:none; }
}

/* ---------- potvrdenie po odoslaní ----------
   Nastupuje na miesto celého formulára, takže to nemôže byť hláška v rámčeku:
   v tej chvíli je to jediná vec na stránke a je to posledný dojem, ktorý si
   človek z kontaktu odnesie. Dostáva preto displejový nadpis, ťah fixkou pod
   kľúčovým slovom a vzduch okolo — tú istú reč, akou hovoria sekcie webu.

   Žiadny rámik. Plocha sa od stránky odlišuje odtieňom a veľkým rádiusom,
   linka navrchu by z toho spravila oznam. */
.fm__done{
  scroll-margin-top:calc(var(--hdr) + var(--s6));
  padding-top:var(--s2);
}
.fm__done:focus:not(:focus-visible){ outline:none; }   /* announced, not pointed at */

/* Znak v mentolovom kruhu. Tá istá dvojica farieb ako pilulka „Otvorené"
   pri pobočkách, nech to na jednej stránke nehovorí dvoma jazykmi. */
.fm__done__znak{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--mint); color:var(--brand);
  margin-bottom:var(--s5);
}
.fm__done__znak svg{ width:26px; height:26px; }
/* Dĺžka ťahu je 21 jednotiek, zaokrúhlené nahor na 22, nech koniec nezostane
   odrezaný. Kreslí sa až po nástupe kruhu, aby to bol jeden pohyb a nie dva. */
.fm__done__znak path{ stroke-dasharray:22; stroke-dashoffset:22; animation:fmZnak .5s var(--e-enter, ease-out) .22s forwards; }
.fm__done__znak{ animation:fmKruh .42s var(--e, ease-out) both; }
@keyframes fmZnak{ to{ stroke-dashoffset:0; } }
@keyframes fmKruh{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .fm__done__znak{ animation:none; }
  .fm__done__znak path{ animation:none; stroke-dashoffset:0; }
}

.fm__done__t{
  font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.08; letter-spacing:-.035em;
  font-weight:600; color:var(--ink); text-wrap:balance;
  margin:0 0 var(--s3);
}
.fm__done .lede{ margin:0; }
@media (max-width:700px){ .fm{ grid-template-columns:minmax(0,1fr); } }

/* ---------- contact: the form and the people who answer it, side by side ----------
   The form was leaving the right third of the page empty and the four
   consultants were sitting in a band underneath, where nobody filling in the
   form could see them. Put next to it, they read as the alternative to the
   form rather than an afterthought — so the cards drop the portrait frame and
   keep only what a contact row needs. */
/* a shade off a true two-to-one: the panel's own padding eats into the
   column, and the cards inside need the width back */
.ct-grid{ display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:clamp(32px,3.4vw,56px); align-items:start; }
/* the same panel the hero opens with — pale ground, soft corner — so the column
   reads as its own place rather than as a rule with things after it */
.ct-side{
  background:var(--field); border-radius:var(--r-lg);
  /* the sides are the tighter pair: the column is narrow enough that every
     pixel of side padding comes straight out of the cards */
  padding:clamp(26px,2.8vw,40px) clamp(18px,1.9vw,28px);
  scroll-margin-top:calc(var(--hdr) + var(--s6));
}
.ct-side__head h2{
  margin-top:var(--s4); font-size:clamp(1.35rem,1.9vw,1.7rem); font-weight:600;
  letter-spacing:-.025em; line-height:1.2;
}
.ct-side__head p{ margin-top:var(--s4); font-size:.9375rem; color:var(--ink-2); }
/* ---------- the people who answer ----------
   A card for one senior contact, not a row in a staff table. The order is what
   a person needs in the order they need it — who, what they own, how to reach
   them — and each of the three is given room rather than a divider. The cards
   stretch to a common height and the action sits on the floor of every one of
   them, so a longer job title never leaves one card's e-mail hanging higher
   than its neighbour's.

   The contacts are not folded away behind a disclosure. This panel exists so a
   reader can pick a person and write to them; putting the address one click
   further from that is a step added to the only action the section has. The
   noise it would hide is better answered by the spacing below — and a reveal
   that only exists on the desktop would leave the same component behaving two
   different ways. */
.ppl{ margin-top:var(--s6); display:grid; gap:var(--s3); align-items:stretch; }
/* Tá istá biela karta ako experti na úvodnej — vizitky v bočnom paneli nesmú
   pôsobiť ako iná rodina komponentov. Obrys je preč, plochu drží rozdiel voči
   svetlozelenému panelu okolo. */
.pcard{ display:flex; flex-direction:column; }

.pcard__who{ display:flex; align-items:center; gap:var(--s4); }
/* stands in for the portrait at the size a portrait will take here */
/* Fotografia namiesto monogramu. Portréty sú podložené bielou a karta je tiež
   biela, takže bez obrysu by dlaždica nemala hranu a hlava by voľne plávala.
   Vlas je vnútorný tieň, nie border — 52 px je rozmer fotky, nie rámu, a border
   by ho pri border-box zúžil. */
.pcard__av{
  flex:none; width:52px; height:52px; border-radius:var(--r-sm); background:var(--field);
  box-shadow:inset 0 0 0 1px var(--line);
  object-fit:cover; object-position:50% 18%;
}
.pcard__id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pcard__n{ font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.pcard__r{ font-size:.875rem; color:var(--ink-2); line-height:1.35; }
/* the areas are a sentence, not a set of chips: they say what this person owns,
   and a row of pills would give them the weight of controls */
.pcard__x{
  margin-top:var(--s4); font-size:.875rem; line-height:1.5; color:var(--ink-3);
}

/* auto pushes the actions to the floor whatever the two lines above did */
.pcard__act{ margin-top:auto; padding-top:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.pcard__mail{
  display:inline-flex; align-items:center; gap:.45rem; width:max-content;
  font-size:.9375rem; font-weight:500; color:var(--brand); text-decoration:none;
}
.pcard__mail .ico{ transition:transform var(--t-hover) var(--e); }
@media (hover:hover) and (pointer:fine){
  .pcard__mail:hover{ text-decoration:underline; text-underline-offset:3px; }
  .pcard__mail:hover .ico{ transform:translateX(3px); }
}
/* Telefón pri expertoch nie je — z praktických dôvodov sa im dá len napísať
   (rozhodnutie z pripomienok, 14. 9. 2026). Pobočky svoje čísla majú. */

/* ---------- právny dokument s obsahom po ľavej ----------
   Rovnaká stavba ako index služieb (`.stk`): lepkavý zoznam vľavo, text
   vpravo, a ten istý bežiaci `▸`. Kto videl služby, vie tu hneď, čo sa deje.
   Vlastný vizuálny jazyk pre právnu stránku by bol tretí tvar toho istého
   nástroja. */
.doc{
  display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
/* stĺpec musí siahať cez celý riadok, inak sa zoznam nemá kde lepiť */
.doc__side{ align-self:stretch; }
.doc__nav{
  position:sticky; top:calc(var(--hdr) + clamp(24px,4vw,56px));
  /* Keby zoznam prerástol okno, roluje sám v sebe — nie stránka pod ním.
     `--hdr` plus dvakrát odstup je presne to, čo mu na obrazovke zostane. */
  max-height:calc(100vh - var(--hdr) - clamp(48px,8vw,112px));
  overflow-y:auto; overscroll-behavior:contain;
}
.doc__toc{
  margin:var(--s5) 0 0; padding:0; list-style:none;
  display:grid; gap:2px; position:relative;
}
.doc__toc a{
  display:block; position:relative; padding:7px 0 7px 30px;
  font-size:.9375rem; font-weight:500; line-height:1.35; letter-spacing:-.012em;
  color:var(--ink-3); text-decoration:none;
  transition:color var(--t-hover) var(--e-micro);
}
@media (hover:hover) and (pointer:fine){ .doc__toc a:hover{ color:var(--ink-2); } }
/* Živá položka: tmavšia a o stupeň ťažšia. Farbu aj váhu naraz, lebo samotná
   farba sa v zozname desiatich riadkov prehliadne. */
.doc__toc .is-on a{ color:var(--brand); font-weight:600; }
/* Čísla kapitol v stĺpci pevnej šírky, aby názvy začínali pod sebou aj pri
   dvojcifernom čísle. Úvod čísla nemá, ale stĺpec si drží. */
.doc__tn{ display:inline-block; min-width:1.75em; margin-right:.2em; color:var(--ink-3); }
.doc__toc .is-on .doc__tn{ color:var(--brand); }

/* ---------- telo dokumentu ---------- */
/* 44rem: pri 17px písme okolo 80 znakov na riadok. Širší stĺpec (52rem) dával
   pri dlhých právnych vetách riadky nad 110 znakov, cez ktoré oko preskakuje. */
.doc__body{ max-width:44rem; }
/* Dve triedy: `main section[id]` je (0,1,2) a prebíjalo by to. Osem pixlov
   pod hlavičkou je pre sekciu stránky dosť, pre nadpis v dokumente, na ktorý
   čitateľ práve doskočil, málo. */
.doc .doc__sec{ scroll-margin-top:calc(var(--hdr) + var(--s6)); }
.doc__sec + .doc__sec{ margin-top:clamp(40px,4.4vw,64px); padding-top:clamp(36px,4vw,56px); border-top:1px solid var(--line); }

/* Hlavička sekcie: plné zákonné znenie nadpisu, ako na tpa-group.sk. Krátke
   názvy sú len v obsahu vľavo. Nadpisy majú aj štyri riadky, preto menší
   stupeň než bežné h2 — inak by prevalcovali text, ktorý uvádzajú. */
.doc__hd{ display:grid; gap:var(--s2); }
/* číslo kapitoly je súčasť nadpisu, len v značkovej farbe — nesie poradie */
/* Zoznam cookies od Cookiebotu. Ich tabuľka má pevnú šírku a bez tohto
   tlačila celú stránku do šírky — odmerané: dokument 544 px v okne širokom
   409. Necháme ju rolovať vo vlastnom rámci, nech si zvyšok stránky drží
   svoje okraje. */
.doc__cookies{ max-width:100%; overflow-x:auto; }

.doc__sec h2 .doc__no{ color:var(--brand); }
.doc__sec h2{
  font-size:clamp(1.25rem,1.75vw,1.5rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.25; text-wrap:pretty;
}
.doc__sec > * + *{ margin-top:var(--s5); }
.doc__sec > .doc__hd + *{ margin-top:clamp(24px,2.6vw,32px); }

.doc__sec h3{
  margin-top:clamp(30px,3vw,40px);
  font-size:1.0625rem; font-weight:600; letter-spacing:-.018em; line-height:1.35; color:var(--ink);
}
.doc__sec h3 + p,.doc__sec h3 + ul{ margin-top:var(--s2); }
.doc__sec p{ line-height:1.7; color:var(--ink-2); }
.doc__sec p + ul, .doc__sec ul + p{ margin-top:var(--s4); }
.doc__sec a:not(.btn){
  color:var(--brand); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; overflow-wrap:anywhere;
}
/* Rovnaká šípka ako v článkoch — generická bodka by bola jediné miesto na webe,
   kde odrážka vyzerá inak. */
.doc__sec ul{ list-style:none; margin:0; padding:0; }
.doc__sec li{ position:relative; padding-left:1.6rem; line-height:1.7; color:var(--ink-2); }
.doc__sec li + li{ margin-top:var(--s3); }
.doc__sec li::before{
  content:"\25B8"; position:absolute; left:0; top:0;
  color:var(--brand); font-size:.9em; line-height:1.9;
}
.doc__sec strong{ color:var(--ink); font-weight:600; }
/* Úvodná veta o právnom rámci: podtitul dokumentu, nie ďalší odsek. */
.doc__sec .doc__uvod{
  padding-left:var(--s4); border-left:2px solid var(--mint);
  color:var(--ink); font-weight:500; line-height:1.6;
}

/* Prevádzkovatelia: tri firmy, každá ako vlastný riadok registra. */
.doc__sec .doc__firma{
  display:grid; gap:2px; padding:var(--s4) 0; border-top:1px solid var(--line);
  line-height:1.55;
}
.doc__sec .doc__firma + .doc__firma{ margin-top:0; }
.doc__firma strong{ font-size:1.0625rem; letter-spacing:-.015em; }
.doc__firma span{ font-size:.9375rem; color:var(--ink-3); }

/* Účely spracúvania. V pôvodnom texte je to tabuľka s piatimi stĺpcami, ktorá
   by sa do stĺpca vedľa obsahu nezmestila a na telefóne by sa nedala čítať
   vôbec. Rozpísaná do blokov nesie ten istý obsah: nadpis je účel, riadky
   pod ním sú zvyšné štyri stĺpce. */
.doc__ucely{ display:grid; }
.doc__ucel{ padding:clamp(22px,2.4vw,30px) 0; border-top:1px solid var(--line); }
.doc__sec .doc__ucel h3{ margin-top:0; }
.doc__sec .doc__pop{ margin-top:var(--s2); font-size:.9375rem; line-height:1.55; color:var(--ink-3); }
.doc__dl{ margin:var(--s5) 0 0; display:grid; gap:var(--s3); }
.doc__dl > div{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:var(--s5); }
.doc__dl dt{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.4; padding-top:.35em;
}
.doc__dl dd{ margin:0; font-size:.9688rem; line-height:1.6; color:var(--ink-2); }
/* Kontakt na zodpovednú osobu je jediné miesto, kam čitateľ z tejto stránky
   naozaj ide — dostane plochu, nech sa nehľadá. */
.doc__dl--kontakt{ background:var(--field); padding:var(--s5) var(--s6); border-radius:var(--r-md); gap:var(--s4); }
.doc__dl--kontakt > div{ grid-template-columns:minmax(0,6rem) minmax(0,1fr); align-items:baseline; }
.doc__dl--kontakt dd{ font-size:1.0625rem; font-weight:500; }
.doc__sec .doc__datum{ font-family:var(--mono); font-size:.8125rem; color:var(--ink-3); }
@media (max-width:640px){
  .doc__sec h2{ font-size:1.1875rem; line-height:1.3; }
  .doc__dl > div, .doc__dl--kontakt > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .doc__dl--kontakt{ padding:var(--s4) var(--s5); }
}

/* ---------- obsah na telefóne ----------
   Lepkavý stĺpec tu nie je kam dať, a vodorovný pás by pri jedenástich
   položkách bol rolovanie v rolovaní. `<details>` je natívne: funguje
   klávesnicou aj bez JavaScriptu a nepotrebuje žiadny stav navyše. */
.doc__m{ display:none; }
.doc__m summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 0; border-block:1px solid var(--line);
  font-size:1.0625rem; font-weight:600; letter-spacing:-.02em;
  transition:color var(--fast);
}
.doc__m summary::-webkit-details-marker{ display:none; }
.doc__m summary svg{ width:18px; height:18px; flex:none; color:var(--ink-3); transition:transform var(--t-card) var(--e); }
.doc__m[open] summary{ border-bottom-color:transparent; }
.doc__m[open] summary svg{ transform:rotate(135deg); color:var(--brand); }
.doc__m ol{ margin:0; padding:var(--s4) 0 var(--s5); list-style:none; display:grid; gap:2px; border-bottom:1px solid var(--line); }
/* Šípku pred položkou nahradili čísla kapitol — dve značky pred každým
   riadkom by boli o jednu navyše. */
.doc__m a{
  display:block; padding:9px 0;
  font-size:.9375rem; color:var(--ink-2); text-decoration:none; line-height:1.35;
}
@media (prefers-reduced-motion:reduce){ .doc__m summary svg{ transition:none; } }

@media (max-width:900px){
  .doc{ grid-template-columns:minmax(0,1fr); gap:0; }
  .doc__side{ display:none; }
  .doc__m{ display:block; margin-bottom:clamp(36px,5vw,56px); }
  .doc__body{ max-width:none; }
}

/* ---------- pobočky ----------
   Fyzické zázemie, nie výzva. Stojí to na stránke za formulárom aj za
   expertmi a podľa toho sa to aj správa: karty sú svetlé, bez tieňa a bez
   plného tlačidla, aby popri hlavnom CTA nerobili druhý hlavný smer.

   Stavba je tá istá ako pri dôkazových kartičkách (`.stat`, `.tst__stat`):
   drobnosti hore, `margin-top:auto` medzi nimi a kotvou dole. Tam je to číslo,
   tu názov mesta. Preto sedia mestá v rade na jednej linke bez ohľadu na to,
   či má adresa dva riadky alebo tri — a preto k tomu netreba pevnú výšku.

   Bez máp a bez veľkých ikon — vložená mapa by pridala cudzí skript aj tretiu
   stranu na stránku, ktorá ich dnes nemá ani jednu, a adresa sa aj tak číta
   rýchlejšie než pin na dlaždici. */
/* Nadpis sekcie ako každý iný — `.d2` v značke. Vlastná menšia veľkosť tu
   kedysi bola a robila z hlavného nadpisu stránky podnadpis; zostal len
   odstup a šírka, do ktorej sa má zalomiť. */
/* Pobočky sa lepia na predošlú sekciu. Formulár a stĺpec s ľuďmi nie sú
   rovnako vysoké — stĺpec s ľuďmi je o vyše 350 px dlhší — takže pod
   formulárom ostáva prázdno a k nemu sa pripočítalo ešte plné odsadenie
   dvoch sekcií. Nad nadpisom tak bolo cez pol obrazovky bieleho. Predošlá
   sekcia má odvtedy `.sec--tichy-koniec` a táto menšie odsadenie zhora;
   spolu je to o zhruba 150 px menej. Nerovnosť stĺpcov tým nezmizne, tá je
   daná obsahom. */
.offs{ padding-top:clamp(28px,3vw,48px); }
.offs__head h2{ margin-top:var(--s4); max-width:24ch; }
.offs__head .lede{ margin-top:var(--s5); }
.offs__grid{
  margin-top:clamp(32px,4vw,56px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5); align-items:stretch;
}
/* Tá istá karta ako `.stat` v číslach — plochu, rádius aj odsadenie nesie
   `.card`.

   Výška je 410 px, nie 330 ako pri `.stat`. Tie majú hore dva riadky popisu,
   tieto trojriadkovú adresu, telefón aj odkaz na mapu — pri 330 px `auto`
   nemalo čo rozdeliť a mesto sedelo tesne pod odkazom. Vzduch medzi údajmi
   hore a názvom dole je to, čo z toho robí kartičku a nie odsek. */
.off{ min-height:410px; display:flex; flex-direction:column; }

/* `address` je kurzívou od prehliadača, nie od nás */
.off__a{
  font-style:normal;
  display:flex; flex-direction:column; gap:2px;
  font-size:.9375rem; line-height:1.5; color:var(--ink-2);
}
.off__bd{ color:var(--ink); font-weight:500; }
.off__act{ margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
/* Stav pobočky. Počíta sa z bratislavského času, nie z hodín návštevníka,
   takže klient z Viedne či z Prahy vidí, či je otvorená TPA, nie či je
   otvorené uňho.

   Stojí v tej istej skupine ako hodiny a odkaz na mapu, na jej začiatku:
   najprv odpoveď na „dovolám sa teraz", potom rozvrh, potom cesta. Vo
   vlastnom riadku, nie vedľa hodín — pri troch kartách vedľa seba má karta
   244 px vnútra a hodiny s pilulkou potrebujú 283 px.

   Bez skriptu sa neukáže vôbec. Radšej nič než pilulka, ktorá tvrdí niečo,
   čo nemá ako vedieť. */
.off__stav{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink-2);
  font-size:.75rem; font-weight:500; line-height:1.3;
}
.off__bod{
  position:relative; flex:none;
  width:7px; height:7px; border-radius:50%; background:var(--ink-3);
}
.off__stav[data-otvorene]{ background:var(--mint); color:var(--ink); }
.off__stav[data-otvorene] .off__bod{ background:var(--brand); }

/* Tep. Nie preto, že by sa niečo dialo, ale aby bolo vidieť, že údaj je
   živý a nie napísaný do stránky. Preto len keď je otvorené; blikať pri
   „Zatvorené" by nedávalo zmysel.

   Krúžok je pseudoprvok a hýbe sa výhradne cez `transform` a `opacity`,
   takže beží na kompozítore a nevynúti prekreslenie. Cyklus 2,6 s a pauza
   na konci: rýchlejší tep by z decentného znaku spravil upozornenie. */
.off__stav[data-otvorene] .off__bod::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--brand);
  animation:offTep 2.6s var(--e) infinite;
}
@keyframes offTep{
  0%{ transform:scale(1); opacity:.5; }
  70%{ transform:scale(2.8); opacity:0; }
  100%{ transform:scale(2.8); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .off__stav[data-otvorene] .off__bod::after{ animation:none; }
}

/* Kedy znova otvárame. Ukáže sa len v čase, keď je zatvorené — cez pracovný
   deň by to bola veta navyše, ktorá nič nehovorí. */
.off__pris{ font-size:.8125rem; line-height:1.5; color:var(--ink-3); }

/* Otváracie hodiny. Nie je to odkaz, preto ani prechod farby a ani stav
   pri prejdení myšou. `tabular-nums` drží časy pod sebou na rovnakej šírke. */
.off__cas{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.8125rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.off__cas .ico{ color:var(--ink-3); }
.off__map{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9375rem; font-weight:500; color:var(--brand); text-decoration:none;
}
.off__map .ico{ transition:transform var(--t-hover) var(--e); }
@media (hover:hover) and (pointer:fine){
  .off__map:hover{ text-decoration:underline; text-underline-offset:3px; }
  .off__map:hover .ico{ transform:translateX(3px); }
}
/* Kotva karty. `auto` ju zrazí na dno, takže mestá v rade sedia na jednej
   účiare aj keď je jedna adresa o riadok kratšia. Škála je zámerne nižšia než
   `.stat__v` (60–64 px) — mesto je názov, nie dôkazové číslo, a nemá si
   s číslami na stránke konkurovať.

   Rovnaká veľkosť pre všetky tri: „Banská Bystrica" sa radšej zalomí na dva
   riadky, než by sa zmenšila. Zmenšené by bolo jediné, čo v rade vypadne
   z rytmu, a účiara posledného riadku ostáva spoločná tak či tak. */
.off__city{
  margin-top:auto; padding-top:var(--s6);
  font-size:clamp(2.125rem,3.2vw,3.25rem); font-weight:600;
  letter-spacing:-.045em; line-height:1.05; text-wrap:balance;
}
@media (max-width:900px){ .offs__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .offs__grid{ grid-template-columns:1fr; }
  /* Výška zostáva aj na telefóne. Zrazená na obsah by mesto dosadlo tesne pod
     odkaz na mapu a z kartičky by bol zoznam. */
  .off__city{ font-size:clamp(2.125rem,9vw,2.625rem); }
}

/* Na telefóne sa odkaz mení na tlačidlo na celú šírku karty — je to jediná
   akcia, ktorú karta ponúka, a prst ju má trafiť bez mierenia. */
@media (max-width:620px){
  .pcard__mail{
    width:100%; justify-content:center;
    padding:13px var(--s4); border-radius:var(--r-md);
    background:var(--brand); color:#fff;
    font-size:.9375rem; font-weight:500; line-height:1.2;
  }
  .pcard__mail .ico{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .pcard__mail .ico{ transition:none; } .pcard__mail:hover .ico{ transform:none; } }
/* one column is too narrow for the pair below this width; the panel simply
   takes the full width and the cards pair up inside it */
@media (max-width:1080px){
  .ct-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(40px,5vw,64px); }
  .ct-side__head{ max-width:44rem; }
  /* two, not auto-fit: three across leaves the fourth card hanging alone */
  .ppl{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
}
@media (max-width:620px){
  .ppl{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- article listing ---------- */
/* An index, not a feed: the filters hold the left rail so the eye starts on
   the cards, and the rail stays put while the grid scrolls past it. */
/* ---------- Z praxe: the index ----------
   A knowledge hub rather than an archive: the taxonomy holds still on the left
   while the results change on the right, and every card is one link with the
   whole of its area clickable. Everything below the layout rules is shared by
   the featured item and the ordinary card, because they are the same object at
   two sizes. */
.zp{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:clamp(32px,4.4vw,80px); align-items:start; }
.zp__side{ position:sticky; top:calc(var(--hdr) + clamp(24px,4vw,56px)); }
.zp__side h1{ margin-bottom:var(--s3); }
/* Hlavný nadpis stránky, hoci stojí v bočnom stĺpci: spodná hranica je preto
   rovnaká ako pri každom inom H1 na webe (2,9rem), sklon aj strop sú `.d2`-ové,
   lebo nad ~1100 px sa stĺpec zúži na 244 px. Nad 1105 px sa nemení nič. */
.zp__t{ font-size:clamp(2.9rem,4.2vw,3.4rem); }
.zp__lede{ font-size:.9375rem; color:var(--ink-2); margin-bottom:var(--s6); }

/* filters */
/* the wrapper only exists to hold the pointer: the list itself is re-rendered
   on every filter change, so the marker cannot live inside it */
.zp__catwrap{ position:relative; margin:0 0 var(--s6); }
.zp__cats{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.zp__cats button{
  appearance:none; background:none; border:0; width:100%; cursor:pointer; text-align:left;
  position:relative; padding:8px 0 8px 30px; font:inherit; font-size:.9375rem;
  color:var(--ink-3); display:flex; align-items:baseline; gap:.5rem;
  transition:color var(--t-ui) var(--e);
  scroll-margin-top:calc(var(--hdr) + var(--s6));
}
.zp__cats button:hover{ color:var(--ink-2); }
.zp__cats button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }
.zp__cats li[aria-selected="true"] button{ color:var(--ink); font-weight:500; }
.zp-n{ margin-left:auto; font-family:var(--mono); font-size:.75rem; color:var(--ink-3); font-weight:400; }
.zp__cats li[aria-selected="true"] .zp-n{ color:var(--brand); }

/* Hľadanie. Geometriu, obrys aj fokus nesie spoločný blok polí — tu zostáva
   len ikona a miesto, ktoré si pýta. */
.zp__search{ position:relative; }
.zp__search input{ padding-right:calc(var(--pole-pad) + 26px); }
.zp__search input::-webkit-search-cancel-button{ appearance:none; }
.zp__search svg{
  position:absolute; right:var(--pole-pad); top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-3); pointer-events:none;
}
.zp__count{ margin-top:var(--s4); font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--ink-3); }

/* results */
.zp__main{ min-width:0; }
.zp__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.2vw,48px) clamp(20px,2.4vw,36px); }
/* Tri v rade tam, kde mriežka nemá vedľa seba bočný stĺpec — `/v-mediach`.
   V Z praxe by sa tri nezmestili, preto je to variant, nie nová hodnota. */
.zp__more{ margin-top:clamp(40px,4.6vw,64px); display:flex; justify-content:center; }
.zp__more:empty{ display:none; }
.zp__empty{ padding:var(--s7) 0; max-width:36rem; }
.zp__empty b{ display:block; font-size:1.05rem; font-weight:600; }
.zp__empty p{ margin-top:var(--s3); color:var(--ink-2); }

/* The thumbnail stands in for photography that has not arrived. On the pale
   ground the mark can be the brand green itself rather than the mint it needs
   on a dark panel — 7.8:1, so it carries at any size — and the hairline gives
   the tile an edge, which it needs because the ground is only a shade off the
   paper it sits on. */
.zp-card__sh,.zp-feat__sh{
  position:relative; display:grid; place-items:center; align-content:center; gap:var(--s3);
  background:var(--field-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.zp-card__sh svg,.zp-feat__sh svg{ fill:var(--brand); transition:transform var(--t-card) var(--e); }
.zp-card__sh b,.zp-feat__sh b{
  font-family:var(--mono); font-size:.6875rem; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
/* Fotka článku. Leží na značke TPA a prekryje ju; keď súbor chýba, `onerror`
   v `article-card.js` obrázok odstráni a zostane pôvodná značka — kartička
   teda nie je nikdy prázdna. Rozmer drží `aspect-ratio` obalu, takže sa pri
   načítaní nič neposunie. */
.zp-shot{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t-card) var(--e);
}
.zp-card__sh{ aspect-ratio:16/10; }
.zp-card__sh svg{ width:min(21%,92px); height:auto; }
.zp-feat__sh svg{ width:min(30%,160px); height:auto; }

/* card */
.zp-card,.zp-feat{
  position:relative; display:flex; text-decoration:none; color:inherit;
  border-radius:var(--r-lg);
}
.zp-card{ flex-direction:column; }
.zp-card__b,.zp-feat__b{ display:flex; flex-direction:column; min-width:0; }
.zp-card__b{ padding-top:var(--s4); }
.zp-card__m,.zp-feat__m{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.zp-dot{ width:3px; height:3px; border-radius:var(--r-pill); background:currentColor; opacity:.55; }
.zp-card__t{
  margin-top:var(--s3); font-size:clamp(1.1rem,1.4vw,1.3rem); font-weight:600;
  letter-spacing:-.028em; line-height:1.3; text-wrap:balance;
  transition:color var(--t-hover) var(--e-micro);
}
.zp-card__x{ margin-top:var(--s3); font-size:.9375rem; line-height:1.55; color:var(--ink-2); }
/* the arrow is the card's only decoration and it only moves on hover */
.zp-card__go{
  margin-top:var(--s4); display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand);
}
.zp-card__go .ico{ transition:transform var(--t-ui) var(--e); }


/* featured */
.zp-feat{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(24px,2.8vw,44px); align-items:center;
  padding-bottom:clamp(36px,4vw,56px); margin-bottom:clamp(36px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.zp-feat__sh{ aspect-ratio:4/3; }
/* Titulok ide hneď za údajmi, rovnako ako v bežnej kartičke — tam je to
   `--s3`. Tu o stupeň viac, lebo titulok je dvakrát taký veľký. */
.zp-feat__t{
  margin-top:var(--s4); font-size:clamp(1.5rem,2.4vw,2.15rem); font-weight:600;
  letter-spacing:-.032em; line-height:1.15; text-wrap:balance;
  transition:color var(--t-hover) var(--e-micro);
}
.zp-feat__x{ margin-top:var(--s4); font-size:1.0625rem; line-height:1.55; color:var(--ink-2); max-width:46ch; }

/* the tag sits on the picture, where it labels the thing rather than the text.
   Every card carries one: case studies keep the solid brand fill, topics get a
   tinted pill. Two weights, one family — the stronger mark is the content type,
   the quieter one is the subject.

   Variant = two custom properties, never a new rule. Fills are opaque, not
   alpha: the pill lies on a photograph and a translucent one would take the
   picture's colour. The hairline is an inset shadow so the box keeps its size. */
.zp-tag{
  position:absolute; top:var(--s4); left:var(--s4); z-index:2;
  font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tag-fg,#fff); background:var(--tag-bg,var(--brand));
  box-shadow:inset 0 0 0 1px var(--tag-line,transparent);
  border-radius:var(--r-sm); padding:5px 9px; line-height:1;
}
/* Odtiene sú tlmené zámerne — vedľa seba sa v mriežke rozlíšia, ale žiadny
   neprekričí fotku ani nadpis. Kontrast textu k výplni 5,5 : 1 až 6,7 : 1. */
.zp-tag--uctovnictvo  { --tag-fg:#0A5C3A; --tag-bg:#DCEFE3; --tag-line:#B6DCC6; }
.zp-tag--dane         { --tag-fg:var(--demo); --tag-bg:var(--demo-bg); --tag-line:var(--demo-line); }
.zp-tag--digitalizacia{ --tag-fg:#2C5578; --tag-bg:#E4EDF6; --tag-line:#C3D6E8; }
.zp-tag--reporting    { --tag-fg:#8A4A36; --tag-bg:#F7EAE5; --tag-line:#E8CCC2; }

@media (hover:hover) and (pointer:fine){
  .zp-card:hover .zp-card__t,.zp-feat:hover .zp-feat__t{ color:var(--brand); }
  .zp-card:hover .zp-card__sh svg,.zp-feat:hover .zp-feat__sh svg{ transform:scale(1.02); }
  .zp-card:hover .zp-shot,.zp-feat:hover .zp-shot{ transform:scale(1.03); }
  .zp-card:hover .zp-card__go .ico,.zp-feat:hover .zp-card__go .ico{ transform:translateX(4px); }
}
.zp-card:focus-visible,.zp-feat:focus-visible{ outline:2px solid var(--brand); outline-offset:6px; }

/* ---------- výmena zoznamu pri zmene filtra ----------
   Nástup kariet je **plošný** (`.rv`, viď `site-b.js`) — do v2.80 mal zoznam
   vlastný, ktorý sa spúšťal pri vykreslení, takže karty pod okrajom obrazovky
   dobehli bez diváka. Zostáva tu len odchod: zoznam sa pred výmenou stlmí,
   aby staré kartičky nezmizli skokom. */
.zp__feat,.zp__grid{ transition:opacity .26s var(--e-micro); }
.zp-out{ opacity:0; }

@media (max-width:1000px){
  .zp{ grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,48px); }
  .zp__side{ position:static; }
  .zp__side h1{ margin-bottom:var(--s3); }
  .zp__lede{ max-width:52ch; }
  /* the list becomes a row of chips: it is a filter bar now, not a sidebar */
  .zp__catwrap{ margin-bottom:var(--s4); }
  .zp__cats{ grid-auto-flow:column; grid-auto-columns:max-content; gap:var(--s2); overflow-x:auto; padding-bottom:var(--s2); }
  /* Vodorovné čipy sú výber kategórie — rovnaký tvar ako segmenty inde,
     nie štvrtý rádius na webe. */
  .zp__cats button{ padding:8px 16px; border:0; background:var(--field); border-radius:var(--r-pill); white-space:nowrap; }
  /* chips carry their own selected state, and the lane the pointer runs in is gone */
  .zp__catwrap .navptr{ display:none; }
  .zp__cats li[aria-selected="true"] button{ background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); color:var(--brand); }
  .zp__search{ max-width:26rem; }
  .zp-feat{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:700px){
  .zp__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .zp-card__sh svg,.zp-feat__sh svg,.zp-shot,.zp-card__go .ico,.zp__feat,.zp__grid{ transition:none; }
  html.anim .zp-card,html.anim .zp-feat{ transition:none; }
}

/* ---------- article ---------- */
/* Odkaz „Späť na články“ nad nadpisom je preč — cesta späť je v navigácii,
   v strip-e „Ďalšie z praxe“ pod článkom aj v pätke. Jeho spodný odstup
   (32–56 px) je zložený do horného paddingu, aby sa hlavička článku
   nepohla vyššie, než bola navrhnutá. */
/* Spodné odsadenie článku je nula zámerne: odstup k tomu, čo nasleduje,
   nesie nasledujúca sekcia. Keď ho niesli obe, sčítali sa — medzi tlačidlom
   pod článkom a podpisom odborníka tak stálo cez 200 px prázdna. */
.art{ padding-block:clamp(72px,9vw,128px) 0; }
.art__head{ text-align:center; max-width:min(50rem,100%); margin-inline:auto; }
.art__head .lab{ justify-content:center; }
/* 11,5vw dá 44 px na najužšom telefóne a 52 px na najširšom; nad ~500 px sa
   opiera o strop, takže od tablety vyššie je nadpis rovnako veľký ako predtým
   na desktope. Jedna škála pre všetky šírky — dva klampy so zlomom uprostred
   by pri 700 px spravili skok z 57 na 32 px. */
.art__t{ margin-top:var(--s4); font-size:clamp(2.9rem,11.5vw,3.6rem); text-wrap:balance; }
.art__meta{ margin-top:var(--s5); font-family:var(--mono); font-size:.8125rem; color:var(--ink-3); }
.art__body{ max-width:38rem; margin:clamp(40px,5vw,68px) auto 0; }
.art__body > * + *{ margin-top:var(--s5); }
.art__lead{ font-size:1.1875rem; line-height:1.6; color:var(--ink); }
.art__body p{ line-height:1.72; color:var(--ink-2); }
.art__body h2{
  margin-top:clamp(40px,4.6vw,64px); font-size:clamp(1.25rem,1.9vw,1.5rem);
  font-weight:600; letter-spacing:-.028em; color:var(--ink);
}
.art__body h2 + p{ margin-top:var(--s4); }
/* Podsekcia. Je o stupeň menšia než H2 a stojí bližšie k textu pod sebou —
   pod H2 začína téma, pod H3 sa len člení. */
.art__body h3{
  margin-top:clamp(28px,3vw,40px); font-size:1.0625rem;
  font-weight:600; letter-spacing:-.02em; color:var(--ink);
}
.art__body h3 + p,.art__body h3 + ul,.art__body h3 + ol{ margin-top:var(--s4); }

/* Zoznamy. Odrážka je ▸ v brandovej zelenej — tá istá značka, akou web
   označuje živú položku v navigácii — a číslovaný zoznam si nesie číslo
   v mono písme, aby sa dvojciferné položky nezvlnili. Značka stojí vo
   vlastnom stĺpci, nie v texte, takže druhý riadok položky lícuje s prvým. */
.art__body ul,.art__body ol{ list-style:none; margin:0; padding:0; }
.art__body li{
  position:relative; padding-left:1.6rem; line-height:1.72; color:var(--ink-2);
}
.art__body li + li{ margin-top:var(--s3); }
.art__body ul > li::before{
  content:"\25B8"; position:absolute; left:.15rem; top:-.06em;
  font-size:1.05em; line-height:1.72; color:var(--brand);
}
.art__body ol{ counter-reset:art-ol; }
.art__body ol > li{ counter-increment:art-ol; padding-left:2.1rem; }
.art__body ol > li::before{
  content:counter(art-ol) "."; position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.8125rem; line-height:1.95;
  font-weight:500; color:var(--brand); font-variant-numeric:tabular-nums;
}
/* Vnorený zoznam patrí k položke nad sebou, takže je bližšie než susedné
   položky a nedostáva vlastný odstup zhora. */
.art__body li > ul{ margin-top:var(--s3); }
.art__body li > ul > li{ padding-left:1.35rem; }
.art__body li > ul > li::before{ font-size:.95em; color:var(--ink-3); }
.art__body li > ul > li + li{ margin-top:6px; }
.art__body strong{ font-weight:600; color:var(--ink); }
/* `:not(.btn)` je nutné, nie kozmetika: bez neho toto pravidlo (0,1,1) prebije
   `color:#fff` na `.btn` (0,1,0) a záverečné CTA v článku má zelený text na
   zelenom pozadí. Týka sa to aj prípadových štúdií — ich CTA stojí v tom
   istom `.art__body`. */
.art__body a:not(.btn){ color:var(--brand); text-underline-offset:.2em; }

/* Predel medzi dvoma časťami dlhšieho článku. Nie čiara cez celý stĺpec —
   tri body v strede, aby to bola pauza a nie rez. */
.art__body hr{
  border:0; margin:clamp(40px,4.6vw,64px) auto; height:auto;
  color:var(--line-dk); text-align:center;
}
.art__body hr::before{
  content:"• • •"; font-size:.75rem; letter-spacing:.5em; color:var(--ink-3);
}

/* Poznámka na okraj. Zatiaľ ju žiadny z prevzatých článkov nepoužíva —
   šablóna ju vie vykresliť, aby ju redakcia mala k dispozícii. */
.art__note{
  margin-top:var(--s5); padding:var(--s5) clamp(20px,2.4vw,28px);
  background:var(--field); border-radius:var(--r-md);
  font-size:.9375rem; line-height:1.65; color:var(--ink-2);
}
/* `margin-inline:0` ruší predvolené odsadenie `blockquote` v prehliadači
   (40 px z oboch strán). Bez neho citát aj jeho linky stáli inde než odseky,
   čísla a tlačidlo pod ním. */
.art__q{
  margin:clamp(36px,4vw,56px) 0 0; padding:var(--s6) 0; border-block:1px solid var(--line);
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.45; letter-spacing:-.022em;
  font-weight:500; color:var(--ink);
}
.art__q cite{ display:block; margin-top:var(--s4); font-style:normal; font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--ink-3); }
/* Dvojica čísel pod článkom. Stĺpce sú na šírku obsahu, nie na polovicu
   stĺpca — inak stojí jednoznakové číslo v prázdnej polovici a deliaca
   čiara sa ocitne ďaleko od oboch údajov. Vzduch okolo čiary je z oboch
   strán rovnaký, takže tie dve čísla čítame ako jednu dvojicu. */
.art__kpi{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:0; margin-top:clamp(36px,4vw,56px); }
.art__kpi div{ padding:var(--s5) 0; }
.art__kpi div:first-child{ padding-right:clamp(20px,3vw,40px); }
.art__kpi div + div{ border-left:1px solid var(--line); padding-left:clamp(20px,3vw,40px); }
.art__kpi b{ display:block; font-size:clamp(1.8rem,2.6vw,2.4rem); font-weight:600; letter-spacing:-.045em; line-height:1; }
.art__kpi span{ display:block; margin-top:var(--s3); font-size:.875rem; line-height:1.45; color:var(--ink-2); }
/* Tlačidlo patrí k článku, nie k ďalšej sekcii — stojí teda o odsek ďalej,
   nie o kapitolu. */
.art__cta{ margin-top:var(--s6); }

/* ---------- plávajúca výzva v článku (`.acta`) ----------
   Schránku nesie `.fbar` — polohu, bezpečnú zónu, šírku aj vysunutie má
   spoločné s plávajúcim prepínačom Služieb. Tu zostáva len to, čo je vlastné
   výzve: tmavá plocha, veta vľavo a mätové tlačidlo vpravo.

   Text sa smie zalomiť (`min-width:0`), tlačidlo nie — radšej dva riadky vety
   než stlačené alebo zlomené CTA. */
.acta{
  display:flex; align-items:center; gap:clamp(24px,2.4vw,32px);
  min-height:76px; padding:13px 16px 13px clamp(24px,2.4vw,28px);
  background:var(--dark); color:#fff; border-radius:var(--r-lg);
  box-shadow:var(--tien-float);
}
/* Počas odchodu sa už nedá kliknúť; z poradia tabulátora ju berie `inert`,
   ktorý nasadzuje skript. */
.acta[data-on="false"]{ pointer-events:none; }
.acta__t{
  flex:1 1 auto; min-width:0; margin-right:auto;
  font-size:clamp(.9375rem,1.05vw,1.0625rem); font-weight:500; line-height:1.35;
  letter-spacing:-.015em; text-wrap:balance;
}
.acta__btn{ flex:none; }
/* Na tmavom podklade je značková zelená v obryse neviditeľná — fokus preto
   svieti mätovou, tou istou, ktorou je tlačidlo. */
.acta .btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
/* Pod 700 px zostane v lište **len tlačidlo**. Veta sa nekráti ani nezalamuje
   — na telefóne je lišta akcia, nie odkaz, a dva riadky textu nad tlačidlom
   z nej robili kartu cez štvrtinu obrazovky.

   Hranica je 820, nie 640, a je odmeraná, nie odhadnutá: veta má na jeden
   riadok 432 px, tlačidlo 235, medzera 24 a odsadenie 44 — lišta teda
   potrebuje 735 px a okno 783. Pod tým sa veta lámala na dva riadky a to je
   práve ten rozpačitý medzistav, ktorému sa treba vyhnúť. Buď celá veta na
   riadku, alebo žiadna. 820 nechá nad nameranou hranicou rezervu na doloženie
   písma. */
@media (max-width:820px){
  .acta{ flex-wrap:nowrap; gap:0; min-height:0; padding:8px; }
  .acta__t{ display:none; }
  /* Tlačidlo vyplní lištu. Strop na 26 rem tu bol jednu verziu a vyzeral
     zle: mätová pilulka uprostred tmavého pásu s desiatkami pixlov prázdna
     po oboch stranách pôsobila ako chyba, nie ako zámer. Keď je v lište len
     tlačidlo, je lišta tým tlačidlom. */
  .acta__btn{ flex:1 1 auto; width:100%; }
}
/* Nízke okno na šírku: na vetu tam miesto nie je a tlačidlo je dôležitejšie.
   Tu sa tlačidlo neroztahuje — v šírke 800 px by bolo cez celú obrazovku. */
@media (max-height:480px) and (orientation:landscape){
  .acta{ flex-wrap:nowrap; min-height:0; padding:9px 12px; }
  .acta__t{ display:none; }
  .acta__btn{ flex:0 0 auto; width:auto; margin-left:auto; }
}
.art__more{ border-top:1px solid var(--line); }
.art__more h2{ font-size:clamp(1.35rem,2.2vw,1.75rem); font-weight:600; letter-spacing:-.03em; margin-bottom:var(--s6); }

/* ---------- článok na telefóne ----------
   Vycentrovaná hlavička je na širokej stránke elegantná, na 390 px ale hlavička
   stojí inak než text pod ňou a článok sa rozpadne na dva kusy. Pod 700 px je
   preto všetko na jednom ľavom okraji — tam sa už meranie textu (38rem) aj tak
   nezmestí do okna, takže hlavička aj telo lícujú s hlavičkou stránky samy od
   seba. Nad 700 px zostáva všetko po starom.

   Veľkosti sú väčšie, nie iné: nadpis je stále `.d1`, len má vlastnú škálu,
   a odstupy sú tie isté tokeny o stupeň vyššie. */
@media (max-width:700px){
  /* menej priestoru medzi navigáciou a začiatkom článku; dole nula, odstup
     k ďalšej sekcii nesie ona sama */
  .art{ padding-block:var(--s7) 0; }

  .art__head{ text-align:left; max-width:none; }
  .art__head .lab{ justify-content:flex-start; }
  /* pri 44px nadpise s riadkovaním 0,97 je 16 px pod ním prilepených */
  .art__meta{ margin-top:var(--s5); }

  /* Telo článku si veľkosti nemení — text má byť rovnaký ako všade inde na
     webe. Mení sa len to, že sa už nemá do čoho centrovať. */
  .art__body{ max-width:none; margin-top:clamp(28px,6vw,40px); }
  /* prehliadač dáva blockquote 40 px z každej strany a nikto to neprebil — na
     telefóne to z citátu spraví úzky stĺpec vedľa širokého textu */
  .art__q{ margin-inline:0; }
}
@media (max-width:560px){
  .art__kpi{ grid-template-columns:minmax(0,1fr); justify-content:stretch; }
  .art__kpi div:first-child{ padding-right:0; }
  .art__kpi div + div{ border-left:0; border-top:1px solid var(--line); padding-left:0; }
}

/* ---------- prelnutie medzi dokumentmi (View Transitions) ----------
   Prehliadač vie dva **rôzne dokumenty** prelnúť sám: odfotí odchádzajúcu
   stránku, podrží ju nad prichádzajúcou a prelne ich. Nie je to náhrada za
   náš kryt (`.wipe`) — ten je gesto, toto je len to, že prepnutie nezabliká.

   Beží presne tam, kde kryt nebeží: vnútri Z praxe a na telefóne. O tom
   rozhoduje `site-a.js` — keď sa spúšťa kryt, prelnutie zruší (`pageswap`).
   Zrušenie na odchádzajúcej strane stačí, prelnutie potrebuje obe.

   Prehliadač, ktorý to nepozná (dnes Firefox), pravidlo ignoruje a stránka
   sa prepne ako doteraz. Pri obmedzenom pohybe sa nezapne vôbec. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
}
/* Kratšie než predvolených 250 ms a tou istou krivkou ako drobné prechody
   na webe: prelnutie má byť nebadateľné, nie efekt. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.18s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}

/* ---------- page transition and preloader ---------- */
/* Only between routes — there is no loading screen on a first visit. The cover
   closes over the outgoing page, the next document opens covered and lifts.
   Columns rather than one panel, so the movement has a direction and a rhythm. */
/* the last slice is a pixel wider than its column so the overlap has somewhere
   to go; without this the spill would show as two pixels of page overflow */
.wipe{ position:fixed; inset:0; z-index:9000; pointer-events:none; overflow:hidden; }
/* Laid out by hand rather than as grid tracks: five 1fr columns land on
   fractional pixels and the rounding leaves hairline seams the page shows
   through. Each slice is a percentage wide plus one pixel, so neighbours
   overlap and there is nothing to see between them. */
.wipe__c{
  position:absolute; top:-1px; bottom:-1px; width:calc(20% + 1px);
  background:var(--dark); transform:scaleY(0); transform-origin:50% 100%;
  transition:transform var(--wipe-dur) var(--e-enter);
}
.wipe__c:nth-child(1){ left:0; }
.wipe__c:nth-child(2){ left:20%; }
.wipe__c:nth-child(3){ left:40%; }
.wipe__c:nth-child(4){ left:60%; }
/* Posledný stĺpec siaha po okraj cez `right`, nie cez šírku s pixelom navyše.
   `.wipe` je fixed s `inset:0`, čiže sa naťahuje na rozloženie stránky — a keď
   z neho stĺpec trčí o pixel, rozloženie sa o ten pixel rozšíri a stĺpec trčí
   znova. Na telefóne tak stránka natrvalo držala vodorovný posun. Prekryv so
   štvrtým stĺpcom zostáva: ten siaha po 80 % + 1 px. */
.wipe__c:nth-child(5){ left:80%; right:0; width:auto; }
/* the hairline sits on the leading edge of each slice but the first, where the
   overlap cannot cover it */
.wipe__c:not(:first-child){ box-shadow:inset 1px 0 0 rgba(255,255,255,.08); }
/* covering: the columns stand full height */
html.is-wipe .wipe__c{ transform:scaleY(1); }
/* the arriving cover is a state, not a move: it has to be standing in the
   first painted frame, never drawn onto a page the reader can already see */
html.is-arrive .wipe__c,
html.is-arrive .wipe__m,
html.is-arrive .wipe__mk,
html.is-arrive .wipe__nm{ transition:none !important; }
/* leaving: they grow from the top instead, so the two directions differ */
html.is-wipe-out .wipe__c{ transform-origin:50% 0; }
.wipe__c:nth-child(1){ transition-delay:0ms; }
.wipe__c:nth-child(2){ transition-delay:calc(1 * var(--wipe-krok)); }
.wipe__c:nth-child(3){ transition-delay:calc(2 * var(--wipe-krok)); }
.wipe__c:nth-child(4){ transition-delay:calc(3 * var(--wipe-krok)); }
.wipe__c:nth-child(5){ transition-delay:calc(4 * var(--wipe-krok)); }
/* both halves run the same way, left to right: the cover closes in that
   direction and the next page opens in it, so the whole move reads as one
   sweep rather than two that meet in the middle. */
/* The cover catches the pointer itself instead of locking the scroll. Any
   overflow change here would take the scrollbar away and move the layout
   sideways for the length of the transition. */
html.is-wipe .wipe{ pointer-events:auto; }
/* The mark rides the cover, then hands over to the name of the page being
   opened. Both sit in the same grid cell, so the swap is one thing replacing
   another in place rather than two things moving past each other. */
.wipe__m{
  position:fixed; inset:0; display:grid; place-items:center; z-index:9001;
  pointer-events:none; opacity:0; transition:opacity .28s var(--e-enter);
}
.wipe__m > *{ grid-area:1 / 1; }
.wipe__mk svg{ width:clamp(57px,6vw,86px); height:auto; fill:var(--mint); }
.wipe__mk{ transition:opacity .25s var(--e), transform .25s var(--e); }
.wipe__nm{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:clamp(1.15rem,2vw,1.55rem); font-weight:600; letter-spacing:-.03em;
  color:var(--mint); white-space:nowrap;
  opacity:0; transform:translateY(20px);
  transition:opacity .25s var(--e), transform .25s var(--e);
}
/* the same marker the section labels and the services index use */
.wipe__nm::before{ content:"\25B8"; font-size:.78em; line-height:1; }
.wipe__nm:empty::before{ content:none; }
html.is-wipe .wipe__m{ opacity:1; transition-delay:.11s; }
/* the handover: the mark leaves upward, the name arrives from below */
.wipe__m[data-swap="true"] .wipe__mk{ opacity:0; transform:translateY(-20px); }
.wipe__m[data-swap="true"] .wipe__nm{ opacity:1; transform:none; }
/* on arrival the swap is already done and must not replay */
.wipe__m[data-instant="true"] .wipe__mk,
.wipe__m[data-instant="true"] .wipe__nm{ transition:none; }
@media (prefers-reduced-motion:reduce){ .wipe__mk,.wipe__nm{ transition:none; } }
@media (prefers-reduced-motion:reduce){
  .wipe__c,.wipe__m{ transition:none; }
}

/* ---------- karusel expertov ----------
   Päť kariet v jednom rade znamenalo pri 1440 px kartu širokú 240 px a bio,
   ktoré sa do nej tesne vtesnalo. Karusel dá karte skoro o polovicu viac
   a piata karta, ktorá vykúka spoza pravého okraja, povie, že tím pokračuje.

   Šírka karty je zlomok šírky okna, nie pevné číslo: `--vis` je koľko kariet
   má byť naraz vidieť vrátane tej načatej. Odpočítava sa medzera medzi nimi,
   inak by posledná vytlačila rad o `gap` von. */
/* Nad karuselom je už len úvod sekcie — ovládanie sa presunulo pod fotky.
   Odstup je preto bežný odstup nadpisového bloku od obsahu, nie priestor
   vyhradený pre šípky. */
.ppl__top{ margin-bottom:clamp(24px,3.4vw,48px); }
/* `margin-left:auto` drží šípky vpravo aj vtedy, keď im dlhý nadpis nenechá
   miesto v riadku a zalomia sa pod neho — `space-between` by ich na vlastnom
   riadku odsunulo doľava. */
.ppl__nav{ display:flex; align-items:center; gap:var(--s2); flex:none; margin-left:auto; }
/* Ovládanie pod radom: vpravo pri okraji obsahu, dotyková plocha 44 × 44 px.
   Ikona si drží veľkosť, rastie len plocha okolo nej. */
.ppl__nav--dole{ margin-top:clamp(20px,2vw,24px); justify-content:flex-end; }
.ppl__nav--dole .carbtn{ width:44px; height:44px; }
/* `clip`, nie `hidden`: schovaný rám sa dá odrolovať programovo a
   `scrollIntoView` na kartu, kotva alebo obnovená poloha po návrate ho posunú
   bez toho, aby o tom karusel vedel — potom sa posun z `transform` a posun
   z `scrollLeft` sčítajú. Klipnutý rám sa odrolovať nedá. */
.ppl__vp{
  overflow:clip; cursor:grab; touch-action:pan-y;
  /* Šírka karty je daná prahmi, nie podielom z okna. Podiel dával na tablete
     neúmerne veľké karty a na širokom monitore zbytočne malé; toto drží
     portrét v rozumnej veľkosti všade a vždy nechá vykuknúť ďalšiu kartu. */
  --pw:315px;
  /* Rám ide po okraje okna, rad zostáva na mriežke: záporný okraj vytiahne
     rám z odsadenia `.wrap` a rovnako veľké vnútorné odsadenie vráti prvú
     kartu na miesto. Karta na kraji tak pokračuje až za okraj stránky namiesto
     toho, aby ju uťala neviditeľná maska. */
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
}
.ppl__vp[data-drag="true"]{ cursor:grabbing; user-select:none; }
.ppl__vp[data-drag="true"] .ppl__track{ transition:none; }
.ppl__vp[data-drag="true"] a{ pointer-events:none; }
/* Safari kreslí pri ťahaní obrázka ducha aj vtedy, keď sa `dragstart` zruší. */
.ppl__vp img{ -webkit-user-drag:none; user-select:none; }
.ppl__track{ display:flex; gap:var(--s4); transition:transform var(--t-car) var(--e); will-change:transform; }
@media (prefers-reduced-motion:reduce){ .ppl__track{ transition:none; } }
.ppl__track > .person{ flex:0 0 var(--pw); }
/* **Karta sa už nezmenšuje s oknom.** Do v3.21 klesala na 290 px pod 1440
   a na 265 pod 1024, čo bolo menej než na telefóne (300). A práve tam je to
   najhoršie: okno bia je rám 4:4,75 z tej istej šírky, takže s užšou kartou
   sa zároveň skracuje okno **a** predlžuje text, ktorý sa do užších riadkov
   viac zalamuje. Pri 265 px pretekali všetky štyri plné biá — najkratšie
   o 80 px, Petrino o 143 — a rolovať sa v biu nemá.

   315 px je najmenšia šírka, pri ktorej sa zmestí aj najdlhší dodaný text.
   Odmerané pri 768, 1000, 1100 aj 1440: nula pretečenia vo všetkých
   kartách. Na tablete tým vidno 2,4 karty namiesto troch stlačených, čo je
   pri karuseli v poriadku — ďalšia karta má aj tak vykúkať.

   Pod 480 px zostáva karta na šírku okna: tam je jedna v rade a rám 4:4,75
   by z nej spravil takmer celú výšku telefónu. */
@media (max-width:479px){ .ppl__vp{ --pw:calc(100vw - 52px); } }
/* Na dotyku sa listuje prstom; šípky by tam boli druhý ovládač na to isté. */
@media (max-width:620px){ .ppl__nav{ display:none; } }

/* Biela karta na svetlozelenej sekcii, bez obrysu — rovnaká geometria ako
   všetky ostatné karty. Fotka má vlastný svetlý podklad a informácie pod ňou
   sú súčasťou tej istej plochy, nie prilepeným pásom. */
.person{ display:flex; flex-direction:column; }
/* Zdrojové fotky sú štvorcové (1000×1000), takže rám ich tak či tak oreže.
   4:4,75 je o päť percent nižšie než pôvodné 4:5 — sekcia tým prestane pôsobiť
   ako zoznam ľudí a začne dýchať. Rovnaký rám a rovnaký výrez pre všetkých. */
/* Podklad rámu je biely ako zvyšok karty, nie svetlozelený: portréty sú
   výrezy na svetlom pozadí a pri zelenom podklade mala karta dva tóny,
   z ktorých horný splýval so sekciou. Takto je karta jedna plocha. */
.person__av{ position:relative; aspect-ratio:4/4.75; width:100%; background:var(--paper); overflow:hidden; }
.person__av img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  transition:transform var(--t-card) var(--e);
}
/* V jednom stĺpci je karta široká cez celú obrazovku a rám 4:4,75 by z nej
   spravil takmer celú výšku telefónu — päť takých kariet je zbytočne dlhé
   rolovanie. Štvorec ich stlačí a bio má v šírke 350 px miesta až-až. */
/* Na telefóne je rám o desatinu vyšší než štvorec (do v2.81 bol presne
   štvorcový). Štvorec pôsobil ako miniatúra v zozname, nie ako portrét:
   karta je na telefóne široká a plochá fotka jej brala vážnosť. Výrez sa
   nemení — `object-position` drží hlavu na mieste, pribudol priestor pod ňou. */
@media (max-width:560px){ .person__av{ aspect-ratio:1/1.1; } }
/* Spúšťačom je celá karta, nielen ikona. Kurzor je jediné, čo to dopredu
   prezradí — vizuálny hover efekt sme tu zámerne nechceli, tak aspoň toto. */
.person{ cursor:pointer; }
.person__b{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.person__n{ font-weight:600; font-size:1rem; }
.person__r{ font-size:.875rem; color:var(--ink-2); flex:1; }

/* ---------- bio pod portrétom ----------
   Prekrytie, nie výmena: karta si drží miesto aj výšku, portrét zostáva pod
   ním a mierne presvitá, takže je stále cítiť, koho sa text týka. Žiadne
   preklápanie ani roleta — jeden fade a desať pixelov pohybu. */
.person__bio{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  /* Zdola je vyhradený pás na tlačidlo v rohu. Odsadenie sprava by uberalo
     šírku každému riadku, hoci tlačidlu môže prekážať len ten posledný. */
  padding:var(--s5) var(--s5) 66px;
  /* Box má pevnú výšku — je to prekrytie fotky — a text doň príde od expertov,
     takže jeho dĺžku nemáme pod kontrolou. Na 320 px zostáva pod nadpisom len
     asi 160 px a dlhší text vyliezal cez tlačidlo von z karty. `auto` ho radšej
     nechá rolovať vnútri; pri primerane dlhom bie sa neprejaví nijako. */
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(12,42,27,.94);
  color:var(--ink-dk); text-align:left;
  opacity:0; visibility:hidden; transform:translateY(10px);
  /* Zavretie je kratšie než otvorenie: odchod nemá čo ukazovať. */
  transition:opacity .28s var(--e), transform .28s var(--e), visibility .28s;
}
.person__bio p{ margin:0; font-size:.8125rem; line-height:1.5; }
/* Karta so skutočným biom má pohodlnejšiu sadzbu než zástupný text: o stupeň
   väčšie písmo, voľnejší riadok a väčší odstup medzi odsekmi. Zástupný text je
   jeden krátky odsek a nič z toho nepotrebuje; skutočné bio má dva a číta sa
   dlhšie. Trieda, nie prepísané spoločné pravidlo — ostatné karty sa nemenia
   a dostanú ju, keď svoj text dodajú. */
/* Okno má pevnú výšku (je to prekrytie fotky), ale dĺžku bia píšu experti,
   takže ju nemáme pod kontrolou. Pravidlo je preto nastavené na **najdlhší
   text, ktorý zatiaľ prišiel** (Petrin, 470 znakov), nie na ten najkratší:
   rolovať sa nemá v žiadnej kartičke a na žiadnej šírke.

   Miesto sa berie z troch vecí naraz, aby ani jedna nemusela ísť do extrému:
   riadkovanie 1,5 namiesto 1,58, odstup odsekov o dva pixle menší a užší pás
   pod tlačidlom. Písmo zostáva 14 px — to je hranica, pod ktorú sa pri biu
   nejde. */
.person__bio--plny{
  gap:12px; padding:20px 20px 48px;
}
.person__bio--plny p{ font-size:.875rem; line-height:1.5; }
/* Na telefóne je okno karty o 19 px nižšie, tak sa uberie aj z odsadenia. */
@media (max-width:759px){
  .person__bio--plny{ gap:10px; padding:18px 18px 44px; }
}

/* Nápoveda, že karta má čo povedať. Malá, na okraji, v tichej farbe — a keď
   je bio otvorené, otočí sa o 135°, čo je na tomto webe zavieracie gesto
   (rovnako ako v Častých otázkach), takže sa nemusí učiť druhýkrát. */
.person__more{
  /* Pravý dolný roh fotky, 18 px od oboch okrajov. Text bia tečie zhora, takže
     dole mu tlačidlo stojí v ceste ako poslednému — a odkedy je karta v karuseli
     širšia, bio tam nedosiahne. */
  position:absolute; z-index:2; right:18px; bottom:18px;
  width:32px; height:32px; padding:0; border-radius:var(--r-pill);
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); color:var(--brand);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.person__more svg{ width:16px; height:16px; transition:transform var(--t-card) var(--e); }
.person__more:hover{ background:var(--field); border-color:var(--line-dk); }
.person__more:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Kruh má 32 px, prst potrebuje 44. Pseudo-prvok cieľ zväčší bez toho, aby sa
   čohokoľvek dotkol v rozložení — rovnaký trik ako pri bodkách karuselu. */
@media (hover:none){ .person__more::before{ content:""; position:absolute; inset:-6px; } }

/* Otvorené je jediný stav: `data-open` nesie ťuknutie aj fokus z klávesnice
   a nastavuje ho skript spolu s `aria-expanded`, takže obe hovoria to isté.
   `:focus-within` tu zámerne nie je — tlačidlo si po ťuknutí prstom fokus
   podrží a bio by sa druhým ťuknutím už nedalo zavrieť. */
.person[data-open="true"] .person__bio{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .36s var(--e), transform .36s var(--e), visibility .36s;
}
.person[data-open="true"] .person__av img{ transform:scale(1.015); }
.person[data-open="true"] .person__more{
  background:transparent; border-color:rgba(230,240,233,.4); color:var(--mint);
}
.person[data-open="true"] .person__more svg{ transform:rotate(135deg); }

@media (prefers-reduced-motion:reduce){
  .person__bio{ transform:none; transition:opacity .2s, visibility .2s; }
  .person[data-open="true"] .person__bio{ transform:none; transition:opacity .2s, visibility .2s; }
  .person__av img,
  .person[data-open="true"] .person__av img{ transform:none; transition:none; }
  .person__more svg{ transition:none; }
}

/* ---------- deadlines ---------- */

/* ---------- faq ---------- */
/* ---------- časté otázky: kontext vľavo, odpovede vpravo ----------
   Úvod stál predtým na stred nad zoznamom a sekcia pôsobila ako samostatná
   stránka otázok. V dvoch stĺpcoch je vľavo kontext a cesta von, vpravo
   odpovede — a úvod začína na tej istej linke ako kategórie vpravo, nie
   v strede výšky harmoniky. */
.faq2{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr);
  gap:clamp(48px,7vw,112px); align-items:start;
}
.faq2__side .head{ margin-bottom:0; }
/* Jedna kompaktná karta namiesto predelu, nadpisu, odseku a tlačidla voľne
   pod sebou — vľavo bolo priveľa vrstiev. Plochu nesie `.card .card--tint`,
   linka nad ňou je preč; kartu drží farba. Zostáva druhoradá: otázky vpravo
   sú hlavný obsah sekcie. */
.faq2__ask{ margin-top:clamp(28px,2.4vw,32px); }
.faq2__ask h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.015em; }

/* ---------- kontaktný riadok ----------
   Nie box s tlačidlom vnútri, ale jeden odkaz na šírku stĺpca: značka, dva
   riadky textu a šípka. Biely podklad a tenká linka stačia — tieň by z toho
   urobil kartu, ktorá súperí s otázkami vedľa.

   Zámerne bez mena, fotografie a bez sľubu času odpovede: nemáme konkrétnu
   kontaktnú osobu a vymyslieť si ju by bolo tvrdenie, nie dizajn. */
.kont{
  margin-top:clamp(12px,1.2vw,16px); max-width:420px;
  display:flex; align-items:center; gap:14px;
  min-height:80px; padding:12px clamp(16px,1.4vw,20px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  text-decoration:none; color:inherit;
  transition:border-color var(--t-ui) var(--e-micro);
}
.kont__zn{
  flex:none; display:grid; place-items:center; width:46px; height:46px;
  border-radius:50%; background:var(--field-2);
}
.kont__zn svg{ display:block; width:26px; height:auto; fill:var(--brand); }
.kont__txt{ display:grid; gap:2px; min-width:0; }
.kont__h{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--brand); }
.kont__s{ font-size:.8125rem; color:var(--ink-3); }
.kont__sip{ margin-left:auto; color:var(--brand); transition:transform var(--t-ui) var(--e-micro); }
@media (hover:hover) and (pointer:fine){
  .kont:hover{ border-color:var(--brand); }
  .kont:hover .kont__sip{ transform:translateX(3px); }
}
.kont:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .kont,.kont__sip{ transition:none; }
  .kont:hover .kont__sip{ transform:none; }
}
/* Na telefóne riadok vypĺňa stĺpec — 420 px by tam bolo obmedzenie bez dôvodu. */
@media (max-width:1000px){ .kont{ max-width:none; } }
/* Pod 1000 px by boli oba stĺpce úzke skôr, než by prestali byť čitateľné —
   radšej pod seba. Poradie v kóde je aj poradím na telefóne. */
@media (max-width:1000px){
  .faq2{ grid-template-columns:minmax(0,1fr); gap:clamp(36px,5vw,56px); }
}

.faq{
  max-width:56rem; margin-top:clamp(24px,2.4vw,32px);
  overflow-x:clip; overflow-clip-margin:26px;
  /* Zoznam dlaždíc, nie riadkov s čiarami — rozostup je nižšie pri `.faq__i`. */
  display:flex; flex-direction:column; gap:9px;
}
/* ---------- kategórie otázok ----------
   Do v2.49 to boli textové záložky s podčiarknutím. Vedľa vyplneného prepínača
   v Službách to boli dva ovládače toho istého druhu s dvoma rôznymi tvarmi,
   takže otázky používajú ten istý `.seg` — líši sa len šírka. Obsah ani
   správanie harmoniky sa nemenili.

   `.faqcat` zostáva ako trieda, lebo na ňu ukazuje skript; nesie už len
   umiestnenie. */
.faqcat{ justify-content:flex-start; }

/* questions enter from the side the visitor moved toward */
.faq__i:nth-child(1){ --i:0 } .faq__i:nth-child(2){ --i:1 } .faq__i:nth-child(3){ --i:2 }
.faq__i:nth-child(4){ --i:3 } .faq__i:nth-child(5){ --i:4 } .faq__i:nth-child(6){ --i:5 }
@media (prefers-reduced-motion:no-preference){
  .faq[data-enter] .faq__i{ animation:faqIn var(--t-card) var(--e) both; animation-delay:calc(var(--i, 0) * 55ms); }
  @keyframes faqIn{
    /* the travel has to fit inside the page gutter, or the items waiting for
       their delay park outside the viewport and widen the document */
    from{ opacity:0; transform:translateX(calc(var(--dir, 1) * clamp(10px, 2vw, 22px))); }
    to{ opacity:1; transform:none; }
  }
}
/* Na telefóne sa posúva len rad kategórií, nie stránka; ďalšia kategória je
   kúsok vidieť, takže je jasné, že rad pokračuje. Ustupuje odsadenie, nie
   veľkosť písma — tri slovné spojenia sa na 375 px nezmestia ani pri
   najmenšom rozumnom reze, takže posuv je správna odpoveď, nie drobec. */
@media (max-width:620px){ .faqcat .seg__b{ padding:0 14px; } }
@media (max-width:400px){ .faqcat .seg__b{ padding:0 11px; } }
/* ---------- otázka ako mäkká dlaždica ----------
   Do v2.81 to bol zoznam oddelený vodorovnými čiarami. Vedľa kariet, ktoré
   sekcia okolo používa, to bol iný jazyk: čiara je tabuľka, plocha je karta.
   Teraz je každá otázka samostatná dlaždica — ale **tichá**, nie ďalší
   marketingový blok: plocha `--field` (nie biela), rádius `--r-md` (nie
   `--r-lg`, ktorý patrí kartám) a medzera 9 px, čo je menej než rozostup
   medzi kartami kdekoľvek inde.

   Otvorená dlaždica nie je iný komponent — je to tá istá plocha, ktorá
   narástla. Odpoveď preto nemá vlastný rám ani pozadie a odsadenie zdieľa
   s otázkou, takže sa pri otvorení nič nepohne do strany. */
.faq__i{
  background:var(--field); border-radius:var(--r-md);
  transition:background var(--t-hover) var(--e-micro);
}
.faq__q{
  width:100%; appearance:none; background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit; padding:18px var(--s5); line-height:1.35;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); align-items:center;
  font-size:1.15rem; font-weight:600; letter-spacing:-.028em; transition:color var(--fast);
  border-radius:inherit;
}
/* Len plocha a farba nadpisu. Žiadne nadvihnutie, žiadny posun, žiadny nájazd
   — otázok je v rade šesť a čokoľvek, čo sa hýbe, by sa hýbalo šesťkrát. */
@media (hover:hover) and (pointer:fine){
  .faq__i:hover{ background:var(--field-2); }
  .faq__q:hover{ color:var(--brand); }
}
.faq__ic{ display:grid; place-items:center; color:var(--ink-3); flex:none; transition:color var(--fast); }
.faq__q:hover .faq__ic{ color:var(--brand); }
.faq__ic svg{ width:18px; height:18px; transition:transform var(--t-card) var(--e), color var(--fast); }
.faq__i.is-open .faq__ic{ color:var(--brand); }
.faq__i.is-open .faq__ic svg{ transform:rotate(135deg); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-card) var(--e); }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  color:var(--ink-2); max-width:62ch; line-height:1.6;
  padding:0 var(--s5) 18px;
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--t-card) var(--e) .04s, transform var(--t-card) var(--e) .04s;
}
.faq__i.is-open .faq__a{ grid-template-rows:1fr; }
.faq__i.is-open .faq__a p{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .faq__a,.faq__a p{ transition:none; }
}
/* Na telefóne ide dlaždica cez celú šírku obsahu a odsadenie ustúpi — text
   má v úzkom stĺpci prednosť pred okrajom. Cieľ pre palec zostáva nad 48 px. */
@media (max-width:620px){
  .faq__q{ padding:16px 18px; gap:var(--s4); }
  .faq__a p{ padding:0 18px 16px; }
}

/* ---------- closing band ---------- */
/* Výzva a pätka sú jedna tmavá plocha, nie dve. Nie je medzi nimi žiadny
   predel ani zmena farby — záver stránky je jedna kapitola, ktorá sa začína
   výzvou a končí drobným textom. Oddeľuje ich len tenká linka nad navigáciou
   v pätke a vzduch okolo nej. */
.close{ position:relative; overflow:hidden; text-align:center;
        padding-block:clamp(80px,9vw,140px) clamp(72px,8vw,120px); }
/* 992 px, nie 23ch: pri displejovej veľkosti nadpisu je miera v znakoch
   neprehľadná a nadpis sa rozbiehal cez celú šírku stránky. */
.close h2{ max-width:min(62rem,100%); margin-inline:auto; }
/* Zvýraznenie na tmavom podklade: pás je mätový ako všade, ale písmo nad ním
   musí stmavnúť — biele na `--mint` by bolo nečitateľné. */
.close mark.hl{ color:var(--ink); }
.close .btn{ margin-top:var(--s7); }
/* ---------- the closing line arrives a word at a time ----------
   Each word is its own inline-block so it can be moved, and the spaces between
   them stay ordinary text — the line still breaks and balances exactly where
   it would have. The hidden state is gated on html.anim, so without the script
   the sentence is simply there. */
.close h2 .w{
  display:inline-block;
  transition:opacity .5s var(--e), transform .5s var(--e);
  transition-delay:calc(var(--i, 0) * 50ms);
}
html.anim .close h2[data-words] .w{ opacity:0; transform:translateY(20px); }
html.anim .close h2[data-words].is-said .w{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .close h2 .w{ transition:none; }
  html.anim .close h2[data-words] .w{ opacity:1; transform:none; }
}

/* the related-reading strip at the foot of a case study — three across, and it
   is the only grid on the page that has to survive inside the article column */
.zp-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,36px); }

/* ---------- odborník za témou (koniec článku) ----------
   Podpis, nie widget. Vychádza z toho istého systému ako kartičky na stránke
   Kontakt (`.pcard`): svetlé pole, vlasový rám, žiadny tieň. Odlišuje sa len
   tým, čo od nej žiada miesto — tu stojí sama a na šírku, takže ide do troch
   stĺpcov `foto | kto | ako sa ozvať` namiesto stĺpca pod sebou.

   Odstupy hlavičky sú tie, ktoré má každá sekcia webu: `--s4` medzi eyebrow
   a nadpisom, `--s7` pred obsahom. Zámerne, aj keď zadanie hovorilo 18–24 px —
   šestnásť je to, čo tu má `TPA v číslach`, `Reporting` aj `Experti TPA`,
   a konzistencia bola celý zmysel úpravy.

   Zámerne bez tieňa, bez plnej farby a bez druhého tlačidla: čitateľ práve
   dočítal text a toto má byť ponuka, nie ďalšia výzva. Hlavné CTA článku
   („Nezáväzne sa poradiť") stojí o kus vyššie a toto ho nemá prekričať. */

/* Vlastná miera, užšia než stránka a širšia než text. Telo článku má 38rem;
   na celú šírku stránky sa karta rozťahovala tak, že obsah sedel v ľavej
   polovici a kontakt osamote pri pravom okraji. 56rem drží tri stĺpce
   pohromade a zároveň sa karta číta ako podpis pod textom, nie ako nový pás
   stránky — strip „Ďalšie z praxe" pod ňou zostáva na plnú šírku, takže
   sekcie idú zámerne od úzkej k širokej. */
/* Šablóna má sekciu prázdnu a vypĺňa ju skript. Bez článkového odborníka —
   a bez JavaScriptu — tu teda nesmie zostať pás vzduchu po ničom. */
.xprt:empty{ display:none; }
/* Odstup k tlačidlu pod článkom nesie sekcia sama (článok má dole nulu):
   ~88 px na desktope, ~70 na tablete, 56 na telefóne. Dole zostáva miera
   `.sec`, lebo pod ňou nasleduje ďalšia sekcia. */
.xprt{ padding-block:clamp(56px, calc(42px + 3.6vw), 88px) clamp(64px,7.5vw,var(--s9)); }
.xprt__head,.xprt__card{ max-width:56rem; margin-inline:auto; }
.xprt__head h2{
  font-size:clamp(1.5rem,2.2vw,2rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.15; max-width:22ch;
}

/* ---------- vizitka odborníka ----------
   Portrét vľavo, obsah vpravo. Kontakt stojí v hornom riadku oproti menu —
   je to údaj o tom istom človeku, nie ďalší krok po prečítaní vety. Žiadny
   stĺpec s kontaktom ani zvislý vlas. Výšku určuje obsah; karta nemá pevnú
   mieru ani prázdnu plochu pod textom. */
.xprt__card{
  margin-top:clamp(24px,2.4vw,32px);
  background:var(--field); border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"av kto mail" "av txt txt";
  column-gap:clamp(24px,2.6vw,32px); row-gap:var(--s4);
  align-items:start;
}
/* Fotografia leží na značke a prekryje ju; keď súbor chýba, `onerror` obrázok
   odstráni a zostane značka — dlaždica teda nikdy nie je prázdna, ani kým
   portréty nepribudnú. Rovnaká logika ako v kartičke článku. */
.xprt__av{
  grid-area:av; align-self:start;
  position:relative; display:grid; place-items:center; overflow:hidden;
  width:clamp(112px,9vw,128px); aspect-ratio:1; border-radius:var(--r-md);
  background:var(--field-2); box-shadow:inset 0 0 0 1px var(--line);
}
.xprt__av svg{ width:44%; height:auto; fill:var(--brand); opacity:.5; }
/* Fotka patrí navrch. `z-index` je tu zámerne — bez neho leží obrázok a značka
   v tej istej vrstve a Safari vykreslí značku cez portrét ako vodoznak.
   Tú istú poistku má aj fotka v kartičke článku (`.zp-shot`). */
.xprt__av img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
/* A keď fotka je, značka sa nekreslí vôbec — nemá čo presvitať. Keď sa súbor
   nenačíta, `onerror` obrázok odstráni, `:has` prestane platiť a značka sa
   vráti. */
.xprt__av:has(img) svg{ display:none; }
/* Meno je typografický bod vizitky; pozícia hneď pod ním, o stupeň tichšia. */
.xprt__kto{ grid-area:kto; align-self:baseline; min-width:0; }
.xprt__n{ font-size:clamp(1.375rem,1.7vw,1.5rem); font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.xprt__r{ margin-top:var(--s1); font-size:.9375rem; color:var(--ink-2); line-height:1.35; }
.xprt__txt{ grid-area:txt; }
.xprt__b{ font-size:.9375rem; line-height:1.65; color:var(--ink-2); max-width:52ch; }
/* Účiara namiesto horného okraja: odkaz tak sedí na prvom riadku mena aj keď
   sa veľkosti menia s oknom. Dlhé meno sa zalomí do svojho stĺpca — kontakt
   má vlastný a nemajú sa o čo deliť. */
.xprt__mail{
  grid-area:mail; align-self:baseline; justify-self:end;
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  font-size:1rem; font-weight:600; color:var(--brand); text-decoration:none;
}
.xprt__mail .ico{ transition:transform var(--t-hover) var(--e); }
.xprt__mail:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }
@media (hover:hover) and (pointer:fine){
  .xprt__mail:hover{ text-decoration:underline; text-underline-offset:3px; }
  .xprt__mail:hover .ico{ transform:translateX(3px); }
}

/* Pod ~760 px sa kontakt vedľa mena už nezmestí bez toho, aby sa meno lámalo
   na tri riadky — vtedy ide pod popis a zarovná sa vľavo. */
@media (max-width:760px){
  .xprt__card{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"av kto" "av txt" "mail mail";
  }
  .xprt__mail{ justify-self:start; align-self:start; min-height:44px; align-items:center; }
}
/* Na telefóne portrét s menom v riadku, popis pod tým cez celú šírku.
   Dva stĺpce by tu boli dva úzke prúžky. */
@media (max-width:620px){
  .xprt__card{
    grid-template-areas:"av kto" "txt txt" "mail mail";
    padding:clamp(20px,5vw,24px);
    column-gap:var(--s4); row-gap:var(--s5);
    align-items:center;
  }
  .xprt__av{ align-self:center; width:clamp(72px,20vw,80px); }
  .xprt__kto{ align-self:center; }
  .xprt__txt{ align-self:start; }
  .xprt__n{ font-size:1.25rem; }
}

@media (max-width:820px){ .zp-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .zp-strip{ grid-template-columns:minmax(0,1fr); } }

/* ============================================================
   ONBOARDING (/onboarding)
   Nič tu nie je nová vizuálna reč: rovnaké tokeny, rovnaké rádiusy, rovnaký
   easing. Formulár má pôsobiť ako ďalšia sekcia webu, nie ako vložený nástroj.
   ============================================================ */

/* Intro drží čitateľnú mieru, mriežka pod ním má šírku ostatných sekcií webu. */
/* Šírku drží obsah, nie sekcia: .onb-hero je zároveň .wrap a jej margin-inline
   auto by užšiu sekciu vycentroval — intro by potom nesedelo na ľavú hranu
   mriežky pod ním. */
.onb-hero{ padding-block:clamp(56px,7vw,96px) 0; }
.onb-hero > *{ max-width:min(52rem,100%); }
/* rovnaký rytmus eyebrow → nadpis → lede ako na kontakte a v ostatných hlavičkách */
.onb-hero h1{ margin-top:var(--s4); max-width:24ch; }
.onb-hero .lede{ margin-top:var(--s5); max-width:58ch; }
.onb-sec{ padding-block:clamp(40px,4.6vw,64px) clamp(64px,7vw,112px); }
.onb[data-onb-boot]{ opacity:0; }
.onb-noscript{ max-width:44rem; margin:var(--s6) auto 0; color:var(--ink-2); }

.onb__top{
  display:flex; justify-content:flex-end;
  padding-bottom:var(--s5); margin-bottom:clamp(30px,3.4vw,44px);
  border-bottom:1px solid var(--line);
}

/* ---------- rozloženie: rovnaké ako sekcia Služby ---------- */
.onb-grid{
  display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
/* stĺpec musí siahať cez celý riadok, inak sa zoznam nemá kde lepiť */
.onb-side{ align-self:stretch; }
.onb-side__in{ position:sticky; top:calc(var(--hdr) + clamp(24px,4vw,48px)); }
.onb-side__lab{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s4);
}
/* Stepper: krúžok na každom kroku a jemná linka medzi nimi. Postup sa dá
   prečítať jedným pohľadom, takže samostatný vodorovný prúžok už netreba. */
.onb-side__list{ margin:0; padding:0; list-style:none; }
.onb-side__i button{
  appearance:none; background:none; border:0; width:100%; cursor:pointer; text-align:left;
  position:relative; display:grid; grid-template-columns:26px minmax(0,1fr);
  align-items:center; gap:var(--s3); padding:9px 0;
  font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:-.012em;
  color:var(--ink-3); transition:color var(--t-hover) var(--e-micro);
}
.onb-side__i button:hover:not(:disabled){ color:var(--ink-2); }
.onb-side__i button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }
.onb-side__i button:disabled{ cursor:default; }

/* Linka vedie od krúžku k ďalšiemu, nie cez celý riadok — preto je nakreslená
   ako pseudoprvok tlačidla a posledný krok ju nemá. */
.onb-side__i:not(:last-child) button::before{
  content:""; position:absolute; left:13px; top:calc(50% + 13px); bottom:-9px;
  width:1px; background:var(--line);
}
.onb-side__i.is-done button::before{ background:var(--accent); opacity:.35; }

.onb-side__dot{
  display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--paper);
  font-family:var(--mono); font-size:.6875rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  transition:background var(--fast), border-color var(--fast), color var(--fast);
}
/* fajka zaberá zhruba 60 % priemeru krúžku — dosť na to, aby sa dala prečítať
   bez zaostrenia, a málo na to, aby sa dotýkala okraja */
.onb-side__dot svg{ width:16px; height:16px; display:block; }
.onb-side__t{ min-width:0; }

/* hotovo — plný krúžok s výraznou fajkou. Rovnaká váha ako aktívny krok, len
   svetlejšia zelená: „hotovo" a „tu som" sú dva stavy, nie dve dôležitosti. */
.onb-side__i.is-done button{ color:var(--ink-2); }
.onb-side__i.is-done .onb-side__dot{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* tu som — plný krúžok a tmavozelený text */
.onb-side__i.is-on button{ color:var(--brand); font-weight:600; }
.onb-side__i.is-on .onb-side__dot{
  background:var(--brand); border-color:var(--brand); color:#fff;
}

/* ešte príde — obrys a nízka sýtosť */
.onb-side__i.is-future button{ opacity:.45; }
.onb-side__i.is-future button:hover:not(:disabled){ opacity:.85; }
.onb-side__i.is-locked button{ opacity:.4; }

.onb-main{ max-width:50rem; min-width:0; }
.onb-mini{ display:none; }

/* ---------- jazyk ----------
   Segmentovaný ovládač. Bol spoločný s reportom a s FAQ; FAQ prešlo na textové
   záložky a report je preč, takže celý tvar stojí tu, pri svojom jedinom
   používateľovi. Rádiusy sú sústredné — vonkajší mínus odsadenie je vnútorný —
   a práve to drží malý rádius v dojme presnosti, nie stiesnenosti. */
.onb-lang{ display:inline-flex; align-items:center; gap:var(--s3); }
.onb-lang__l{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
/* Prepínač jazyka je `.seg.seg--mini` — tá istá stavba a tie isté stavy ako
   prepínač kategórií, len v miere popisky v hlavičke formulára.
   `aria-pressed`, nie `aria-selected`: nie je to tablist, takže to nesmie
   tvrdiť — vybraný stav však vyzerá rovnako a `.seg` ho pozná. */

/* ---------- rozloženie: rovnaké ako sekcia Služby ---------- */
.onb-grid{
  display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
/* stĺpec musí siahať cez celý riadok, inak sa zoznam nemá kde lepiť */
.onb-side{ align-self:stretch; }
.onb-side__in{ position:sticky; top:calc(var(--hdr) + clamp(24px,4vw,48px)); }
.onb-side__lab{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s4);
}
/* Stepper: krúžok na každom kroku a jemná linka medzi nimi. Postup sa dá
   prečítať jedným pohľadom, takže samostatný vodorovný prúžok už netreba. */
.onb-side__list{ margin:0; padding:0; list-style:none; }
.onb-side__i button{
  appearance:none; background:none; border:0; width:100%; cursor:pointer; text-align:left;
  position:relative; display:grid; grid-template-columns:26px minmax(0,1fr);
  align-items:center; gap:var(--s3); padding:9px 0;
  font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:-.012em;
  color:var(--ink-3); transition:color var(--t-hover) var(--e-micro);
}
.onb-side__i button:hover:not(:disabled){ color:var(--ink-2); }
.onb-side__i button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }
.onb-side__i button:disabled{ cursor:default; }

/* Linka vedie od krúžku k ďalšiemu, nie cez celý riadok — preto je nakreslená
   ako pseudoprvok tlačidla a posledný krok ju nemá. */
.onb-side__i:not(:last-child) button::before{
  content:""; position:absolute; left:13px; top:calc(50% + 13px); bottom:-9px;
  width:1px; background:var(--line);
}
.onb-side__i.is-done button::before{ background:var(--accent); opacity:.45; }

.onb-side__dot{
  display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--paper);
  font-family:var(--mono); font-size:.6875rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  transition:background var(--fast), border-color var(--fast), color var(--fast);
}
.onb-side__t{ min-width:0; }

/* hotovo — fajka, tichá */
.onb-side__i.is-done button{ color:var(--ink-2); }
.onb-side__i.is-done .onb-side__dot{
  border-color:var(--accent); color:var(--accent-txt); background:var(--field);
}
.onb-side__i.is-done .onb-side__dot .ico{ width:13px; height:13px; }

/* tu som — plný krúžok a tmavozelený text */
.onb-side__i.is-on button{ color:var(--brand); font-weight:600; }
.onb-side__i.is-on .onb-side__dot{
  background:var(--brand); border-color:var(--brand); color:#fff;
}

/* ešte príde — obrys a nízka sýtosť */
.onb-side__i.is-future button{ opacity:.45; }
.onb-side__i.is-future button:hover:not(:disabled){ opacity:.85; }
.onb-side__i.is-locked button{ opacity:.4; }

.onb-main{ max-width:50rem; min-width:0; }
.onb-mini{ display:none; }

/* ---------- postup ---------- */
/* Prúžok je vo vlastnom obale, aby ho skript mohol prekresľovať bez toho, aby
   sa dotkol rozloženia riadku — šírku preto drží obal, nie prúžok. */
/* Prúžok zostáva, ale ako druhotná informácia pod zoznamom — hlavnú orientáciu
   nesie zoznam krokov. */
.onb-prog{ height:2px; background:var(--field-2); border-radius:2px; overflow:hidden; }
.onb-prog i{
  display:block; height:100%; background:var(--brand);
  transform-origin:0 50%; transition:transform .5s var(--e);
}

/* ---------- krok ---------- */
/* Krok sa nevymieňa posunom do strany — to by robilo z formulára prezentáciu.
   Zhasne a vráti sa o desať pixelov nižšie, rovnakou krivkou ako zvyšok webu. */
.onb__body{ transition:opacity .34s var(--e), transform .34s var(--e); }
.onb__body[data-out="true"]{ opacity:0; transform:translateY(10px); }

.onb-step__h{ margin-bottom:clamp(26px,3vw,38px); }
/* číslo kroku nesie zoznam vľavo aj kompaktná hlavička na mobile */
.onb-step__n{ display:none; }
/* Veľký nadpis nesie intro stránky. Krok už len pomenúva, kde človek je —
   osemkrát zopakovaný display headline by z formulára spravil osem stránok. */
.onb-step__t{
  font-size:clamp(1.25rem,1.9vw,1.5rem); font-weight:600; letter-spacing:-.025em;
  line-height:1.2; text-wrap:balance;
}
/* Nadpis nie je ovládací prvok a fokus naň už nechodí — kotva pre čítačku je
   skrytá nad ním. Rámik by tu bol len ozdoba omylom. */
.onb-step__l{ margin-top:var(--s4); color:var(--ink-2); max-width:46ch; }

/* Ikona nesmie súťažiť s menovkou, pri ktorej stojí: vedľa textu veľkosti
   15 px je osemnástka poznámka k otázke, nie druhá otázka. */
.onb-info{
  flex:none; width:18px; height:18px; align-items:center; justify-content:center;
  border-radius:var(--r-pill); color:var(--ink-3);
  transition:color var(--fast), background var(--fast);
}
.onb-info svg{ width:14px; height:14px; display:block; }
.onb-info:hover,.onb-info[data-open="true"]{ color:var(--brand); background:var(--field); }
.onb-info:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Jedna mriežka pre celý formulár: dvanásť stĺpcov a polia si berú štyri,
   šesť alebo všetkých dvanásť. Krátke otázky tak stoja vedľa seba a dlhé
   siahajú presne po pravý okraj stĺpca — nie po nejakú vlastnú mieru. */
.onb-fields{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(20px,2.2vw,26px) clamp(24px,2.2vw,32px);
  align-items:start;
}
.onb-f{ grid-column:span 12; display:grid; gap:9px; align-content:start; }
.onb-f--4{ grid-column:span 4; }
.onb-f--6{ grid-column:span 6; }

/* Menovka a jej ikona sú jeden riadok mriežky, nie dva — .onb-f je grid a
   samostatná ikona by si vypýtala vlastný riadok aj s medzerou. */
.onb-fh{ display:flex; align-items:center; gap:.35rem; }
.onb-l{ font-size:.9375rem; font-weight:500; color:var(--ink); }
.onb-l i{ color:var(--accent-txt); font-style:normal; margin-left:.2em; }
.onb-err{ font-size:.8125rem; color:var(--chyba); }

/* Polia onboardingu sú tie isté ako na kontakte — geometria, obrys aj fokus
   prichádzajú zo spoločného bloku. Onboarding nemá vyzerať ako iný produkt. */
.onb-in--num{ max-width:11rem; }
textarea.onb-in{ min-height:6rem; }
.onb-f.is-err .onb-in{ border-color:var(--chyba); }
.onb-other{ margin-top:var(--s2); }
/* Nábeh voľného poľa, keď sa odomkne voľbou. Jednorazovo — skript triedu pridá
   len pri tom jednom prekreslení, v ktorom pole vzniká. */
@keyframes onb-reveal{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.onb-other.is-reveal{ animation:onb-reveal .34s var(--e) both; }
@media (prefers-reduced-motion:reduce){ .onb-other.is-reveal{ animation:none; } }

/* natívna šípka selectu sa v Safari a Chrome líši, tak si kreslíme vlastnú */
.onb-sel{ position:relative; }
.onb-sel select{ appearance:none; padding-right:42px; cursor:pointer; }
.onb-sel::after{
  content:""; position:absolute; right:var(--pole-pad); top:50%; width:8px; height:8px;
  margin-top:-6px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg); pointer-events:none;
}

/* ---------- áno / nie ---------- */
.onb-bool{ display:inline-flex; gap:var(--s2); }
.onb-bool__b{
  appearance:none; cursor:pointer; font:inherit; font-size:.9375rem;
  min-height:var(--pole-h); padding:0 22px; min-width:5.5rem;
  background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.onb-bool__b:hover{ color:var(--ink); border-color:var(--ink-3); }
.onb-bool__b[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.onb-bool__b:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- výber viacerých ---------- */
.onb-chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.onb-chips--wrap{ max-width:52rem; }
/* Rovnaký rádius ako inputy a tlačidlá. Pilulky by boli jediný taký tvar na
   webe a čítali by sa ako niečo iné, než sú — sú to voľby, nie štítky. */
.onb-chip{
  appearance:none; cursor:pointer; font:inherit; font-size:.875rem;
  min-height:36px; padding:0 14px; background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.onb-chip:hover{ color:var(--ink); border-color:var(--ink-3); }
.onb-chip[aria-pressed="true"]{
  background:#E4F1E8; border-color:var(--brand); color:var(--brand); font-weight:500;
}
.onb-chip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.onb-count{ font-family:var(--mono); font-size:.6875rem; color:var(--ink-3); min-height:1em; margin-top:2px; }

/* Rozbalenie zvyšku krajín. Mriežka s 0fr → 1fr je jediný spôsob, ako plynulo
   otvoriť obsah neznámej výšky bez toho, aby sa výška počítala v skripte. */
/* `visibility` popri výške a priehľadnosti: samotné zbalenie na nulovú výšku
   tlačidlá iba oreže, ale klávesnica po nich naďalej chodí a čítačka ich číta —
   v zabalenom stave to bolo dvadsaťjeden neviditeľných zastávok. Prechod ju
   nesie s sebou, takže pri zatváraní ostane oblasť vidieť, kým sa zloží. */
.onb-more{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--e), opacity .34s var(--e), visibility .34s;
  opacity:0; visibility:hidden;
}
.onb-more[data-open="true"]{ grid-template-rows:1fr; opacity:1; visibility:visible; }
.onb-more__in{ overflow:hidden; min-height:0; }
.onb-more__in .onb-chips{ padding-top:var(--s2); }

/* textová akcia, nie tlačidlo — je to odhalenie zvyšku, nie rozhodnutie */
.onb-toggle{
  justify-self:start; appearance:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--s2); padding:4px 0;
  font:inherit; font-size:.875rem; font-weight:500; color:var(--brand);
  text-decoration:underline; text-underline-offset:.2em;
  transition:color var(--fast);
}
.onb-toggle:hover{ color:var(--accent-txt); }
.onb-toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }
.onb-toggle span{ text-decoration:none; font-size:.9em; }

/* ---------- opakovateľné riadky ---------- */
.onb-rows{ display:grid; gap:var(--s3); }
/* Počet stĺpcov nesie schéma cez --cols; auto-fit tu neposlúži, lebo riadok
   má na konci ešte tlačidlo na zmazanie a to nie je dátový stĺpec. */
.onb-row{
  display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) auto;
  gap:var(--s3); align-items:end;
  padding:var(--s4); background:var(--field); border-radius:var(--r-md);
}
.onb-row__c{ display:grid; gap:6px; min-width:0; }
.onb-row__l{ font-family:var(--mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.onb-row__x{
  appearance:none; cursor:pointer; border:1px solid transparent; background:none;
  width:38px; height:38px; border-radius:var(--r-sm); font-size:1.25rem; line-height:1;
  color:var(--ink-3); transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.onb-row__x:hover{ background:var(--paper); border-color:var(--line); color:var(--ink); }
.onb-row__x:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.onb-empty{ font-size:.875rem; color:var(--ink-3); }
.onb-add{
  justify-self:start; appearance:none; cursor:pointer; font:inherit; font-size:.875rem; font-weight:500;
  color:var(--brand); background:none; border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:9px 16px; transition:background var(--fast), border-color var(--fast);
}
.onb-add:hover{ background:var(--field); border-color:var(--brand); }
.onb-add:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.onb-add span{ margin-right:.35em; }

/* ---------- navigácia ---------- */
/* Dva prvky: .onb__nav je hostiteľ v markupe, .onb-nav vykresľuje skript.
   Riadok tlačidiel je ten vnútorný — vonkajší nesie len odsadenie a linku. */
.onb__nav{
  margin-top:clamp(30px,3.4vw,44px); padding-top:var(--s5); border-top:1px solid var(--line);
}
.onb-nav{ display:flex; align-items:center; justify-content:flex-start; gap:var(--s3); }
/* Neúspešné odoslanie. Stojí nad tlačidlami cez celú šírku, nie pri poli:
   nehovorí o tom, čo je zle vyplnené, ale o tom, že sa to nepodarilo poslať.
   Tá istá červená aj veľkosť ako chyba poľa, aby to bol jeden jazyk. */
.onb-nav__err{
  margin:0 0 var(--s4); max-width:58rem;
  font-size:.9375rem; line-height:1.5; color:var(--chyba);
}
.onb__nav .btn[disabled]{ opacity:.45; pointer-events:none; }
.onb__nav .btn[data-busy]{ opacity:.6; pointer-events:none; }

/* ---------- kontrola pred odoslaním ---------- */
.onb-rv__g{ padding-top:var(--s5); border-top:1px solid var(--line); }
.onb-rv__g + .onb-rv__g{ margin-top:var(--s5); }
.onb-rv__gh{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); }
.onb-rv__gh h3{ font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.onb-rv__edit{
  appearance:none; cursor:pointer; background:none; border:0; font:inherit;
  font-size:.8125rem; font-weight:500; color:var(--brand);
  text-decoration:underline; text-underline-offset:.2em; padding:2px;
}
.onb-rv__edit:hover{ color:var(--accent-txt); }
.onb-rv__edit:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }
.onb-rv__d{ margin:var(--s4) 0 0; display:grid; gap:var(--s3); }
.onb-rv__i{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--s3) var(--s5); }
.onb-rv__i dt{ font-size:.875rem; color:var(--ink-3); }
.onb-rv__i dd{ margin:0; font-size:.9375rem; color:var(--ink); overflow-wrap:anywhere; }
.onb-rv__none{ color:var(--ink-3); }
.onb-rv__list{ margin:0; padding:0; list-style:none; display:grid; gap:4px; font-variant-numeric:tabular-nums; }

/* ---------- súhlas pred odoslaním ---------- */
.onb-consent{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); }
/* Presne to isté políčko ako na kontakte — veľkosť, rámik, rádius, odsadenie
   aj typografia sú v .fm__consent a tu sa nepredefinujú. Jediné, čo je iné, je
   šírka riadka: súhlas je jedna veta pri políčku, nie odsek na čítanie, a má
   vedľa seba prázdny stĺpec. */
.onb-consent .fm__consent{ max-width:58rem; }
.onb-consent .fm__consent span{ flex:1; }
.onb-consent a{ color:var(--brand); text-underline-offset:.2em; }

/* ---------- hotovo ---------- */
/* Znak, nadpis aj veta sú spoločné s potvrdením na kontakte (`.fm__done`),
   tu zostáva len to, čím sa onboarding líši: miera riadka a vzduch okolo. */
.onb-done{ max-width:34rem; padding-block:clamp(28px,4vw,56px); }
.onb-done .btn{ margin-top:var(--s6); }

/* Pod 900 px sa zoznam neschová do bočného stĺpca, ale zmizne úplne a nahradí
   ho jeden riadok nad formulárom — osem položiek by inak zabralo celú prvú
   obrazovku ešte pred prvou otázkou. */
@media (max-width:900px){
  .onb-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .onb-side{ display:none; }
  .onb-main{ max-width:none; }
  /* Bez `border-bottom`: hlavička končí prúžkom postupu, ktorý sa vykresľuje
     ako jej posledný prvok. S rámom pod ním stáli pod nadpisom dve vodorovné
     čiary devätnásť pixelov od seba a čítalo sa to ako dvojitý predel.
     Predel teda robí prúžok — a na rozdiel od čiary aj niečo hovorí. */
  .onb-mini{
    display:block; margin-bottom:clamp(24px,3.4vw,34px);
    padding-bottom:var(--s4);
  }
  .onb-mini__n{
    font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .onb-mini__t{
    margin:var(--s2) 0 var(--s4);
    font-size:1.0625rem; font-weight:600; letter-spacing:-.02em;
  }
  /* na tablete sa tretiny zlejú na polovice, štvrtiny riadka sú tam už úzke */
  .onb-f--4{ grid-column:span 6; }
  /* Kompaktná hlavička už názov kroku povedala. Nadpis zostáva v dokumente
     kvôli štruktúre a kvôli tomu, že sa naň po zmene kroku presúva fokus —
     len ho nevidno, aby sa to isté slovo neopakovalo dvakrát pod sebou. */
  .onb-step__h .onb-step__t{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .onb-step__h{ margin-bottom:clamp(20px,2.6vw,28px); }
}

@media (max-width:700px){
  .onb-fields{ grid-template-columns:minmax(0,1fr); }
  .onb-f,.onb-f--4,.onb-f--6{ grid-column:1 / -1; }
  .onb-row{ grid-template-columns:minmax(0,1fr); }
  .onb-f--wide{ max-width:44rem; }
  .onb-row__x{ justify-self:end; }
  .onb-rv__i{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .onb-nav .btn{ flex:1; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .onb__body,.onb-prog i,.onb-side__dot,.onb-more{ transition:none; }
}

/* ---------- footer ---------- */
.ftr{ background:var(--dark); color:var(--ink-dk-3); }
/* Výzvu od navigácie neoddeľuje nič okrem vzduchu — linka tam bola jeden deň
   a delila to, čo má byť jedna plocha. */
.ftr__in{ max-width:var(--maxw); margin-inline:auto; padding:var(--s8) var(--gut) clamp(64px,7vw,104px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr); gap:var(--s7) var(--s6); }
.ftr__h{ font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dk-4); margin-bottom:var(--s4); }
.ftr ul{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s3); }
.ftr a{ color:var(--ink-dk-2); text-decoration:none; font-size:.9375rem; transition:color var(--fast); }
.ftr a:hover{ color:var(--mint); }
.ftr__news label{ display:block; color:var(--ink-dk-2); font-size:.9375rem; margin-bottom:var(--s3); }
/* Súhlas pod poľom na odber: ten istý komponent ako na kontakte (.fm__consent),
   len pretočený na tmavý podklad. */
.ftr__news .ftr__consent{
  display:flex; margin:var(--s3) 0 0; font-size:.8125rem; line-height:1.5; color:#9DB5A6;
  text-wrap:pretty;
}
.ftr__consent input{ width:16px; height:16px; margin:1px 0 0; background:transparent; border-color:#5E7A6A; }
.ftr__consent input::after{ width:4px; height:8px; border-color:var(--dark); }
.ftr__consent:hover input{ border-color:#B9CCC0; }
.ftr__consent input:checked{ background:var(--mint); border-color:var(--mint); }
.ftr__consent input:focus-visible{ outline-color:var(--mint); }
.ftr .ftr__consent a{ font-size:inherit; color:var(--ink-dk-2); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.ftr .ftr__consent a:hover{ color:var(--mint); }
/* Odber v pätke je tá istá geometria, len pretočená na tmavý podklad:
   priehľadná plocha, tichý svetlý obrys, mätový fokus. Tlačidlo je štvorec
   s rovnakou výškou aj rádiusom — pole a akcia sú jeden ovládač. */
.ftr__form{ display:flex; gap:var(--s2); }
.ftr__form input{
  flex:1; min-width:0; background:transparent; border-color:var(--line-dk);
  color:#fff; font-family:var(--mono); font-size:.875rem;
}
.ftr__form input::placeholder{ color:var(--pole-ph-dk); }
.ftr__form input:hover{ border-color:#5E7A6A; }
.ftr__form input:focus-visible{
  outline:2px solid transparent; outline-offset:2px;
  border-color:var(--mint); box-shadow:var(--pole-prsten-dk);
}
.ftr__form button{
  flex:none; width:var(--pole-h); min-height:var(--pole-h); padding:0;
  background:transparent; border:1px solid var(--line-dk); border-radius:var(--r-md);
  color:#fff; cursor:pointer; display:grid; place-items:center;
  transition:background var(--fast), border-color var(--fast);
}
.ftr__form button:hover{ background:var(--dark-2); border-color:var(--mint); }
.ftr__form button:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
/* affiliation and the social link sit above the closing rule, so the legal
   line underneath stays a legal line */
.ftr__aff{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut) var(--s7);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s5) var(--s6);
}
/* The alliance mark keeps its line underneath; the seals carry no line at all,
   so the row is anchored on its floor — both ends finish on the same baseline
   instead of hunting for a shared middle. */
.ftr__bt{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); font-size:.8125rem; color:var(--ink-dk-4); }
.ftr__bt b{ font-weight:400; }
.ftr__bt svg{ height:26px; width:auto; color:var(--ink-dk-2); flex:none; }
/* ---------- známky ISO ----------
   Dlaždicu pod známkou kreslí CSS, nie kresba. Rámik bol pôvodne v súbore
   ako obťah obdĺžnika a **niekedy sa vykreslil škaredo**: kresba má plátno
   vysoké 431 jednotiek a na webe stojí na 42 px, čiže v mierke 0,1, takže
   z obťahu hrubého 4 body zostane 0,4 px. Taká čiara nesadne na mriežku
   obrazovky: jedna hrana vyjde ostrá, druhá sivá a zaoblený roh sa rozmaže,
   a je to zakaždým inak podľa polohy pätky a priblíženia. Kreslený rám sa
   proti tomu brániť nevie.

   Dlaždica ako box tento problém nemá. Prehliadač ju prichytí na pixel, je
   ostrá pri každom priblížení a všetky tri sú zaručene rovnaké, lebo ich
   tvar nezávisí od toho, koľko vzduchu má ktorá kresba na svojom plátne.
   Kresba preto ostáva holá: glóbus a číslo, presne ako dnes. Z Illustratora
   netreba nič nové vyvážať.

   Hranica je `inset` tieň, nie `border` — nemení rozmer boxu, takže výplň
   a odsadenie sa počítajú z jedného čísla. */
.ftr__iso{ margin-left:auto; display:inline-flex; align-items:flex-end; gap:var(--s2); }
/* Dlaždica je zdvih, nie karta. Tri svetlé obdĺžniky v rohu pätky by kričali
   viac než odkazy vedľa nich, hoci sú doklad, nie navigácia — preto biela na
   piatich percentách a nie plocha, ktorá by sa dala prečítať ako tlačidlo. */
.ftr__iso .tip{
  padding:12px 11px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background .6s var(--e), box-shadow .6s var(--e);
}
/* Kresba klesla z 59 na 40 px, aby celá dlaždica zostala vysoká ako známka
   predtým. Skupina teda nenarástla, len dostala tvar. Odsadenie je širšie než
   vyššie, lebo plátno známky je na výšku (311 × 432): pri rovnakom odsadení
   zo všetkých strán by z dlaždice bol úzky stĺpik, takto je takmer štvorec.

   **Kresba musela zosvetlieť.** Pôvodných `#4B6656` malo na holej pätke
   kontrast 2,78 : 1 a to bolo na voľne stojacom tvare akurát: tichá značka.
   Pod dlaždicou to kleslo na 2,45 : 1 a zrazu to nebola tichá značka, ale
   prázdny box so škvrnou — rám okolo kresby si žiada, aby sa kresba dala
   prečítať, inak je nápadnejší obal než obsah. `--ink-dk-4` dáva 4,98 : 1.
   Je to tá istá hodnota, akou je v pätke písaný najtichší text, takže
   poradie dôležitosti zostáva: značka Baker Tilly vedľa je `--ink-dk-2`
   a je stále zreteľne svetlejšia. */
.ftr__iso svg{ height:40px; width:auto; color:var(--ink-dk-4); flex:none; transition:color .6s var(--e); }
/* Dva prechody sú zámerne nerovnaké: príchod je rýchly, lebo známka musí
   odpovedať kurzoru hneď, odchod dlhý — trvanie na pokojnom stave je to,
   ktoré beží na ceste von, takže svetlo pustí pomaly namiesto toho, aby
   zhaslo za kurzorom. */
.ftr__iso .tip:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.ftr__iso .tip:focus-visible,
.ftr__iso .tip[data-open="true"]{
  background:rgba(143,224,174,.12);
  box-shadow:inset 0 0 0 1px rgba(143,224,174,.3);
  transition-duration:var(--t-hover);
}
.ftr__iso .tip:focus-visible svg,
.ftr__iso .tip[data-open="true"] svg{ color:var(--mint); transition:color var(--t-hover) var(--e-micro); }
@media (hover:hover) and (pointer:fine){
  .ftr__iso .tip:hover{
    background:rgba(143,224,174,.12);
    box-shadow:inset 0 0 0 1px rgba(143,224,174,.3);
    transition-duration:var(--t-hover);
  }
  .ftr__iso .tip:hover svg{ color:var(--mint); transition:color var(--t-hover) var(--e-micro); }
}
@media (prefers-reduced-motion:reduce){
  .ftr__iso svg, .ftr__iso .tip{ transition-duration:var(--t-hover); }
}
@media (max-width:820px){ .ftr__iso{ margin-left:0; } }
/* the link belongs with the newsletter, a clear step below the field rather
   than hanging off it; the negative inset keeps the mark itself on the column's
   left edge while the padding still gives it a thumb-sized target */
.ftr .ftr__soc{ margin:var(--s6) 0 0 -8px; display:flex; gap:var(--s2); }   /* .ftr ul je mriežka pod sebou */
.ftr__li{
  padding:8px; display:inline-flex;
  color:var(--ink-dk-4); text-decoration:none; transition:color var(--fast);
}
.ftr__li svg{ width:20px; height:20px; flex:none; }
/* Všetky tri značky majú kresbu v tom istom páse 2–22 zo 24, takže sedia na
   jednej hornej aj dolnej línii. Úzke „f" má výrez orezaný na kresbu, inak by
   okolo neho zostal prázdny priestor a medzera k Instagramu by bola väčšia
   než medzi ostatnými. */
.ftr__li--uzka svg{ width:12px; }
.ftr__li:hover{ color:var(--mint); }
.ftr__base{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut) var(--s7); }
.ftr__rule{ border-top:1px solid var(--line-dk); padding-top:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:center; }
.ftr__rule .logo{ color:#fff; }
.ftr__rule .logo svg{ height:32px; }
/* boilerplate should not outweigh the affiliation beside it */
.ftr__rule .small{ color:var(--ink-dk-4); font-size:.8125rem; }
/* Právny odkaz patrí sem, nie medzi firemnú navigáciu — nie je to stránka,
   ktorú niekto hľadá, je to stránka, ktorú musí nájsť, keď ju potrebuje.
   Rovnaká tichosť ako copyright vedľa, pod kurzorom zosvetlie. */
/* Dve triedy, nie jedna: `.ftr a` je (0,1,1) a prebilo by farbu aj veľkosť
   písma. Odkaz má byť tichý ako copyright vedľa, nie svetlý ako navigácia. */
.ftr__rule .ftr__leg{
  color:var(--ink-dk-4); font-size:.8125rem;
  transition:color var(--t-hover) var(--e-micro);
}
.ftr__rule .ftr__leg:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Nastavenia cookies sú tlačidlo, nie odkaz: nikam nevedú, otvárajú lištu.
   Prehliadač by mu dal vlastné pozadie, rám a písmo, preto sa to tu zhadzuje,
   aby vyzeralo presne ako právny odkaz vedľa. */
.ftr__rule button.ftr__leg{
  appearance:none; background:none; border:0; padding:0;
  font:inherit; font-size:.8125rem; cursor:pointer;
}

/* office clock — hidden until the script has a real time to show, so a stalled
   or blocked script leaves a clean rule rather than a dead 00:00:00 */
.clk{ display:none; align-items:baseline; gap:.5rem; margin-left:auto; }
.clk[data-ready]{ display:inline-flex; }
.clk__k{ font-size:.8125rem; color:var(--ink-dk-4); }
.clk__t{
  font-family:var(--mono); font-size:.8125rem; font-weight:500; letter-spacing:.04em;
  color:#F2F8F4; font-variant-numeric:tabular-nums;
}
/* mint reads as an accent against near-white digits; against the footer's own
   var(--ink-dk-2) the two greens sat too close to tell apart at 13px */
.clk__c{ color:var(--accent); }
/* the fraction is a texture, not a reading — kept quiet so the clock
   still parses as a time rather than a stopwatch */
.clk__f{ color:var(--ink-dk-4); }
.clk__z{ font-family:var(--mono); font-size:.8125rem; color:var(--ink-dk-4); letter-spacing:.04em; }
/* once the rule wraps, a right-pushed clock reads as orphaned — line it up */
/* Hodiny sú na telefóne preč. Pod 700 px sa pravidlo v pätke zalomí, hodiny
   spadnú na vlastný riadok a z jemného detailu na okraji sa stane samostatná
   položka, ktorá si pýta pozornosť, akú nemá čo pýtať. Na širšom okne stoja
   na konci riadka, kam patria. */
@media (max-width:700px){ .clk[data-ready]{ display:none; } }
@media (max-width:900px){ .ftr__in{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ftr__in{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }

/* ---------- scroll reveal ---------- */
/* hidden only once JS has confirmed it will animate them back in */
/* The reveal: opacity and 20px of upward travel, nothing else — no scale, no
   rotation, no overshoot. It runs on the section band the token --t-sec covers,
   and neighbours inside one section follow each other by 60ms. The hidden state
   is gated behind html.anim, which only JS adds, so a page without scripts is
   readable rather than blank. */
html.anim .rv{ opacity:0; transform:translateY(20px); }
html.anim .rv.is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-sec) var(--e), transform var(--t-sec) var(--e);
  transition-delay:calc(var(--rv-i, 0) * 60ms);
}
/* Dlhý text má nástup bez pohybu. Karta alebo sekcia je predmet: príde
   zdola a je to čitateľné gesto. Odsek a nadpis v článku sú text, ktorý
   sa číta priamo pri scrollovaní — a tam bol ten istý pohyb na škodu.
   Blok sa spúšťa pri dolnom okraji obrazovky a 0,6 s sa dosúva nahor,
   zatiaľ čo stránka ide pod ním opačným smerom. Pri veľkom tučnom nadpise
   to bolo najlepšie vidieť: pôsobil, akoby zaostával za scrollom a dobiehal
   text okolo seba. Preto tu ostáva len prelnutie, krátke a bez oneskorenia
   medzi susedmi — blok je na mieste skôr, než sa k nemu čitateľ dostane.

   Hlavička článku ide s telom. Keby si nadpis ponechal posun a odstupňovanie,
   perex hneď pod ním by bol na mieste skôr než on — presne ten dojem, ktorý
   sa tu odstraňuje. Celá stránka článku sa teda otvára jedným tichým
   prelnutím. Karty a sekcie (`.xprt__card`, `.art__more`, domovská) si
   nástup zdola ponechávajú: karta je predmet, odsek je text. */
/* Posledný riadok pätky sa odhaľuje bez posunu. Posun o 20 px nadol je
   inde v poriadku, ale `.ftr__base` je úplne posledný prvok dokumentu:
   kým sa neodhalí, tých 20 px **predlžuje stránku** a pod pätkou svieti
   biely prúžok. Odmerané: `scrollHeight` 8691 proti 8671 výšky `<body>`.
   Prelnutie stačí, pohyb tam nikto nečaká. */
html.anim .art__head > .rv,
html.anim .art__body > .rv,
html.anim .doc__sec > .rv,
html.anim .ftr__base{ transform:none; }
html.anim .art__head > .rv.is-in,
html.anim .art__body > .rv.is-in,
html.anim .doc__sec > .rv.is-in{
  transition:opacity var(--t-ui) var(--e);
  transition-delay:0s;
}

@media (prefers-reduced-motion:reduce){ html.anim .rv,html.anim .rv.is-in{ opacity:1; transform:none; transition:none; } }
/* ---------- V médiách (/v-mediach) ----------
   Stránka stojí na kartičkách zo Z praxe (`.zp-card`, `.zp__grid`) — vlastný
   register mala do v2.46 a ten je preč aj s CSS. Zostal jediný kus, ktorý je
   naozaj jej: štítok nad mriežkou. */
.mx-lab{ display:flex; margin:0 0 clamp(20px,2.4vw,32px); }

/* ---------- Napojenia (/napojenia) ----------
   Úplný zoznam toho, na čo sa napájame. Pás na úvodnej je rozpoznanie
   („toto poznám"), táto stránka je inventár, a sú to dve rôzne úlohy:
   v páse jedno logo zaberie 145 px a za desať sekúnd ich návštevník uvidí
   dve, tu vidí všetkých šesťdesiatdva naraz a vie v nich hľadať.

   Bunka je logo **a názov**. Názov robí stránku nájditeľnou vo vyhľadávaní
   a čitateľnou pre čítačku; stena klientov to nemá a preto je pre čítačku
   skrytá. Tu skrytá nie je. */
/* Sekcia sa lepí na hero. Spoločné odsadenie `.sec` zhora plus spodné
   odsadenie `.ct-hero` dá medzi vetu a prepínač 108 až 191 px, čo je pri
   ovládacom riadku priveľa: nevyzerá to ako začiatok zoznamu, ale ako
   prázdno. Rovnaká hodnota ako na `/v-mediach`. */
.np{ padding-top:clamp(4px,0.8vw,12px); }
.np__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
  margin:0 0 var(--s4);
  /* Kam dosadne rolovanie po prepnutí kategórie. Rovnaké pravidlo, aké majú
     sekcie s adresou: pod lepkavú hlavičku, nie pod ňu. */
  scroll-margin-top:calc(var(--hdr) + 12px);
}
/* Prepínač si berie presne toľko, koľko potrebuje, a pole ho odtlačí doprava.
   Keby prepínač rástol, pole by spadlo pod neho aj na veľkom monitore, kde je
   na oboje miesta dosť. `min-width:0` je nutné: bez neho by puzdro odmietlo
   zmenšiť sa pod obsah a namiesto vlastného posuvu by roztiahlo riadok.
   Pod 640 px si obe vezmú celý riadok. */
.np__bar .seg{ flex:0 1 auto; min-width:0; }
/* Vzhľad poľa je `.zp__search` zo Z praxe, tu sa dopĺňa len to, čo je vlastné
   tomuto riadku: šírka a odtlačenie doprava. Výška je výška ovládačov, aby
   pole a prepínač vedľa seba stáli na rovnakej linke. */
.np__search{ flex:0 0 clamp(200px,22vw,280px); margin-left:auto; }
.np__search input{ min-height:var(--ctl-h); }
.np__count{
  margin:0 0 clamp(20px,2.4vw,30px);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
/* ---------- výmena kategórie ----------
   Prepnutie nie je strih. Odchod a príchod sú zámerne nesúmerné:

     odchod    všetky dlaždice naraz, 130 ms, posun o 6 px nadol
     príchod   po jednej zľava doprava, 460 ms každá, krok 26 ms

   To, čo mizne, netreba sledovať; to, čo prichádza, áno. Nábeh je ten istý
   ako pri štyroch číslach v hero (`[data-anim="hero-proof"]`): posun zdola,
   prelnutie, odstupňovanie v poradí dokumentu, teda zľava doprava a po
   riadkoch. Hero to má cez GSAP, lebo tam beží celá časová os; tu stačí
   `transition-delay`, takže `/napojenia` nepotrebuje ďalšiu knižnicu.

   **Krok je zhora obmedzený.** Šesťdesiatdva dlaždíc po 26 ms je vyše
   poldruha sekundy a posledná by dobehla dávno po tom, čo ju niekto prestal
   čakať. Index sa preto zastaví na dvadsiatich dvoch (`--np-i` dáva skript),
   čo je pri šiestich stĺpcoch necelé štyri riadky, teda plná obrazovka;
   zvyšok príde naraz a je aj tak pod ohybom. Posledná viditeľná dlaždica
   začína na 572 ms a končí na sekunde.

   Pri písaní do hľadania sa nič neprelína: kategóriu prepne návštevník
   párkrát, písmeno napíše desaťkrát za sekundu a prelínanie by z hľadania
   spravilo čakanie. */
.np__i, .np__gh{
  transition:opacity .46s var(--e), transform .46s var(--e);
  transition-delay:calc(var(--np-i, 0) * 26ms);
}
[data-np-grid][data-vymena="true"] .np__i,
[data-np-grid][data-vymena="true"] .np__gh{
  opacity:0; transform:translateY(6px);
  transition-duration:.13s; transition-delay:0s;
}
/* Východiskový stav príchodu. `transition:none` je nutné: bez neho by sa
   prehliadač pokúsil doň prejsť z predošlého a nová dlaždica by najprv
   zablikala. */
[data-np-grid][data-vstup="true"] .np__i,
[data-np-grid][data-vstup="true"] .np__gh{
  opacity:0; transform:translateY(14px);
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  .np__i, .np__gh{ transition:none; }
}
.np__g + .np__g{ margin-top:clamp(36px,3.8vw,54px); }
/* Nadpis skupiny delí jeden zoznam na päť častí, takže je to jediná
   štruktúra, ktorú návštevník pri rolovaní vidí. Kým bol mono verzálkami
   na .75rem, vyzeral rovnako ako stavový riadok `62 NAPOJENÍ` nad ním a
   hierarchia nebola žiadna. Teraz je to naše písmo, väčšie a bez verzálok;
   mono verzálky zostali tomu, čo je stav. Počet sa mení s hľadaním, preto
   stojí v nadpise a nie vo vlastnom riadku. */
.np__gh{
  margin:0 0 var(--s4);
  font-size:clamp(1.0625rem,1.35vw,1.25rem); font-weight:500;
  letter-spacing:-.015em; line-height:1.25; color:var(--ink);
}
/* Počet je index, nie druhé slovo nadpisu: menší, mono, tlmený a vysadený
   hore. `line-height:0` je nutné, inak by posadenie nahor zvýšilo riadok
   nadpisu a medzera nad mriežkou by sa menila podľa toho, či skupina počet
   má. Mono tu zostáva zámerne: rovnaká reč ako `62 NAPOJENÍ` nad zoznamom,
   takže čísla na stránke držia spolu, kým názvy prešli do nášho písma. */
.np__gh i{
  font-style:normal; font-family:var(--mono); font-weight:500;
  font-size:.56em; letter-spacing:.02em; color:var(--ink-3);
  vertical-align:super; line-height:0; margin-left:.3em;
}
.np__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:var(--s3);
}
/* Položka je box a pod ním popiska. `align-content:start` je tam kvôli
   dlaždiciam bez loga: tie popisku nemajú a bez toho by sa ich box roztiahol
   na výšku suseda, ktorý ju má. Takto majú všetky boxy v rade rovnakú výšku
   a zarovnané sú horným okrajom. */
.np__i{ display:grid; grid-template-rows:auto auto; gap:8px; align-content:start; }
/* Box má pevnú výšku, takže doplnenie loga mriežkou nepohne. */
.np__c{
  display:grid; place-items:center;
  min-height:112px; padding:18px var(--s4);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.np__l{ display:flex; align-items:center; justify-content:center; }
/* ---------- odozva na kurzor ----------
   Stránka je monochromatická a taká zostáva aj pod kurzorom: značka sa len
   stíši alebo zosilní, farbu neodhalí. Bez tohto pravidla by časť značiek
   pod kurzorom zosvetlela do vlastných farieb (tie, ktoré si v spoločnom
   sprite niesli výplň) a časť nie, čo bolo vidieť. Zjednotené je to na
   monochróm, nie na farbu: šesťdesiatdva značiek znamená šesťdesiatdva
   rôznych paliet a mriežka by pri prechode myšou prestala byť jedna
   kompozícia. Ten istý zákon platí na stene klientov a v páse Ekosystému.

   Citlivou plochou je **celý box**, nie kresba. Kresba má vlastnú výšku,
   takže u tenkého nápisu je to pás vysoký 15 px v boxe vysokom 112: okraj
   ním prejde aj viackrát za sekundu a tón sa pritom zapína a vypína, čo sa
   číta ako keby sa logo hýbalo. Rovnaká oprava ako na stene klientov. */
.np .lg{ --o:.68; }
@media (hover:hover) and (pointer:fine){
  .np__c:hover .lg svg{ filter:brightness(0); opacity:1; }
}
/* Popiska pod boxom. Tichšia než značka nad ňou: je to menovka, nie nadpis. */
.np__n{
  text-align:center; text-wrap:balance;
  font-size:.8125rem; line-height:1.3; color:var(--ink-3);
  letter-spacing:-.005em;
}
/* Kým značka logo nemá, nesie box názov a musí zniesť váhu, ktorú inak nesie
   kresba. Popiska pod boxom sa vtedy nevykresľuje. */
.np__t{
  text-align:center; text-wrap:balance;
  font-size:1rem; font-weight:500; line-height:1.25; color:var(--ink);
}
/* Prázdny výsledok dostane toľko miesta ako sekcia, nie ako hláška. Je to
   jediná obrazovka, kde má web šancu povedať, čo v zozname hľadať — a keď
   vyzerá ako systémové hlásenie, nikto ju nečíta. */
.np__empty{ padding:clamp(48px,6.5vw,92px) 0 clamp(24px,3vw,40px); max-width:36rem; }
.np__empty .lab{ display:flex; }
.np__empty-h{
  margin:var(--s5) 0 0;
  font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.15; text-wrap:balance;
}
.np__empty-p{ margin:var(--s5) 0 0; font-size:1.0625rem; line-height:1.55; color:var(--ink-2); }
/* Príklady sú návod, nie dôraz: rez zostáva, farba sa priblíži textu. */
.np__empty-p b{ font-weight:500; color:var(--ink); }
.np__empty .btn{ margin-top:clamp(22px,2.6vw,30px); }
/* Lišta existuje len na telefóne. Na širokej obrazovke je prepínač v záhlaví
   mriežky a plávajúca lišta by bola jeho druhá kópia cez obsah. */
@media (min-width:641px){
  .npfab{ display:none !important; }
}
@media (max-width:640px){
  /* Prepínač sa sťahuje dole do `.npfab`, takže v záhlaví zostane samo pole
     a vezme si celú šírku. Dva ovládače na dvoch riadkoch nad mriežkou boli
     na telefóne priveľa a pole z toho vychádzalo najkratšie. */
  .np__bar .seg{ display:none; }
  .np__search{ flex:1 1 100%; margin-left:0; }
  .np__grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px 10px; }
  .np__c{ min-height:92px; padding:14px 12px; }
  .np__n{ font-size:.75rem; }
  /* Miesto pod poslednou dlaždicou, aby lišta neležala na mriežke. */
  .np__g:last-child{ padding-bottom:calc(var(--ctl-h) + 28px); }
  /* Puzdro sa posúva prstom a nesmie prerásť lištu. `scroll-padding` drží
     vybranú kapsulu od okraja, keď sa k nej puzdro samo posunie. */
  .npfab .seg{ display:flex; width:100%; scroll-padding-inline:8px; }
}

/* Zakončenie Ekosystému: tá istá stavba ako `.prb__cta` na konci Problémov —
   veta a jedno tlačidlo, bez nadpisu a bez plochy. Vlastná trieda a nie
   spoločná preto, že pás nad ňou je cez celú šírku a odsadenie zhora tu musí
   byť väčšie než po mriežke dlaždíc. */
.eco__cta{
  /* Väčší odstup než pri `.prb__cta`: tam je nad tlačidlom mriežka dlaždíc
     s vlastným okrajom, tu je posledný riadok log a ten končí kresbou. Pri
     36 px tlačidlo vyzeralo ako piaty riadok pásu. */
  margin-top:clamp(56px,5.2vw,84px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,1.4vw,18px);
  text-align:center;
}
.eco__cta p{
  max-width:32rem; margin:0;
  font-size:1.0625rem; line-height:1.5; color:var(--ink-2); text-wrap:balance;
}

/* Napojenia: optické výšky nových značiek. Nie je to odhad ani rovnaká výška
   pre všetkých: `√(1500 / pomer strán)` dá každej značke rovnakú optickú
   plochu, takže dlhý nápis je nižší a kompaktná značka vyššia a v rade potom
   ani jedna netlačí na ostatné. Konštanta 1500 je tá istá ako pri stene
   klientov a pri páse v Ekosystéme, aby všetky tri plochy hovorili rovnako
   nahlas.

   Sedem hodnôt je proti vzorcu opravených: ten dá rovnakú plochu rámčeka, nie
   rovnakú stopu kresby. Odmerané 26. 9. 2026 rasterizáciou a spočítaním
   krycích bodov, opravené sú tie, čo vybočili z pásma: InPost 30 → 36,
   PKO 21 → 24, FHB 19 → 21, Limetis 21 → 23, Wise 19 → 17, SDS 24 → 22,
   Shopify Payments 19 → 18. Pásmo je po tom 72 až 118 % mediánu. */
.lg--upgates{ --h:20px; }
.lg--allegro{ --h:22px; }
.lg--heureka{ --h:14px; }
.lg--amazon{ --h:21px; }
.lg--shoptet-pay{ --h:16px; }
.lg--shopify-payments{ --h:18px; }
.lg--klarna{ --h:18px; }
.lg--adyen{ --h:22px; }
.lg--mollie{ --h:21px; }
.lg--montonio{ --h:14px; }
.lg--thepay{ --h:25px; }
.lg--trustpay{ --h:19px; }
.lg--payout{ --h:21px; }
.lg--wise{ --h:17px; }
.lg--revolut{ --h:18px; }
.lg--citfin{ --h:19px; }
.lg--citibank{ --h:20px; }
.lg--fio{ --h:17px; }
.lg--raiffeisenbank{ --h:23px; }
.lg--kb{ --h:24px; }
.lg--otp{ --h:18px; }
.lg--pko{ --h:26px; }
.lg--inpost{ --h:39px; }
.lg--sds{ --h:22px; }
.lg--fhb{ --h:21px; }
.lg--isklad{ --h:25px; }
.lg--limetis{ --h:23px; }
.lg--superfaktura{ --h:22px; }
.lg--fakturoid{ --h:22px; }

.lg--slsp{ --h:23px; }
.lg--erste{ --h:21px; }
.lg--unicredit{ --h:17px; }
.lg--moneta{ --h:17px; }
.lg--packeta{ --h:23px; }
.lg--zasilkovna{ --h:21px; }
.lg--gls{ --h:20px; }
.lg--dpd{ --h:25px; }
.lg--ppl{ --h:13px; }
.lg--sps{ --h:21px; }
.lg--slovenska-posta{ --h:37px; }
.lg--boxnow{ --h:28px; }
.lg--boxpi{ --h:24px; }
.lg--express-one{ --h:21px; }
.lg--fan-courier{ --h:30px; }
.lg--cargus{ --h:34px; }
.lg--brt{ --h:27px; }