/* ================================================================
   ATG · dizajnový systém — podľa CREATIVE BRAND MANUAL 2026 (ATG Slovakia)
   Dark Navy #050a30 · Tech Blue #233dff · UV Neon Green #10b981 · Deep Night #0b0f19
   Grafické prvky značky: UV neónová linka (indikácia defektu pod UV lampou),
   lamelové štruktúry z písma loga, laboratórny dark-mode kontrast.
   Zdroj: príloha mailu B. Ščasnej z 9. 8. 2026 (ATG_Slovakia_Brand_Manual_2026_BS.pdf)
   ================================================================ */

:root {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #e6eaf5;
  --ink:       #050a30;   /* Dark Navy — nadpisy, texty, korporátny základ */
  --ink-2:     #454d75;
  /* Stmavené 15. 9. 2026 z #7d85a6. Pôvodná farba mala na bielej pomer
     3,63 : 1, na svetlých podkladoch 3,36 a 3,13 — pod 4,5 : 1, ktoré
     WCAG 2.2 (1.4.3) žiada pre bežný text, a pritom ju nesie 1003 miest
     na webe vrátane .tiny-cap, teda označenia sekcií všade. Nová hodnota
     dáva 5,61 / 5,19 / 4,83. Odstupňovanie ink → ink-2 → ink-3 ostáva
     čitateľné (19,2 → 8,2 → 5,6). European Accessibility Act platí od
     28. 6. 2025 a web firmy ponúkajúcej služby pod neho spadá. */
  --ink-3:     #5f6688;
  --line:      #ccd2e6;
  --line-2:    #e4e8f4;

  --accent:      #10b981;   /* UV Neon Green — akcent, CTA, indikácia */
  --accent-ink:  #0e9f70;
  --accent-txt:  #067a54;   /* zelená čitateľná ako text na bielej */
  --accent-soft: #e8fbf4;

  --tech:      #233dff;     /* Tech Blue — interaktívne prvky, odkazy */
  --tech-soft: #eef1ff;
  --night:     #0b0f19;     /* Deep Night — tmavý režim sekcií */

  --ok:      #0f7b4a;  --ok-soft:   #ecfdf3;
  --warn:    #b45309;  --warn-soft: #fffbeb;
  --crit:    #E31937;  --crit-soft: #fef2f2;
  --info:    #233dff;  --info-soft: #eef1ff;

  --mono: "Liberation Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Liberation Sans", "Nimbus Sans", Helvetica, Arial, sans-serif;

  --r:    0px;
  --r-sm: 2px;
  --shadow:    none;
  --shadow-lg: none;
  --maxw: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------- typografia ---------- */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
h1 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 300; letter-spacing: -.015em; }
h2 {
  font-size: clamp(15px, 1.5vw, 18px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; line-height: 1.35;
}
h2::after { content: ""; display: block; width: 54px; height: 3px; background: var(--accent); margin-top: 12px; }
h2.plain::after { display: none; }
h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
h4 { font-size: 13px; font-weight: 700; }
p  { margin: 0 0 12px; }
a  { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
a:hover { color: var(--accent-txt); text-decoration: none; }
a.btn, a.brand, a.pill, a.choice, a.met-c, a.nb, a.pf, a.fig,
.nav a, .subnav a, .side-nav a, .ftr a { border-bottom: 0; }
.ftr a { border-bottom: 1px solid var(--line); }
code, .mono, kbd { font-family: var(--mono); font-size: .88em; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: 28px 0; }
img, svg { max-width: 100%; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }
.section { padding: 72px 0; }
.section-sm { padding: 40px 0; }
@media (max-width: 700px) { .wrap, .wrap-narrow { padding: 0 18px; } .section { padding: 48px 0; } }
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-side { grid-template-columns: minmax(0,1fr) 360px; }
/* Poradenstvo zdarma má formulár širší než bežný bočný stĺpec (360 px) —
   dvojice polí sa vtedy zmestia vedľa seba a pole na správu je použiteľné.
   Vlastná trieda, nie zmena `.g-side`: ten drží úzky stĺpec inde na webe. */
.pz-grid { grid-template-columns: minmax(0,1fr) minmax(420px,1.15fr); }
.g-side-l { grid-template-columns: 240px minmax(0,1fr); }
/* Zúžený stĺpec je `minmax(0,1fr)`, nie `1fr`. Rozdiel je vidieť až vtedy,
   keď je v stĺpci mriežka s vlastnou najmenšou šírkou — napr. `.sk-list`
   s tratí `minmax(280px,1fr)`. Pri obyčajnom `1fr` (= `minmax(auto,1fr)`)
   si položka vypýta šírku svojho obsahu a stránka pretečie vodorovne;
   nájdené 16. 9. 2026 na /produkty/mt/energetika/ pri 390 px — 189 px von. */
@media (max-width: 1040px) { .g4 { grid-template-columns: repeat(2,minmax(0,1fr)); } .g-side, .g-side-l, .g3, .pz-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px)  { .g2, .g3, .g4 { grid-template-columns: minmax(0,1fr); } }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.stack > * + * { margin-top: 24px; }

/* ---------- hlavička ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.hdr-in { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-mark {
  flex: none; background: var(--ink); color: #fff; padding: 5px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-indent: .22em;
  display: grid; place-items: center;
}
.nav { display: flex; gap: 0; align-items: center; margin-left: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--ink-2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  padding: 8px 12px; white-space: nowrap; position: relative;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); }
.nav a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--accent); }
@media (max-width: 1240px) { .hdr-in { gap: 16px; padding: 0 18px; } }
@media (max-width: 940px) {
  .hdr-in { height: auto; flex-wrap: wrap; padding: 10px 18px; gap: 8px; }
  .nav { width: 100%; margin-left: 0; order: 3; }
  .langsw { margin-left: auto; }
}

/* ---------- mobilná ponuka (15. 9. 2026) ----------
   Do 720 px sa sedem položiek do riadku nezmestí (DE potrebuje 647 px pri
   dostupných ~354 px), riadok sa dal posunúť do strany, ale nič to
   nenaznačovalo — pri 390 px boli Produkty, Služby a Kontakt mimo
   obrazovky a návštevník o nich nevedel. Hranica 720 px je ZÁROVEŇ
   v app.js (`UZKO`); keď sa mení, musí sa zmeniť na oboch miestach. */
.nav-btn { display: none; }
@media (max-width: 720px) {
  .nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    order: 3; flex: none; min-height: 34px; padding: 6px 12px;
    border: 1px solid var(--line); background: #fff; cursor: pointer;
    font: inherit; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .13em; color: var(--ink);
  }
  .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-ikona { display: grid; gap: 3px; width: 15px; flex: none; }
  .nav-ikona span { display: block; height: 2px; background: var(--ink); transition: transform .16s ease, opacity .16s ease; }
  /* otvorené = krížik, aby bolo vidieť, že to isté tlačidlo zatvára */
  .nav-btn[aria-expanded="true"] .nav-ikona span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-btn[aria-expanded="true"] .nav-ikona span:nth-child(2) { opacity: 0; }
  .nav-btn[aria-expanded="true"] .nav-ikona span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .hdr-vpravo { order: 2; margin-left: auto; }
  .langsw { margin-left: 0; }
  /* Siete z hlavičky na telefóne dole — bez nich sa logo, zástavky
     a tlačidlo ponuky zmestia do JEDNÉHO riadku (93 px → 55 px hlavičky,
     a to je na 800 px vysokej obrazovke znateľné). Nič sa nestráca:
     LinkedIn aj YouTube sú v päte a tam sú väčšie a ľahšie trafiteľné. */
  /* dve triedy zámerne: `.soc { display: inline-flex }` je v súbore nižšie
     a pri rovnakej špecifickosti by vyhralo poradím (médiá špecifickosť
     nedvíhajú) — jednotriedne `.hdr-soc` sa tu ticho neprejavilo */
  .hdr-vpravo .hdr-soc { display: none; }

  .nav { display: none; order: 4; overflow: visible; }
  .nav.otvorena { display: flex; flex-direction: column; align-items: stretch; }
  /* panel ide cez celú šírku hlavičky, nie len po jej vnútorné odsadenie */
  .nav.otvorena { margin: 4px -18px 0; padding: 0 18px 8px; border-top: 1px solid var(--line-2); }
  .nav.otvorena a {
    padding: 13px 0 13px 12px; font-size: 12px; letter-spacing: .1em;
    border-bottom: 1px solid var(--line-2);
  }
  .nav.otvorena a:last-child { border-bottom: 0; }
  /* zvislý prúžok pri aktívnej položke — vodorovný by splynul s deliacou čiarou */
  .nav.otvorena a.on::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
}

/* sekundárna navigácia verejného webu */
.subnav { border-bottom: 1px solid var(--line-2); background: #fff; }
.subnav nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.subnav nav::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 14px 0; margin-right: 34px; white-space: nowrap; border-bottom: 2px solid transparent;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2);
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 700px) { .subnav a { margin-right: 22px; font-size: 10.5px; } }

/* Prepínač jazyka — zástavky. Neaktívna je odfarbená, farebná je tá,
   ktorá práve platí. Kód jazyka ostáva vedľa nej: samotná zástavka nie je
   spoľahlivý údaj o jazyku a pri odfarbení by sa SK a DE ťažko rozlišovali. */
.langsw { display: flex; gap: 0; flex: none; border: 1px solid var(--line); }
.langsw button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; font: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-3); padding: 5px 8px; cursor: pointer;
  transition: filter .15s ease, opacity .15s ease, background .15s ease, color .15s ease;
}
.langsw button + button { border-left: 1px solid var(--line); }
.vlajka {
  width: 18px; height: 12px; display: block; flex: none;
  border: 1px solid rgba(5,10,48,.18);
}
.langsw button:not(.on) { filter: grayscale(1); opacity: .55; }
.langsw button:not(.on):hover { filter: grayscale(0); opacity: 1; color: var(--ink); }
.langsw button.on { background: var(--ink); color: #fff; }
.langsw button.on .vlajka { border-color: rgba(255,255,255,.4); }
.langsw button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Zástavky a siete stoja v jednom rade vpravo v hlavičke. */
.hdr-vpravo { display: flex; align-items: center; gap: 14px; flex: none; }
.hdr-soc .soc-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hdr-soc .soc-btn { padding: 6px 9px; height: 28px; }
@media (max-width: 760px) { .lang-kod { display: none; } .hdr-vpravo { gap: 10px; } }

/* ---------- plochy ---------- */
.card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; padding: 24px; }
.card-flat { background: var(--surface); border: 1px solid var(--line-2); padding: 24px; }
.card-pad-0 { padding: 0; overflow: hidden; }
.card-hd {
  padding: 14px 24px; border-bottom: 1px solid var(--ink);
  display: flex; align-items: center; gap: 12px; justify-content: space-between; background: #fff;
}
.card-bd { padding: 24px; }
.panel { background: var(--surface-2); border: 0; padding: 16px; }

