/* ============================================================
   SafetyBox — redizajn
   Obsah podľa mockupu. Brand zladený s DEXIS (červená #e83f30,
   text #1d1d1b, font Lato, plochý čistý dizajn) — ale SafetyBox
   identita = ČERVENÉ RÁMIKY/ohraničenia (z loga), nie plné tvary.
   Svetlá hlavička (žiadny tmavý toolbar).
   Prístupnosť: WCAG 2.1 AA / EAA
   ============================================================ */
/* Self-hostovaný Lato (woff2) — vlastný subset z PLNÉHO Lato; kompletná diakritika SK/CZ/FR/EN.
   (Google/fontsource latin-ext subset Lata neobsahuje č/ť/ď/ň/ľ/ě/ř/ů — len poľské znaky.) */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lato-900.woff2") format("woff2"); }
:root {
  --red: #e83f30;          /* brand */
  --red-strong: #d32d1e;   /* tlačidlá/odkazy — biely text 5:1 */
  --red-darker: #c6291a;   /* hover */
  --ink: #1d1d1b;          /* text */
  --grey: #6b6b6b;         /* sekundárny text (4.5:1 na bielej) */
  --line: #e4e4e4;
  --soft: #f6f6f6;
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#kalkulacka, #analyza { scroll-margin-top: 90px; } /* sticky hlavička nech neprekryje cieľ prekliku */
body {
  font-family: "lato", Helvetica, Arial, sans-serif; 
  font-size: 17px; line-height: 1.6; color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--red-strong); text-decoration: none; }
a:hover { color: var(--red-darker); }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-weight:700; line-height: 1.2; color: var(--ink); margin-bottom: 1rem; }
h1 { font-size: clamp(2.0rem, 4.5vw, 2.8rem); margin-bottom: 2rem; }
h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
strong { font-weight: 800; }

/* ---- Prístupnosť ---- */
.skip-link { position: absolute; left: 1rem; top: -100%; z-index: 1000; background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 4px; font-weight: 800; }
.skip-link:focus { top: 1rem; color: #fff; }
:focus-visible { outline: 3px solid var(--red-strong); outline-offset: 2px; }
/* klik myšou (nie klávesnica) → žiadny modrý default ring; náš ostáva len pre klávesnicu */
:focus:not(:focus-visible) { outline: none; }
/* Splide má vlastný modrý (#0bf) focus aj v stave .is-focus-in (vysoká špecificita) → prebiť brandovou červenou */
.splide__arrow:focus-visible, .splide.is-focus-in .splide__arrow:focus,
.splide__pagination__page:focus-visible, .splide.is-focus-in .splide__pagination__page:focus,
.splide__slide:focus-visible, .splide.is-focus-in .splide__slide:focus {
  outline-color: var(--red-strong) !important; border-color: var(--red-strong) !important;
}
/* video náhľad: outline by orezal slider (overflow:hidden) aj samotný .yt → focus ring cez pseudo-element NAD obrázkom */
.ref-videos .yt:focus-visible { outline: none; }
.ref-videos .yt:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 3px solid var(--red-strong); border-radius: 8px; pointer-events: none; }
/* nav odkazy: outline dovnútra, aby ho horná lišta neorezala */
.mainnav a:focus-visible { outline-offset: -2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Layout ---- */
.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--soft { background: var(--soft); }
/* Per-blok zrušenie odsadenia (ACF checkbox block_spacing → pt-0/pb-0). */
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* 404 — stránka nenájdená */
.error-404 { text-align: center; }
.error-404__inner { max-width: 640px; margin-inline: auto; }
.error-404__code { font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--red); opacity: .12; margin: 0 0 -.35em; }
.error-404 h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: .75rem; }
.error-404 .lead { margin-inline: auto; }
.error-404__list { display: inline-block; text-align: left; list-style: none; margin: 1.6rem auto 0; padding: 0; color: var(--grey); }
.error-404__list li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
.error-404__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.error-404__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.9rem; }
.section-title { text-align: center; margin-bottom: 2.25rem; }
/* červený ŠTVOREC okolo prvého písmena (echo loga) — môže presahovať cez ďalšie písmená;
   text má biele halo, aby čiara „obišla" písmená. POZN: span .box-letter okolo 1. písmena generovať v PHP (admin). */
