/* ==========================================================================
   BioRelax — prémiová vrstva (4. 9. 2026)
   --------------------------------------------------------------------------
   Marek: „vyzerá to fádne… nechcem generické komponenty. Máme dosť veľký
   archív moderných komponentov, vyber tie top, aby si web dostal na awwwards
   lvl, ale aby bol zároveň rýchly a UX-ovo dokonalý. Viac MOTION."

   Mechanizmy sú VYBRANÉ Z ARCHÍVU (579 položiek), nie vymyslené:

     octolane-grid-akordeon-a-superelipsa   efekt 2 · craft 10
       → akordeón grid-template-rows 0fr→1fr (presný, bez JS a bez merania)
       → corner-shape: superellipse() — natívne, väčší prvok = menšie číslo
       → text-box: cap alphabetic — odreže prázdno nad verzálkami
       → nábeh nadpisu po riadkoch cez opacity + translate + blur
     progresivne-rozostrenie                efekt 2 · craft 10
       → tri vrstvy backdrop-filter s prekrývajúcimi sa maskami; rozostrenie
         NARASTÁ, nekončí ostrou hranou. Len pás pod hlavičkou — nie plocha.
     cinematic-blur-mask-hero               efekt 2 · craft 9
       → čitateľnosť nad fotkou BEZ stmavenia: blur orezaný maskou zdola
     cisla-zoznam-s-vlasocnicami            efekt 1 · craft 9
       → číslo veľké vľavo, popis vpravo, vlásočnica pod; znesie rôzne dĺžky
     ai-designer-stopa-mysou-a-tiene        efekt 3 · craft 10
       → päťvrstvový tieň: každá vrstva nižšie, väčšia a slabšia
     hrubka-linky-max-1px                   efekt 1 · craft 10
       → --br-linka-hr: max(1px, .1rem); pod pixel neklesne, s rem rastie

   Strop efektu: wellness = 4, dohodnuté 5, momenty smú 6. Nič odtiaľto
   nejde nad 5 — awwwards úroveň robí presnosť, nie počet efektov.
   ========================================================================== */

:root {
  --br-linka-hr: max(1px, .1rem);
  /* päťvrstvový tieň — skutočný tieň nemá jednu vrstvu */
  --br-tien-tlacidlo:
    0 1px 2px rgba(51, 65, 92, .10),
    0 4px 4px rgba(51, 65, 92, .09),
    0 9px 6px rgba(51, 65, 92, .05),
    0 17px 7px rgba(51, 65, 92, .012),
    0 26px 7px rgba(51, 65, 92, 0),
    inset 0 2px 8px rgba(255, 255, 255, .5);
  --br-tien-karta:
    0 0 0 .5px rgba(51, 65, 92, .05),
    0 4px 30px rgba(51, 65, 92, .08);
}

/* ── superelipsa: väčší prvok dostane menšie číslo ─────────────────────── */
@supports (corner-shape: superellipse(1.25)) {
  .br-sklo, .ps-cena, .ps-cn-hlavna, .ps-pobocka, .ps-doklad,
  .ps-ram, .ps-cenovka, .ps-poznamka, .ps-cn-uspora {
    corner-shape: superellipse(1.25);
  }
  .dk-btn-primarny, .ps-btn-druhy, .ps-lista,
  .ps-program-pas li, .br-kicker, .dk-pill-prax {
    corner-shape: superellipse(1.6);
  }
}

/* ── typografia: odrezané prázdno nad verzálkami ───────────────────────── */
@supports (text-box: cap alphabetic) {
  .ps-hero h1, .ps-sekcia h2, .ps-cn-hlavna h2,
  .ps-pobocka-telo h3, .ps-doklad-telo h3, .ps-fazy b { text-box: cap alphabetic; }
  .br-kicker { text-box: cap alphabetic; }
}

/* ── MOTION: nadpis nabieha po riadkoch (podstranka.js delí na riadky) ──
   Väčší prvok sa hýbe dlhšie: nadpis .76 s, drobné prvky .32 s.
   Blur je to, čo z toho robí príchod, nie posun. */
/* Žiadny overflow: hidden — blur reveal nie je posun spod masky a orezanie
   by ukrojilo diakritiku (ý, á) pri line-height pod 1. */
.br-riadok { display: block; }
.br-riadok > i {
  display: block; font-style: inherit;
  opacity: 0; translate: 0 .5em; filter: blur(8px);
  transition:
    opacity .76s cubic-bezier(.22, 1, .36, 1) var(--br-r-odklad, 0s),
    translate .76s cubic-bezier(.22, 1, .36, 1) var(--br-r-odklad, 0s),
    filter .76s cubic-bezier(.22, 1, .36, 1) var(--br-r-odklad, 0s);
}
.je-vonku .br-riadok > i, .br-riadok.je-vonku > i,
h1.je-vonku .br-riadok > i { opacity: 1; translate: 0 0; filter: none; }

/* pás progresívneho rozostrenia pod hlavičkou zrušený 14. 9. (Marek: „divné rozmazané pozadie") */

/* ── tlačidlá: skutočný tieň a magnetická šípka ────────────────────────── */
.dk-btn-primarny { box-shadow: var(--br-tien-tlacidlo) !important; }
@media (hover: hover) {
  .dk-btn-primarny:hover { box-shadow: var(--br-tien-tlacidlo), 0 18px 40px -18px rgba(62, 93, 174, .45) !important; }
}

/* ── čísla ako zoznam s vlásočnicami ───────────────────────────────────── */
.br-cisla { display: grid; margin: 0; padding: 0; list-style: none; }
.br-cisla li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 10.25em;
  align-items: flex-end; gap: 0 1.5em;
  padding: 0 0 1em;
}
.br-cisla li + li { padding-top: 1.1em; }
.br-cisla li::after {
  content: ""; position: absolute; inset: auto 0 0;
  height: var(--br-linka-hr); background: var(--br-atrament); opacity: .16;
}
.br-cisla b {
  font-size: 3.4em; font-weight: 300; line-height: .9; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.br-cisla span {
  font-size: .95em; letter-spacing: .02em; text-transform: uppercase;
  color: var(--br-tlmene); padding-bottom: .35em;
}

/* ── akordeón: grid-template-rows 0fr → 1fr (presný, bez JS) ───────────── */
.ps-faq details { border-bottom: var(--br-linka-hr) solid var(--br-linka); }
.ps-faq summary { align-items: flex-start; }   /* dvojriadková otázka: ikona pri prvom riadku */
.ps-faq .ps-faq-telo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.23, 1, .32, 1);
}
.ps-faq details[open] .ps-faq-telo { grid-template-rows: 1fr; }
.ps-faq .ps-faq-telo > div { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ps-faq .ps-faq-telo { transition: none; }
  .br-riadok > i { opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important; }
}

/* ── hero na mobile: blur orezaný maskou, nie sivý závoj ────────────────
   Fotka si zachová farby aj jas; rozostrí sa len tam, kde leží text. */