/* karta s vrchným pravítkom — vzor „mod" z klientskeho materiálu */
/* `.card.rule-top` nie je škatuľa — je to text pod vodorovnou čiarou.
   Preto `border: 0` a nulové bočné odsadenie. Zdedené biele pozadie z `.card`
   sa mu však ponechávalo, takže na vzorovanom podklade (`.k-canvas`) alebo na
   sivej sekcii vznikol biely obdĺžnik nalepený na text — vyzeralo to, že
   obsah pretiekol z boxu (nález na /aero/, 27. 8. 2026). Tmavý režim to už
   riešil vlastným `background: transparent`; teraz to platí všade. */
.card.rule-top { background: transparent; border: 0; border-top: 2px solid var(--ink); padding: 18px 0 0; }
.card.rule-top.accent { border-top-color: var(--accent); }

.eyebrow {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--ink-3);
  margin-bottom: 14px;
}
.lead { font-size: 17px; color: var(--ink-2); line-height: 1.65; font-weight: 300; }
.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }
.small { font-size: 13.5px; }
.xs    { font-size: 11.5px; }
.tiny-cap { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- tlačidlá ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font: inherit;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  cursor: pointer; transition: .14s ease;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-pri { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-pri:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: transparent; color: var(--accent-txt); }
.btn-sm { padding: 6px 12px; font-size: 10px; letter-spacing: .12em; }
.btn-lg { padding: 15px 30px; font-size: 12px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }

/* ---------- formulár ---------- */
label.fld { display: block; margin-bottom: 18px; }
.fld > span, .fld-label {
  display: block; font-size: 10px; font-weight: 700; color: var(--ink-3); margin-bottom: 8px;
  letter-spacing: .18em; text-transform: uppercase;
}
input[type=text], input[type=number], input[type=search], input[type=date], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; color: var(--ink); font: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
textarea { min-height: 104px; resize: vertical; line-height: 1.6; }

.choices { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line-2); }
.choice {
  border: 0; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
  padding: 12px 14px; cursor: pointer; background: #fff; font-size: 13.5px; line-height: 1.35;
  text-align: left; transition: .12s; position: relative; font-family: inherit; color: var(--ink);
}
.choice:hover { background: var(--surface-2); }
.choice.on { background: var(--ink); color: #fff; }
.choice.on span { color: rgba(255,255,255,.7); }
.choice.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.choice b { display: block; font-weight: 700; font-size: 13px; }
.choice span { color: var(--ink-3); font-size: 11px; letter-spacing: .02em; }

/* ---------- pilulky / stavy ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line);
}
.pill-ok, .pill-warn, .pill-crit, .pill-info { position: relative; padding-left: 20px; }
.pill-ok::before, .pill-warn::before, .pill-crit::before, .pill-info::before {
  content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.pill-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
/* --crit (#E31937) má na svojom svetlom podklade 4,3 : 1 a štítok je
   10 px text; #c81029 dáva 5,39 a ako výstražná červená sa číta rovnako.
   Obrys ostáva na --crit — netextový prvok. */
.pill-crit { background: var(--crit-soft); color: #c81029; border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.pill-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pill-acc  { background: var(--ink); color: #fff; border-color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--line); }
.dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-crit { background: var(--crit); } .dot-info { background: var(--info); }

.tag-mod {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 1px 6px; background: var(--ink); color: #fff; vertical-align: middle; letter-spacing: .06em;
}
.inno {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border: 1px solid var(--line); color: var(--ink-3); vertical-align: middle;
}

/* ---------- tabuľky ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ink);
  background: #fff; white-space: nowrap;
}
table.tbl th:first-child, table.tbl td:first-child { padding-left: 24px; }
table.tbl th:last-child,  table.tbl td:last-child  { padding-right: 24px; }
table.tbl td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--mono); }
.tbl-compact td, .tbl-compact th { padding-top: 8px; padding-bottom: 8px; }
.card:not(.card-pad-0) table.tbl th:first-child,
.card:not(.card-pad-0) table.tbl td:first-child { padding-left: 0; }
.card:not(.card-pad-0) table.tbl th:last-child,
.card:not(.card-pad-0) table.tbl td:last-child { padding-right: 0; }

/* ---------- štatistika ---------- */
.stat { background: #fff; border: 0; border-top: 2px solid var(--ink); padding: 14px 0 0; }
.stat .k { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.stat .v { font-size: 34px; font-weight: 300; letter-spacing: -.02em; margin-top: 6px; line-height: 1.05; }
.stat .s { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.stat.b-ok   { border-top-color: var(--ok); }
.stat.b-warn { border-top-color: var(--warn); }
.stat.b-crit { border-top-color: var(--crit); }
.stat.b-acc  { border-top-color: var(--accent); }
.stat.b-crit .v, .stat.b-acc .v { color: var(--ink); }

/* ---------- ostatné komponenty ---------- */
.bar { height: 4px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); }
.bar > i.ok { background: var(--ok); } .bar > i.warn { background: var(--warn); } .bar > i.crit { background: var(--crit); }

.steps { display: flex; gap: 0; flex-wrap: wrap; }
.steps .st {
  flex: 1 1 0; min-width: 100px; padding: 12px 12px 12px 0; border-top: 2px solid var(--line);
  font-size: 10px; color: var(--ink-3); line-height: 1.4; text-transform: uppercase; letter-spacing: .12em;
}
.steps .st b { display: block; font-size: 11px; color: var(--ink-2); font-weight: 700; letter-spacing: .12em; margin-bottom: 3px; }
.steps .st.done { border-top-color: var(--ok); }
.steps .st.done b { color: var(--ok); }
.steps .st.now  { border-top-color: var(--accent); }
.steps .st.now b { color: var(--accent-txt); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; padding-top: 2px; }
.kv dd { margin: 0; font-weight: 400; }

/* Dočasný pás „na tejto stránke zatiaľ pracujeme" (zadanie 20. 8. 2026).
   Sedí hneď pod hlavičkou, cez celú šírku, aby ho návštevník nemohol
   prehliadnuť — a aby sa dal odstrániť jedným riadkom, keď obsah dodajú. */
.wip { background: var(--warn, #b45309); color: #fff; padding: 12px 0; font-size: 14px; }
.wip .wrap { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.wip-t { font-weight: 600; }
.wip-p { color: rgba(255,255,255,.92); }
.wip a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); text-decoration: none; }
.wip a:hover { border-bottom-color: #fff; }

.note { border-left: 3px solid var(--accent); background: transparent; color: var(--ink-2); padding: 4px 0 4px 18px; font-size: 13.5px; }
.note-warn { border-color: var(--warn); }
.note-crit { border-color: var(--crit); }
.note-ok   { border-color: var(--ok); }
.note b { color: var(--ink); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 18px 12px 0; margin-right: 22px;
  font: inherit; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabpane { display: none; } .tabpane.on { display: block; }

.side-nav { position: sticky; top: 82px; align-self: start; }
.side-nav a {
  display: block; padding: 8px 0 8px 14px; font-size: 10.5px; color: var(--ink-3);
  border-left: 2px solid var(--line-2); text-transform: uppercase; letter-spacing: .13em; font-weight: 700;
}
.side-nav a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.side-nav a.on { color: var(--ink); border-left-color: var(--accent); }
.side-nav .sn-h { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 18px 0 6px 14px; }

pre.code {
  background: var(--surface-2); border: 0; border-left: 2px solid var(--ink);
  padding: 20px 24px; overflow-x: auto; font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-2); margin: 0;
}
pre.code b { color: var(--ink); font-weight: 700; }
pre.code i { color: var(--ink-3); font-style: normal; }

.ascii {
  background: var(--surface-2); border: 0; border-left: 2px solid var(--ink);
  padding: 20px 24px; overflow-x: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  color: var(--ink-2); white-space: pre;
}

/* ---------- hero ---------- */
.hero { background: #fff; border-bottom: 1px solid var(--line-2); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 64px; align-items: center; padding: 84px 0 76px; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; padding: 48px 0; gap: 36px; } }
.hero h1 strong { font-weight: 700; }

/* pás aktualít pod hero */
.newsband { border-bottom: 1px solid var(--line-2); background: #fff; }
.newsband .nb-in { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
@media (max-width: 860px) { .newsband .nb-in { grid-template-columns: 1fr; } }
.newsband .nb {
  padding: 26px 32px 26px 0; border-right: 1px solid var(--line-2); position: relative;
}
.newsband .nb:first-child { padding-left: 0; }
.newsband .nb:not(:first-child) { padding-left: 32px; }
.newsband .nb:last-child { border-right: 0; }
.newsband .nb .d { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.newsband .nb .t { font-size: 16px; font-weight: 700; margin: 8px 0 6px; line-height: 1.3; }
.newsband .nb .p { font-size: 13px; color: var(--ink-2); margin: 0; }
.newsband .nb .go { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent-txt); margin-top: 10px; display: inline-block; }
.newsband .nb:hover .t { color: var(--accent-txt); }
@media (max-width: 860px) {
  .newsband .nb { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 20px 0 !important; }
  .newsband .nb:last-child { border-bottom: 0; }
}

/* ---------- O nás: portfóliové dlaždice ---------- */
.pf {
  display: block; padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-2); color: var(--ink); position: relative; transition: .15s;
}
.pf:not(:first-child) { padding-left: 28px; }
.pf:hover { background: #fff; color: var(--ink); }
.pf:hover .pf-k { color: var(--accent-txt); }
.pf-k { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .1em; }
.pf-t { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 10px; line-height: 1.35; }
.pf-d { font-size: 13px; color: var(--ink-2); margin: 0; }
@media (max-width: 700px) { .pf { border-right: 0; padding: 22px 0 !important; } }

/* ---------- O nás: tmavý citátový blok ---------- */
.quote { background: var(--ink); color: #fff; padding: 40px; position: relative; overflow: hidden; }
.quote > .q-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.quote::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); z-index: 3; }
.quote::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,10,48,.58) 0%, rgba(5,10,48,.86) 55%, rgba(11,15,25,.94) 100%);
}
.quote > *:not(.q-bg) { position: relative; z-index: 2; }
.quote .q-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.quote blockquote { margin: 22px 0 0; font-size: 22px; font-weight: 300; line-height: 1.4; letter-spacing: -.01em; }
.quote .q-meta { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); line-height: 1.6; }

/* ---------- tmavá sekcia: formulár ---------- */
.frm input, .frm select, .frm textarea { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.frm input:focus, .frm select:focus, .frm textarea:focus { border-color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.frm .fld > span { color: rgba(255,255,255,.5); }
/* Súhlas v tmavom formulári (O nás) — inak by bol tmavý text na tmavom. */
.frm .suhlas span { color: rgba(255,255,255,.72); }
.frm .suhlas a { color: #fff; }
.frm select option { color: var(--ink); }

/* ================================================================
   Obrázky — pevné pomery strán (bez poskakovania layoutu),
   object-fit: cover (bez deformácie), tlmená farebnosť do palety
   ================================================================ */
.fig { position: relative; overflow: hidden; background: var(--surface-3); display: block; }
.fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fig-16-10 { aspect-ratio: 16 / 10; }
.fig-3-2   { aspect-ratio: 3 / 2; }
.fig-8-5   { aspect-ratio: 8 / 5; }
/* Náhľad videa — YouTube dáva náhľady v 16:9, iný pomer by ich orezal. */
.fig-16-9  { aspect-ratio: 16 / 9; }
.fig-cap { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }

/* obrázok zarovnaný do hlavy karty (prekryje jej vnútorný odsadenie) */
.card > .fig:first-child { margin: -24px -24px 20px; }

/* celoplošný obrazový pás s tmavým prekrytím */
.band { position: relative; overflow: hidden; background: var(--ink); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,10,48,.93) 0%, rgba(5,10,48,.8) 42%, rgba(5,10,48,.28) 100%);
}
.band-in { position: relative; z-index: 2; color: #fff; padding: 88px 0; max-width: 640px; }
.band-in h2 { color: #fff; }
.band-in p { color: rgba(255,255,255,.78); }
/* Popiska na `.band` leží na tmavom prekrytí (`.band::after`) a je
   čitateľná. Na holom `.fig` — pás s budovou na stránke O nás — žiadne
   prekrytie nie je a biely text skončil na svetlej betónovej stene
   a oblohe: nameraných 1,18 : 1, čiže prakticky neviditeľný. Tieň textu
   na to nestačí. Preto tam popiska dostane vlastné tmavé pozadie: aj nad
   úplne bielym miestom fotky dáva 7,45 : 1. */
.fig > .band-cap {
  background: rgba(5,10,48,.72); padding: 6px 10px; border-radius: var(--r-sm);
  right: 14px; bottom: 12px;
}
.band-cap {
  position: absolute; right: 20px; bottom: 14px; z-index: 2;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
@media (max-width: 860px) {
  .band::after { background: linear-gradient(180deg, rgba(5,10,48,.88), rgba(11,15,25,.94)); }
  .band-in { padding: 56px 0; }
}

/* mriežka metód s fotografiami */
.mets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.met-c { display: block; color: var(--ink); }
.met-c .fig { margin-bottom: 12px; }
.met-c:hover .fig img { transform: scale(1.03); }
.met-c .fig img { transition: transform .4s ease; }
.met-k { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.met-n { font-size: 12.5px; color: var(--ink-2); }
.met-s { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* obrázok v páse aktualít */
.newsband .nb .fig { margin-bottom: 14px; }

/* ---------- QR ---------- */
.qr { image-rendering: pixelated; background: #fff; }

/* ---------- mapa chýb vzorky ---------- */
.smap { position: relative; background: var(--surface-2); border: 1px solid var(--line-2); }
.smap .mk {
  position: absolute; transform: translate(-50%,-50%); border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; font-family: var(--mono);
}
.mk-true  { width: 34px; height: 34px; border: 1px dashed var(--ink-3); color: var(--ink-3);
            background: rgba(5,10,48,.04); font-size: 9px; align-items: flex-start; padding-top: 1px; }
.mk-hit   { width: 18px; height: 18px; border: 2px solid var(--ok);    color: #fff; background: var(--ok); z-index: 2; }
.mk-miss  { width: 34px; height: 34px; border: 2px solid var(--crit);  color: var(--crit); background: var(--crit-soft); font-weight: 800; }
.mk-false { width: 20px; height: 20px; border: 2px solid var(--warn);  color: var(--warn); background: var(--warn-soft); z-index: 2; }

/* ---------- päta ---------- */
.ftr { border-top: 1px solid var(--ink); background: #fff; margin-top: 0; }

/* ---------- mapa obsahu v päte (15. 9. 2026) ----------
   Sprístupňuje dvadsať stránok, ktoré nie sú v hlavnej ponuke. Stĺpce sa
   pri zúžení skladajú (4 → 2 → 1), nikdy sa nescrollujú do strany.
   Odkazy majú zámerne min-height 24 px — WCAG 2.2 · 2.5.8; v päte sú
   vedľa seba desiatky odkazov a na dotyk sa inak trafiť nedajú.
   Nadpisy stĺpcov NIE SÚ .tiny-cap: tá má --ink-3, čo je 3,63 : 1 a na
   AA (4,5 : 1) nestačí. */
.ftr-mapa { border-bottom: 1px solid var(--line-2); padding: 34px 0 30px; }
.fm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.fm-col { min-width: 0; }
.fm-h {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.fm-ul { list-style: none; margin: 0; padding: 0; }
.fm-ul li { margin: 0; }
.ftr-mapa a {
  display: flex; align-items: center; min-height: 24px; padding: 2px 0; position: relative;
  font-size: 12px; line-height: 1.35; color: var(--ink-2);
  border-bottom: 0; text-decoration: none;
}
.ftr-mapa a:hover { color: var(--ink); text-decoration: underline; }
/* Stránka, na ktorej návštevník stojí — v mape 35 odkazov inak splynie.
   Čítačka to vie z `aria-current="page"`, oko z hrúbky a zvislej čiarky. */
.ftr-mapa a.fm-tu { color: var(--ink); font-weight: 700; }
.fm-tu::before { content: ""; position: absolute; left: -9px; top: 3px; bottom: 3px; width: 2px; background: var(--accent); }
.fm-kod {
  flex: none; min-width: 34px; margin-right: 8px;
  font-size: 10.5px; letter-spacing: .1em; color: var(--ink); font-weight: 700;
}
@media (max-width: 980px) { .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fm-grid { grid-template-columns: 1fr; gap: 22px; } }
.ftr-in { max-width: var(--maxw); margin: 0 auto; padding: 32px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.ftr-logo { height: 26px; width: auto; display: block; flex: none; opacity: .9; }
/* Telefón, e-mail a právne odkazy mali 13 px výšky na všetkých 35
   stránkach (WCAG 2.2 · 2.5.8 žiada 24). Právne odkazy sa na telefóne
   lámu do viacerých riadkov, preto tam ide aj `line-height` — inak by
   sa zväčšené ciele susedných riadkov prekrývali, čo je horšie než
   malý cieľ. */
.ftr-in a { display: inline-block; padding: 5px 0; min-height: 24px; box-sizing: border-box; }
.ftr-pravne { line-height: 2.1; }
/* Aktuálna právna stránka v pätičkovom riadku — rovnaký spôsob označenia
   ako v ponuke: strojovo `aria-current`, oku hrúbka a tmavšia farba. */
.ftr-pravne a.on { color: var(--ink); font-weight: 700; }
.ftr-in b { color: var(--ink); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- preskočiť na obsah ----------
   Meranie 15. 9. 2026: na každej verejnej stránke viedlo od začiatku po
   prvý prvok v <main> 18 stôp tabulátorom (pás prototypu, logo, sedem
   položiek ponuky, tri jazyky, dve siete, dve rýchle stránky). Kto web
   ovláda klávesnicou alebo čítačkou, prechádzal celú hlavičku znova pri
   každom prekliku. WCAG 2.4.1 Bypass Blocks je úroveň A.

   Odkaz je nad obrazovkou a zjaví sa až pri zameraní — `top`, nie
   `display:none` ani `visibility:hidden`, lebo skryté prvky sa nedajú
   zamerať a odkaz by sa nikdy neukázal. Hlavička je lepivá so
   `z-index:60`, preto je tu 200. */
.preskoc {
  position: fixed; top: -80px; left: 12px; z-index: 200;
  display: inline-block; padding: 10px 18px; min-height: 24px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  border-bottom: 0; text-decoration: none; border-radius: 0 0 10px 10px;
  transition: top .12s ease;
}
.preskoc:focus { top: 0; outline: 3px solid var(--accent); outline-offset: -3px; }
/* Po skoku dostane zameranie samotný <main>. Obrys okolo celej stránky
   nič nehovorí (zamerané je všetko, čo vidno), preto sa nekreslí —
   miesto, kde návštevník je, ukazuje posun stránky. */
main[tabindex="-1"]:focus { outline: none; }
/* Lepivá hlavička má 62 px; bez tohto by skok schoval prvý riadok obsahu
   pod ňu. Platí aj pre kotvy na dlhých stránkach. */
main { scroll-margin-top: 78px; }

/* ---------- prototypový pruh ---------- */
.proto { background: var(--ink); border-bottom: 0; color: rgba(255,255,255,.62); font-size: 10.5px; font-weight: 400; }
.proto .wrap { padding-top: 2px; padding-bottom: 2px; display: flex; gap: 14px; align-items: center; }
.proto .pill { flex: none; background: var(--accent); color: var(--ink); border-color: var(--accent); }
.proto .pill::before { display: none; }
.proto span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pás je navy a odkazy dedili globálnu farbu odkazu — tiež navy, takže
   z troch odkazov na živé zóny bolo vidieť len podčiarknutie (17. 8. 2026). */
/* WCAG 2.2 · 2.5.8 žiada aspoň 24 × 24 px. Odkazy na živé zóny mali
   13 px, teda výšku riadku textu, a to na VŠETKÝCH stránkach — pás je
   prvá vec na webe a na dotyk sa do nich trafiť nedalo. `inline-block`
   s odsadením dvíha aj riadkové boxy, takže pri zalomení na telefóne sa
   ciele ani neprekrývajú. Vodorovné odsadenie hlavičku nerozťahuje:
   vyrovnáva ho menšie odsadenie pásu. */
.proto a {
  display: inline-block; padding: 6px 3px; min-height: 24px; box-sizing: border-box;
  color: #fff; text-decoration-color: rgba(255,255,255,.45);
}
.proto a:hover { color: var(--accent); }
@media (max-width: 860px) { .proto span:last-child { white-space: normal; } }

.hl { color: var(--accent-txt); }
ul.tick { list-style: none; padding: 0; margin: 0; }
ul.tick li { padding-left: 24px; position: relative; margin-bottom: 9px; font-size: 13.5px; }
ul.tick li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: var(--accent); }
ul.dash { list-style: none; padding: 0; margin: 0; }
ul.dash li { padding-left: 24px; position: relative; margin-bottom: 8px; }
ul.dash li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--line); }

/* ================================================================
   Analytika relácií — session replay + heatmapa
   ================================================================ */
.an-gate { max-width: 380px; margin: 12vh auto 0; }
.an-gate input { text-align: center; font-family: var(--mono); font-size: 22px; letter-spacing: .3em; }

.an-stage { position: relative; background: var(--night); border: 1px solid var(--ink); overflow: hidden; }
.an-stage canvas { display: block; width: 100%; height: auto; }
.an-cursor {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.5); transition: none;
  mix-blend-mode: difference; z-index: 3;
}
.an-cursor.click { animation: an-pulse .4s ease-out; }
@keyframes an-pulse { from { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(16,185,129,.6); } to { box-shadow: 0 0 0 2px rgba(0,0,0,.5); } }
.an-pathlbl {
  position: absolute; left: 12px; top: 12px; z-index: 3; font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,.85); background: rgba(5,10,48,.72); padding: 4px 9px; letter-spacing: .04em;
}
.an-vplabel { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }

.an-ctrl { display: flex; align-items: center; gap: 14px; padding: 14px 0; flex-wrap: wrap; }
.an-play { width: 42px; height: 42px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer; font-size: 15px; flex: none; }
.an-play:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.an-scrub { flex: 1 1 240px; appearance: none; height: 4px; background: var(--surface-3); cursor: pointer; }
.an-scrub::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--accent); cursor: pointer; }
.an-scrub::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border: 0; cursor: pointer; }
.an-time { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 92px; text-align: right; }
.an-speed button { border: 1px solid var(--line); background: #fff; font: inherit; font-size: 11px; font-weight: 700;
  padding: 5px 9px; cursor: pointer; }
.an-speed button + button { border-left: 0; }
.an-speed button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.an-legend { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-3); }
.an-ramp { width: 160px; height: 10px; border: 1px solid var(--line);
  background: linear-gradient(90deg, #233dff, #06b6d4, #10b981, #eab308, #E31937); }

.an-evlog { max-height: 420px; overflow-y: auto; font-family: var(--mono); font-size: 11.5px; }
.an-evlog .r { display: grid; grid-template-columns: 58px 74px 1fr; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--line-2); cursor: pointer; }
.an-evlog .r:hover { background: var(--surface-2); }
.an-evlog .r.on { background: var(--accent-soft); }
.an-evlog .r .tt { color: var(--ink-3); }
.an-evlog .r .ty { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.an-evlog .r .ci { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.an-sess { cursor: pointer; }
.an-sess.on td { background: var(--accent-soft); }

/* ================================================================
   Dialóg — žiadosť o cenovú ponuku
   ================================================================ */
.cp-dlg { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; }
.cp-dlg::backdrop { background: rgba(5,10,48,.66); backdrop-filter: blur(2px); }
.cp-in {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  background: #fff; border: 1px solid var(--ink); display: flex; flex-direction: column;
  box-shadow: 0 40px 90px rgba(5,10,48,.34);
}
.cp-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 28px; background: var(--ink); color: #fff; flex: none; }
.cp-hd-t { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.cp-hd-s { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 8px; max-width: 54ch; line-height: 1.5; }
.cp-x { background: none; border: 0; color: rgba(255,255,255,.6); font-size: 15px; cursor: pointer; line-height: 1; padding: 0 2px; }
.cp-x:hover { color: #fff; }
.cp-bd { padding: 28px; overflow-y: auto; }
.cp-bd .panel { margin-bottom: 24px; }
.cp-bd .fld { margin-bottom: 16px; }
.cp-dlg .choices { border-top: 0; }
.cp-dlg .choice { border: 1px solid var(--line-2); }
.cp-ref { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .04em; margin-top: 10px; }
.cp-steps { margin: 12px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.cp-steps li { margin-bottom: 8px; }
.cp-ok { padding: 8px 0 4px; }
@media (max-width: 700px) { .cp-hd, .cp-bd { padding: 18px; } }

/* ================================================================
   Asistent webu — vpravo dole
   ================================================================ */
.ag { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (max-width: 700px) { .ag { right: 12px; bottom: 12px; left: 12px; align-items: stretch; } }

.ag-fab {
  order: 2; display: inline-flex; align-items: center; gap: 10px; align-self: flex-end;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  padding: 14px 20px; font: inherit; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; transition: .15s;
}
.ag-fab:hover { background: var(--accent); color: var(--ink); }
.ag-fab-i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.ag-fab:hover .ag-fab-i { background: #fff; }
.ag.on .ag-fab { background: var(--accent); color: var(--ink); }
.ag.on .ag-fab-i { background: #fff; }

.ag-panel {
  order: 1; width: 390px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid var(--ink); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(5,10,48,.2);
}
/* musí prebiť display:flex vyššie — inak sa panel zobrazí aj s atribútom hidden */
.ag-panel[hidden] { display: none; }
@media (max-width: 700px) { .ag-panel { width: auto; height: 70vh; } }

.ag-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: var(--ink); color: #fff; flex: none; }
.ag-hd-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.ag-hd-s { font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: 4px; letter-spacing: .04em; }
.ag-x { background: none; border: 0; color: rgba(255,255,255,.6); font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; }
.ag-x:hover { color: #fff; }

.ag-log { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ag-msg { max-width: 100%; font-size: 13px; line-height: 1.55; }
.ag-a { border-left: 2px solid var(--accent); padding-left: 14px; color: var(--ink-2); }
.ag-a .ag-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--ink); margin-bottom: 6px; }
.ag-a b { color: var(--ink); }
.ag-a .dim { color: var(--ink-3); }
.ag-a ul.dash li { margin-bottom: 4px; font-size: 12.5px; }
.ag-u { align-self: flex-end; background: var(--surface-2); padding: 9px 13px; max-width: 85%; color: var(--ink); }
.ag-link { display: inline-block; margin-top: 9px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent-txt); border-bottom: 0; }
.ag-link:hover { color: var(--ink); }

.ag-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-sug button {
  background: #fff; border: 1px solid var(--line); color: var(--ink-2); font: inherit; font-size: 11.5px;
  padding: 6px 10px; cursor: pointer; text-align: left;
}
.ag-sug button:hover { border-color: var(--ink); color: var(--ink); }

.ag-in { display: flex; gap: 0; border-top: 1px solid var(--line); flex: none; }
.ag-in input { border: 0; padding: 14px 16px; font-size: 13px; flex: 1 1 auto; }
.ag-in input:focus { outline: 0; box-shadow: none; }
.ag-in button {
  border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; padding: 0 18px; cursor: pointer;
}
.ag-in button:hover { background: var(--accent); color: var(--ink); }
.ag-foot { flex: none; padding: 8px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

@media print { .hdr, .ftr, .proto, .ag { display: none; } body { background: #fff; } }

/* ================================================================
   BRAND 2026 — vlastné grafické prvky značky
   (UV fluorescencia z PT/MT, lamely z písma loga, dark-mode kontrast)
   ================================================================ */

/* --- UV neónová linka: oddeľovač sekcií, evokuje indikáciu pod UV lampou --- */
.uvline { height: 2px; border: 0; margin: 0; background: var(--accent); position: relative; }
.uvline::after {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 8px;
  background: radial-gradient(ellipse at center, rgba(16,185,129,.55), rgba(16,185,129,0) 70%);
}
/* nepravidelná „trhlina" — linka s prerušeniami ako reálna indikácia */
.uvcrack {
  height: 2px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 60px, rgba(16,185,129,.15) 60px 72px,
    var(--accent) 72px 190px, rgba(16,185,129,.15) 190px 206px);
}

/* --- lamelové štruktúry: vrstvy materiálu prevzaté z písma loga --- */
.lamely {
  background-image: repeating-linear-gradient(180deg,
    rgba(5,10,48,.055) 0 3px, transparent 3px 7px);
}
.lamely-lt {
  background-image: repeating-linear-gradient(180deg,
    rgba(255,255,255,.07) 0 3px, transparent 3px 7px);
}

/* --- laboratórny dark mode: tmavá sekcia s neónovým akcentom --- */
.night {
  background: var(--night); color: rgba(255,255,255,.82); position: relative; overflow: hidden;
}
.night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, transparent 3px 8px);
  opacity: .5;
}
.night > * { position: relative; z-index: 1; }
.night h1, .night h2, .night h3, .night h4, .night b { color: #fff; }
.night h2::after { background: var(--accent); }
.night .lead, .night p { color: rgba(255,255,255,.74); }
/* .45 dávalo na navy podklade 4,44 : 1, teda tesne pod AA; .55 dáva 6,15 */
.night .eyebrow, .night .tiny-cap, .night .dim, .night .xs, .night .xs.dim { color: rgba(255,255,255,.55); }
.night .card, .night .panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.night .card.rule-top { background: transparent; border-top-color: var(--accent); }
.night table.tbl th { background: transparent; color: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.35); }
.night table.tbl td { border-bottom-color: rgba(255,255,255,.12); }
.night table.tbl tbody tr:hover { background: rgba(255,255,255,.04); }
.night .btn { border-color: rgba(255,255,255,.4); color: #fff; }
.night .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.night a { color: #fff; border-bottom-color: var(--accent); }
.night a:hover { color: var(--accent); }
.night .glow { color: var(--accent); text-shadow: 0 0 18px rgba(16,185,129,.55); }

/* ================================================================
   Interaktívna mriežka aplikácií a metód
   (vzor slovcert.sk/aplikacie — požiadavka klientky z 9. 8. 2026)
   ================================================================ */
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.appcell {
  background: #fff; border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  padding: 22px 18px 18px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 12px;
  min-height: 168px; position: relative; transition: background .15s, color .15s;
}
.appcell:hover { background: var(--surface-2); }
.appcell.on { background: var(--night); color: #fff; }
.appcell.on .ac-n { color: rgba(255,255,255,.72); }
.appcell.on .ac-s { color: var(--accent); }
.appcell.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent);
  box-shadow: 0 0 14px rgba(16,185,129,.85);
}
.appcell .ac-ico { height: 46px; display: flex; align-items: center; }
.appcell .ac-ico svg { height: 100%; width: auto; display: block; }
.ac-n { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.ac-s { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); margin-top: auto; }

/* detail vybranej dlaždice */
.appdet { border: 1px solid var(--line-2); border-top: 3px solid var(--accent); background: #fff; padding: 28px; }
.appdet .ad-h { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.appdet .ad-h svg { height: 54px; width: auto; flex: none; }

/* ================================================================
   Referencie — logá klientov a prípadové štúdie
   ================================================================ */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.logo-c {
  background: #fff; min-height: 96px; display: grid; place-items: center; padding: 16px;
  text-align: center; transition: background .15s;
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.logo-c:hover { background: var(--surface-2); }
.logo-w { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ink); line-height: 1.2; }
.logo-s { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

.cs { border-top: 2px solid var(--ink); padding-top: 20px; }
.cs .cs-k { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.cs .cs-t { font-size: 17px; font-weight: 700; margin: 10px 0 12px; line-height: 1.3; }
.cs .cs-res { border-left: 3px solid var(--accent); padding-left: 16px; margin-top: 16px; }
.cs .cs-res b { display: block; font-size: 22px; font-weight: 300; letter-spacing: -.01em; }

/* ================================================================
   Aktuality — výpis a článok
   ================================================================ */
.art { max-width: 78ch; }
.art p { font-size: 16px; line-height: 1.72; color: var(--ink-2); margin: 0 0 18px; }
.art h3 { margin: 34px 0 14px; font-size: 12.5px; }
.art ul { margin: 0 0 18px; padding-left: 22px; color: var(--ink-2); }
.art ul li { margin-bottom: 9px; line-height: 1.65; }
.art blockquote {
  margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
  font-size: 19px; font-weight: 300; line-height: 1.5; color: var(--ink);
}
.art-meta { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }

.nlist { border-top: 1px solid var(--line); }
.nrow {
  display: grid; grid-template-columns: 200px minmax(0,1fr) 130px; gap: 28px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.nrow:hover { background: var(--surface-2); }
.nrow:hover .nr-t { color: var(--accent-txt); }
.nr-t { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.nr-p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.nr-go { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent-txt); text-align: right; }
@media (max-width: 860px) { .nrow { grid-template-columns: 1fr; gap: 12px; } .nr-go { text-align: left; } }

/* štítok kategórie aktuality */
.ncat { display: inline-block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  padding: 3px 8px; border: 1px solid var(--line); color: var(--ink-2); }
.ncat.acc { border-color: var(--accent); color: var(--accent-txt); }

/* ================================================================
   Video / médiá
   ================================================================ */
.vid { position: relative; background: var(--night); aspect-ratio: 16/9; display: block; overflow: hidden; }
.vid video, .vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid picture { display: block; height: 100%; }
/* rám na výšku — pre záber z telefónu (478 × 850); v šírokom ráme by sa
   z neho orezali dve tretiny obrazu, takto sedí rám na materiál */
.vid-hoch { aspect-ratio: 478 / 850; width: 100%; }
/* aj popis pod videom drží šírku rámu, inak text prečnieva cez oba okraje */
.fig-hoch { width: min(360px, 100%); margin: 0 auto; }
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  background: linear-gradient(180deg, rgba(5,10,48,.28), rgba(5,10,48,.62));
  border: 0; cursor: pointer; color: #fff;
}
.vid-play i {
  width: 74px; height: 74px; border: 2px solid var(--accent); border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 26px rgba(16,185,129,.5); font-style: normal; font-size: 20px; padding-left: 5px;
  background: rgba(5,10,48,.5);
}
.vid-play span { display: block; margin-top: 14px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }

/* ================================================================
   Sociálne siete (YouTube, LinkedIn) — požiadavka klientky
   ================================================================ */
/* Tlačidlá sociálnych sietí. Každé nesie vlastnú farbu značky cez
   premennú `--soc` (LinkedIn #0A66C2, YouTube #FF0000) — v obryse a ikone,
   po nabehnutí kurzorom sa ňou tlačidlo vyplní. */
.soc { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.soc .soc-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px;
  border: 1px solid var(--soc, var(--line));
  border-bottom: 1px solid var(--soc, var(--line));   /* prebíja `.subnav a` */
  /* Text (a s ním ikona, tá je na currentColor) berie --soc-t — stmavenú
     značkovú farbu. Obrys ostáva na --soc: je to netextový prvok a stačí
     mu 3 : 1. YouTube #FF0000 má na bielej 4,0 : 1 a na 12,5 px text to
     nestačí; #CC0000 dáva 5,89 a ako YouTube sa stále číta. */
  color: var(--soc-t, var(--soc, var(--ink-2)));
  background: var(--surface); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; line-height: 1; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Vyplnené tlačidlo má biely text, takže výplň musí byť tiež --soc-t:
   biela na #FF0000 je 4,0 : 1, na #CC0000 je 5,89. */
.soc .soc-btn:hover, .soc .soc-btn:focus-visible {
  background: var(--soc-t, var(--soc, var(--accent))); color: #fff;
  border-color: var(--soc-t, var(--soc, var(--accent)));
}
.soc .soc-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.soc svg { width: 15px; height: 15px; fill: currentColor; display: block; flex: 0 0 auto; }
.soc-n { white-space: nowrap; }
/* Na tmavom podklade je obrys aj text biely, farba značky ostáva v ikone
   a naplno sa ukáže až pri nabehnutí — inak by sa červená na tmavej strácala. */
.night .soc .soc-btn { border-color: rgba(255,255,255,.28); color: #fff; background: transparent; }
.night .soc .soc-btn svg { fill: var(--soc, currentColor); }
.night .soc .soc-btn:hover, .night .soc .soc-btn:focus-visible {
  background: var(--soc-t, var(--soc, var(--accent)));
  border-color: var(--soc-t, var(--soc, var(--accent))); color: #fff;
}
.night .soc .soc-btn:hover svg { fill: #fff; }
/* V riadku rýchlych stránok stačí ikona — je to úzky pás a názvy by ho
   pretlačili. Plné tlačidlá s názvom sú v pätičke, kde je na ne miesto. */
.sn-soc .soc-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sn-soc .soc-btn { padding: 6px 9px; }
.sn-soc { flex: 0 0 auto; }

/* ================================================================
   Prihlasovanie na odborné semináre
   ================================================================ */
.sem { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); background: #fff; padding: 22px 24px; }
.sem.full { border-left-color: var(--crit); opacity: .78; }
.sem-d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.sem-t { font-size: 17px; font-weight: 700; margin: 8px 0 8px; line-height: 1.3; }
.sem-m { font-size: 12.5px; color: var(--ink-2); }
.sem-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sem-cap .bar { flex: 1 1 auto; }

/* Oprávnenia a schválenia. Riadok, ku ktorému máme sken, je <details> a po
   rozkliknutí ukáže sken dokladu (zadanie 20. 8. 2026). Zoznam je
   preto jednostĺpcový — rozbalený sken by v úzkom stĺpci mriežky nemal kam
   rásť a riadky vedľa seba by pri otvorení poskakovali. */
.oprlist { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.certrow { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 14px; align-items: flex-start; }
.certrow .cr-i { width: 8px; height: 8px; margin-top: 7px; flex: none; background: var(--accent); box-shadow: 0 0 10px rgba(16,185,129,.9); }
.certrow .cr-t { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.certrow .cr-s { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.certrow .cr-n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }

/* rozklikávací riadok so skenom */
details.certrow { display: block; padding-right: 0; }
details.certrow > summary { list-style: none; cursor: pointer; display: flex; gap: 14px;
        align-items: flex-start; padding-right: 20px; }
details.certrow > summary::-webkit-details-marker { display: none; }
details.certrow > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
details.certrow > summary:hover .cr-t { color: var(--accent-ink, var(--ink)); text-decoration: underline;
        text-underline-offset: 3px; }
.certrow .cr-x { margin-left: auto; flex: none; align-self: center; font-size: 11px;
        letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.certrow .cr-x::after { content: ' +'; }
details.certrow[open] > summary .cr-x::after { content: ' −'; }
.cr-doc { padding: 16px 20px 6px 22px; }
/* Doklad je na výšku (A4) — bez stropu by rozbalený riadok vytlačil zvyšok
   zoznamu o celú obrazovku nižšie. Čitateľná plná veľkosť je na odkaz. */
.cr-doc img { display: block; width: auto; max-width: min(100%, 460px); max-height: 620px;
        height: auto; border: 1px solid var(--line); background: #fff; }
.cr-doc a { border-bottom: 0; }
@media (max-width: 640px) { .certrow .cr-x { display: none; } .cr-doc { padding-left: 0; } }

/* oddeľovač v sekundárnej navigácii + sociálne ikony v jej pravej časti */
.subnav nav { align-items: center; }
.sn-sep { width: 1px; height: 16px; background: var(--line); margin: 0 26px 0 -8px; flex: none; align-self: center; }
.sn-soc { flex: none; padding: 6px 0 6px 20px; }
/* Tlačidlá sietí sú od 27. 8. 2026 farebné a `.soc-btn` si šírku určuje
   obsahom — pevných 26 px ich tu predtým stláčalo a orezávalo. */
.sn-soc .soc-btn { height: 28px; }
.sn-soc svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .subnav .spacer, .sn-soc { display: none; } .sn-sep { margin: 0 18px 0 -6px; } }

/* ================================================================
   MARQUEE — plynulý nekonečný pás zastúpených značiek
   Podklad: B. Ščasná, 18. 8. 2026 (poslala video aj vzorový kód).
   Položky sú v pruhu ZDVOJENÉ a posun ide presne o polovicu šírky, takže
   pás sa napája bez skoku. Okraje miznú maskou, aby text nekončil odseknutý.
   Pri prejdení kurzorom a pri obmedzenom pohybe sa pás zastaví — inak by sa
   nedal prečítať a pri `prefers-reduced-motion` by bol na obtiaž.
   ================================================================ */
.mq-sec { padding: 46px 0 52px; border-block: 1px solid var(--line-2); background: var(--surface-2); }
.mq { margin-top: 22px; overflow: hidden; position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; width: max-content; gap: 0;
            animation: mq-posun 38s linear infinite; will-change: transform; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
.mq-i { flex: none; padding: 0 34px; font-size: 19px; font-weight: 300; letter-spacing: .02em;
        color: var(--ink-2); white-space: nowrap; position: relative; }
.mq-i::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
               width: 1px; height: 15px; background: var(--line); }
/* Značky sú odkazy na weby výrobcov — v páse ostávajú opticky rovnaké,
   podčiarknu sa a stmavnú až pri prejdení kurzorom alebo tabulátorom. */
.mq-a { display: block; text-decoration: none; border-bottom: 0; color: var(--ink-2);
        transition: color .18s ease; }
.mq-a:hover, .mq-a:focus-visible { color: var(--ink); text-decoration: underline;
        text-underline-offset: 5px; text-decoration-thickness: 1px; }
.mq-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* to isté v tmavom páse na Produktoch */
/* Štítok ako odkaz mal 23 px — jediný pixel pod hranicou. Platí pre
   všetky štítky, ktoré sú odkazom alebo tlačidlom, nielen .pill-link. */
a.pill, button.pill { display: inline-flex; align-items: center; min-height: 24px; }
.pill-link { display: inline-flex; align-items: center; min-height: 24px;
             text-decoration: none; border-bottom: 0; transition: background .18s ease; }
.pill-link:hover, .pill-link:focus-visible { background: rgba(255,255,255,.14); }
.pill-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes mq-posun { from { transform: translate3d(0, 0, 0); }
                      to   { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .mq { -webkit-mask-image: none; mask-image: none; }
  .mq-i { padding: 6px 22px; }
}

/* ================================================================
   ROZKLIKNUTEĽNÝ ČLÁNOK — nadpis s otáznikom, po kliknutí text
   Podklad: B. Ščasná, 18. 8. 2026. Postavené na <details>, takže to funguje
   aj bez JavaScriptu a čítačka to ohlási ako rozbaľovací prvok.
   ================================================================ */
.rozklik { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.rozklik > summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0;
                     position: relative; display: block; }
.rozklik > summary::-webkit-details-marker { display: none; }
.rk-q { display: block; font-size: clamp(21px, 3vw, 30px); font-weight: 300;
        letter-spacing: -.01em; color: var(--ink); }
.rk-h { display: block; margin-top: 7px; font-size: 13px; color: var(--ink-3); }
.rozklik > summary::after { content: '+'; position: absolute; right: 4px; top: 26px;
                            font-size: 26px; font-weight: 300; color: var(--accent-txt);
                            line-height: 1; transition: transform .18s ease; }
.rozklik[open] > summary::after { content: '–'; }
.rozklik > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rk-body { padding: 0 0 26px; max-width: 68ch; }
.rk-body h2 { font-size: 17px; font-weight: 600; letter-spacing: .01em; }

/* ---------------- Kontakt a Školenia ---------------- */
/* Telefón a e-mail sú vždy samostatný cieľ, nie odkaz v texte vety —
   na Kontakte, v kartách stredísk aj v päte mali 14 až 17 px výšky.
   Odkaz vnútri vety je z WCAG 2.2 · 2.5.8 výslovne vyňatý („Inline“),
   preto sa tu chytáme protokolu a nie triedy: `mailto:` a `tel:` sú
   spoľahlivý znak toho, že ide o samostatný cieľ. */
a[href^="mailto:"], a[href^="tel:"] {
  display: inline-block; padding: 4px 0; min-height: 24px;
  box-sizing: border-box; vertical-align: middle;
}
/* kód metódy v porovnávacej tabuľke — samotné „VT“ malo 17 × 16 px */
.md-kod { display: inline-block; padding: 4px 6px; margin-left: -6px; min-width: 24px; box-sizing: border-box; }

.kt-tel { display: inline-block; padding: 2px 0; min-height: 24px; box-sizing: border-box;
          font-size: 20px; font-weight: 300; letter-spacing: .01em; border-bottom: 0; }
.kt-tel:hover { color: var(--accent-txt); }
.kt-qr { display: flex; gap: 18px; margin-top: 16px; }
.kt-qr > div { text-align: center; }
.qr { width: 96px; height: 96px; }
.qr-lg { width: 148px; height: 148px; }
.qr svg { display: block; width: 100%; height: 100%; }
.kt-tbl th { width: 34%; text-align: left; color: var(--ink-3); font-weight: 600;
             text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.kt-tbl td, .kt-tbl th { padding: 9px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }

.claim { font-size: clamp(15px, 2vw, 19px); font-weight: 300; font-style: italic;
         color: var(--ink-2); max-width: 58ch; padding-left: 16px;
         border-left: 3px solid var(--accent); }
.sk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--line-2); }
.sk-li { background: var(--surface); padding: 15px 18px; font-size: 14px; line-height: 1.5;
         position: relative; padding-left: 34px; }
.sk-li::before { content: ''; position: absolute; left: 18px; top: 21px; width: 7px; height: 7px;
                 background: var(--accent); }

/* Video na začiatku Produktov — presunuté z hero (B. Ščasná, 18. 8. 2026). */

/* Podradená dlaždica v mriežke metód — technika pod metódou (UT PA pod UT). */
.appcell-sub { background: var(--surface-2); }
.appcell-sub .ac-n { font-size: 14px; }
.ac-parent { position: absolute; top: 10px; left: 12px; font-size: 10px; font-weight: 700;
             letter-spacing: .12em; color: var(--ink-3); }
.appcell-sub { position: relative; }

/* ================================================================
   KALENDÁR ŠKOLENÍ — matica metóda × týždeň
   Podklad: „Kalendár školení_2026_final.xlsx" (B. Ščasná). Široká tabuľka,
   ktorá na úzkom displeji scrolluje v svojom kontajneri (telo nikdy vodorovne).
   ================================================================ */
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.kal-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px;
              background: #fff; -webkit-overflow-scrolling: touch; }
.kal-tbl { border-collapse: collapse; font-size: 12px; min-width: 900px; width: 100%; }
.kal-tbl th, .kal-tbl td { border: 1px solid var(--line-2); text-align: center; }
.kal-tbl thead th { position: sticky; top: 0; background: #fff; z-index: 2;
                    padding: 6px 3px; vertical-align: bottom; }
.kal-tw { min-width: 34px; }
.kal-tw .kal-c { display: block; font-weight: 700; font-size: 12px; color: var(--ink); }
.kal-tw .kal-d { display: block; font-size: 8.5px; color: var(--ink-3); white-space: nowrap;
                 transform: rotate(-0deg); }
.kal-m { min-width: 42px; text-align: left; padding: 6px 8px; font-weight: 800;
         background: var(--surface-2); position: sticky; left: 0; z-index: 1; font-size: 12px; }
.kal-s { min-width: 96px; text-align: left; padding: 6px 10px; color: var(--ink-2);
         background: #fff; position: sticky; left: 42px; z-index: 1; white-space: nowrap; }
.kal-tbl tbody tr.kal-newm th, .kal-tbl tbody tr.kal-newm td { border-top: 2px solid var(--line); }
.kal-x { background: #fff; }
.kal-cell { font-weight: 700; color: #06306b; }
.kal-b { background: #cfe0fb; }              /* počet dní */
.kal-ms { background: #cfe0fb; color: #06306b; font-size: 10.5px; }
.kal-dop { background: repeating-linear-gradient(45deg,#f4f6fb,#f4f6fb 6px,#eef1fb 6px,#eef1fb 12px);
           color: var(--ink-3); font-size: 11px; letter-spacing: .04em; }
.kal-leg { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 12px;
           color: var(--ink-2); }
.kal-leg .kal-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px;
                   vertical-align: -2px; margin-right: 6px; border: 1px solid var(--line); }
.kal-leg .kal-b { background: #cfe0fb; }
.kal-leg .kal-ms { background: #cfe0fb; }
.kal-leg .kal-dop { background: repeating-linear-gradient(45deg,#f4f6fb,#f4f6fb 4px,#eef1fb 4px,#eef1fb 8px); }
.kal-methods { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; }
.kal-mrow { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px;
            background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.kal-mrow b { flex: 0 0 42px; color: var(--accent-txt); }
.kal-mrow span { color: var(--ink-2); font-size: 13px; }
@media (max-width: 720px) { .wrap-wide { padding: 0 12px; } }
.kal-klik { cursor: pointer; }
.kal-klik:hover { outline: 2px solid var(--accent); outline-offset: -2px; filter: brightness(.96); }
.kal-klik:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ================================================================
   Sekcia NDT metódy (/metody/)
   Dlaždica metódy je odkaz — dedí farbu textu, aby nadpis nezmodral,
   a pri prejdení myšou sa dvíha len linka nad kartou. Tým sa drží
   rovnaký pokoj ako u ostatných kariet na webe.
   ================================================================ */
.md-cell { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.md-cell:hover { border-top-color: var(--accent); transform: translateY(-2px); }
.md-cell:hover b { color: var(--accent-txt); }
.md-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ================================================================
   Mapy prevádzok (/kontakt/)
   Mapa je SVG kreslené v prehliadači z dát v `mapa-data.js`, takže jej
   farby patria sem — nie do obrázka. Držia sa tlmenej palety webu: papier,
   šedé budovy, biele cesty s tenkým lemom. Jediná sýta farba je akcentový
   špendlík, aby oko našlo prevádzku skôr než čokoľvek iné.
   ================================================================ */
.mp-hlava { align-items: center; grid-template-columns: minmax(0,1fr) 460px; }   /* obrys Slovenska je nízky — bez centrovania
                                        zostane vedľa textu prázdny pás */
.mp-krajina-box { display: flex; justify-content: flex-end; }
.mp-krajina { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.mp-kobrys { fill: var(--surface-2); stroke: var(--line); stroke-width: 3; }
.mp-kpin { cursor: pointer; }
.mp-kpin-halo { fill: var(--accent); opacity: .16; transition: opacity .15s, r .15s; }
.mp-kpin-bod  { fill: var(--accent-ink); stroke: #fff; stroke-width: 3.5; }
.mp-kpin-txt  { fill: var(--ink-2); font-size: 30px; font-weight: 600; }
.mp-kpin:hover .mp-kpin-halo, .mp-kpin:focus-visible .mp-kpin-halo { opacity: .34; }
.mp-kpin:hover .mp-kpin-txt { fill: var(--accent-txt); }
.mp-kpin:focus-visible { outline: none; }
.mp-kpin:focus-visible .mp-kpin-bod { stroke: var(--accent-txt); }

.mp-karta { margin: 0; }
.mp-ramik { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
            aspect-ratio: 3 / 2; background: var(--surface-2); }
.mp-svg { display: block; width: 100%; height: 100%; }
.mp-podklad   { fill: #f2f1ec; }
.mp-zelen     { fill: #e2ecdc; }
.mp-voda      { fill: #cfe0ee; }                       /* plochy: jazerá, zdrže */
.mp-rieka     { fill: none; stroke: #cfe0ee; stroke-width: 9; stroke-linejoin: round;
                stroke-linecap: round; }                /* toky sú v OSM čiary, nie plochy */
.mp-potok     { fill: none; stroke: #d7e5f0; stroke-width: 4; stroke-linejoin: round;
                stroke-linecap: round; }
.mp-budova    { fill: #dedbd3; stroke: #cdc9bf; stroke-width: 1; }
/* Budova prevádzky. Špendlík hovorí „tu niekde", obrys haly hovorí „presne tu". */
.mp-budova-nasa { fill: var(--accent); fill-opacity: .45; stroke: var(--accent-ink);
                  stroke-width: 3.5; }
.mp-cesta     { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Lem robí z bielych pásov cestnú sieť — bez neho sa cesta cez lúku stratí. */
.mp-lem-hlavne    { stroke: #c9c4b8; stroke-width: 19;  }
.mp-lem-vedlajsie { stroke: #cec9bd; stroke-width: 13;  }
.mp-lem-obsluzne  { stroke: #d4cfc4; stroke-width: 8.5; }
.mp-lem-chodniky  { stroke: none; }
.mp-c-hlavne    { stroke: #fff; stroke-width: 15;  }
.mp-c-vedlajsie { stroke: #fff; stroke-width: 10;  }
.mp-c-obsluzne  { stroke: #fff; stroke-width: 6.5; }
.mp-c-chodniky  { stroke: #b9b4a8; stroke-width: 2; stroke-dasharray: 6 5; }
.mp-zeleznica   { fill: none; stroke: #9a958a; stroke-width: 4; }
.mp-zeleznica-2 { fill: none; stroke: #f2f1ec; stroke-width: 2.4; stroke-dasharray: 12 12; }
.mp-ulice { font-size: 26px; }   /* výrez je v metroch (h = 1000), 26 m ≈ 10 px na karte */
.mp-ulica { fill: var(--ink-3); font-weight: 600; letter-spacing: .02em; paint-order: stroke;
            stroke: #f2f1ec; stroke-width: 5; stroke-linejoin: round; }
.mp-pin-telo { fill: var(--accent-ink); stroke: #fff; stroke-width: 3; }
.mp-pin-oko  { fill: #fff; }
.mp-pin-tien { fill: #050a30; opacity: .18; }
.mp-mierka-c { fill: none; stroke: var(--ink-2); stroke-width: 2.5; }
.mp-mierka text { fill: var(--ink-2); font-size: 20px; font-weight: 600; paint-order: stroke;
                  stroke: #f2f1ec; stroke-width: 4; stroke-linejoin: round; }
.mp-sever-s { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round;
              stroke-linejoin: round; }
.mp-sever text { fill: var(--ink-2); font-size: 22px; font-weight: 700; paint-order: stroke;
                 stroke: #f2f1ec; stroke-width: 4; stroke-linejoin: round; }

.mp-pata { padding: 14px 2px 0; }
.mp-nav { display: flex; align-items: center; gap: 14px; margin-top: 12px;
          padding-top: 12px; border-top: 1px solid var(--line-2); }
.mp-nav .qr { flex: none; }
.mp-zdroj { margin-top: 16px; }
@media (max-width: 900px) {
  .mp-krajina-box { justify-content: flex-start; margin-top: 8px; }
  .mp-krajina { max-width: 340px; }
}

/* Tlač: mapa je hotový obrázok, takže ide na papier tak, ako je vidieť
   na obrazovke — len bez interaktívnej prehľadovky, tá na papieri nemá zmysel. */
@media print {
  .mp-krajina-box { display: none; }
  .mp-ramik { break-inside: avoid; }
}

/* ================================================================
   Správa → Komunikácia: proces ako reťaz boxov so šípkami
   Pracovníčka musí na prvý pohľad vidieť, v ktorom kroku je a kde
   znenie ešte chýba. Prázdny krok je preto tlmený a označený.
   ================================================================ */
.kom-retaz {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
  padding: 4px 0 2px;
}
.kom-box {
  flex: 0 1 auto; min-width: 118px; max-width: 168px;
  display: grid; gap: 3px; align-content: start;
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  background: var(--surface); padding: 10px 12px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.kom-box:hover { background: var(--accent-soft); }
.kom-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kom-box.prazdny { border-top-color: var(--line); opacity: .62; }
.kom-box.prazdny .kom-p { color: var(--warn); }
.kom-c {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.kom-n { font-size: 13px; font-weight: 700; line-height: 1.25; }
.kom-p { font-size: 11px; color: var(--ink-3); }
/* šípka medzi boxmi — čiara s hrotom, nie znak z písma */
.kom-sip { flex: 0 0 26px; position: relative; align-self: center; height: 2px; }
.kom-sip::before {
  content: ""; position: absolute; left: 0; right: 7px; top: 0;
  height: 2px; background: var(--line);
}
.kom-sip::after {
  content: ""; position: absolute; right: 0; top: -4px;
  border-left: 8px solid var(--line);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
@media (max-width: 860px) {
  .kom-retaz { flex-direction: column; align-items: stretch; }
  .kom-box { max-width: none; }
  .kom-sip { width: 2px; height: 16px; margin-left: 22px; align-self: flex-start; }
  .kom-sip::before { left: 0; right: auto; top: 0; bottom: 7px; width: 2px; height: auto; }
  .kom-sip::after {
    right: auto; left: -3px; top: auto; bottom: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 8px solid var(--line); border-bottom: 0;
  }
}
.kom-sab.zvyraz { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kom-nahlad { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.kom-pred { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.kom-telo {
  margin: 3px 0 0; padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto;
}
.kom-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }

/* ================================================================
   ROZCESTNÍK ZARIADENÍ — /produkty/, dlaždice na podstránky metód
   Pridané 15. 9. 2026. Stojí hneď pod úvodom stránky; predtým bola
   jediná cesta k zariadeniam až za splitom metód na 6 722 px.
   ADR je odlíšené — nie je to metóda, je to nadstavba nad linkou.
   ================================================================ */
.rz-grid { display: grid; gap: 1px; background: var(--line-2);
           border: 1px solid var(--line-2);
           grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.rz-cell { display: flex; flex-direction: column; gap: 5px; padding: 20px 18px;
           background: var(--surface); border-bottom: 0; text-decoration: none;
           transition: background .15s ease; }
.rz-cell:hover { background: var(--surface-2); }
.rz-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Kód nesie SVG z A.IKONA (lamelové písmo), nie text — výšku určuje
   samotná grafika, preto tu žiadna veľkosť písma nie je. */
.rz-kod { display: block; line-height: 0; }
.rz-kod svg { display: block; }
.rz-n { font-size: 13px; color: var(--ink-2); }
.rz-p { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-top: 2px; }
.rz-cell-mimo { background: var(--surface-2); }
.rz-cell-mimo:hover { background: var(--surface); }
/* Sedem dlaždíc sa na úzkej obrazovke láme na dva stĺpce a ADR ostáva samo
   v poslednom riadku s prázdnym miestom vedľa — to vyzerá ako chýbajúca
   položka. Nech teda zaberie celý riadok. */
@media (max-width: 560px) {
  .rz-cell-mimo { grid-column: 1 / -1; }
}

/* ---------- video ako náhľad ----------
   Vložený prehrávač z YouTube by načítal cudzí skript a cookies každému,
   kto stránku iba otvorí (pravidlo „žiadne tretie strany"). Toto je obrázok
   uložený u nás; trojuholník je značka, že za klikom je video, nie fotka.
   Je to odkaz, nie tlačidlo — otvára inú stránku a má sa dať otvoriť
   v novej karte prostriedkami prehliadača. */
.vid { display: block; position: relative; border-bottom: 0; text-decoration: none; }
.vid img { display: block; width: 100%; height: auto; }
.vid-hrat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(17,17,17,.78); display: grid; place-items: center;
  transition: background .15s ease, transform .15s ease;
}
.vid-hrat::before {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.vid:hover .vid-hrat, .vid:focus-visible .vid-hrat { background: var(--accent); transform: translate(-50%,-50%) scale(1.06); }
.vid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vid-n { display: block; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink); }

/* ---------- pás seminára cez celú šírku ----------
   Zadanie 16. 9. 2026: obrázok do pozadia, prekryv, názov s detailmi
   a tlačidlo. Pás ide cez celú šírku okna, obsah ostáva v `.wrap`, aby
   sa text zarovnal so zvyškom stránky.

   Prekryv je zľava tmavší: text stojí vľavo a bez neho by na svetlejších
   miestach fotografie nemal kontrast. `background-blend-mode` sa
   zámerne NEPOUŽÍVA — prekryv musí ostať samostatnou vrstvou, inak by
   sa pri zmene fotografie musel ladiť odznova. */
.sem-hero {
  position: relative; isolation: isolate;
  background-image: var(--sem-obr); background-size: cover; background-position: 50% 42%;
  padding: clamp(64px, 12vh, 132px) 0;
}
.sem-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,12,14,.92) 0%, rgba(10,12,14,.78) 46%, rgba(10,12,14,.42) 100%);
}
.sem-hero-in { position: relative; }
.sem-hero-t {
  color: #fff; max-width: 20ch; margin-top: 14px;
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.01em;
}
.sem-hero-d {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; color: rgba(255,255,255,.88); font-size: 16px;
}
.sem-hero-d b { color: #fff; }
.sem-hero-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
/* Na telefóne je fotografia na šírku úzka a prekryv zľava by nechal
   pravý okraj textu na svetlom — preto plošný. */
@media (max-width: 700px) {
  .sem-hero::before { background: rgba(10,12,14,.86); }
  .sem-hero { background-position: 60% 42%; }
}

/* ---------- súhlas so spracúvaním údajov ----------
   Zaškrtávacie políčko je vo vnútri `<label>`, takže sa dá kliknúť aj na
   text — inak je cieľ 18 px vysoký a na telefóne sa doň ťažko trafiť.
   `align-items: flex-start`, lebo veta je viacriadková a políčko patrí
   k jej prvému riadku, nie do zvislého stredu odseku. */
.suhlas { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; max-width: 78ch; cursor: pointer; }
.suhlas input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.suhlas span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.suhlas input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- drobčeky ----------
   Cesta na stránku, nie ozdoba: na podstránkach je to jediné miesto,
   kde sa dá kliknúť o úroveň vyššie. Oddeľovač je v `::before` a je
   `aria-hidden` implicitne — obsah z CSS čítačka neohlási, takže
   nepovie „lomka" medzi každými dvoma článkami.

   Posledný článok je `<span>`, nie odkaz — vedie sám na seba. */
/* Pás cesty drží drobčeky vľavo a zoznam sekcií vpravo. Na telefóne sa
   zalomí pod seba — vedľa seba by z oboch ostali dva stiesnené stĺpce. */
.pas-cesty { border-bottom: 1px solid var(--line-2); background: var(--surface); }
.pas-cesty-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.drobceky { background: transparent; }
.drobceky ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 10px 0; font-size: 12px;
}
.drobceky li { display: flex; align-items: center; }
.drobceky li + li::before {
  content: '›'; color: var(--ink-3); margin: 0 9px; font-size: 13px;
}
.drobceky a {
  color: var(--ink-2); border-bottom: 0; text-decoration: none;
  /* cieľ aspoň 24 px aj v riadku s malým písmom (WCAG 2.5.8) */
  display: inline-flex; align-items: center; min-height: 24px;
}
.drobceky a:hover { color: var(--ink); text-decoration: underline; }
.drobceky [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ---------- zoznam sekcií dlhej stránky ----------
   `<details>`, nie vlastné rozbaľovanie: prehliadač rieši klávesnicu,
   stav aj oznámenie čítačke sám a nedá sa to pokaziť. Zoznam je `ol`,
   lebo sekcie idú v poradí, v akom sú na stránke. */
.obsah { position: relative; }
.obsah > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 24px; padding: 4px 0; font-size: 12px; color: var(--ink-2);
  list-style: none;
}
.obsah > summary::-webkit-details-marker { display: none; }
.obsah > summary::after { content: '▾'; font-size: 11px; color: var(--ink-3); }
.obsah[open] > summary::after { content: '▴'; }
.obsah > summary:hover { color: var(--ink); }
.obsah > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.obsah-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--surface-3); color: var(--ink-2); font-size: 10px; font-weight: 700;
}
/* Zoznam prekrýva obsah stránky — pás cesty je úzky a rozbalenie by
   inak posúvalo celú stránku pri každom otvorení. */
.obsah > ol {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 10px 18px 12px 34px; min-width: 260px; max-width: min(92vw, 420px);
  max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.obsah > ol li { margin: 0; }
.obsah > ol a {
  display: block; padding: 7px 0; min-height: 24px; font-size: 13px; line-height: 1.4;
  color: var(--ink-2); border-bottom: 0; text-decoration: none;
}
.obsah > ol a:hover { color: var(--ink); text-decoration: underline; }
/* Kotva nesmie skončiť pod lepivou hlavičkou (62 px) ani pod pásom cesty. */
#app h2 { scroll-margin-top: 104px; }
#app h2:focus { outline: none; }
/* Na telefóne je zoznam V TOKU, nie plávajúci: panel so šírkou 260 px
   visel z pravého okraja pásu a stránka pretekala o 123 px (zmerané
   16. 9. 2026 pri 390 px). V toku posunie obsah nižšie, čo je na
   telefóne prijateľnejšie než vodorovné rolovanie. */
@media (max-width: 700px) {
  .obsah { width: 100%; }
  .obsah > ol {
    position: static; min-width: 0; max-width: none; max-height: none;
    margin-top: 8px; padding: 6px 0 10px 24px; border-left: 0; border-right: 0;
    box-shadow: none;
  }
}

/* Živé zóny v pätičke — presunuté z pásu prototypu 16. 9. 2026.
   Rovnaký riadok ako právne dokumenty, len s návestím. */
.ftr-zony { line-height: 2.1; font-size: 12px; color: var(--ink-3); }
.ftr-zony b { color: var(--ink-2); font-weight: 700; }
.ftr-zony a { color: var(--ink-2); }
.ftr-zony a:hover { color: var(--ink); }

/* ---------- lupa v sekundárnom riadku ----------
   Stojí za rýchlymi stránkami. Cieľ má 30 × 30 px — ikona samotná je
   16 px a to je pod hranicou WCAG 2.5.8 (24 px). */
/* `.subnav a` prebíja vlastnými pravidlami (padding 14/0, margin 34,
   uppercase), preto sa lupa píše aj s `.subnav` — inak by mala odsadenie
   ako textový odkaz a v riadku by plávala. */
.subnav a.sn-lupa {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  padding: 0; margin: 7px 0 7px 2px; color: var(--ink-3); border-bottom: 0; flex: none;
}
.subnav a.sn-lupa:hover { color: var(--ink); background: var(--surface-2); }
.subnav a.sn-lupa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* výsledky */
.hl-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.hl-vys { display: grid; gap: 30px; margin-top: 22px; }
.hl-sk { border-top: 1px solid var(--line-2); padding-top: 14px; }
.hl-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--surface-3); color: var(--ink-2); font-size: 10px; font-weight: 700;
}
.hl-ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-2); }
.hl-ul li { background: var(--surface); }
.hl-ul a {
  display: block; padding: 12px 14px; min-height: 24px;
  border-bottom: 0; text-decoration: none; color: var(--ink);
}
.hl-ul a:hover { background: var(--surface-2); }
.hl-ul a b { display: block; font-size: 14px; font-weight: 600; }
.hl-p {
  display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  /* dlhý popis sa nesmie rozliať cez pol obrazovky */
  max-width: 88ch; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hl-viac > summary {
  cursor: pointer; margin-top: 10px; font-size: 12px; color: var(--ink-2); min-height: 24px;
  display: inline-flex; align-items: center;
}
.hl-viac > summary:hover { color: var(--ink); }

/* ================================================================
   Vyhľadávacie okno cez celú obrazovku — Tesla štýl
   ----------------------------------------------------------------
   Čierna #171a20, biela, červený akcent #E31937, veľké tenké písmo,
   veľa priestoru, tenké linky. Okno je zámerne iné než zvyšok webu:
   je to nástroj cez celú obrazovku, nie ďalšia sekcia stránky.
   ================================================================ */
.hok {
  position: fixed; inset: 0; z-index: 300;
  background: #171a20; color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .16s ease;
}
.hok.je { opacity: 1; }
/* Stránka pod oknom sa nesmie rolovať spolu s ním. */
html.hok-otvorene, html.hok-otvorene body { overflow: hidden; }

.hok-in { max-width: 1040px; margin: 0 auto; padding: 40px 24px 96px; }
.hok-hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
/* Tesla je bezpätkové písmo. Web má nadpisy pätkové, preto sa tu
   rodina vypisuje znova — inak by okno nadpisom vypadlo zo štýlu. */
.hok-nadpis {
  margin: 0; color: #fff; font-size: clamp(22px, 3vw, 34px);
  font-family: 'Liberation Sans', 'Nimbus Sans', Arial, sans-serif;
  font-weight: 300; letter-spacing: .01em;
}
.hok-zavri {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.hok-zavri:hover { background: #E31937; border-color: #E31937; }
.hok-zavri:focus-visible { outline: 2px solid #E31937; outline-offset: 3px; }

.hok-pole { display: flex; align-items: center; gap: 14px; margin-top: 34px;
            border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 10px; }
.hok-lupa { flex: none; color: rgba(255,255,255,.5); }
.hok-pole input {
  flex: 1 1 auto; width: 100%; background: transparent; border: 0; color: #fff;
  font: inherit; font-size: clamp(20px, 2.6vw, 30px); font-weight: 300; padding: 6px 0;
}
.hok-pole input::placeholder { color: rgba(255,255,255,.34); }
/* Zelený podčiarkovník zo zvyšku webu (`input:focus`) sem nepatrí —
   akcent okna je červený. A natívny ✕ prehliadača v poli `search` je
   modrý a v tmavom okne svieti; kríž na zavretie je vlastný. */
.hok-pole input:focus { outline: 0; box-shadow: none; }
.hok-pole input::-webkit-search-cancel-button,
.hok-pole input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hok-pole:focus-within { border-bottom-color: #E31937; }

.hok-stav { margin-top: 14px; font-size: 11px; letter-spacing: .14em;
            text-transform: uppercase; color: rgba(255,255,255,.5); min-height: 16px; }
.hok-uvod { margin: 26px 0 0; max-width: 62ch; color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.6; }

.hok-vys { margin-top: 26px; display: grid; gap: 34px; }
.hok-sk-n {
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hok-sk-n span { color: #E31937; letter-spacing: 0; }
.hok-sk ul { list-style: none; margin: 0; padding: 0; }
.hok-sk li { border-top: 1px solid rgba(255,255,255,.12); }
.hok-sk a {
  display: block; padding: 15px 4px; border-bottom: 0; text-decoration: none; color: #fff;
  transition: background .1s ease, padding-left .1s ease;
}
.hok-sk a:hover, .hok-sk a:focus-visible {
  background: rgba(255,255,255,.05); padding-left: 12px; outline: 0;
}
.hok-sk a:focus-visible { box-shadow: inset 3px 0 0 #E31937; }
.hok-t { display: block; font-size: 17px; font-weight: 400; line-height: 1.35; }
.hok-p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62);
}
/* Kde výsledok leží — bez toho človek nevie, či ho odkaz hodí na
   stránku metódy, do podmienok alebo do kalendára. */
.hok-c {
  display: block; margin-top: 7px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42);
}
.hok mark { background: transparent; color: #E31937; font-weight: 600; }
.hok-viac {
  display: inline-block; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.3); text-decoration: none; padding-bottom: 2px;
}
.hok-viac:hover { color: #fff; border-color: #E31937; }
.hok-nic { margin-top: 26px; max-width: 62ch; }
.hok-nic b { font-size: 18px; font-weight: 400; }
.hok-nic p { margin: 10px 0 20px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.6; }
.hok-btn {
  display: inline-block; padding: 11px 20px; border: 1px solid rgba(255,255,255,.3);
  color: #fff; text-decoration: none; border-bottom: 0; font-size: 13px;
}
.hok-btn:hover { background: #E31937; border-color: #E31937; }

@media (max-width: 700px) {
  .hok-in { padding: 20px 18px 72px; }
  .hok-pole { margin-top: 24px; }
}
/* Kto má v systéme vypnuté animácie, dostane okno bez prechodu. */
@media (prefers-reduced-motion: reduce) {
  .hok { transition: none; }
  .hok-sk a { transition: none; }
}