.section-title h2 { position: relative; z-index: 0; paint-order: stroke fill; -webkit-text-stroke: 4px #fff; }
.box-letter { position: relative; }
/* Štvorec kotvíme na STRED prvého písmena (left:50%), nie na % jeho šírky — inak sa pri širokých písmenách (W, M) odsunie a písmeno pretŕča. Takto rámuje rovnako úzke aj široké písmená. */
.box-letter::before { content: ""; position: absolute; z-index: -1; top: 65%; left: 70%; transform: translate(-50%, -50%); width: 1.65em; height: 1.65em; border: 3px solid var(--red); }
.section--soft .section-title h2 { -webkit-text-stroke: 4px #f7f7f7; }

/* ---- Tlačidlá ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem;
  padding: .8rem 1.5rem; border-radius: 0; border: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--red-strong); color: #fff; } /* #d32d1e = 5:1 biely text (WCAG AA) */
.btn-primary:hover { background: var(--red-darker); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--red); } /* SafetyBox rámik */
.btn-outline:hover { background: var(--red-strong); color: #fff; border-color: var(--red-strong); }
.btn strong { font-weight: 900; }

/* ============================================================
   OBSAHOVÉ BLOKY
   ============================================================ */
/* A) FULL-BLEED SPLIT bloky (štýl materskej Hayley/DEXIS): 50/50 obraz + text, ostré okraje,
   obraz od kraja po kraj (bez containeru), striedanie strán. Text na svetlom poli. */
.split-blocks { display: grid; }
.box { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.box__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.box__text { display: flex; align-items: center; padding: clamp(2rem, 5vw, 4.5rem); }
.box__text-inner { width: 100%; max-width: 36rem; margin-inline: auto; }
.box__text h2 { margin-bottom: 1.25rem; }
.box__text .check-list + p { margin-top: 1.1rem; }
.box__text-inner > .btn { margin-top: 1.75rem; }
.box-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.box--media-right .box__media { order: 2; } /* obrázok vpravo, text vľavo */

@media (max-width: 767.98px) {
  .box { grid-template-columns: 1fr; }
  .box--media-right .box__media { order: 0; }  /* obrázok vždy hore */
  .box__media img { min-height: 240px; }
  .box__text { padding: 1.9rem 1.25rem; }
  .box__text-inner { max-width: none; }
}

/* Brandové fajky (červený rámik + červená fajka = „red border" identita) — reusable WRAP class na ľubovoľný ul/li */
.check-list { display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 2.1rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.4em; height: 1.4em; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='11'%20fill='none'%20stroke='%23e83f30'%20stroke-width='1.6'/%3E%3Cpath%20d='M6.5%2012.4l3.4%203.4%207.6-7.6'%20fill='none'%20stroke='%23e83f30'%20stroke-width='2.3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* B) Ikonové karty (alternatíva — bez fotiek, využíva custom SVG ikony) */
/* VÝHODY — „katalógové" karty: mäkký tieň, červený horný akcent (značková „red-border" identita),
   veľké poradové číslo (katalógový pocit), väčšia holá ikona + jemné objavenie pri scrolle. */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: feat; }
.feature {
  counter-increment: feat; position: relative; overflow: hidden;
  padding: 1.8rem 1.8rem 1.7rem; background: #FFF; 
  border: 1px solid #fdecea;
  border-radius: 15px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* veľké duchové poradové číslo */
.feature::after { content: counter(feat, decimal-leading-zero); position: absolute; top: 0.7rem; right: 1rem; font-size: 5rem; font-weight: 800; line-height: 1; color: var(--red); opacity: .08; pointer-events: none; }
/* karty nie sú klikateľné → len decentné prehĺbenie tieňa, žiadny zdvih */
.feature:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 20px -20px rgba(0,0,0,.12); border-color: #e9d2ce; }
/* IKONA = holá líniová ikona (ako dexis.sk), žiadny rámik ani kruh */
.feature__icon { margin-bottom: 1.5rem; background: #fdecea; display: flex; width: 60px; height: 60px; border-radius: 50%; align-items: center; justify-content: center; }
.feature__icon img { width: 40px; height: 40px; }
.feature h3 { font-size: 1.16rem; margin-bottom: .5rem; position: relative; }
.feature p { color: var(--grey); font-size: .96rem; margin: 0; position: relative; }
/* jemné objavenie kariet pri scrolle — LEN na gride (≥768); v mobilnom slideri (≤767) sa NEspúšťa */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .js .feature:not(.in) { opacity: 0; }   /* skry pred prvým vykreslením (len keď je JS) → žiadny preblik */
  .feature.in { animation: featIn .55s ease both; }
  .feature:nth-child(3n+2).in { animation-delay: .08s; }
  .feature:nth-child(3n).in { animation-delay: .16s; }
}
@keyframes featIn { from { opacity: 0; /*transform: translateY(18px);*/ } to { opacity: 1; transform: none; } }

/* Jemné odkrytie sekcií pod foldom pri scrolle (fade-up). Viditeľné aj bez JS; .in spustí animáciu.
   Len opacity+transform → žiadny CLS (žiadny dopad na PageSpeed); rešpektuje prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  /* skry reveal prvky PRED prvým vykreslením (len keď je JS aktívny → no-JS ostáva viditeľné).
     Odstráni „preblik": prvok sa už neukáže naplno predtým, než ho IO nafejduje cez .in. */
  .js .reveal:not(.in) { opacity: 0; }
  .reveal.in { animation: revealIn .6s ease both; }
  .reveal--fade.in { animation: fadeIn .7s ease both; }   /* len fade, bez posunu */
}
@keyframes revealIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 991.98px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .feature-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HERO PODSTRÁNOK — ĽAVOSTRANNÝ editoriálny banner: eyebrow s červeným akcentom
   + veľký nadpis + popis; priemyselná textúra pozadia presvitá vpravo.
   Asymetria + eyebrow → jasne sa odlíši od CENTROVANÝCH sekčných nadpisov (žiadne „jednoliate").
   ============================================================ */
.headline.headline-sub { position: relative; overflow: hidden; background: #f4f4f4; padding: 0; border-bottom: 1px solid var(--line); }
/* faded sklad = SAMOSTATNÉ full-bleed pozadie (len jemná textúra pod celým hero) */
.headline-sub .headline-bg { top: 0; left: 0; right: 0; bottom: 0; transform: none; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.headline-sub > .container-lg { position: relative; z-index: 1; }
/* AUTOMAT = samostatný prvok V RÁMCI gridu (ukotvený na pravý okraj CONTAINERU, nie obrazovky),
   FIXNÁ veľkosť (clamp podľa viewportu, NIE podľa obsahu) → veľkosť sa nemení s textom, neskáče. */
.headline-sub__box { position: absolute; right: -00px; bottom: 20px; height: clamp(340px, 25vw, 280px); width: auto; max-width: none; z-index: 0; pointer-events: none; }
.headline-sub__box img { position: relative; z-index: 1; height: 100%; width: auto; max-width: none; }
/* tieň pod automatom (rovnaký ground shadow ako .headline-img::after na homepage) */
.headline-sub__box::after { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 50%; bottom: -5%; transform: translateX(-58%) rotate(-5deg); width: 100%; height: 20%; background: radial-gradient(ellipse at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.3) 36%, transparent 70%); filter: blur(9px); }
/* text obmedzený na ľavú časť → pri dlhom obsahu sa zalomí NADOL, nikdy nevojde do automatu vpravo */
.headline-sub__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; min-height: 400px; max-width: 65%; padding: 3.2rem 0; }
.headline-sub__eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: .85rem; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red-strong); }
.headline-sub__eyebrow::before { content: ""; width: 2rem; height: 3px; background: var(--red); }
.headline-sub__inner h1 { font-size: clamp(2.2rem, 4.6vw, 3.1rem); line-height: 1.1; margin-bottom: .9rem; }
.headline-sub__inner .lead { max-width: 35rem; margin: 0; color: var(--ink); }
@media (max-width: 991.98px) {
  .headline-sub__box { height: clamp(160px, 35vw, 290px); }
  .headline-sub__inner { max-width: 60%; min-height: 250px; }
}
@media (max-width: 767.98px) {
  .headline-sub__box { position: relative; right: auto; bottom: auto; height: auto; max-width: 100%; margin-bottom: 20px; }   /* mobil: automat v toku pod textom (relative kvôli kotveniu tieňa) */
  .headline-sub__inner { min-height: 0; max-width: 100%; padding: 2.4rem 0; }

  .headline-sub__box img { max-width: 100%; height: auto; }
}

/* Prečo SafetyBox — zoznam benefitov (ikona v kruhu + nadpis + popis), 2 stĺpce na desktope */
/* 2-stĺpcový grid so zachovaným poradím vľavo-vpravo. Rovnaká min-height na položke
   zjednotí výšku všetkých buniek → rovnomerné medzery aj zarovnané riadky
   (krátke položky majú trochu viac prázdneho miesta). */
.benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; margin-bottom: 2.5rem; }
.benefit { display: flex; gap: 1.1rem; align-items: flex-start; }
.benefit__icon { flex: none; width: 54px; height: 54px; border-radius: 50%; background: #fdecea; display: flex; align-items: center; justify-content: center; }
.benefit__icon img { width: 38px; height: 38px; }
.benefit__text h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.benefit__text p { color: var(--grey); font-size: .96rem; margin: 0; }
@media (max-width: 767.98px) { .benefit-list { grid-template-columns: 1fr; gap: 1.4rem; } .benefit { min-height: 0; } }

/* --- Benefity pre pozície: interaktívny automat s bublinkami (ARIA tabs) --- */
.benefit-explorer { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* automat + bublinky VPRAVO (text/panel vľavo) → order:2; aspect-ratio drží štvorec pre rozmiestnenie bublín */
.benefit-stage { position: relative; order: 2; aspect-ratio: 1 / 1; }
.benefit-stage__bg { position: absolute; inset: 6%; background-image: radial-gradient(var(--line) 1.5px, transparent 1.6px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(circle at center, #000 28%, transparent 70%); mask-image: radial-gradient(circle at center, #000 28%, transparent 70%); }
.benefit-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.benefit-line { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 1.5 4; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .2s ease, stroke-width .2s ease; }
.benefit-line.is-active { stroke: var(--red); stroke-width: 2.5; }
.benefit-automat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 66%; width: auto; max-width: none; z-index: 2; filter: drop-shadow(0 22px 26px rgba(0,0,0,.18)); }
.benefit-pins { position: absolute; inset: 0; z-index: 3; }
.benefit-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; padding: .6rem 1.2rem; background: var(--red); color: #fff; border: 0; border-radius: 999px; font-weight: 800; font-size: 1rem; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(232,63,48,.65); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.benefit-pin:hover { background: var(--red-darker); }
.benefit-pin.is-active { background: var(--red-strong); transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 12px 26px -6px rgba(211,45,30,.8); z-index: 4; }
.benefit-pin:focus-visible { outline: 3px solid var(--red-strong); outline-offset: 3px; }
/* jemný pulz na NEAKTÍVNYCH bublinkách — pozýva k interakcii (vypnuté pri reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .benefit-pin::before { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(232,63,48,.5); pointer-events: none; }
  .benefit-pin:not(.is-active):not(:hover)::before { animation: pinPulse 2.6s ease-out infinite; }
  /* rozfázovanie — každá bublina inde v cykle (negatívny delay = štartuje hneď, nie všetky naraz) */
  .benefit-pin:nth-child(2):not(.is-active):not(:hover)::before { animation-delay: -.5s; }
  .benefit-pin:nth-child(3):not(.is-active):not(:hover)::before { animation-delay: -1s; }
  .benefit-pin:nth-child(4):not(.is-active):not(:hover)::before { animation-delay: -1.55s; }
  .benefit-pin:nth-child(5):not(.is-active):not(:hover)::before { animation-delay: -2.05s; }
  .benefit-pin:nth-child(6):not(.is-active):not(:hover)::before { animation-delay: -2.45s; }
}
@keyframes pinPulse { 0% { box-shadow: 0 0 0 0 rgba(232,63,48,.5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(232,63,48,0); } }
/* PRAVÁ STRANA — VŠETKY panely viditeľné (karty). Aktívny (scroll-spy / hover bubliny) sa „rozsvieti":
   ľavý červený akcent + tieň. Ostatné ostávajú plne čitateľné (žiadne stmavenie → bez problému s kontrastom). */
.benefit-detail { position: relative; }
/* karta v štýle .tl-card/.feature: zaoblená, ikona v krúžku HORE, duchové poradové číslo (data-num) vpravo hore.
   Zobrazený je LEN aktívny panel (prepína bublinka); bez JS všetky viditeľné. */
.benefit-panel { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.7rem; box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 18px 30px -24px rgba(0,0,0,.16); }
.benefit-panel + .benefit-panel { margin-top: 1.25rem; }   /* odsadenie keď sú (bez JS) všetky pod sebou */
/*.benefit-panel::after { content: attr(data-num); position: absolute; top: .9rem; right: 1.3rem; z-index: 0; font-size: clamp(3.4rem, 4.6vw, 4.8rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--red); opacity: .1; pointer-events: none; }*/
.benefit-panel:focus-visible { outline: 3px solid var(--red-strong); outline-offset: 2px; }
.benefit-panel__head { position: relative; z-index: 1; margin-bottom: .9rem; }
.benefit-panel__icon { width: 54px; height: 54px; border-radius: 50%; background: #fdecea; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.benefit-panel__icon img { width: 38px; height: 38px; }
.benefit-panel h3 { position: relative; z-index: 1; margin: 0; font-size: 1.25rem; }
.benefit-panel .check-list { position: relative; z-index: 1; gap: .7rem; }
/* JS: zobraz LEN aktívny panel (bez JS = všetky viditeľné, plný obsah) */
.js .benefit-panel:not(.is-active) { display: none; }
.js .benefit-panel + .benefit-panel { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .js .benefit-panel.is-active { animation: benefitPanelIn .25s ease both; } }
@keyframes benefitPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* tablet/mobil: žiadny absolútny diagram — automat hore, bublinky ako wrap rad „chipov", panel pod nimi */
@media (max-width: 991.98px) {
  .benefit-explorer { grid-template-columns: 1fr; gap: 1.6rem; }
  .benefit-stage { position: static; order: 0; aspect-ratio: auto; }   /* automat + bublinky hore, panel pod nimi */
  .benefit-stage__bg, .benefit-lines { display: none; }
  .benefit-automat { position: static; transform: none; width: auto; max-height: 240px; margin: 0 auto 1.3rem; }
  .benefit-pins { position: static; display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
  .benefit-pin { position: static; transform: none; }
  .benefit-pin.is-active { transform: scale(1.04); }
  .benefit-pin::before { display: none; }
}

/* ============================================================
   PRODUKTY — reuse .feature kariet z homepage „Výhody" (ikona v #fdecea kruhu +
   názov + krátky popis, zaoblená karta), LEN bez veľkých poradových čísel.
   WP = ACF flexible content / repeater (ikona + názov + popis).
   ============================================================ */
/* 5 stĺpcov → 2 rovné riadky pre 10 položiek (žiadny prázdny chvost). Užšie karty = tesnejší padding. */
.prod-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.prod-cards .feature::after { content: none; }   /* žiadne veľké čísla (produkty nie sú postupnosť) */
.prod-cards .feature { padding: 1.4rem 1.35rem; }
.prod-cards .feature__icon { width: 54px; height: 54px; margin-bottom: 1rem; }
.prod-cards .feature__icon img { width: 38px; height: 38px; }
.prod-cards .feature h3 { font-size: 1.02rem; }
.prod-cards .feature p { font-size: .88rem; }
/* even-friendly breakpointy (10 = 5·2 → 2·5 → 1·10), nikdy nezostane osamotená karta */
@media (max-width: 991.98px) { .prod-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .prod-cards { grid-template-columns: 1fr; } }
/* Záver: pomoc s výberom typu automatu + CTA */
.prod-closing { max-width: 640px; margin: 2.75rem auto 0; text-align: center; }
.prod-closing p { font-size: 1.1rem; margin-bottom: 1.6rem; }

/* ============================================================
   KALKULAČKA ÚSPOR — formulárové polia, kalkulačka, claim band, CF7 formulár
   ============================================================ */
/* --- Formulárové polia (zdieľané: kalkulačka aj CF7) --- */
.req { color: var(--red-strong); }
.form-group { margin-bottom: 1.25rem; }
.form-group label, .form-legend { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .45rem; color: var(--ink); }
/* label + tooltip v jednom inline toku — pri zalomení labelu na viac riadkov sa nerozbije (ikona ostane za textom) */
.form-label-row { margin-bottom: .45rem; }
.form-label-row label { display: inline; margin-bottom: 0; }
.form-label-row .tip { display: inline-block; margin: -8px 0 -10px .15rem; line-height: 1em; }
.form-control { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; transition: border-color .15s ease, box-shadow .15s ease; }
/* fókus: červený rámik + viditeľný prstenec (myš); klávesnica dostane aj globálny :focus-visible outline (EAA 2.4.7) */
.form-control:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,63,48,.2); }
.form-control::placeholder { color: #767676; }   /* EAA: placeholder kontrast 4.5:1 na bielej */
.input-group { display: flex; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text { display: flex; align-items: center; padding: 0 .9rem; background: var(--soft); border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; font-weight: 700; color: var(--grey); }

/* --- Kalkulačka (form hore, výsledky pod ním — žiadne prázdne miesto keď sú skryté) --- */
/* bez overflow:hidden — nech tooltip môže presahovať kartu (neoreže sa); zaoblenie spodných rohov rieši .calc__results */
.calc { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -28px rgba(0,0,0,.25); }
.calc__form { padding: clamp(1.4rem, 3vw, 2.4rem); }
/* polia v jednom riadku na veľkej obrazovke — input zarovnaný k SPODKU stĺpca aj pri rôznej výške labelu.
   Stĺpec stretchne na rovnakú výšku (flex row), je sám flex-column, form-group ho vyplní (flex:1) a vstup
   sa odtlačí dole (margin-top:auto). NEpoužívať height:100% — stretchnutý stĺpec je pre percentá neurčitý. */
.calc__form .row > [class*="col"] { display: flex; flex-direction: column; }
.calc__form .form-group { flex: 1; display: flex; flex-direction: column; }
.calc__form .form-group .input-group, .calc__form .form-group > .form-control { margin-top: auto; }
.calc__results { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--soft); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.calc__results-title { margin-bottom: 1rem; }
.calc__results-title--sub { margin-top: 1.8rem; }
/* JEDNOTNÁ mriežka pre všetky riadky výsledkov: label 50 % + 3 rovnaké stĺpce (1 rok/3/5),
   hodnoty zľava pod hlavičkami — zarovnané ako na pôvodnej kalkulačke. Rovnaký horizontálny
   padding na všetkých riadkoch (vrátane červeného total pruhu) → stĺpce sedia presne pod sebou. */
.calc-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; gap: .5rem; margin: 0 -0.9rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.calc-row--head { color: var(--grey); font-size: .8rem; padding-top: .4rem; padding-bottom: .4rem; margin-top: .6rem; }
.calc-badge { color: var(--red-strong); font-weight: 800; font-size: 1.05rem; }
/* Grafický tooltip (nahrádza systémový title) — hover + klávesnicový fókus, Esc skryje.
   AUTO-POSITION ako Bootstrap/Popper: JS (main.js) bublinu horizontálne posunie, aby sa zmestila do
   viewportu, a vertikálne preklopí (dole/hore) podľa miesta. CSS dáva len východisko + fallback bez JS.
   Šípka sa mieri na ikonu cez premennú --arrow-x (nastaví JS). */
.tip { position: relative; display: inline-flex; vertical-align: middle; }
.tip__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; padding: 0; border: 0; background: none; color: var(--red); cursor: help; line-height: 0; }
.tip__btn svg { width: 100%; height: 100%; }
.tip__bubble { position: absolute; top: calc(100% + 9px); left: 0; z-index: 30; width: max-content; max-width: 240px; padding: .6rem .75rem; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 400; line-height: 1.45; text-align: left; border-radius: 8px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; }
.tip__bubble::after { content: ""; position: absolute; bottom: 100%; left: var(--arrow-x, .6rem); transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--ink); }
.tip__bubble::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 11px; } /* neviditeľný most pre plynulý prechod kurzora medzi ikonou a bublinou */
/* JS preklopí nahor, keď dole nie je miesto */
.tip.is-up .tip__bubble { top: auto; bottom: calc(100% + 9px); }
.tip.is-up .tip__bubble::after { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--ink); }
.tip.is-up .tip__bubble::before { bottom: auto; top: 100%; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity: 1; visibility: visible; pointer-events: auto; }
/* Celkové šetrenie — výrazný červený pruh (graficky), no v tej istej mriežke → stĺpce zarovnané */
.calc-row--total { background: var(--red-strong); color: #fff; border-bottom: 0; border-radius: 10px; margin-top: 0rem; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.06rem; }
.calc-row--total > span:first-child { font-weight: 800; }
.calc-row--total strong { color: #fff; }
@media (max-width: 575.98px) {
  /* mobil: stĺpce sa zalomia → každé číslo s vlastným popisom obdobia */
  .calc-row--head { display: none; }
  .calc-row { grid-template-columns: 1fr; gap: .12rem; padding: .7rem .9rem; }
  .calc-row span[data-period]::before { content: attr(data-period) ": "; color: var(--grey); font-size: .82rem; font-weight: 400; }
  .calc-row--total span[data-period]::before { color: rgba(255,255,255,.78); }
}

/* --- Claim band (CTA pred formulárom — nadpis používa štandardný .section-title) --- */
.claim-band__cta { text-align: center; margin: 0; }

/* --- Analýza formulár (CF7) — nadpis používa štandardný .section-title --- */
.analyza__inner { max-width: 860px; margin: 0 auto; }
.wpcf7-form br { display: none; }
.wpcf7-form .form-group p { margin: 0; }
/* EAA: reset VŠETKÝCH fieldsetov vo formulári (default rámik) — vrátane CF7 .hidden-fields-container */
.wpcf7-form fieldset, .choice-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hidden-fields-container { display: none; }
.form-legend { margin-bottom: .6rem; }
/* radio výber (analýza / návšteva / obe) — segmentové „chips" (Tab vojde, šípkami sa prepína = štandard radiogroup) */
.choice-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice-group .wpcf7-list-item { margin: 0; }
.choice-group label { display: flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.choice-group input { accent-color: var(--red-strong); }
.choice-group label:hover { border-color: var(--red); }
/* jasný viditeľný fókus na chipe pri navigácii klávesnicou (EAA 2.4.7) */
.choice-group .wpcf7-list-item:has(input:focus-visible) label { outline: 3px solid var(--red-strong); outline-offset: 2px; }
/* vybraný chip — červený rámik + svetlé pozadie; text ostáva tmavý (kontrast 4.5:1) */
.choice-group .wpcf7-list-item:has(input:checked) label { border-color: var(--red-strong); background: #fdecea; font-weight: 800; }
.form-group-checkbox label { display: inline-flex; align-items: flex-start; gap: .5rem; font-weight: 400; font-size: .92rem; color: var(--grey); }
.form-group-checkbox input { margin-top: .2rem; accent-color: var(--red-strong); }
.wpcf7-response-output { margin: .5rem 0 1rem; }
/* textarea — rovnaký vzhľad ako .form-control */
textarea.form-control { min-height: 150px; resize: vertical; line-height: 1.5; }

/* --- Kontakt: údaje + formulár + mapa --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.contact-info__title { font-size: 1.5rem; margin-bottom: .35rem; }
.contact-info__note { color: var(--grey); margin-bottom: 1.7rem; }
.contact-list { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fdecea; color: var(--red); display: flex; align-items: center; justify-content: center; }
.contact-list__ic svg { width: 22px; height: 22px; }
.contact-list__txt { padding-top: .1rem; }
.contact-list__label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); font-weight: 800; margin-bottom: .12rem; }
.contact-list__txt a { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; } /* WCAG 2.5.8 touch target */
.contact-list__txt a:hover { color: var(--red-strong); }
/* formulár BEZ boxu — priamo na ploche (user: „nedávať do škaredého boxu") */
/* box-letter na nadpise formulára potrebuje biele halo (aby ho červený štvorec „obišiel") — ako .section-title h2 */
.contact-form__title { position: relative; z-index: 0; paint-order: stroke fill; -webkit-text-stroke: 6px #fff; margin-bottom: 1.4rem; }
.contact-map { line-height: 0; }
.contact-map iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block; filter: grayscale(.15); }
@media (max-width: 767.98px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AKO TO FUNGUJE — striedavý vertikálny timeline (ikony proces-01..07).
   Karty striedavo vľavo/vpravo, centrálna čiara, marker na nej, chvostík ku čiare.
   ============================================================ */
.timeline { position: relative; max-width: 980px; margin: 0 auto; list-style: none; padding-left: 0; counter-reset: tl; }
.timeline::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-step { position: relative; width: 50%; margin-bottom: 1.8rem; counter-increment: tl; }
.tl-step:last-child { margin-bottom: 0; }
.tl-step--left { left: 0; padding-right: 2rem; }
.tl-step--right { left: 50%; padding-left: 2rem; }
/* uzlík na čiare = malá červená bodka s bielym prstencom (ikona je teraz v karte nad nadpisom) */
.tl-marker { position: absolute; top: 22px; width: 14px; height: 14px; background: var(--red); box-shadow: 0 0 0 4px #fff; z-index: 2; }
.tl-step--left .tl-marker { right: -7px; }
.tl-step--right .tl-marker { left: -7px; }
/* ikona v karte NAD nadpisom — svetločervený kruh (rovnaký štýl ako .benefit__icon v „Prečo SafetyBox") */
.tl-icon { width: 54px; height: 54px; border-radius: 50%; background: #fdecea; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.tl-icon img { width: 38px; height: 38px; }
/* karta */
.tl-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 1.6rem; box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 18px 30px -24px rgba(0,0,0,.18); }
/* veľké duchové číslo kroku — vždy vpravo hore v karte (dekorácia; poradie nesie <ol>, preto je faded OK pre EAA) */
.tl-card::after { content: counter(tl, decimal-leading-zero); position: absolute; top: 1rem; right: 1.4rem; font-size: clamp(4.2rem, 5.5vw, 5.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--red); opacity: .08; pointer-events: none; z-index: 0; }
.tl-card h3 { position: relative; z-index: 1; margin-bottom: .4rem; }
.tl-card p { position: relative; z-index: 1; color: var(--grey); margin: 0; font-size: .96rem; }
/* chvostík karty smerom k čiare (otočený štvorček) */
.tl-card::before { content: ""; position: absolute; top: 20px; width: 13px; height: 13px; background: #fff; transform: rotate(45deg); }
.tl-step--left .tl-card::before { right: -7px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.tl-step--right .tl-card::before { left: -7px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
/* postupné zjavovanie pri scrolle — karty naskakujú zo svojej strany (klient si to želal) */
@media (prefers-reduced-motion: no-preference) {
  .tl-step--left.reveal.in { animation: tlInLeft .55s ease both; }
  .tl-step--right.reveal.in { animation: tlInRight .55s ease both; }
}
@keyframes tlInLeft { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes tlInRight { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
/* Mobil: jednostĺpcový timeline — čiara vľavo, karty vpravo, chvostík doľava */
@media (max-width: 767.98px) {
  .timeline { max-width: 100%; }
  .timeline::before { left: 28px; transform: none; }
  .tl-step, .tl-step--left, .tl-step--right { width: 100%; left: 0; padding: 0 0 0 74px; margin-bottom: 1.5rem; }
  .tl-step--left .tl-marker, .tl-step--right .tl-marker { left: 21px; right: auto; }
  .tl-step--left .tl-card::before, .tl-step--right .tl-card::before { left: -7px; right: auto; border: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
  /* mobil: fade-up namiesto bočného posunu (žiadny horizontálny pretok) */
  .tl-step--left.reveal.in, .tl-step--right.reveal.in { animation: revealIn .5s ease both; }
}

/* ============================================================
   VIDEO BLOK — samostatný (WP flexible content). YouTube facade, 16:9, contained.
   ============================================================ */
.video-embed { max-width: 880px; margin: 0 auto; }
.video-embed .yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: #000; border-radius: 12px; overflow: hidden; }
.video-embed .yt-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .2s ease; }
.video-embed .yt:hover .yt-thumb, .video-embed .yt:focus-visible .yt-thumb { transform: scale(1.03); opacity: .9; }
.video-embed .yt-btn { position: absolute; inset: 0; margin: auto; width: 84px; height: 58px; display: grid; place-items: center; background: var(--red); border-radius: 14px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.5); transition: background .15s ease, transform .15s ease; }
.video-embed .yt:hover .yt-btn, .video-embed .yt:focus-visible .yt-btn { background: var(--red-darker); transform: scale(1.06); }
.video-embed .yt-btn svg { width: 30px; height: 30px; fill: #fff; }
.video-embed .yt:focus-visible { outline: none; }
.video-embed .yt:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 3px solid var(--red-strong); border-radius: 12px; pointer-events: none; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }

/* ============================================================
   HLAVIČKA — svetlá (logo, tagline, kontakt, vlajky + navigácia)
   ============================================================ */
header { position: relative; }
/* Sticky „headroom": desktop = nav lišta, mobile = horná lišta (logo + hamburger).
   Prilepí sa až keď scrolluješ NAHOR (nie hneď). Cieľ aj stavy rieši JS. */
.header-nav.is-sticky, .header-top.is-sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.2);
  transform: translateY(-100%); transition: transform .3s ease; will-change: transform;
}
.nav-open .header-nav.is-sticky,
.nav-open .header-top.is-sticky { box-shadow: none; }
.header-nav.is-pinned, .header-top.is-pinned { transform: translateY(0); }
.admin-bar .header-nav.is-sticky, .admin-bar .header-top.is-sticky { top: 32px; } /* WP admin bar */

.header-top { border-bottom: 1px solid var(--line); }
.header-top .container, .header-top .container-lg { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; flex-wrap: wrap; }
.brand-group { display: flex; align-items: center; gap: .9rem; }
/* claim VEDĽA loga, oddelený zvislou čiarou (čiara na výšku loga); veľký text, jeden riadok */
.brand-claim { margin: 0; padding-bottom: 7px; align-self: stretch; display: flex; align-items: center; padding-left: 1.1rem; border-left: 1px solid var(--line); font-size: 1.2rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.brand-claim strong { font-weight: 800; padding-left: 5px; }
.brand img { width: 150px; height: auto; }
.brand-by { display: inline-flex; align-items: center; gap: .2rem; height: 45px; padding-left: 1rem; border-left: 1px solid var(--line); }
.brand-by:hover { color: inherit; }
.brand-by-label { font-size: .68rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .07em; color: var(--grey); max-width: 6em; }
.brand-by img { height: 30px; width: auto; }
.header-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-left: auto; } /* claim je teraz pod logom → kontakt ukotvený vpravo */
.header-contact { display: flex; flex-direction: column; gap: .1rem; font-size: .92rem; }
.header-contact a { color: var(--ink); display: inline-flex; align-items: center; gap: .45rem; min-height: 24px; } /* WCAG 2.5.8 touch target — klikacia plocha ≥24px bez zväčšenia textu */
.header-contact a:hover { color: var(--red-strong); }
.header-contact svg { width: 15px; height: 15px; color: var(--red); }

/* Navigačný riadok */
.header-nav { border-bottom: 1px solid var(--line); }
.header-nav .container, .header-nav .container-lg { display: flex; align-items: center; gap: .5rem; }
.mainnav { width: 100%; display: flex; align-items: center; gap: .5rem; }
.mainnav ul { display: flex; flex-wrap: wrap; }
.mainnav ul li { min-height: 100%; }
.mainnav a {
  display: flex; align-items: center; gap: .4rem; min-height: 100%;
  color: var(--ink); font-weight: 600; font-size: 1rem; padding: 0.6rem 0.72rem 0.4rem;
  border-bottom: 0.2rem solid transparent; transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.mainnav a:hover { color: var(--red-strong); }
/* aktívna položka — WP wp_nav_menu (current-menu-item/current_page_item) aj aria-current */
.mainnav a[aria-current="page"],
.mainnav .current-menu-item > a,
.mainnav .current_page_item > a { color: var(--red-strong); border-bottom-color: var(--red); }
.mainnav .home-link svg { width: 18px; height: 18px; margin-bottom: -3px; }

/* Hamburger — moderný, bez rámika (len čisté linky); animuje sa na X */
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; position: relative; padding: 0; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 50%; width: 24px; height: 2px; background: var(--ink); transform: translateX(-50%); transition: transform .25s ease, top .25s ease, background .15s ease; }
.nav-toggle span { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* Jazykový prepínač — súčasť navigácie; na desktope vpravo, na mobile v rozbalenom overlay menu */
.lang-switch { position: relative; flex: none; margin-left: auto; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 0;
  padding: .4rem 0; font-weight: 800; color: var(--ink);
  transition: border-color .15s ease;
}
.lang-toggle:hover { border-color: var(--ink); }
.flag { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lang-code { letter-spacing: .03em; }
.lang-toggle .caret { width: 14px; height: 14px; transition: transform .15s ease; }
.lang-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + .1rem); margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.4); padding: .35rem; z-index: 60;
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: center; width: 100%; gap: .65rem; padding: .55rem .6rem;
  border-radius: 4px; color: var(--ink); font-weight: 600; font-size: .92rem;
}
.lang-menu a:hover { color: var(--red-strong); }
.lang-menu a[aria-current="true"] { color: var(--red-strong); }
.lang-menu a[aria-current="true"] .flag { box-shadow: 0 0 0 2px var(--red); } /* rámik na aktívnej */

/* ============================================================
   HEADLINE — hero s obrázkom na pozadí (.headline-bg = full-bleed)
   ============================================================ */
.headline { position: relative; overflow: hidden; background: #f7f7f7; padding: 100px 0; }

/* hero pozadie ako <img> (nie CSS background) — objaviteľné v HTML pre LCP + fetchpriority="high" */
.headline > .container-lg { position: relative; z-index: 1; }
.headline-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none; z-index: 0; pointer-events: none; }
.headline-home .headline-img { display: inline-block; margin: -20px 20px -40px 80px; }

/* Mäkký eliptický tieň POD automatom (ground shadow) — vždy priehľadný, netreba ho v PNG.
   Použiť s čistým automatom bez tieňa. Polohu/veľkosť dolaď: bottom, width, height. */
.headline-img { position: relative; }
.headline-img img { position: relative; z-index: 1; }
.headline-img::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: -5%; transform: translateX(-58%) rotate(-5deg);
  width: 100%; height: 20%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.30) 36%, transparent 70%);
  filter: blur(9px);
}

/* ============================================================
   ÚVODNÝ BLOK (text + automat ako stály prvok)
   ============================================================ */
.lead { font-size: 1.2rem; }
.section-title .lead { padding-top: 1rem; width: 600px; max-width: 100%; margin-left: auto; margin-right: auto; }
.lead .container, .lead .container-lg {
  display: grid; grid-template-columns: 1fr clamp(260px, 32%, 380px); gap: clamp(2rem, 5vw, 4rem);
  align-items: start; padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.lead-text > * + * { margin-top: 1rem; }
.lead-text h1 { font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.25; margin-bottom: 1.25rem; }
.lead-text h1 .box { border: 3px solid var(--red); padding: 0 .2em; white-space: nowrap; } /* signature rámik */
.lead-text .q { font-weight: 800; font-size: 1.1rem; margin-top: 1.75rem; border-left: 4px solid var(--red); padding-left: .7rem; } /* rámik-akcent */
.list-arrow, .list-dot { display: grid; gap: .5rem; margin-top: .6rem; }
.list-arrow li { padding-left: 1.7rem; position: relative; }
.list-arrow li::before { content: "→"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.list-dot li { padding-left: 1.7rem; position: relative; }
.list-dot li::before { content: ""; position: absolute; left: .25rem; top: .5em; width: 9px; height: 9px; border: 2px solid var(--red); border-radius: 2px; } /* rámčekový bullet */
.lead-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.lead-visual { position: sticky; top: 1.5rem; justify-self: center; }
.lead-visual img { width: min(340px, 100%); }

/* ============================================================
   REFERENCIE — videá + logá (Splide slidery)
   ============================================================ */
.ref-videos { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* bočný padding LEN keď sa reálne zobrazujú šípky (Splide pridá .is-overflow); inak videá zarovnané s gridom */
.ref-videos.is-overflow { padding-inline: 3.75rem; }
/* šípky sa ukážu LEN keď je položiek viac než sa zmestí (Splide pridá .is-overflow) */
.splide:not(.is-overflow) .splide__arrows { display: none; }
/* centrovať LEN 1 video: track flex (list = plná šírka) + list justify center (pri 2 by margin gapu orezal ľavé) */
.ref-videos--single .splide__track { display: flex; }
.ref-videos--single .splide__list { justify-content: center; }
.ref-videos--single .splide__slide { margin-right: 0 !important; } /* bez koncového gapu → presne na stred */

/* Splide šípky — brandové (červené, hranaté) */
.splide__arrow { background: var(--red); width: 2.6rem; height: 2.6rem; border-radius: 0; opacity: 1; transition: background .15s ease; }
.splide__arrow:hover:not(:disabled) { background: var(--red-darker); }
.splide__arrow:disabled { display: none; } /* radšej skryť než vybledené (žiadny „splývajúci" stav) */
.splide__arrow svg { fill: #fff; width: 1.1rem; height: 1.1rem; }
/* šípky v bočnom paddingu = MIMO video obrázkov */
.ref-videos .splide__arrow--prev { left: .25rem; }
.ref-videos .splide__arrow--next { right: .25rem; }

/* Splide indikátory (pagination) — len na mobile (≤767px) namiesto šípok; hranaté čiarky ladiace s brandom */
.ref-videos .splide__pagination { position: static; padding: 0; margin-top: 1.25rem; display: flex; justify-content: center; align-items: center; gap: .5rem; }
.ref-videos .splide__pagination li { margin: 0; line-height: 0; }
.ref-videos .splide__pagination__page { display: block; width: 24px; height: 3px; margin: 0; background: #cfcfcf; border-radius: 0; opacity: 1; transition: background .15s ease; }
.ref-videos .splide__pagination__page.is-active { background: var(--red); }
.ref-videos--single .splide__pagination { display: none; } /* 1 video → bez indikátora */

/* YouTube facade — náhľad + play, iframe až po kliknutí (výkon + GDPR) */
.ref-videos .yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: #000; border-radius: 8px; overflow: hidden; }
.ref-videos .yt-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .2s ease; }
.ref-videos .yt:hover .yt-thumb, .ref-videos .yt:focus-visible .yt-thumb { transform: scale(1.04); opacity: .88; }
.ref-videos .yt-btn { position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; display: grid; place-items: center; background: var(--red); border-radius: 12px; box-shadow: 0 6px 20px -6px rgba(0,0,0,.5); transition: background .15s ease, transform .15s ease; }
.ref-videos .yt:hover .yt-btn, .ref-videos .yt:focus-visible .yt-btn { background: var(--red-darker); transform: scale(1.06); }
.ref-videos .yt-btn svg { width: 28px; height: 28px; fill: #fff; }
.ref-videos .splide__slide iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; display: block; }

/* Logá — slidery, dlaždice (placeholder; nahradiť <img> reálnym logom) */
/* Logá = full-bleed marquee (mimo containeru) + bočná maska → fade „zjavovania" po stranách */
.ref-logos { margin-top: clamp(2rem, 4vw, 3rem); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
.ref-logos .splide__slide { display: flex; align-items: center; justify-content: center; padding-block: .6rem; }
/* pevný box + object-fit → funguje pre SVG aj PNG (SVG s width:auto+max-height kolaboval na 0×0) */
/* autoWidth: slide = prirodzená šírka loga (pevná výška) → rovnaký gap medzi VŠETKÝMI logami */
.ref-logos .splide__slide a { display: block; height: 40px; }
.ref-logos .splide__slide img { display: block; height: 38px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s ease, opacity .2s ease; }
.ref-logos .splide__slide a:hover img { filter: grayscale(0); opacity: 1; }
/* Pause/Play ovládanie auto-scrollu log (WCAG 2.2.2 Pause, Stop, Hide).
   Skryté (opacity:0, ale fokusovateľné a v a11y strome) → zjaví sa LEN pri fokuse z klávesnice (Tab).
   Myš pozastaví hover nad logami (pauseOnHover). Žiadny natrvalo viditeľný prvok. */
/* --- Referencie: citáty zákazníkov (červený horný akcent + červená úvodzovka = „red border" identita) --- */
.quotes { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.quote-card { display: flex; flex-direction: column; margin: 0; padding: 1.5rem 1.6rem 1.6rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); }
.quote-card::before { content: "\201C"; display: block; font: 800 2.6rem/.6 Georgia, "Times New Roman", serif; color: var(--red); margin-bottom: .7rem; }
.quote-card__text { margin: 0; font-style: normal; }
.quote-card__cite { margin-top: auto; padding-top: 1.1rem; }
.quote-card__name { display: block; font-weight: 800; color: var(--ink); }
.quote-card__role { color: var(--grey); font-size: .9rem; }
/* krátke ohlasy — masonry stĺpce (žiadny prázdny priestor na konci); bez mena */
.quotes-short { column-count: 2; column-gap: 1.5rem; }
.quotes-short .quote-card { break-inside: avoid; margin-bottom: 1.5rem; }
.quotes-short .quote-card__text { font-size: 1.06rem; }
@media (max-width: 991.98px) { .quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639.98px) { .quotes { grid-template-columns: 1fr; } .quotes-short { column-count: 1; } }

/* Slider citátov (viac referencií cez Splide) — karta vyplní výšku slidu, šípky po stranách, bodky dole */
.quotes-slider.is-overflow { padding-inline: 3.5rem; } /* miesto pre šípky mimo kariet */
.quotes-slider .splide__slide { display: flex; height: auto; }
.quotes-slider .quote-card { width: 100%; }
.quotes-slider .splide__arrow--prev { left: 0; }
.quotes-slider .splide__arrow--next { right: 0; }
.quotes-slider .splide__pagination { position: static; padding: 0; margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: .5rem; }
.quotes-slider .splide__pagination li { margin: 0; line-height: 0; }
.quotes-slider .splide__pagination__page { display: block; width: 24px; height: 3px; margin: 0; background: #cfcfcf; border-radius: 0; opacity: 1; transition: background .15s ease; }
.quotes-slider .splide__pagination__page.is-active { background: var(--red); }
/* 1 stĺpec (≤767): bez šípok/bodiek, peek ďalšej karty bleeduje k pravému okraju obrazovky (ľavá ostáva zarovnaná s obsahom) */
@media (max-width: 767.98px) {
  .quotes-slider.is-overflow { padding-inline: 0; }
  .quotes-slider { margin-right: calc(50% - 50vw); }
}

.references { position: relative; }
.marquee-toggle { position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--grey); font-size: .8rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.marquee-toggle:focus-visible { opacity: 1; pointer-events: auto; }
.marquee-toggle:hover { color: var(--red-strong); border-color: var(--red); }
.marquee-toggle svg { width: 13px; height: 13px; fill: currentColor; }

/* ============================================================
   PÄTA (tmavá, červené nadpisy — ako DEXIS)
   ============================================================ */
.site-footer { color: var(--grey); font-size: .9rem; }
.site-footer a { color: var(--grey); }
.site-footer a:hover { color: var(--red-strong); }
.footer-bottom p a { text-decoration: underline; text-underline-offset: 2px; } /* odkaz vo vete odlíšiť aj inak než farbou (1.4.1) */
.footer-main { padding-block: 2.75rem; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.footer-col-title { color: var(--ink); font-size: .85rem; font-weight: 800; margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .03em; }
.footer-col a { display: block; padding: .2rem 0; }
.footer-bottom { font-size: 0.80rem; padding-block: 0.8rem; border-top: 1px solid var(--line); }
.footer-bottom .container, .footer-bottom .container-lg { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-socials { display: flex; gap: .6rem; }
.footer-socials a { width: 36px; height: 36px; display: grid; place-items: center; background: #F7F7F7; color: var(--ink); }
.footer-socials a:hover { background: var(--red); color: #fff; }
.footer-socials svg { width: 17px; height: 17px; }

/* ============================================================
   NOVINKY — archív článkov (WP loop) + stránkovanie (paginate_links).
   Karta: biela, jemný červený rámik (#fdecea), mäkký tieň — rovnaký jazyk ako .feature.
   Obsahové plochy = mäkké rohy; navigačné ovládače (filter, stránky) = ostré štvorce
   s červeným rámikom (echo .btn + „red box" identity).
   ============================================================ */
.news-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2.25rem; }
.news-filter a { display: inline-flex; align-items: center; padding: .5rem 1.1rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); border: 2px solid var(--line); transition: color .15s ease, border-color .15s ease, background .15s ease; }
.news-filter a:hover { border-color: var(--red); color: var(--red-strong); }
.news-filter a[aria-current="page"] { background: var(--red-strong); border-color: var(--red-strong); color: #fff; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.news-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #fdecea; border-radius: 14px; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.news-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 20px 30px -22px rgba(0,0,0,.22); border-color: #e9d2ce; transform: translateY(-3px); }

.news-card__media { position: relative; display: block; aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: var(--soft); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.news-card:hover .news-card__media img { transform: scale(1.04); }
/* kategória = ostrý červený štítok (značková „red box" identita), prekrýva spodný okraj fotky */
.news-card__cat { position: absolute; left: 0; bottom: 0; padding: .4rem .85rem; background: var(--red-strong); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.news-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.4rem 1.5rem; }
.news-card__meta { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.news-card__meta::before { content: ""; flex: none; width: .5rem; height: .5rem; background: var(--red); } /* červený štvorček = brand bullet */
.news-card__title { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .6rem; }
.news-card__title a { color: var(--ink); }
.news-card__title a:hover { color: var(--red-strong); }
/* celá karta klikateľná cez „stretched" odkaz titulku (jediný odkaz s textom → bez duplicít pre čítačku) */
.news-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card__excerpt { font-size: .94rem; color: var(--grey); margin: 0 0 1.15rem; }
.news-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--red-strong); }
.news-card__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.news-card:hover .news-card__more svg { transform: translateX(3px); }

/* stránkovanie — markup zrkadlí WP paginate_links() (.page-numbers / .current / .dots / .prev / .next) */
.news-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.news-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .65rem; font-weight: 800; font-size: .95rem; color: var(--ink); background: #fff; border: 2px solid var(--line); transition: color .15s ease, border-color .15s ease, background .15s ease; }
a.page-numbers:hover { border-color: var(--red); color: var(--red-strong); }
.page-numbers.current { background: var(--red-strong); border-color: var(--red-strong); color: #fff; }
.page-numbers.dots { min-width: 1.6rem; border-color: transparent; color: var(--grey); }
.page-numbers.prev, .page-numbers.next { gap: .4rem; padding: 0 1.05rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.page-numbers.prev svg, .page-numbers.next svg { width: 16px; height: 16px; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .news-card:nth-child(3n+2).in { animation-delay: .07s; }
  .news-card:nth-child(3n).in { animation-delay: .14s; }
}
@media (max-width: 991.98px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
  .news-grid { grid-template-columns: 1fr; }
  .page-numbers.prev span, .page-numbers.next span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* na úzkych obrazovkách len šípky */
  .page-numbers.prev, .page-numbers.next { padding: 0; min-width: 44px; }
}

/* SÚVISIACE NOVINKY (single.php) — pod 3-stĺpcovou šírkou = „peek" slider (swipe, bez šípok/bodiek).
   Rovnaký CSS scroll-snap vzor ako .feature-grid na mobile. Platí LEN pre `.news-related`
   (hlavný výpis `.news-grid` so stránkovaním ostáva mriežka). */
@media (max-width: 991.98px) {
  .news-related {
    display: flex; grid-template-columns: none;
    width: 100vw; margin-left: calc(50% - 50vw);              /* full-bleed cez okraje containeru */
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; padding: 0 1.25rem .5rem; scroll-padding-left: 1.25rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .news-related::-webkit-scrollbar { display: none; }
  .news-related .news-card { flex: 0 0 46%; scroll-snap-align: start; } /* tablet: ~2 karty + peek */
  .news-related .news-card:hover { transform: none; }                   /* žiadny zdvih pri swipe/touch */
}
@media (max-width: 575.98px) {
  .news-related .news-card { flex-basis: 80%; }                         /* mobil: 1 karta + peek ďalšej */
}

/* ============================================================
   DETAIL ČLÁNKU (WP single.php) — editoriálna typografia v úzkom stĺpci (~66 znakov/riadok).
   Hlavička článku + featured obrázok širší než text; telo = čitateľný „prose" stĺpec.
   ============================================================ */
.article { padding-block: clamp(2.5rem, 5vw, 4rem); }
.article-head { max-width: 46rem; margin: 0 auto 1.75rem; }

/* omrvinky (WP breadcrumb / Yoast) */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0 0 1.3rem; padding: 0; list-style: none; font-size: .82rem; color: var(--grey); }
.breadcrumb li { display: flex; align-items: center; gap: .55rem; }
.breadcrumb li:not(:last-child)::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg); }
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--red-strong); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }

.article-cat { display: inline-block; padding: .4rem .85rem; margin-bottom: 1rem; background: var(--red-strong); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.article-title { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.12; margin-bottom: 1.1rem; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin: 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.article-meta span { display: flex; align-items: center; gap: .5rem; }
.article-meta span::before { content: ""; flex: none; width: .5rem; height: .5rem; background: var(--red); } /* červený štvorček = brand bullet */

.article-hero { max-width: 60rem; margin: 0 auto 2.5rem; }
.article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 14px; }
.article-hero figcaption { margin-top: .65rem; font-size: .85rem; color: var(--grey); text-align: center; }

/* telo článku = úzky čitateľný stĺpec; rytmus cez „lobotomized owl" */
.article-body { max-width: 44rem; margin: 0 auto; font-size: 1.06rem; }
.article-body > * + * { margin-top: 1.25rem; }
.article-body p { line-height: 1.75; }
.article-lead { font-size: 1.2rem; line-height: 1.6; }
/* nadpisy v tele majú červenú „eyebrow" čiarku (echo headline-sub__eyebrow) — značkový podpis */
.article-body h2 { font-size: 1.5rem; line-height: 1.25; margin-top: 2.6rem; }
.article-body h2::before { content: ""; display: block; width: 2.2rem; height: 4px; margin-bottom: .9rem; background: var(--red); }
.article-body h3 { font-size: 1.2rem; margin-top: 2rem; }
.article-body ul { list-style: none; padding-left: 0; display: grid; gap: .6rem; }
.article-body ul li { position: relative; padding-left: 1.6rem; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: .58em; width: .5rem; height: .5rem; background: var(--red); }
.article-body ol { padding-left: 1.3rem; display: grid; gap: .6rem; }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { font-weight: 800; }
.article-body figure { margin: 2rem 0; }
.article-body figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.article-body figcaption { margin-top: .55rem; font-size: .85rem; color: var(--grey); }

/* pull-quote = červený ľavý rámik (red-border identity) */
.article-quote { margin: 2.6rem 0; padding: .2rem 0 .2rem 1.5rem; border-left: 4px solid var(--red); font-size: 1.35rem; line-height: 1.45; font-weight: 700; }
.article-quote cite { display: block; margin-top: .8rem; font-size: .9rem; font-weight: 600; font-style: normal; color: var(--grey); }

/* „V skratke" — zhrnutie v jemnom boxe s červeným okrajom + brandové fajky */
.article-keys { margin: 2.6rem 0; padding: 1.6rem 1.7rem; background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; }
.article-keys__title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.article-keys .check-list { margin: 0; }

/* päta článku: späť na novinky (vľavo) + zdieľanie (vpravo) */
.article-foot { max-width: 44rem; margin: 2.6rem auto 0; padding-top: 1.75rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.article-back { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.article-back:hover { color: var(--red-strong); }
.article-back svg { width: 18px; height: 18px; }
.article-share { display: flex; align-items: center; gap: .5rem; }
.article-share__label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); }
.article-share a { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--line); color: var(--ink); transition: border-color .15s ease, color .15s ease; }
.article-share a:hover { border-color: var(--red); color: var(--red-strong); }
.article-share svg { width: 17px; height: 17px; }

@media (max-width: 575.98px) {
  .article-hero img { border-radius: 10px; }
  .article-foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONZÍVNE
   ============================================================ */

@media (max-width: 1199.98px) {
  .mainnav a { font-size: 0.9rem; padding: .6rem .62rem .4rem }
}
@media (max-width: 991.98px) {
  /* Horná lišta: jeden riadok — logo vľavo, kontakt+DEXIS vpravo, hamburger úplne vpravo.
     Nič sa nezalamuje dole; pri zúžení sa prvky progresívne SKRÝVAJÚ (nižšie breakpointy). */
  .brand-claim { display: none; }                             /* claim pod logom preč v hamburger režime (kompaktná hlavička) */
  .header-top .container, .header-top .container-lg { flex-wrap: nowrap; gap: 1rem; }
  .header-meta { margin-left: auto; gap: 1rem; flex: 0 1 auto; }   /* kontakt+DEXIS ostávajú hore vpravo */
  .nav-toggle { display: block; margin-left: .5rem; flex: none; position: relative; z-index: 1002; }
  .header-nav { border-bottom: 0; }                           /* nav lišta sa na mobile nezobrazuje ako pruh (menu je overlay) */

  /* MOBILNÉ MENU = fullscreen overlay (logo + X ostávajú vidieť hore); položky vycentrované, bez čiar */
  .mainnav {
    position: fixed; inset: 0; z-index: 1000; background: #fff;
    flex-direction: column; align-items: center; gap: 0;
    padding: 90px 1.5rem 2rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .mainnav.open { opacity: 1; visibility: visible; transform: none; }
  .mainnav ul { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .mainnav ul li { min-height: 1px; }
  /* žiadne deliace čiary; aktívna položka = len červená farba (color z .mainnav a[aria-current]) */
  .mainnav a { justify-content: center; padding: 0.5rem 1.25rem; border-bottom: 0; margin-bottom: 0; font-size: 1.15rem; }
  .mainnav .home-link svg { width: 24px; height: 24px; margin-bottom: 5px; }

  /* jazyky = na konci zoznamu odkazov; celý blok je vycentrovaný (align-items:center v .mainnav),
     ale obsah riadkov je zarovnaný doľava → všetky vlajky (vrátane SK toggle) sedia na spoločnej osi */
  .lang-switch { margin-left: 0; margin-top: .5rem; text-align: center; }
  .lang-toggle { width: auto; justify-content: flex-start; padding: 1rem .25rem; font-size: 1.15rem; }
  .lang-menu { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
  .lang-menu a { justify-content: flex-start; font-size: 1.05rem; padding: .7rem .25rem; }

  /* otvorené menu: lišta s logom fixne hore, kontakt skrytý, zámok scrollu */
  body.nav-open { overflow: hidden; }
  body.nav-open .header-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: #fff; transform: none; }

  .headline { padding: 50px 0; }
  .headline-home .headline-img { margin: -20px 0 -20px 20px }

  .lead .container, .lead .container-lg { grid-template-columns: 1fr; }
  .lead-visual { order: -1; position: static; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .lead { font-size: 1.1rem }

  .headline-text img { width: 160px; height: auto; }
  .headline-bg::after { background: linear-gradient(180deg, rgba(247,247,247,.93) 0%, rgba(247,247,247,.78) 100%); }
  /* na mobile žiadne šípky → video na plnú šírku bez bočného offsetu (navigácia = bodky) */
  .ref-videos.is-overflow { padding-inline: 0; }
  .ref-videos .splide__arrows { display: none; }

  /* VÝHODY na telefóne = horizontálny „peek" slider (kúsok ďalšej karty vidno až po kraj obrazovky).
     Full-bleed (100vw) → slider ide cez okraje containeru; čistý CSS scroll-snap, žiadny JS. */
  .feature-grid {
    display: flex; grid-template-columns: none;
    width: 100vw; margin-left: calc(50% - 50vw);              /* roztiahnuť na okraje obrazovky */
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; padding: 0 1.25rem .5rem;
    scroll-padding-left: 1.25rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .feature-grid::-webkit-scrollbar { display: none; }
  .feature { flex: 0 0 85%; scroll-snap-align: start; }

  .headline { padding: 50px 0; }

  /* FOOTER = akordeóny: 1 stĺpec, odkazy skryté pod klikateľným nadpisom (šetrí miesto na mobile).
     Markup ostáva čistý (WP widget/menu) — button + ARIA + panel pridáva JS (progresívne vylepšenie). */
  .footer-main { padding-block: 1rem 0; }
  .footer-cols { grid-template-columns: 1fr; gap: 0; }
  .footer-col { border-bottom: 1px solid var(--line); }
  .footer-col:last-child { border-bottom: 0; }
  .footer-col-title { margin: 0; }
  .footer-col-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .8rem .25rem; background: none; border: 0; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
  .footer-col-icon { flex: none; width: .5rem; height: .5rem; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
  .footer-col.is-open .footer-col-icon { transform: translateY(1px) rotate(-135deg); }
  /* rozbalenie cez grid-template-rows 0fr→1fr (plynulé, presná výška obsahu) */
  .footer-col-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
  .footer-col.is-open .footer-col-panel { grid-template-rows: 1fr; }
  /* visibility: hidden → zbalené odkazy von z tab poradia aj z čítačky obrazovky (na konci animácie) */
  .footer-col-panel-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility .28s; }
  .footer-col.is-open .footer-col-panel-inner { visibility: visible; }
  .footer-col-panel-inner a { padding: .35rem .25rem; }
  .footer-col-panel-inner > :last-child { margin-bottom: .6rem; }

  /* spodná lišta = vycentrovaný stĺpec (namiesto rozhádzaného space-between, kde „Created by" odskakoval) */
  .footer-bottom .container, .footer-bottom .container-lg { flex-direction: column; align-items: center; text-align: center; gap: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-col-panel, .footer-col-panel-inner, .footer-col-icon { transition: none; }
}
@media (max-width: 575.98px) {
  .brand-by { display: none; }                 /* DEXIS logo zmizne, keď sa už nezmestí */
  .brand-group { gap: .65rem; }
  .footer-cols { grid-template-columns: 1fr; }
  .lead-actions .btn { flex: 1 1 auto; justify-content: center; }

  .headline-home .headline-img { margin: 50px -20px -30px; }
  .box-actions .btn { width: 100%; text-align: center; justify-content: center; }

  .btn { font-size: 0.85rem; padding: .6rem 1.2rem; }
}
@media (max-width: 475px) {
  .lead { font-size: 1.05rem; }
  .brand img { width: 130px; }
  .header-contact { font-size: 0.8rem; }
  .nav-toggle { margin-left: 0; }
}
@media (max-width: 370px) {
  .brand img { width: 120px; }
  .header-contact { font-size: 0.7rem; gap: 0rem; }
  .header-contact svg { width: 10px; height: 10px; }
  .header-top .container, .header-top .container-lg { gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}