@media (max-width: 860px) {
  .ps-hero-foto .ps-ram::after {
    background: linear-gradient(to top,
      rgba(242, 248, 249, .92) 0%, rgba(242, 248, 249, .55) 26%,
      rgba(242, 248, 249, .12) 46%, rgba(242, 248, 249, 0) 62%) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 52%);
    mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 52%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO PODSTRÁNKY — typografia vedie, fotka je pás
   Delený hero „text | fotka" je najbežnejšia kompozícia na webe; preto
   pôsobil fádne. Nadpis teraz beží cez celú os a dominuje, fotka je široký
   pás a fakty ležia na jeho spodku (cinematic-blur-mask-hero z archívu:
   čitateľnosť BEZ stmavenia — blur orezaný maskou zdola nahor).
   ══════════════════════════════════════════════════════════════════════════ */
.ps-hero--pas { padding: clamp(96px, 11vh, 128px) 0 clamp(44px, 6vw, 96px); }   /* 14. 9.: bez spodku sa ďalšia sekcia lepila na fotku */
.ps-hero--pas h1 {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  max-width: 20ch;
  /* 6.4vw/92px vytlačilo fotku aj ceny pod fold — na 1440×900 nevidel
     návštevník ani cenu, ani dôkaz. 5vw/68px necháva vrch fotky v okne. */
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 200;
  line-height: .98;
  letter-spacing: -.035em;
}
.ps-hero-spodok {
  display: grid; grid-template-columns: minmax(0, 46ch) auto;
  justify-content: start;          /* CTA hneď za textom, nie na opačnom konci */
  align-items: end; gap: clamp(20px, 4vw, 72px);
  margin-top: clamp(26px, 3.4vw, 44px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: var(--br-linka-hr) solid var(--br-linka);
}
.ps-hero--pas .ps-hero-perex { margin: 0; max-width: 46ch; }
.ps-hero--pas .ps-hero-cta { margin: 0; }

.ps-hero--pas .ps-hero-foto {
  position: relative;
  margin: clamp(30px, 4vw, 56px) auto 0;
  max-width: var(--br-os);
  padding-inline: var(--br-okraj);
}
.ps-hero--pas .ps-ram { position: relative; }
.ps-hero--pas .ps-hero-foto img { aspect-ratio: 21 / 9; object-position: 50% 34%; }

/* fakty ležia na spodku fotky v nízkom sklenenom páse len pod číslami.
   14. 9. (Marek): rozostrenie siahalo 60 % nad čísla a zakrylo polovicu fotky. */
.ps-hero--pas .ps-hero-fakty {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  margin: 0; padding: clamp(14px, 1.5vw, 20px) clamp(18px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 32px);
  border: 0;
}
.ps-hero--pas .ps-hero-fakty::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  pointer-events: none;
}
.ps-hero--pas .ps-hero-fakty li { position: relative; display: grid; gap: 2px; }
.ps-hero--pas .ps-hero-fakty li + li { padding-left: clamp(12px, 2vw, 28px); }
.ps-hero--pas .ps-hero-fakty li + li::before {
  content: ""; position: absolute; left: 0; top: .1em; bottom: .1em;
  width: var(--br-linka-hr); background: var(--br-atrament); opacity: .18;
}
.ps-hero--pas .ps-hero-fakty span { font-size: clamp(11px, 1vw, 13px); color: var(--br-atrament); opacity: .72; }
.ps-hero--pas .ps-hero-fakty b {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.025em;
  color: var(--br-atrament); font-variant-numeric: tabular-nums;
}

/* Bez backdrop-filter (staršie prehliadače, dotyk) musí byť podklad plný,
   inak by čísla ležali priamo na fotke. */
@supports not (backdrop-filter: blur(1px)) {
  .ps-hero--pas .ps-hero-fakty::before { background: rgba(255, 255, 255, .88); }
}

@media (max-width: 860px) {
  .ps-hero--pas { padding-top: 84px; padding-bottom: 40px; }
  .ps-hero--pas h1 { max-width: none; font-size: clamp(34px, 9.6vw, 46px); }
  .ps-hero-spodok { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .ps-hero--pas .ps-hero-foto { margin-top: 22px; padding-inline: 0; }
  .ps-hero--pas .ps-ram { border-radius: 0; }
  .ps-hero--pas .ps-hero-foto img { aspect-ratio: 4 / 3; object-position: 50% 26%; }
  /* 14. 9.: fakty pod fotkou, nie cez ňu (na mobile zakrývali tri štvrtiny záberu) */
  .ps-hero--pas .ps-hero-fakty { position: relative; z-index: 1; padding: 14px var(--br-okraj) 16px; gap: 10px; background: rgba(255, 255, 255, .82); }   /* nad fotkou, ktorú ken burns zväčšuje cez spodný okraj */
  .ps-hero--pas .ps-hero-fakty::before { display: none; }
  .ps-hero--pas .ps-ram { box-shadow: none; }
  .ps-hero--pas .ps-hero-fakty b { font-size: 21px; }
  .ps-hero--pas .ps-hero-fakty span { font-size: 12px; line-height: 1.3; color: var(--br-tlmene); opacity: 1; }
  .ps-hero--pas .ps-hero-fakty li + li { padding-left: 10px; }
  /* mobilný závoj z podstranka.css tu nemá čo robiť — fakty majú vlastný */
  .ps-hero--pas .ps-ram::after { display: none !important; }
  .ps-hero--pas .ps-hero-text { margin-top: 0; }
}

/* ── hero video: prekryje fotku, keď sa načíta ─────────────────────────── */
.ps-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  opacity: 0; transition: opacity .8s var(--br-ease);
  pointer-events: none;
}
.ps-hero-video.je-vidno { opacity: 1; }
.ps-hero--pas .ps-ram > img { position: relative; z-index: 0; }

/* ── CLS 0,09 → 0: držiak scény nesmie meniť rozmery ────────────────────
   Základné CSS dáva držiaku width: min(1700px,150vw) + aspect-ratio 16/9
   a pravidlo [data-energia] to po spustení shadera prepne na inset: 0.
   Tá zmena je layout shift (nameraný 0,0903 na 1440). Držiak má rovnaké
   rozmery od začiatku; statická stuha si vystačí s object-fit: contain. */
.br-ambient-wave-holder {
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  width: auto !important; height: auto !important;
  aspect-ratio: auto !important;
  translate: none !important;
}

/* ── päta: mapa webu — každá služba je odkazovaná z každej stránky ───────
   Sedí v tom istom flex kontajneri ako údaje firmy, preto má jeho šírku.
   Pozadie a padding sa rušia natvrdo: všeobecné pravidlo pre <nav>
   (mobilná hlavička) by ho inak zafarbilo na sivý pás. */
.br-pata-nav {
  flex: 1 0 100%; position: relative; margin-top: 8px;
  padding: 22px 0 0 !important; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-top: 1px solid rgba(51, 65, 92, .12);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px 48px;
}
.br-pata-nav div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.br-pata-nav b { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #3E5DAE; }
.br-pata-nav a { font-size: 14px; line-height: 1.5; color: #33415C; text-decoration: none; }
@media (hover: hover) { .br-pata-nav a:hover { color: #3E5DAE; text-decoration: underline; text-underline-offset: .22em; } }
.br-pata-nav a:focus-visible { outline: 2px solid #3E5DAE; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 720px) { .br-pata-nav { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ── HP: štyri kroky — karta nesmie pretiecť do susednej ────────────────
   .pk-mstone-telo má width:100% + padding bez border-box, preto sa karty
   na 1440 prekrývali o ~28 px a na 1100 ešte viac. Stĺpce minmax(0,1fr),
   aby dlhý štítok nerozťahoval stĺpec. Len desktop — mobil má časovú os. */
.pk-milestone-mriezka .pk-mstone-telo { box-sizing: border-box; }
@media (min-width: 861px) { .pk-milestone-mriezka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── HP: Prečo nám veriť — karta 70 € cez celú šírku ako karta 18+,
   inak ostáva vpravo dole prázdne miesto ─────────────────────────────── */
@media (min-width: 861px) { .dk-bento-fakty .dk-fakt-karta--cena { grid-column: 1 / -1; } }

/* ── odkaz na súvisiaci článok pod otázkami — klaster služba ↔ blog ──── */
.ps-clanok { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--br-tlmene, #54688A); }
.ps-clanok a, .ps-pobocka-orient a {
  color: var(--br-akcent-text, #3E5DAE); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
@media (hover: hover) { .ps-clanok a:hover, .ps-pobocka-orient a:hover { text-decoration-thickness: 2px; } }

/* ==========================================================================
   OPRAVY UX — očný prechod 14. 9. 2026 (Marek: „veľa vecí nesedí na desktope
   aj na mobile"). Každý blok hovorí, čo bolo zle a kde sa to videlo.
   ========================================================================== */

/* Podstránky, úvod: text vľavo, tlačidlo uprostred riadku a telefón vpravo sa
   na 1440 čítali ako tri rozhádzané kusy. Tlačidlo ide pod text ako na HP. */
.ps-hero-spodok { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
.ps-hero--pas .ps-hero-perex { max-width: 52ch; }

/* Podstránky, mobil: cez spodnú lištu s cenou presvital text odseku pod ňou. */
@media (max-width: 860px) {
  .ps-lista { background: #fff; box-shadow: 0 16px 36px -14px rgba(51, 65, 92, .42), inset 0 0 0 1px var(--br-linka); }
}

/* Priebeh: neaktívne fázy mali polovičné krytie, text bol sivý a vyzeral ako
   vypnutý. Čitateľné sú všetky, aktívnu značí farba čísla a názvu. */
.ps-fazy[data-scrub] li { opacity: 1; }
.ps-fazy li.je-aktivna::before, .ps-fazy li.je-aktivna b { color: var(--br-akcent-text); }

/* Program: svietiaci bod prechádzal cez popisy segmentov (na mobile cez „Magneto-“). */
.ps-program-pas .ps-program-svetlo { display: none; }

/* Na desktope je cena v bočnom paneli; v „Čo je v cene“ bola druhýkrát hneď vedľa. */
@media (min-width: 1101px) {
  .ps-telo:has(.ps-lista-bok) .ps-cena-karta { display: none; }
  .ps-telo:has(.ps-lista-bok) .ps-cena { grid-template-columns: minmax(0, 1fr); }
}

/* Mobilné menu: položky 28 px v hrúbke 700 boli mimo DNA (nadpisy 300) a ťažké.
   Hamburger sa po otvorení nemenil na krížik, nebolo jasné, ako menu zavrieť. */
[data-menu] a:not([href^="tel:"]) { font-size: 30px !important; font-weight: 300 !important; letter-spacing: -.02em !important; color: var(--br-atrament) !important; }
[data-menu-prepinac] span { transition: transform .3s var(--br-ease) !important; }
[data-menu-prepinac].je-otvorene span:first-child { transform: translateY(3.5px) rotate(45deg) !important; }
[data-menu-prepinac].je-otvorene span:last-child { transform: translateY(-3.5px) rotate(-45deg) !important; }

/* Formulár: polia v hrúbke 800 a zástupný text na 16 % krytí vyzerali ako
   vyplnené a zároveň vypnuté; výber služby mal 13 px šípku na kraji. */
.cform input, .cform select { font-weight: 500; letter-spacing: -.02em; }
.cform input::placeholder { color: rgba(84, 104, 138, .5); }
.cform select {
  padding-right: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333415C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 18px 18px;
}
.cform select + span[aria-hidden="true"] { display: none; }
[data-volba] button { font-weight: 500 !important; }
.cta-send { font-weight: 600 !important; }

/* HP, služby na mobile: údaj a odkaz v päte karty sa lámali, šípka ostala sama. */
@media (max-width: 860px) {
  .sl-bento-pata { flex-wrap: wrap; row-gap: 8px; }
  .sl-bento-odkaz { white-space: nowrap; }
}

/* HP, meridiány na mobile: osem riadkov textu na stred sa zle číta. */
@media (max-width: 860px) {
  .mrd-nadpis--stred, .mrd-uvod--stred { text-align: left; margin-inline: 0; }
}

/* HP, proces na desktope: popisy krokov mali 11 px. */
@media (min-width: 861px) {
  .pk-mstone-perex { font-size: 14px !important; line-height: 1.55 !important; }
  .pk-mstone-titul { font-size: 18px !important; }
  .pk-mstone-tagy span { font-size: 11.5px !important; }
}

/* Päta: obrí nápis BIORELAX bol dole odrezaný v tretine písmen a vyzeral ako
   chyba. Nápis je celý, päta mu dáva miesto. */
footer[data-dc-tpl="244"] { padding-bottom: calc(clamp(48px, 14vw, 215px) * .8 + 24px) !important; }
footer [data-dc-tpl="245"] { bottom: clamp(8px, 1.2vw, 16px) !important; line-height: .78 !important; font-size: clamp(48px, 14vw, 215px) !important; }   /* na 390 px sa nápis nezmestil do šírky */

/* HP úvod na mobile: video je širokouhlé a výrez zo stredu ukázal svetelný
   oblúk bez ženy, pôsobil ako dúhová chyba. Výrez ide na ňu, oblúk je aura. */
@media (max-width: 860px) {
  .hx-media :is(video, img) { object-position: 68% 50%; }
}

/* Dotykové ciele pod 44 px (zlomy.mjs na 768, 390 a 360 px): tlačidlo v hlavičke,
   odkazy v päte a omrvinky. Odkazy vnútri viet majú výnimku, tie ostávajú. */
@media (pointer: coarse), (max-width: 860px) {
  [data-hlavicka] > a.only-desktop:last-of-type { display: inline-flex !important; align-items: center; min-height: 44px; }
  .br-pata-nav div { row-gap: 0; }
  .br-pata-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .ps-omrvinky a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ═══ PODMENU SLUŽIEB (14. 9. 2026) ═════════════════════════════════════════
   Desktop: „Služby" ostáva odkazom na prehľad (#metody), šípka vedľa otvorí
   panel s ôsmimi metódami. Myšou stačí prejsť (hover len pri pointer:fine,
   na dotyku by sa lepil), klávesnicou Enter na šípke, Esc zavrie.
   Panel je bez backdrop-filter: odscrollovaná lišta ho má sama a vnorený
   filter by rozmazal len lištu, nie stránku pod ňou.
   Popis #54688A na bielej 5,6 : 1, akcent #3E5DAE 6,2 : 1. */
.br-podmenu { position: relative; display: inline-flex; align-items: center; }
.br-podmenu__sipka {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 1px;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  transition: background-color .2s ease;
}
.br-podmenu__sipka svg { transition: rotate .28s var(--br-ease); }
.br-podmenu.je-otvorene .br-podmenu__sipka svg { rotate: 180deg; }
.br-podmenu__panel {
  position: absolute; top: calc(100% + 18px); left: -18px; z-index: 2;
  width: min(560px, calc(100vw - 48px));
  padding: 8px; border-radius: 22px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 30px 70px -30px rgba(31, 43, 71, .35), 0 0 0 1px rgba(51, 65, 92, .07);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .2s ease, translate .28s var(--br-ease), visibility 0s linear .28s;
}
/* mostík cez medzeru medzi slovom a panelom, aby hover pri presune myši nevypadol */
.br-podmenu__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; }
.br-podmenu.je-otvorene .br-podmenu__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .br-podmenu:hover .br-podmenu__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .br-podmenu:hover .br-podmenu__sipka svg { rotate: 180deg; }
  .br-podmenu__sipka:hover { background: rgba(62, 93, 174, .08); }
  .br-podmenu.bez-hoveru:hover .br-podmenu__panel { opacity: 0; visibility: hidden; }
}
.br-podmenu__zoznam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
[data-hlavicka] .br-podmenu__zoznam a {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px;
  color: inherit; text-decoration: none; transition: background-color .18s ease;
}
[data-hlavicka] .br-podmenu__zoznam a:hover { background: rgba(191, 228, 232, .38); }
.br-podmenu__nazov { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.br-podmenu__popis { font-size: 13px; font-weight: 400; line-height: 1.35; color: #54688A; }
[data-hlavicka] .br-podmenu__vsetky {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; padding: 13px 14px 10px; border-top: 1px solid rgba(51, 65, 92, .08);
  font-size: 14px; font-weight: 500; color: #3E5DAE; text-decoration: none;
}
.br-podmenu__vsetky span { transition: translate .22s var(--br-ease); }
[data-hlavicka] .br-podmenu__vsetky:hover span { translate: 3px 0; }

/* aktuálna stránka (aria-current dopĺňa podstranka.py) */
[data-hlavicka] .only-desktop a[aria-current="page"],
.br-podmenu:has(a[aria-current="page"]) > .br-podmenu__odkaz { color: #3E5DAE; }
[data-hlavicka] .br-podmenu__zoznam a[aria-current="page"] { background: rgba(204, 197, 240, .32); }
[data-menu] > a[aria-current="page"] { color: #3E5DAE !important; }

/* Mobilné menu: Služby ako rozbaľovací zoznam. Otvorené menu sa nezmestí na
   výšku, preto sa posúva (data-lenis-prevent v HTML) a centruje cez okraje
   auto — justify-content:center by pri pretečení odrezal vrch. */
[data-menu].je-otvorene { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start !important; padding-block: 96px 40px; }
[data-menu] > :first-child { margin-top: auto; }
[data-menu] > :last-child { margin-bottom: auto; }
.br-mpodmenu { display: flex; flex-direction: column; align-items: center; }
[data-menu] .br-mpodmenu__prepinac {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 300 30px/1.2 "Switzer", system-ui, sans-serif; letter-spacing: -.02em; color: var(--br-atrament);
}
.br-mpodmenu__prepinac svg { transition: rotate .28s var(--br-ease); }
.br-mpodmenu.je-otvorene .br-mpodmenu__prepinac svg { rotate: 180deg; }
.br-mpodmenu__zoznam { display: none; list-style: none; margin: 8px 0 2px; padding: 6px 22px; border-radius: 22px; background: rgba(255, 255, 255, .72); }
.br-mpodmenu.je-otvorene .br-mpodmenu__zoznam { display: grid; animation: br-podmenu-dnu .3s var(--br-ease); }
[data-menu] .br-mpodmenu .br-mpodmenu__zoznam a {
  display: flex; justify-content: center; align-items: center; min-height: 44px;
  font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #54688A !important;
}
[data-menu] .br-mpodmenu .br-mpodmenu__zoznam a[aria-current="page"] { color: #3E5DAE !important; font-weight: 500 !important; }
@keyframes br-podmenu-dnu { from { opacity: 0; translate: 0 -6px; } }

/* ═══ HP · SLUŽBY: CELÁ KARTA JE ODKAZ (14. 9. 2026) ═══════════════════════
   Marek: „klikateľné musí byť aj na obrázku, celá karta". Roztiahnutý je odkaz
   v nadpise — odkaz „Viac o…" má pri hoveri transform a stal by sa obalom pre
   ::after, plocha by sa scvrkla na jeho rozmer. Fokus kreslí celá karta. */
.sl-bento-karta { position: relative; cursor: pointer; }
.sl-bento-titul a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.sl-bento-karta:has(a:focus-visible) { outline: 2px solid #3E5DAE; outline-offset: 4px; }
.sl-bento-karta a:focus-visible { outline: none !important; box-shadow: none !important; }

/* ═══ LIŠTA: PRI SCROLLE DOLE SA SCHOVÁ, HORE SA VRÁTI (14. 9. 2026) ═══════
   Logika v ui.js existovala, CSS ju vypínalo (transform: none !important — klient
   30. 8.: „sticky nechať"). Lišta ostáva na jeden pohyb nahor; pri čítaní uvoľní
   miesto. Objednanie drží bočný panel (desktop) a spodná lišta (mobil). */
[data-hlavicka] {
  transition: transform .42s var(--br-ease), top .45s var(--br-ease), width .45s var(--br-ease),
    background-color .3s ease, box-shadow .3s ease !important;
}
[data-hlavicka].je-schovana { transform: translate3d(0, -140%, 0) !important; }
/* 18. 9.: zrovnanie lišty po obnovení stránky uprostred (ui.js srovnaj) — bez prechodu, inak by
   sa lišta pred očami rozťahovala a zmenšovala */
[data-hlavicka].bez-prechodu { transition: none !important; }
.ps-lista-bok { transition: top .42s var(--br-ease); }
html:has([data-hlavicka].je-schovana) .ps-lista-bok { top: 28px; }
@media (prefers-reduced-motion: reduce) {
  [data-hlavicka].je-schovana { transform: none !important; }
}

/* ═══ STRÁNKY BEZ BOČNÉHO PANELA: SEKCIE NA DVE STRANY (14. 9. 2026) ═══════
   Marek: „cert aj kontakt majú obsahovú časť zarovnanú naľavo". Krátke tabuľky
   a zoznamy nechávali na širokej obrazovke pravé 40 % prázdne. Od 1101 px ide
   nadpis s úvodom vľavo a obsah vpravo; ľavý okraj ostáva zarovnaný s úvodom
   stránky. Bez zásahu do HTML: hlava sekcie pláva vľavo, obsah má ľavý okraj.
   Karty dokladov a pobočiek ostávajú na celú šírku. */
@media (min-width: 1101px) {
  .ps--siroka .ps-obal > .ps-sekcia:not(:has(.ps-doklady, .ps-pobocky)) { display: flow-root; }
  .ps--siroka .ps-obal > .ps-sekcia:not(:has(.ps-doklady, .ps-pobocky)) > :is(.br-kicker, h2, .ps-perex) {
    float: left; clear: left; width: 34%;
  }
  .ps--siroka .ps-obal > .ps-sekcia:not(:has(.ps-doklady, .ps-pobocky)) > :not(.br-kicker, h2, .ps-perex) {
    margin-left: 40%;
  }
  .ps--siroka .ps-obal > .ps-sekcia:not(:has(.ps-doklady, .ps-pobocky)) > :is(h2 + :not(.ps-perex), .ps-perex + *) {
    margin-top: 0;
  }
}

/* ═══ TLAČIDLO „OBJEDNAŤ SA" V LIŠTE (14. 9. 2026) ═════════════════════════
   Marek: „toto tlačidlo je akési divné". Na mobile malo 62 px na výšku a menu
   vedľa neho 44 px: min-height 44 px sa rátal bez paddingu (content-box) a padding
   pridal ďalších 18 px — natiahol aj celú lištu. border-box všade, na mobile presne
   44 px ako menu, písmo 14 px; namiesto päťvrstvového tieňa s leskom (plast) jemný
   tieň a svetlá linka po obvode. */
[data-hlavicka] > a.only-desktop:last-of-type { box-sizing: border-box; }
@media (max-width: 860px) {
  [data-hlavicka] > a.only-desktop:last-of-type {
    height: 44px; min-height: 44px; line-height: 1;
    padding: 0 18px !important; font-size: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 14px -10px rgba(62, 93, 174, .5) !important;
  }
}

/* ═══ CTA: JEDEN HOVER PRE VŠETKY GRADIENTOVÉ PILULKY (14. 9. 2026, večer) ══
   Marek: „niektoré CTA majú zlú hover farbu". Audit deviatich stránok
   (_zdroj/_skripty/cta_hover.mjs): .dk-btn-primarny a .cn-btn-objednat mali
   v cinematic.css hover `background: #102042`. Skratka zmazala gradient a tmavý
   text (#1F2B47) ostal na tmavomodrej, kontrast 1,2 : 1 — nečitateľné. Pravidlo
   nebolo v (hover: hover), takže na mobile sa po ťuknutí prilepilo. Všetky
   pilulky majú teraz ten istý hover: sýtejší gradient toho istého odtieňa a text
   #0B246F (9,1 : 1 na tyrkysovom konci, 7,0 : 1 na fialovom). Dotyk: :active. */
.dk-btn-primarny:hover, .cn-btn-objednat:hover { background: var(--br-grad-cta) !important; }
@media (hover: hover) {
  :is(.hx-btn, .dk-btn-primarny, .cn-btn-objednat, .cta-send, [data-hlavicka] > a.only-desktop:last-of-type):hover {
    background: linear-gradient(100deg, #A6D9DF, #B9AFEC) !important;
    color: #0B246F !important;
  }
}
@media (hover: none) {
  :is(.hx-btn, .dk-btn-primarny, .cn-btn-objednat, .cta-send, [data-hlavicka] > a.only-desktop:last-of-type):active {
    background: linear-gradient(100deg, #A6D9DF, #B9AFEC) !important;
    scale: .98;
  }
}

/* ═══ HP · ÚVOD OSTANE STÁŤ, „PREČO NÁM VERIŤ" SA CEZ NEHO VYSUNIE (14. 9. 2026, večer)
   Marek: „hero zostane ukotvené a prvá sekcia ho začne prekrývať" — text úvodu
   a prvej sekcie sa tak rozdelí. Úvod je v obale .hx-kotva: pod úvodom má miesto
   vo výške úvodu a rovnako veľký záporný spodný okraj, takže nič pod ním sa
   neposunie. V obale je sticky; kým sa sekcia vysúva, stojí a stmavne. Keď je celý
   zakrytý, ide ďalej pod sekciou a skryje sa. Sekcia je
   preto nepriehľadná karta s vlastným svetlom a do vrstvy pozadia (Svetlo) sa
   vráti v posledných 160 px; min-height zaručí, že úvod nikdy nevykukne spod nej.
   Výšku úvodu, jeho odsadenie a priebeh (--hx-vyska, --hx-top, --hx-p) meria
   cinematic.js a až potom pridá html.hx-opona. Bez JS a pri obmedzenom pohybe
   ostáva obyčajné poradie sekcií. Obal do podstránok nekopíruje podstranka.py.
   17. 9. 2026 neskoro (Marek: „na pozadí sa zmenší hero sekcia… keď sa to celé spojí
   dokopy, tak je tam tých efektov už príliš"): úvod sa už nezmenšuje (mierka 0,95),
   nezaobľuje a video v ňom sa neposúva. Ostáva jeden pohyb — sekcia sa vysúva cez
   stojaci úvod — a tiché stmavnutie, ktoré nič nehýbe. */
html.hx-opona .hx-kotva { position: relative; z-index: 1; margin-bottom: calc(-1 * var(--hx-vyska)); }
html.hx-opona .hx-kotva::after { content: ""; display: block; height: var(--hx-vyska); }
html.hx-opona #top.hx {
  position: sticky; top: var(--hx-top, 0px);
}
html.hx-opona #top.hx::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #17274F; opacity: calc(.32 * var(--hx-p, 0));
}
html.hx-opona #top.hx.je-zakryte { visibility: hidden; }
/* !important: awwwards.css dáva všetkým sekciám `background: transparent !important`
   (cez sklo mala presvitať stuha) — bez neho bol úvod vidno cez text sekcie.
   border-box: min-height aj s paddingom, inak ostáva pod číslami 100 px prázdna. */
/* 17. 9. (Marek: „medzi Prečo nám veriť a Službami vidím spoj"): plochý papier
   končil nad pozadím Svetlo (vľavo tyrkys, v strede svetlý pás, vpravo fialová)
   a hrana bola vidno. Plocha je treba len kým je za sekciou úvod — keď ho zakryje
   (cinematic.js pridá .je-priehladna), rozplynie sa za 1,1 s. --dk-plocha je
   registrovaná (@property), inak by sa premenná neprelínala, len skočila.
   Späť nahor sa plocha vráti okamžite: úvod za ňou musí byť hneď schovaný. */
@property --dk-plocha { syntax: "<number>"; inherits: true; initial-value: 1; }
html.hx-opona #dokaz {
  --dk-plocha: 1;
  z-index: 2;
  box-sizing: border-box;
  min-height: calc(var(--hx-vyska) + 120px);
  border-radius: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px) 0 0;
  background: none !important;
  /* tieň plochy nad hornou hranou je na ::before, a .dk--glass má overflow: clip — orezal by ho.
     Zvislo nič z obsahu sekcie nepreteká (zmerané na 390, 1366, 1920), vodorovne orezáva ďalej. */
  overflow-y: visible;
}
/* 19. 9. 2026 (Marek: „Samsung S20, prvá sekcia trocha laguje"): plocha je na ::before a rozplynutie
   je priehľadnosť tejto vrstvy — animáciu (Web Animations v cinematic.js) ťahá grafika, stránka sa
   neprekresľuje. Predtým skript 1,1 s v každom snímku menil dedenú premennú --dk-plocha, prehliadač
   prepočítaval štýl celej sekcie a prekresľoval jej veľké pozadie. Plné aj priehľadné stavy sú rovnaké,
   premenná ostáva ako záloha (prehliadač bez animácie pseudoelementov). */
html.hx-opona #dokaz::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(62% 520px at 8% 0%, rgba(133, 254, 255, .2), rgba(133, 254, 255, 0) 72%),
    radial-gradient(56% 480px at 96% 4%, rgba(158, 130, 255, .15), rgba(158, 130, 255, 0) 72%),
    linear-gradient(180deg, rgb(246, 250, 251) 0, rgb(242, 248, 249) 420px, rgb(242, 248, 249) calc(100% - 120px), rgba(242, 248, 249, 0) 100%);
  box-shadow: 0 -28px 60px -30px rgba(23, 39, 89, .4), 0 -1px 0 rgba(255, 255, 255, .9);
  opacity: var(--dk-plocha);
}
/* 17. 9. večer (Marek: „pri rýchlom skrolovaní zmizne pozadie prvej sekcie a texty sa bijú
   s úvodom"): rozplývanie bolo CSS prechodom len na triede .je-priehladna. Keď sa trieda
   pri návrate hore zobrala, Chrome prechod nezrušil — plocha bledla ďalej, kým úvod za ňou
   už bol viditeľný (test opona_rychlo.mjs: 293 zlých snímok). --dk-plocha teraz nastavuje
   cinematic.js v tom istom kroku, v ktorom schováva a ukazuje úvod. */

/* ═══ HP · „PREČO NÁM VERIŤ" NA MOBILE: MENEJ TEXTU, ČÍSLA V MRIEŽKE (14. 9. 2026, večer)
   Marek: „prvá sekcia je natlačená na hero, mega veľa textu" a „štatistiky sa
   dlho skrolujú a sú nudné, len biele okná". Rok 2007 bol na prvých dvoch
   obrazovkách päťkrát: v úvode, v pilulke, v odseku, v bode „Dve centrá" aj
   v karte 18+. Na mobile ostáva nadpis, tri overiteľné body a tlačidlo; pilulka,
   úvodný odsek a poznámka pod tlačidlom sú skryté (hovoria to isté ako úvod
   a body). Štyri karty po 230 px sú mriežka 2 × 2: číslo a názov, podklad
   z farieb loga (70 € dostáva gradient tlačidiel). Popis a štítky nesie desktop.
   Kontrast: číslo #3E5DAE na najsýtejšej karte 5,1 : 1, názov #33415C 8 : 1. */
@media (max-width: 860px) {
  .dk-pill-prax, .dk-uvod, .dk-metoda-pozn { display: none; }
  .dk-kicker-row { margin-bottom: 14px; }
  .dk-hallmark-grid { gap: 30px; }
  .dk-overenie-box { margin-top: 22px; }
  .dk-overenie-odrazka { padding: 13px 0; }
  .dk-cta-row { margin-top: 24px; }

  .dk-bento-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dk-bento-fakty .dk-fakt-karta { grid-column: auto; }
  .dk-fakt-karta {
    gap: 8px; padding: 16px; border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 14px 30px -22px rgba(51, 65, 92, .35);
  }
  .dk-fakt-karta[data-aura="cyan"] { background: linear-gradient(160deg, rgba(191, 228, 232, .78), rgba(255, 255, 255, .6)); }
  .dk-fakt-karta[data-aura="violet"] { background: linear-gradient(160deg, rgba(204, 197, 240, .74), rgba(255, 255, 255, .6)); }
  .dk-fakt-karta[data-aura="emerald"] { background: linear-gradient(160deg, rgba(184, 230, 214, .74), rgba(255, 255, 255, .6)); }
  .dk-fakt-karta.dk-fakt-karta--cena { background: linear-gradient(120deg, rgba(191, 228, 232, .9), rgba(204, 197, 240, .9)); }
  .dk-fakt-hlava { display: block; }
  .dk-fakt-badge, .dk-fakt-text, .dk-fakt-nohy { display: none; }
  .dk-fakt-cislo, .dk-fakt-karta--prax .dk-fakt-cislo { font-size: 40px; font-weight: 300; }
  .dk-fakt-titul { font-size: 14.5px; line-height: 1.3; }
}

/* ═══ HP · SLUŽBY NA MOBILE: JEDNA VEĽKÁ KARTA A ZOZNAM (14. 9. 2026, večer) ═══
   Marek: osem kariet pod sebou (433 px každá, 3 970 px spolu) pôsobí nekonečne;
   navrhol ukázať štyri a „zobraziť všetky". Neskrývam: každá metóda je
   samostatný predaj a na „zobraziť viac" sa kliká málo. Problém je výška karty,
   nie počet. Vyšetrenie L.I.F.E. (hlavná konverzia, 70 €) ostáva veľká karta,
   ďalších sedem je zoznam s náhľadom 84 px (štítok, názov, údaj, šípka) — všetkých
   osem zaberie menej miesta ako dnes štyri. Celý riadok je odkaz (roztiahnutý
   odkaz v nadpise), cieľ má 108 px. Popis a „Viac o…" nesú podstránky.
   display: contents rozloží obrázok a obsah do mriežky riadku bez zásahu do HTML;
   riadky 1fr hore a dole držia text v strede vedľa náhľadu. */
@media (max-width: 860px) {
  .sl-bento-mriezka { gap: 0 !important; }
  .sl-bento-karta--hlavna { margin-bottom: 16px; }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 14px;
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 14px;
    min-height: 108px; box-sizing: border-box;
    padding: 12px 16px 12px 12px;
    border: 0 !important; border-radius: 0 !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: inset 0 1px 0 var(--br-linka) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: none !important;
  }
  .sl-bento-mriezka > .sl-bento-karta--sekundarna { border-radius: 22px 22px 0 0 !important; box-shadow: none !important; }
  .sl-bento-mriezka > .sl-bento-karta:last-child { border-radius: 0 0 22px 22px !important; }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) :is(.sl-bento-obrazok, .sl-bento-obsah, .sl-bento-pata) { display: contents; }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) .sl-bento-obrazok img {
    grid-column: 1; grid-row: 1 / -1; align-self: center;
    width: 84px; height: 84px; border-radius: 14px; object-fit: cover;
    transform: none !important;
  }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) .sl-bento-tag {
    position: static; grid-column: 2; grid-row: 2; justify-self: start;
    padding: 0; border-radius: 0; background: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 10.5px; letter-spacing: .12em; color: var(--br-akcent-text);
  }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) .sl-bento-titul {
    grid-column: 2; grid-row: 3; margin: 3px 0 0;
    font-size: 16.5px; line-height: 1.25; letter-spacing: -.015em;
  }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) .sl-bento-titul a { padding-block: 0; }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) .sl-bento-udaj {
    grid-column: 2; grid-row: 4; margin-top: 4px;
    font-size: 13px; font-weight: 500; color: var(--br-tlmene);
  }
  .sl-bento-karta:not(.sl-bento-karta--hlavna) :is(.sl-bento-popis, .sl-bento-odkaz) { display: none !important; }
  .sl-bento-karta:not(.sl-bento-karta--hlavna)::after {
    content: ""; grid-column: 3; grid-row: 1 / -1; align-self: center; justify-self: end;
    width: 8px; height: 8px; margin-right: 3px;
    border-top: 2px solid var(--br-tlmene); border-right: 2px solid var(--br-tlmene);
    rotate: 45deg; opacity: .7;
  }
}

/* ═══ HP · ŠTYRI KROKY NA MOBILE: OKRÚHLE KRUHY A ANIMÁCIA (14. 9. 2026, večer)
   Marek: „na mobile nie sú animované a kruhy s číslami sú akési elipsovité".
   Kruh bol flex položka (flex-basis 40 px, content-box, rámik 2 px) v 40 px
   obale a aspect-ratio pri pevnej šírke aj výške nič neurobí — Safari rátal
   šírku s rámikom a výšku bez neho. Teraz pevný border-box 44 × 44 bez flexu.
   Animácia: linka sa plní scrollom a každý krok sa rozsvieti, keď k nemu dôjde
   (kruh naskočí so sonarom, text vyjde zdola). Počiatočný stav len s .pk-js
   (pridá cinematic.js) a bez obmedzeného pohybu; inak je všetko vidno hneď. */
@media (max-width: 860px) {
  .pk-mstone-karta { grid-template-columns: 44px minmax(0, 1fr) !important; }
  .pk-mstone-sfera-obal { display: block !important; width: 44px !important; height: 44px !important; }
  .pk-mstone-sfera {
    box-sizing: border-box !important; display: grid !important; place-items: center;
    width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px;
    flex: none !important; aspect-ratio: auto !important; border-radius: 50% !important;
    line-height: 1 !important; font-size: 14px !important;
  }
  .pk-milestone-mriezka::before { left: 21px; opacity: .28; }
  .pk-milestone-mriezka::after {
    content: ""; position: absolute; left: 21px; top: 28px; bottom: 28px; width: 2px;
    border-radius: 2px; pointer-events: none;
    background: linear-gradient(180deg, #0E9BB8, #7C3AED 36%, #059669 68%, #2563EB);
    transform-origin: 50% 0; transform: scaleY(var(--pk-pokrok, 1));
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .pk-milestone-cesta.pk-js .pk-milestone-mriezka::after { transform: scaleY(var(--pk-pokrok, 0)); }
  .pk-milestone-cesta.pk-js .pk-mstone-karta .pk-mstone-sfera {
    opacity: .35 !important; scale: .72;
    transition: opacity .45s var(--br-ease), scale .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .6s ease !important;
  }
  .pk-milestone-cesta.pk-js .pk-mstone-karta .pk-mstone-telo {
    opacity: 0 !important; translate: 0 16px;
    transition: opacity .7s var(--br-ease) .08s, translate .8s var(--br-ease) .08s !important;
  }
  .pk-milestone-cesta.pk-js .pk-mstone-karta.je-aktivny .pk-mstone-sfera {
    opacity: 1 !important; scale: 1;
    box-shadow: 0 0 0 5px var(--br-papier), 0 10px 22px -8px var(--mstone-glow, #0E9BB8) !important;
  }
  .pk-milestone-cesta.pk-js .pk-mstone-karta.je-aktivny .pk-mstone-telo { opacity: 1 !important; translate: 0 0; }
  .pk-milestone-cesta.pk-js .pk-mstone-karta.je-aktivny .pk-mstone-sonar {
    display: block !important;
    animation: sonarRipplePulse .9s cubic-bezier(.1, .9, .2, 1) .12s both !important;
  }
}

/* ═══ PÄTA NA MOBILE (14. 9. 2026, večer) ═════════════════════════════════
   Marek: „päta je na mobile dosť preplnená, sú tam aj odkazy na ďalšie metódy".
   Osem metód na mobile nesie menu (Služby) aj prehľad na HP. V päte ostáva
   firma, pod ňou predajňa a kontakt vedľa seba a šesť odkazov v dvoch stĺpcoch. */
@media (max-width: 720px) {
  footer [data-dc-tpl="246"] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px !important; }
  footer [data-dc-tpl="247"], footer .br-pata-nav { grid-column: 1 / -1; }
  footer .br-pata-nav { margin-top: 4px; }
  footer .br-pata-nav > div:first-child { display: none; }
  footer .br-pata-nav > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  footer .br-pata-nav b { grid-column: 1 / -1; margin-bottom: 2px; }
}

/* ═══ OMRVINKY (14. 9. 2026, večer) ═══════════════════════════════════════
   Marek: „na mobile sú zle zarovnané" a „prečo majú pozadie, veď ho má aj
   hlavička". Sivý pás s paddingom 18 px dávalo holé „nav" z exportu (opravené
   v cinematic.css na nav[data-hlavicka]) — text preto nesedel s nadpisom.
   Odkazy majú na dotyku 44 px, lomky a aktuálna stránka ostávali hore. */
.ps-omrvinky { align-items: center; }

/* ═══ PODSTRÁNKY: PÁS FAKTOV POD FOTKOU JE PLNÝ (14. 9. 2026, večer) ═══════
   Marek: fotka sa pri scrolle hýbe (parallaxa ±28 px) a cez polopriehľadný pás
   bolo vidno, ako sa pod neho zasúva. Pohyb ostáva, pás je nepriehľadný. */
.ps-hero--pas .ps-hero-fakty::before { background: #F9FCFC; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 860px) {
  .ps-hero--pas .ps-hero-fakty { background: #F9FCFC; }
}

/* CTA, dodatok: dve pilulky berú farbu z pravidiel s ID (#cennik a[href="#kontakt"]
   a odoslanie formulára v #kontakt), ktoré prebili spoločný hover vyššie — pri
   prechode myšou sa nemenili vôbec. Rovnaký hover ako ostatné. */
@media (hover: hover) {
  html body #cennik a[href="#kontakt"]:hover,
  html body #kontakt .cta-send:hover {
    background: linear-gradient(100deg, #A6D9DF, #B9AFEC) !important;
    color: #0B246F !important;
  }
}
@media (hover: none) {
  html body #cennik a[href="#kontakt"]:active,
  html body #kontakt .cta-send:active { background: linear-gradient(100deg, #A6D9DF, #B9AFEC) !important; scale: .98; }
}

/* HP · opona, dodatok (14. 9.): ustupujúci úvod mal zaoblené rohy ako karta pod listom.
   Zrušené 17. 9. neskoro spolu so zmenšovaním úvodu — priveľa súčasných efektov. */

/* ═══ ŠTYRI KROKY: KRUHY SÚ KRUHY (15. 9. 2026) ═════════════════════════════
   Marek: „nevyzerajú ako kruhy, ale ako elipsy — pôsobí to ako chyba".
   Guľa 76 × 76 s rámikom 3 px (content-box, teda 82 px) stála vo flex obale
   širokom 76 px: flex-shrink ju zúžil na šírku, výška ostala 82 px, vznikla
   zvislá elipsa. Farebná žiara posunutá o 12 px nadol ju opticky ešte
   naťahovala. Teraz klasický krúžok: border-box 76 × 76 bez zmršťovania,
   rámik 2 px, jemný farebný lem okolo (bez posunu) a neutrálny tieň.
   Mobil má vlastné pravidlá s !important (44 × 44), tie sa nemenia. */
.pk-mstone-sfera {
  box-sizing: border-box; flex: none;
  width: 76px; height: 76px; aspect-ratio: 1;
  border-width: 2px;
  background: #FBFDFE;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--mstone-glow, #0E9BB8) 12%, transparent),
              0 14px 30px -18px rgba(51, 65, 92, .45);
  font-size: 22px; font-weight: 700;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta:hover .pk-mstone-sfera {
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--mstone-glow, #0E9BB8) 18%, transparent),
              0 18px 34px -16px rgba(51, 65, 92, .5);
}
/* na dotyku sa hover po ťuknutí prilepil a kruh ostal zväčšený */
@media (hover: none) {
  .pk-milestone-cesta.je-odhalena .pk-mstone-karta:hover .pk-mstone-sfera { transform: none !important; }
}

/* ═══ OS OBSAHU: FORMULÁR STOJÍ NA TEJ ISTEJ OSI AKO ZVYŠOK (15. 9. 2026) ═══
   Marek: „blog je užší ako formulár pod ním a pri prechode to vyzerá divne —
   a nie je to len na tejto podstránke". Obsah všetkých sekcií stojí na osi
   1240 px (na 1440 od 100 do 1340 px). Karta formulára mala max-width 1240
   (cinematic.css) na obsah a vnútorný okraj až 64 px sa pridal zvonku, takže
   trčala na každú stranu o 36 px (1440) až 64 px (1920) — na všetkých stránkach,
   lebo formulár je spoločný. border-box: 1240 je vonkajšia hrana karty.
   Kontrola celej osi: node _zdroj/_skripty/os_audit.mjs (HP + 7 podstránok). */
#kontakt > .cform { box-sizing: border-box; }

/* ═══ HP · CENNÍK: TLAČIDLO „OBJEDNAŤ VYŠETRENIE" NA MOBILE (15. 9. 2026) ═══
   Marek: „CTA na mobile je prehnane široké — bug". width: 100 % bez border-box:
   k šírke panela ceny sa pridal padding tlačidla a na 390 px z neho trčalo o 27 px
   na každú stranu. Audit tlačidiel na 9 stránkach (cta_sirka.mjs): jediný prípad. */
.cn-btn-objednat { box-sizing: border-box; }

/* ═══ PÄTA NA MOBILE: NÁPIS BIORELAX V OSI (15. 9. 2026) ════════════════════
   Marek: „je trošku orezaný a ide úplne od kraja do kraja". awwwards.css mu dáva
   23vw (!important a špecifickejšie ako oprava v „OPRAVY UX"), takže na 390 px mal
   400 px a trčal cez okraj. Šírka textu je 4,456 × veľkosť písma (namerané),
   preto veľkosť = šírka osi / 4,5 a nápis siaha po okraje obsahu. Spodný okraj
   päty sa počíta z tej istej hodnoty, aby nápis neliezol do odkazov nad ním. */
@media (max-width: 860px) {
  footer[data-dc-tpl="244"] {
    --pata-napis: calc((100vw - 2 * var(--br-okraj)) / 4.5);
    padding-bottom: calc(var(--pata-napis) * .8 + 36px) !important;
  }
  footer > div[aria-hidden="true"][data-dc-tpl="245"] { font-size: var(--pata-napis) !important; }
}

/* ═══ HP · MERIDIÁNY: ZÓNA UKAZUJE PRIEBEH DRÁHY (15. 9. 2026) ═══════════════
   Namiesto „Ruka/Noha" (klasifikácia TČM, laikovi nič nepovie — Marek: „obličky
   súvisia s nohou?") začiatok → koniec dráhy, napr. „Chodidlo → hrudník".
   Štítok ostáva v jednom riadku, na mobile ide pod názov dráhy. */
.mrd-pill-zona { white-space: nowrap; flex: none; }
.mrd-pill-info { min-width: 0; }
@media (max-width: 860px) {
  .mrd-krokovac-zona { display: block; margin: 4px 0 0; }
}

/* ═══ HP · MERIDIÁNY: POSTAVA SA VYFORMUJE Z AKVARELU, DRÁHY SÚ BODY (15. 9. 2026) ═══
   Marek: „dráhy sa mi vôbec nepáčia, nevyzerá to profesionálne… pri prvom
   zoskrolovaní nech sa pustí pekná animácia, silueta sa vyformuje, a kroky budú
   body". Video (Kling 3.0: postava sa rozplynie do akvarelu, formovanie.py ho
   otočil) končí presne na obrázku .mrd-telo; po dohraní nastúpi obrázok a body.
   Body sú labely rádií: klik na bod alebo na riadok zoznamu vyberie dráhu, zvolený
   bod pulzuje a ukáže názov orgánu (--aktivny, --pulz). Súradnice sú v % obrázka. */
.mrd-telo-obal { position: relative; aspect-ratio: 688 / 1024; }
.mrd-telo-obal > .mrd-telo,
.mrd-telo-obal > .mrd-formovanie {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 20px;
}
.mrd-formovanie {
  z-index: 2; pointer-events: none;
  mix-blend-mode: multiply; filter: contrast(1.08) brightness(.96);
}
.mrd-figura:not(.mrd-js) .mrd-formovanie { display: none; }
.mrd-figura.mrd-js .mrd-telo { opacity: 0; }
.mrd-figura.mrd-js.je-sformovana .mrd-telo { opacity: 1; transition: opacity .6s ease; }
.mrd-figura.je-sformovana .mrd-formovanie { opacity: 0; transition: opacity .6s ease .15s; }

.mrd-body { position: absolute; inset: 0; z-index: 3; }
.mrd-bod {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; place-items: center; width: 44px; height: 44px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mrd-bod::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bod-farba);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .92), 0 0 16px 2px color-mix(in srgb, var(--bod-farba) 55%, transparent);
  scale: calc(1 + .45 * var(--aktivny, 0));
  transition: scale .35s var(--br-ease);
}
.mrd-bod::after {
  content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--bod-farba); opacity: 0; pointer-events: none;
  animation: var(--pulz, none) 1.9s cubic-bezier(.2, .8, .3, 1) infinite;
}
.mrd-bod-stitok {
  position: absolute; left: calc(50% + 14px); top: 50%;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--br-atrament);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 18px -10px rgba(51, 65, 92, .5), inset 0 0 0 1px color-mix(in srgb, var(--bod-farba) 40%, transparent);
  opacity: var(--aktivny, 0); translate: calc(-4px + 4px * var(--aktivny, 0)) -50%;
  transition: opacity .3s ease, translate .3s var(--br-ease);
  pointer-events: none;
}
.mrd:has(#mrd-pluca:checked) .mrd-bod[data-mrd="pluca"],
.mrd:has(#mrd-srdce:checked) .mrd-bod[data-mrd="srdce"],
.mrd:has(#mrd-pecen:checked) .mrd-bod[data-mrd="pecen"],
.mrd:has(#mrd-zaludok:checked) .mrd-bod[data-mrd="zaludok"],
.mrd:has(#mrd-slezina:checked) .mrd-bod[data-mrd="slezina"],
.mrd:has(#mrd-oblicky:checked) .mrd-bod[data-mrd="oblicky"] { --aktivny: 1; --pulz: mrd-bod-pulz; z-index: 1; }
@media (hover: hover) {
  .mrd-bod:hover::before { scale: 1.3; }
  .mrd-bod:hover .mrd-bod-stitok { opacity: 1; translate: 0 -50%; }
}
@keyframes mrd-bod-pulz { from { scale: 1; opacity: .75; } to { scale: 3.4; opacity: 0; } }

/* nástup po vyformovaní: body naskočia jeden po druhom */
@media (prefers-reduced-motion: no-preference) {
  .mrd-figura.mrd-js .mrd-bod { opacity: 0; scale: .3; }
  .mrd-figura.mrd-js.je-sformovana .mrd-bod {
    opacity: 1; scale: 1;
    transition: opacity .5s var(--br-ease) calc(var(--i) * 110ms + 250ms),
                scale .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 110ms + 250ms);
  }
}
@media (prefers-reduced-motion: reduce) { .mrd-bod::after { display: none; } }

/* klávesnica: rádiá sú len vizuálne skryté, fokus ukáže bod aj riadok zoznamu */
.mrd:has(#mrd-pluca:focus-visible) :is(.mrd-pill, .mrd-bod)[data-mrd="pluca"],
.mrd:has(#mrd-srdce:focus-visible) :is(.mrd-pill, .mrd-bod)[data-mrd="srdce"],
.mrd:has(#mrd-pecen:focus-visible) :is(.mrd-pill, .mrd-bod)[data-mrd="pecen"],
.mrd:has(#mrd-zaludok:focus-visible) :is(.mrd-pill, .mrd-bod)[data-mrd="zaludok"],
.mrd:has(#mrd-slezina:focus-visible) :is(.mrd-pill, .mrd-bod)[data-mrd="slezina"],
.mrd:has(#mrd-oblicky:focus-visible) :is(.mrd-pill, .mrd-bod)[data-mrd="oblicky"] { outline: 2px solid #3E5DAE; outline-offset: 3px; border-radius: 999px; }

/* ══════════════════════════════════════════════════════════════════════════
   17. 9. LAPTOPY — Marek: „nech to na laptope vyzerá fantasticky … nech to
   dýcha, žiadne konské písmo".
   Nadpisy aj odsadenia sekcií rástli len so šírkou okna a strop mali už pri
   ~1300 px, takže notebook 1280×633 dostal tie isté 58–80 px nadpisy
   a 120 px odsadenia ako monitor 1920×955 (medzi meridiánmi a krokmi 334 px
   prázdna = polovica okna). Strop sa teraz odvodzuje aj z výšky okna cez
   min(vw, vh): vysoké okná ostávajú na strope, nízke laptopy dostanú
   o 10–20 % menšie nadpisy a menej prázdna medzi sekciami.
   Pozn.: po Marekovom teste na Dell laptope (80–85 % v Chrome) pribudol pod
   týmto blokom aj CSS zoom pre okná 1101–1599 px. Časti vo vw/vh sa preto
   delia var(--z) — bez zoomu je 1 a nič sa nemení.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  /* úvod HP: 77 → 67 px na 1280×633, od výšky ~755 px bez zmeny */
  html body .hx-h1 { font-size: clamp(38px, calc(min(6vw, 10.6vh) / var(--z, 1)), 80px); }

  /* sekčné nadpisy HP, každý so svojím pôvodným stropom */
  html body .dk--glass .dk-nadpis { font-size: clamp(32px, calc(min(4vw, 7vh) / var(--z, 1)), 60px); }
  html body #cennik .dk-nadpis,
  html body .sl-nadpis { font-size: clamp(32px, calc(min(4.6vw, 7.3vh) / var(--z, 1)), 58px); }
  html body .pk-nadpis--stred { font-size: clamp(32px, calc(min(4.6vw, 7.3vh) / var(--z, 1)), 56px); }
  html body .mrd-nadpis--stred { font-size: clamp(32px, calc(min(4.4vw, 7.3vh) / var(--z, 1)), 52px); }
  /* [data-dc-tpl], nie [style]: reveal skript dáva inline štýl aj nadpisom
     podstránok a tie majú mať svojich 38–40 px */
  html body #faq h2[data-dc-tpl="169"] { font-size: clamp(30px, calc(min(4.4vw, 7.3vh) / var(--z, 1)), 58px) !important; }
  html body #kontakt h2[data-dc-tpl="189"] { font-size: clamp(30px, calc(min(4.8vw, 7.6vh) / var(--z, 1)), 62px) !important; }

  /* podstránky: nadpis 64 → 52 px. Šírka v px, nie v ch — s menším písmom
     sa tak do riadku zmestí viac slov (zapper 4 → 3 riadky, CTA nad zlomom).
     784 px = pôvodných 20ch pri 68 px, na veľkých oknách sa nič nemení. */
  html body .ps-hero--pas h1 { font-size: clamp(38px, calc(min(5vw, 8.2vh) / var(--z, 1)), 68px); max-width: 784px; }
  html body .ps-hero:not(.ps-hero--pas) h1 { font-size: clamp(36px, calc(min(4.3vw, 7.6vh) / var(--z, 1)), 58px); }

  /* rytmus sekcií HP: 115 → 80 px na 1280×633 */
  html body :is(.sl, .mrd, .pk, #cennik) { padding-block: clamp(64px, calc(min(9vw, 12.6vh) / var(--z, 1)), 120px); }
  html body #faq[data-dc-tpl="167"] {
    padding-top: clamp(64px, calc(min(9vw, 12.6vh) / var(--z, 1)), 120px) !important;
    padding-bottom: clamp(64px, calc(min(9vw, 12.6vh) / var(--z, 1)), 120px) !important;
  }
  html body #kontakt[data-dc-tpl="183"] { padding-bottom: clamp(64px, calc(min(9vw, 12.6vh) / var(--z, 1)), 120px) !important; }

  /* náhodné okraje, ktoré robili medzeru meridiány → kroky o 84 px väčšiu
     než ostatné: prehliadačový okraj h2 (.83em) a zvyšok po zrušenej poznámke */
  html body .pk-nadpis { margin: 0; }
  html body .mrd-scena { margin-bottom: 0; }
}

/* nadpisy HP sa teraz lámu podľa výšky okna: vyvážené riadky namiesto vdov
   („nás" v meridiánoch na všetkých šírkach, „terapií" v cenníku na 1280) */
:is(.sl-nadpis, .mrd-nadpis--stred, .pk-nadpis--stred, #cennik .dk-nadpis) { text-wrap: balance; }

/* 17. 9. šev nad „Na čo sa pýtate najčastejšie": úsek FAQ → formulár → päta
   začínal plnou bielou a svetlom orezaným hornou hranou, kým cenník nad ním
   je priehľadný na ambient. Pozadie úseku sa presunulo do ::before a jeho
   horných 360 px maska rozpúšťa do priehľadna — prechod bez hrany. */
.br-tma { background: none !important; }
.br-tma::before {
  display: block !important;
  content: "";
  position: absolute; inset: 0; height: auto;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vw 40vh at 86% 4%, rgba(191, 228, 232, .48), transparent 64%),
    radial-gradient(50vw 44vh at 8% 46%, rgba(204, 197, 240, .42), transparent 62%),
    radial-gradient(34vw 30vh at 70% 88%, rgba(191, 228, 232, .3), transparent 58%),
    linear-gradient(180deg, var(--br-noc-2), var(--br-noc) 55%, #F2F8F9);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 360px);
  mask-image: linear-gradient(180deg, transparent 0, #000 360px);
}

/* ══════════════════════════════════════════════════════════════════════════
   17. 9. ZMENŠENIE PRE LAPTOPY — Marek na 10-ročnom Dell laptope: „všetko ok,
   ale veľké, natlačené na kraje"; v Chrome na 80–85 % „omnoho lepšie".
   Rozhoduje šírka okna v CSS px, nie značka počítača: Dell 1366 px, Windows
   notebook 1536 px (125 %) aj MacBook Air 13" / Pro 14" (1440–1512 px) padnú
   do toho istého pásma. Okná od 1600 px (MacBook Air 15", Pro 16", monitory),
   tablety (dotyk) a mobily ostávajú v 100 %.
   Overené v Chrome 152, WebKit 26.5 (Safari) aj Firefox 155 — správajú sa
   rovnako: vw/vh sa násobia zoomom, offsetHeight ostáva nezväčšený,
   getBoundingClientRect, scrollY a IntersectionObserver sú v px obrazovky.
   Preto --z: rozmery odvodené od okna sa ním delia (úvod vyplní okno ako pri
   zoome prehliadača) a cinematic.js / podstranka.js prepočítavajú merania.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --z: 1; }
@media (min-width: 1101px) and (max-width: 1439.98px) and (hover: hover) and (pointer: fine) {
  :root { zoom: .8; --z: .8; }
}
@media (min-width: 1440px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
  :root { zoom: .85; --z: .85; }
}
@media (min-width: 1101px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
  html body .hx { min-height: calc(100svh / var(--z)); }
  html body .hx-obal {
    padding-top: clamp(120px, calc(18vh / var(--z)), 200px);
    padding-bottom: clamp(28px, calc(6vh / var(--z)), 64px);
  }
  html body .ps-hero--pas { padding-top: clamp(96px, calc(11vh / var(--z)), 128px); }
  /* nápis BIORELAX v päte: 14vw by sa inak zmenšilo dvakrát */
  html body footer [data-dc-tpl="245"] { font-size: clamp(48px, calc(14vw / var(--z)), 215px) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. 9. PODSTRÁNKY: TEXT NESMIE NAJPRV UKÁZAŤ A POTOM ZMIZNÚŤ
   Marek: „na všetkých podstránkach sa zobrazia texty a až potom sa spustí nad nimi
   animácia a zobrazia sa znova". Nadpis úvodu delil podstranka.js na riadky až po
   načítaní písma (0,3–0,5 s, na pomalej sieti 1,9 s) — nad už vykresleným textom.
   Test blik_nacitanie.mjs: 5 z 6 podstránok preblikovalo.
   Nadpis úvodu teraz nabieha rovnako ako omrvinky, perex a fotka (.hin) od prvého
   vykreslenia. Nadpisy sekcií skript delí ďalej, ale kým to neurobí, sú skryté —
   len s JS (trieda js v <head>), so zálohou po 3 s, keby skript nebežal.
   ══════════════════════════════════════════════════════════════════════════ */
.ps-hero h1 { animation: hin 1s cubic-bezier(.22, 1, .36, 1) .14s both, hin-ostrost 1s linear .14s both; }   /* 17. 9.: ostrosť vlastnou krivkou (cinematic.css) */
html.js :is(.ps-sekcia h2, .ps-cn-hlavna h2):not([data-riadkovane]) {
  opacity: 0;
  animation: ps-zaloha-nadpisu 0s linear 3s forwards;
}
@keyframes ps-zaloha-nadpisu { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ps-hero h1 { animation: none; }
}


/* ═══ RECENZIE Z GOOGLE (19. 9. 2026) ═══════════════════════════════════════
   Marek: „nikde nemáme sekciu s recenziami a pritom na Google ich je dosť". Sekcia je medzi krokmi
   a cenníkom — dôkaz tesne pred cenou a tlačidlami na objednanie. Mechanizmy z archívu (/web, dôkaz):
   poctivá poznámka pri čísle (odkiaľ je a čo neznamená) a stlmený text s jednou vetou naplno (em
   v hlavnom citáte). Karty bez backdrop-filter: nad jemným pozadím by rozmazanie nebolo vidieť
   a na slabej grafike stojí výkon. Hviezdy sú SVG symbol #rc-h; piata čiastočná cez šírku vrchnej
   vrstvy (4,4 = 4 celé + 0,4). Kontrast: #54688A na bielej karte 5,6 : 1, #3E5DAE 6,3 : 1. */
.rc { position: relative; padding: clamp(64px, 9vw, 120px) var(--br-okraj); }
.rc-obal { max-width: var(--br-os); margin-inline: auto; }
.rc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rc-hlava { margin-bottom: clamp(28px, 4vw, 48px); }
.rc .dk-nadpis { max-width: 17em; font-weight: 300; letter-spacing: -.03em; text-wrap: balance; }
.rc .dk-nadpis em { font-style: italic; font-weight: 400; color: var(--br-akcent-text); }

.rc-hore, .rc-mriezka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.rc-mriezka { margin-top: clamp(14px, 1.8vw, 22px); }
@media (min-width: 640px) { .rc-mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { .rc-hore { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (min-width: 1101px) { .rc-mriezka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rc-skore, .rc-karta {
  margin: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: calc(var(--br-r) - 4px);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--sklo-tien), inset 0 0 0 1px var(--sklo-ram);
}
.rc-skore { gap: 10px; }

/* skóre: číslo, hviezdy, poctivá poznámka o počte */
.rc-cislo { margin: 0; display: flex; align-items: baseline; gap: 8px; color: var(--br-atrament); }
.rc-cislo span { font-size: clamp(56px, 6vw, 84px); font-weight: 300; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rc-cislo small { font-size: 16px; color: var(--br-tlmene); }
.rc-pocet { margin: 4px 0 0; max-width: 28ch; font-size: 15px; line-height: 1.55; color: var(--br-tlmene); }
.rc-odkaz, .rc-autor a {
  justify-self: start;
  font-size: 15px;
  font-weight: 600;
  color: var(--br-akcent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rc-odkaz { margin-top: 8px; }
.rc-odkaz span, .rc-autor a span { display: inline-block; transition: translate .3s var(--br-ease); }
.rc-odkaz:hover span, .rc-autor a:hover span { translate: 3px 0; }
.rc-odkaz:focus-visible, .rc-autor a:focus-visible { outline: 2px solid #3E5DAE; outline-offset: 3px; border-radius: 4px; }

/* 19. 9. večer (Marek: „či zvýši dôveryhodnosť, keď celkovému ratingu okrem názvu Google dáme aj logo"):
   zdroj hodnotenia hneď nad číslom — známa značka nezávislého zdroja hovorí „overiteľné", nie „píšeme si
   sami". Logo „G" v pôvodných farbách a proporciách, len ako označenie zdroja; overiť sa dá odkazom
   „Všetky recenzie na Google" v tej istej karte. Poctivá poznámka pod kartami je preč (Marek). */
.rc-zdroj { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--br-atrament); }
.rc-g { width: 22px; height: 22px; flex: none; }

/* hviezdy */
.rc { --hv: 16px; --hv-medzera: 3px; }
.rc-hviezdy { display: inline-flex; gap: var(--hv-medzera); line-height: 0; }
.rc-hviezdy svg { width: var(--hv); height: var(--hv); flex: none; fill: #3E5DAE; }
.rc-hviezdy svg.rc-prazdna, .rc-hviezdy__pozadie svg { fill: rgba(62, 93, 174, .2); }
.rc-hviezdy--velke { --hv: 24px; --hv-medzera: 4px; position: relative; display: inline-block; justify-self: start; }
.rc-hviezdy__pozadie, .rc-hviezdy__plne { display: inline-flex; gap: var(--hv-medzera); }
.rc-hviezdy__plne { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.rc-hviezdy__plne svg { fill: #3E5DAE; }

/* citáty */
.rc-text { margin: 0; }
.rc-text p { margin: 0; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; color: var(--br-atrament); text-wrap: pretty; }
.rc-karta--hlavna .rc-text p { font-size: clamp(19px, 1.85vw, 25px); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--br-tlmene); }
.rc-karta--hlavna .rc-text em { font-style: normal; font-weight: 400; color: var(--br-atrament); }
.rc-autor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 14px; font-weight: 600; color: var(--br-atrament); }
.rc-autor > span { font-weight: 400; color: var(--br-tlmene); }
.rc-autor a { margin-left: auto; font-size: 14px; }

/* laptopy: rovnaká mierka ako ostatné sekcie (17. 9. LAPTOPY) */
@media (min-width: 861px) {
  html body .rc { padding-block: clamp(64px, calc(min(9vw, 12.6vh) / var(--z, 1)), 120px); }
  html body .rc .dk-nadpis { font-size: clamp(32px, calc(min(4.6vw, 7.3vh) / var(--z, 1)), 58px); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-odkaz span, .rc-autor a span { transition: none; }
}

/* ═══ HP: LEPIVÁ LIŠTA NA MOBILE (19. 9. 2026 večer) ════════════════════════════
   Marek: „na HP chýba skratka na rýchle zavolanie alebo napísanie, ako majú podstránky".
   Lišta (Objednať sa + zavolať) je v HTML z exportu; skrytý stav bol zapečený v style a nikdy
   sa nezrušil. Teraz ho drží táto trieda a cinematic.js pridá .je-vidno. Skryté len s JS —
   bez skriptu ostane lišta stále na očiach (tlačidlo na objednanie nesmie zmiznúť). */
html.js [data-mcta]:not(.je-vidno) { opacity: 0; transform: translateY(74px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  [data-mcta] { transition: opacity .2s linear !important; }
  html.js [data-mcta]:not(.je-vidno) { transform: none; }
}

/* ═══ ODPOVEDE KLIENTA (21. 9. 2026) ═══════════════════════════════════════════
   Cenník na HP: poznámka k permanentkám pod tabuľkou (klient: nie sú časovo obmedzené, dajú sa
   preniesť). Formulár: klient chce aj dátum — piaty riadok „Preferovaný dátum", nepovinný, aby
   nezdržal objednanie. Natívny výber dátumu; prázdny stav farbou zástupného textu ostatných polí. */
.cn-poznamka { margin: 14px 4px 0; max-width: 70ch; font-size: 14px; line-height: 1.55; color: var(--br-tlmene); }
.cform .br-f-nepovinne { margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: rgba(11, 36, 111, .58); }
.cform .br-f-datum input[type="date"] { min-height: 1.25em; line-height: 1.15; cursor: pointer; }
.cform .br-f-datum input[type="date"]:not(.ma-hodnotu)::-webkit-datetime-edit { color: rgba(23, 39, 89, .28); }
.cform .br-f-datum input[type="date"]::-webkit-calendar-picker-indicator { width: .62em; height: .62em; opacity: .5; cursor: pointer; }
.cform .br-f-datum input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .85; }
/* cenník: názvy metód sú odkazy na ich stránky — podčiarknutie až pri ukázaní, aby zoznam ostal pokojný */
.ps-cn-nazov a { color: inherit; text-decoration: none; }
.ps-cn-nazov a:hover, .ps-cn-nazov a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ═══ STRÁNKA 404 (21. 9. 2026) ═════════════════════════════════════════════════
   Marek: „vytvor stránku 404 nejakú peknú, nech má DNA nášho webu". Hlavička, päta, pozadie a nadpis
   sú z podstránok; veľké „404" nesie kožu nápisu BIORELAX z päty; karty s cieľmi majú sklo recenzií. */
.e404-mriezka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 2vw, 24px); align-items: center; }
@media (min-width: 861px) { .e404-mriezka { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.e404-mriezka > .ps-omrvinky { grid-column: 1 / -1; }
.e404 h1 { text-wrap: balance; }
.e404 h1 em { font-style: italic; font-weight: 400; color: var(--br-akcent-text); }
.e404-cislo {
  margin: 0; justify-self: end;
  font-size: clamp(120px, 21vw, 300px); font-weight: 800; letter-spacing: -.05em; line-height: .8;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, rgba(143, 201, 208, .55), rgba(167, 157, 224, .55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
@media (max-width: 860px) {
  .e404-cislo { order: 1; justify-self: start; font-size: clamp(96px, 34vw, 170px); margin: 0 0 -6px -4px; }
  .e404-text { order: 2; }
}
.e404-kam h2 { margin-bottom: 0; }
.e404-karty {
  list-style: none; margin: clamp(20px, 2.6vw, 32px) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.6vw, 18px);
}
@media (min-width: 640px) { .e404-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .e404-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.e404-karty a {
  display: grid; gap: 6px; height: 100%; box-sizing: border-box;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: calc(var(--br-r) - 4px);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--sklo-tien), inset 0 0 0 1px var(--sklo-ram);
  color: var(--br-atrament); text-decoration: none;
  transition: translate .35s var(--br-ease), box-shadow .35s var(--br-ease);
}
.e404-karty b { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; }
.e404-karty b::after { content: "→"; flex: none; color: var(--br-akcent-text); transition: translate .3s var(--br-ease); }
.e404-karty span { font-size: 14.5px; line-height: 1.5; color: var(--br-tlmene); }
.e404-karty a:hover { translate: 0 -2px; box-shadow: 0 30px 60px -36px rgba(51, 65, 92, .5), inset 0 0 0 1px var(--sklo-ram); }
.e404-karty a:hover b::after { translate: 3px 0; }
.e404-karty a:focus-visible { outline: 2px solid #3E5DAE; outline-offset: 3px; }
@media (hover: none) { .e404-karty a:active { translate: 0 1px; } }
@media (prefers-reduced-motion: reduce) { .e404-karty a, .e404-karty b::after { transition: none; } }

/* ═══ PÄTA · TVORCA WEBU (23. 9. 2026) ═══════════════════════════════════════
   Marek: „dopln do paticky, že web sme vytvorili my". Spodný riadok na osi päty,
   v sadzbe a farbách päty (#54688A na #F1F2F7 = 5,0 : 1, odkaz #33415C). Značka
   ako text odkazu, nie kľúčové slová — odkazy z pätičiek s „tvorba web stránok
   žilina" Google berie ako spam, značkový odkaz je bežný podpis tvorcu. */
.br-pata-tvorca {
  position: relative;
  max-width: var(--br-os, 1240px);
  margin: 28px auto 14px;   /* spodok: odstup od veľkého nápisu BIORELAX pod ním */
  padding-top: 18px;
  border-top: 1px solid rgba(51, 65, 92, .12);
  font-size: 13px;
  line-height: 1.5;
  color: #54688A;
}
.br-pata-tvorca a { color: #33415C; text-decoration: none; }
@media (hover: hover) { .br-pata-tvorca a:hover { color: #3E5DAE; text-decoration: underline; text-underline-offset: .22em; } }
.br-pata-tvorca a:focus-visible { outline: 2px solid #3E5DAE; outline-offset: 3px; border-radius: 4px; }
@media (hover: none) {
  .br-pata-tvorca a { display: inline-flex; align-items: center; min-height: 44px; }   /* dotykový cieľ */
  .br-pata-tvorca a:active { color: #3E5DAE; }
}