.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent); border:1px solid color-mix(in srgb,currentColor 50%,transparent); border-radius:0px;box-sizing:border-box;overflow:hidden;}
    @keyframes sc-shine{0%{background-position:100% 50%;}100%{background-position:0% 50%;}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative; background:color-mix(in srgb,currentColor 5%,transparent); border-color:transparent;}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:''; position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%); background-size:400% 100%;animation:sc-shine 1.4s ease infinite;}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none; background:color-mix(in srgb,currentColor 8%,transparent);}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace; color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word;}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden; vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5); border-radius:0px;box-sizing:border-box;color:transparent; user-select:none;}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em; color:color-mix(in srgb,currentColor 50%,transparent); background:color-mix(in srgb,currentColor 10%,transparent);border-radius:4px; padding:0 3px;}
    .sc-host.sc-has-error{position:relative;}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch; padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace; border-radius:4px;white-space:pre-wrap;pointer-events:none;}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page {margin: 0.5cm;}
      figure, table {break-inside: avoid;}
      #dc-root, #dc-root > .sc-host {height: auto;}
      *, *::before, *::after {print-color-adjust: exact; -webkit-print-color-adjust: exact; animation-delay: -99s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important;}
    }
  

x-dc{display:none!important;}




  /* Hallmark · redesign · macrostructure: photographic fold + index list · theme: BioRelax system · no scroll-scrub */
  html, body {margin: 0; padding: 0; background: #F1F2F7; overflow-x: clip;}
  a {color: #172759; text-decoration: none;}
  a:hover {color: #0B246F;}
  @keyframes hin { from {opacity: 0; transform: translateY(22px);} to {opacity: 1; transform: none;} }
  /* 17. 9. 2026 (Marek: „písmo nadobudne svoju finálnu podobu skôr ako dobehne animácia, vyzerá to ako skok“):
     rozmazanie malo tú istú krivku ako priehľadnosť. Chrome kreslí blur do 0,3 px ako ostrý a medzi 0,75
     a 0,3 px stúpne ostrosť z 30 na 100 % — to prebehlo okolo polovice nábehu a text „cvakol“. Ostrosť má
     vlastnú animáciu: doostruje rovnomerne a úplne ostrá je až na konci (_zdroj/_skripty/ostrost_krivka.py). */
  @keyframes hin-ostrost {
    0% { filter: blur(10px); }
    5% { filter: blur(5.51px); }
    10% { filter: blur(4.37px); }
    15% { filter: blur(3.55px); }
    20% { filter: blur(2.93px); }
    30% { filter: blur(2.07px); }
    40% { filter: blur(1.43px); }
    50% { filter: blur(0.98px); }
    60% { filter: blur(0.73px); }
    70% { filter: blur(0.6px); }
    80% { filter: blur(0.5px); }
    90% { filter: blur(0.35px); }
    100% { filter: blur(0); }
  }
  @keyframes tIn { 0% {opacity: 0; letter-spacing: 0.03em; transform: translateY(28px); filter: blur(18px);} 100% {opacity: 1; letter-spacing: -0.06em; transform: none; filter: blur(0);} }
  .tIn {animation: tIn 1.25s cubic-bezier(.22,1,.36,1) .12s both;}
  @keyframes kb { 0%, 100% {transform: scale(1);} 50% {transform: scale(1.055);} }
  .vkb {animation: kb 28s ease-in-out infinite;}
  @keyframes mq { to {transform: translateX(-50%);} }
  .mqi {display: flex; width: max-content; animation: mq 38s linear infinite;}
  .mqt {white-space: nowrap; padding-right: clamp(30px,4vw,60px); font-size: clamp(40px,6.6vw,92px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: transparent; -webkit-text-stroke: 1px rgba(23, 39, 89,0.22);}
  .mqt em {font-style: normal; -webkit-text-stroke: 0; color: #0E2E8F;}
  .hin {opacity: 0; animation: hin 1s cubic-bezier(.22,1,.36,1) var(--d, 0s) forwards, hin-ostrost 1s linear var(--d, 0s) forwards;}
  /* nábeh čaká na písmo nadpisu (skript v <head> cinematic.html, najviac 500 ms) */
  html.hx-caka :is(.hin, .ps-hero h1) {animation-play-state: paused !important;}
  .glass::before {content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 38%, rgba(255,255,255,0.18) 62%, rgba(255,255,255,0.85) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none;}
  @keyframes p2dial { to {transform: rotate(360deg);} }
  .p2dial {transform-origin: 50% 50%; animation: p2dial 9s linear infinite;}
  @keyframes p2puls { 0%,100% {transform: scale(1); opacity: .95;} 50% {transform: scale(1.5); opacity: .35;} }
  .p2puls {transform-origin: center; transform-box: fill-box; animation: p2puls 2.4s ease-in-out infinite;}
  @keyframes p2wv { to {stroke-dashoffset: -44;} }
  .p2wv {stroke-dasharray: 6 5; animation: p2wv 2.6s linear infinite;}
  .hero-scrim {background: linear-gradient(180deg, rgba(241, 242, 247,0.62) 0%, rgba(241, 242, 247,0) 20%, rgba(241, 242, 247,0.04) 52%, rgba(241, 242, 247,0.72) 82%, rgba(241, 242, 247,0.95) 100%);}
  .cform .crow {position: relative; display: grid; grid-template-columns: clamp(32px,4vw,58px) minmax(0,1fr); gap: clamp(10px,2vw,22px); align-items: baseline; padding: clamp(17px,2.4vw,26px) 0; border-bottom: 1px solid rgba(23, 39, 89,0.12);}
  .cform .crow::after {content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg,#0E2E8F,#0C2264); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.22,1,.36,1);}
  .cform .crow:focus-within::after {transform: scaleX(1);}
  .cform .cno {font-size: clamp(12px,1.2vw,14px); font-weight: 800; letter-spacing: 0.08em; color: transparent; -webkit-text-stroke: 1px rgba(23, 39, 89,0.3);}
  .cform .clab {display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #0B246F; margin-bottom: 6px;}
  .cform input, .cform select {width: 100%; box-sizing: border-box; border: none; background: transparent; outline: none; font-family: inherit; font-size: clamp(19px,2.8vw,32px); font-weight: 800; letter-spacing: -0.03em; color: #172759; padding: 0; appearance: none; border-radius: 0;}
  .cform input::placeholder {color: rgba(23, 39, 89,0.16);}
  .cform select {cursor: pointer;}
  .cform select option {font-size: 16px; font-weight: 400;}
  .arr {display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1);}
  @media (hover: hover) { a:hover .arr, button:hover .arr {transform: translateX(6px);} }
  @media (max-width: 767px) {
    .only-desktop {display: none !important;}
    nav[data-hlavicka] {background: rgba(241, 242, 247, 0.94); padding: 12px 18px !important; box-shadow: 0 1px 0 rgba(23, 39, 89, 0.06);} /* 14. 9.: len hlavička — holé „nav" zafarbilo aj omrvinky podstránok na sivý pás */
    .hero-scrim {background: linear-gradient(180deg, rgba(241, 242, 247,0.55) 0%, rgba(241, 242, 247,0) 16%, rgba(241, 242, 247,0.06) 42%, rgba(241, 242, 247,0.88) 74%, rgba(241, 242, 247,0.98) 100%);}
    .hero-bottom {flex-direction: column !important; align-items: stretch !important; gap: 18px !important;}
    .hero-cta-row {flex-direction: column;}
    .hero-cta-row a {display: flex; justify-content: center;}
    .m-grid2 {grid-template-columns: 1fr !important;}
    .cform .cta-send {font-size: 17px !important; padding: 18px 24px !important;}
  }
  @media (min-width: 768px) { .only-mobile {display: none !important;} }
  @media (prefers-reduced-motion: reduce) {
    .hin, .tIn {animation: none !important; opacity: 1 !important;}
    .vkb, .mqi {animation: none !important;}
    .p2dial, .p2puls, .p2wv {animation: none !important;}
  }
  .wrd {display: inline-block; opacity: .1; transform: translateY(0.16em); transition: opacity .7s ease calc(var(--i)*80ms), transform .8s cubic-bezier(.22,1,.36,1) calc(var(--i)*80ms);}
  [data-on] .wrd {opacity: 1; transform: translateY(0);}
  .wrd-g {color: #0E2E8F;}
  .svcw {display: flex; gap: 10px; height: clamp(440px,62vh,580px);}
  .svcp-v {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 20px 0; opacity: 1; transition: opacity .35s ease; pointer-events: none;}
  .svcp[data-open="1"] .svcp-v {opacity: 0;}
  .svcp-b {position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px,2vw,28px); opacity: 0; transform: translateY(14px); transition: opacity .45s ease .12s, transform .55s cubic-bezier(.22,1,.36,1) .12s;}
  .svcp[data-open="1"] .svcp-b {opacity: 1; transform: translateY(0);}
  .svcp-more {display: grid; grid-template-rows: 1fr;}
  .svcp-more > div {overflow: hidden; min-height: 0;}
  .dev-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(12px,1.6vw,18px);}
  @media (max-width: 767px) {
    .svcw {flex-direction: column; height: auto; gap: 8px;}
    .svcp {flex: none !important; min-height: 96px;}
    .svcp[data-open="1"] {min-height: 400px;}
    .svcp-v {display: none;}
    .svcp-b {opacity: 1 !important; transform: none !important;}
    .svcp-more {grid-template-rows: 0fr; transition: grid-template-rows .5s ease;}
    .svcp[data-open="1"] .svcp-more {grid-template-rows: 1fr;}
    .dev-grid {grid-template-columns: 1fr;}
  }
  @media (prefers-reduced-motion: reduce) {
    .wrd {transition: none; opacity: 1; transform: none;}
    .svcp, .svcp-b, .svcp-v, .svcp-more {transition: none !important;}
  }


/* ==== ručné úpravy z _zdroj/uprava-cinematic.css ==== */
/* ==========================================================================
   CINEMATIC · vrstva 2 — rebrand na farby loga
   --------------------------------------------------------------------------
   Farby: priamo z loga (dodal klient 31. 8. 2026):
     #85FEFF cyan → #599AFF → #327AFF → #8468FF → #9E82FF fialová
   Svetlý podklad (zdravotníctvo, klienti 40+), tmavé „nočné" pásy pre
   dôkazy a meridiány, gradient len ako akcent — nikdy pod bežným textom.

   POZOR: táto vrstva sa NESMIE prefarbovať rotáciou (zloz.py ju vynecháva)
   — cyan #85FEFF má odtieň ~180 a rotácia by ho zohla na modrú.

   Kontrast (rátané, overuje kontrast.mjs):
     atrament #0A1730 na papieri #F5F8FF ...... 15,9 : 1
     tlmené  #46557A na papieri ................ 7,0 : 1
     akcent  #2050C8 na papieri ................ 6,5 : 1
     atrament na CTA gradiente (najtmavší bod #599AFF) ... 6,4 : 1
     nočný text #EAF1FF na noci #070D26 ........ 17 : 1
     nočné tlmené #A7B6DC na noci .............. 9,1 : 1
   Hlboký gradient na svetle je len pre veľký text (≥ 3 : 1).
   ========================================================================== */

:root {
  /* ======================== RANNA HMLA ================================
     DNA v2 (Smer 2, schvaleny 31. 8.): kupelny pokoj. Farby loga ostavaju,
     ale vodove — sytost na tretinu. Ziadne tmave pasy: "nocne" tokeny su
     odteraz mliecne, takze byvale tmave karty zosvetleli bez zmeny markupu.
     ==================================================================== */
  --br-papier:   #F2F8F9;
  --br-papier2:  #EDF2FA;
  --br-plocha:   #FFFFFF;
  --br-atrament: #33415C;
  --br-tlmene:   #54688A;
  --br-linka:    rgba(51, 65, 92, .13);

  /* byvala noc = mliecne sklo */
  --br-noc:      #F7FAFD;
  --br-noc-2:    #FFFFFF;
  --br-noc-text: #33415C;
  --br-noc-tlm:  #54688A;
  --br-noc-linka: rgba(51, 65, 92, .12);

  /* vodove tony loga */
  --br-cyan:     #BFE4E8;
  --br-nebo:     #A9CBE8;
  --br-modra:    #8FA0D8;
  --br-fialka:   #CCC5F0;
  --br-orgovan:  #D8CFF2;
  --br-akcent-text: #3E5DAE;

  --br-grad: linear-gradient(100deg, #BFE4E8, #CCC5F0);
  --br-grad-cta: linear-gradient(100deg, #BFE4E8, #CCC5F0);
  --br-grad-hlboky: linear-gradient(100deg, #8FC9D0, #3E5DAE 55%, #A79DE0);

  --br-os: 1240px;
  --br-okraj: clamp(20px, 5vw, 64px);
  --br-r: 28px;
  --br-ease: cubic-bezier(.33, 1, .68, 1);
  --br-pismo-d: "Switzer", system-ui, sans-serif;
}

/* ── základ ─────────────────────────────────────────────────────────────── */

/* scroll-behavior:smooth tu NEBUDE — smooth vrstvu robi Lenis a dva
   vyhladzovace na sebe sa bili: programove scrollTo sa rusili navzajom,
   odhalovanie sekcii dole sa nikdy nespustilo. */

body { background: var(--br-papier); }

/* Kotvenie pod plávajúcu lištu (lišta ~88 px). */
:where(section[id], [id="br-koren"]) { scroll-margin-top: clamp(84px, 9vw, 116px); }

/* Jedna os obsahu pre všetky sekcie — export mal šesť rôznych max-width
   a ľavé okraje nadpisov skákali medzi 64 a 220 px. */
#metoda > div:first-child,
#cennik > div:first-child,
#faq > div:first-child,
#kontakt > .cform,
footer > div[style*="max-width"] {
  max-width: var(--br-os) !important;
  margin-inline: auto !important;
}

/* Nadpisy nesú display rez. */
h1, h2,
.mx-nadpis, .px-nadpis, .mrd-nadpis, .pr-nadpis, .dk-nadpis, .lf-nadpis, .po-nadpis {
  font-family: var(--br-pismo-d) !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
}
h1 b, h2 b, .hx-h1 em { font-weight: 600; }
h2 { color: var(--br-atrament); }

.br-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Energetická čiarka pred nadkapitolkou. */
.br-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--br-grad-hlboky);
  flex: none;
}

.br-skryte-vizualne {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── odhaľovanie ────────────────────────────────────────────────────────── */
/* engine.js: [data-odhal] dostane .je-vonku + --br-odklad (stagger). */

[data-odhal] {
  opacity: 0;
  translate: 0 18px;
  filter: blur(4px);
  transition:
    opacity 1.1s var(--br-ease) var(--br-odklad, 0s),
    translate 1.1s var(--br-ease) var(--br-odklad, 0s),
    filter 1.1s var(--br-ease) var(--br-odklad, 0s);
}
[data-odhal].je-vonku { opacity: 1; translate: 0 0; filter: none; }

@media (prefers-reduced-motion: reduce) {
  [data-odhal] { opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important; }
}

/* ── nočné pásy (aurora) ────────────────────────────────────────────────── */

.br-noc {
  position: relative;
  background:
    radial-gradient(52vw 46vh at 12% 8%, rgba(191, 228, 232, .5), transparent 66%),
    radial-gradient(46vw 42vh at 88% 92%, rgba(204, 197, 240, .45), transparent 64%),
    radial-gradient(30vw 30vh at 78% 6%, rgba(191, 228, 232, .35), transparent 60%),
    linear-gradient(180deg, var(--br-noc), var(--br-noc-2));
  color: var(--br-noc-text);
}
/* Energetická hairline na hornej hrane tmavého pásu. */
.br-noc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(143, 201, 208, .6) 30%, rgba(132, 104, 255, .55) 70%, transparent 96%);
  pointer-events: none;
}

/* Tmavá zóna faq→kontakt→päta z exportu: aurora namiesto plochej modrej.
   Klient: „FAQ a form by mohli mať lepšie pozadie." */
.br-tma > section, .br-tma > footer { background: transparent !important; }
.br-tma {
  position: relative;
  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);
  color: var(--br-noc-text);
}
.br-tma::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(143, 201, 208, .55) 32%, rgba(167, 157, 224, .5) 68%, transparent 96%);
}

/* ── plávajúca lišta ────────────────────────────────────────────────────── */
/* Klient 30. 8.: sticky nechať, ale spraviť poriadne — vlastný podklad. */

[data-hlavicka] { transform: none !important; transition: top .45s var(--br-ease), width .45s var(--br-ease), background-color .3s ease, box-shadow .3s ease; }

@media (min-width: 861px) {
  [data-hlavicka].je-odscrolovana {
    width: min(1060px, calc(100% - 2 * var(--br-okraj))) !important;
    margin-inline: auto !important;
    top: 14px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 18px 44px -22px rgba(51, 65, 92, .16), inset 0 0 0 1px rgba(255, 255, 255, .9);
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 860px) {
  [data-hlavicka].je-odscrolovana {
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px -18px rgba(51, 65, 92, .15);
  }
}

/* CTA v lište = gradient s atramentovým textom (6,4 : 1 aj v najtmavšom bode).
   Len priamy potomok — v strede lišty je aj obyčajný odkaz Kontakt s tým
   istým href a všeobecný selektor mu kreslil modrý obdĺžnik za textom. */
[data-hlavicka] > a[href="#kontakt"] {
  background: var(--br-grad-cta) !important;
  color: #1F2B47 !important;
  box-shadow: 0 12px 30px -14px rgba(62, 93, 174, .38) !important;
  transition: transform .28s var(--br-ease), box-shadow .28s var(--br-ease);
}
[data-hlavicka] > a[href="#kontakt"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -14px rgba(167, 157, 224, .5) !important;
}

/* ── HERO ───────────────────────────────────────────────────────────────── */

.hx {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--br-papier);
}
.hx-media, .hx-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 17. 9. 2026: filter saturate(.92) contrast(1.02) je zapečený priamo vo videu aj v plagáte
   (_zdroj/_skripty/optimalizacia_uvod.py). Filter robil z videa vrstvu, ktorú grafika pri
   zmenšovaní úvodu prepočítavala v každom snímku. */

/* Závoj: svetlý stĺpec pod textom + spodné prizemnenie. Stops posunuté,
   nie vyššia alfa — inak scrim zošedne (lekcia zo ŠTÍT-u). */
.hx-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(245, 248, 255, .93) 0%, rgba(245, 248, 255, .82) 30%, rgba(245, 248, 255, .38) 56%, rgba(245, 248, 255, 0) 78%),
    linear-gradient(to top, rgba(245, 248, 255, .95) 0%, rgba(245, 248, 255, .5) 22%, rgba(245, 248, 255, 0) 46%);
}
.hx-ziara {
  position: absolute;
  z-index: 1;
  width: 44vw; height: 44vw;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hx-ziara--a { top: -18%; left: -8%; background: radial-gradient(circle, rgba(133, 254, 255, .32), transparent 66%); }
.hx-ziara--b { bottom: -22%; right: -6%; background: radial-gradient(circle, rgba(158, 130, 255, .30), transparent 66%); }
/* 17. 9. 2026 (Marek: „na starom notebooku pri scrole z úvodu do prvej sekcie seká"):
   úvod sa pri scrolle zmenšuje a zaobľuje, takže každú vrstvu s efektom v ňom grafika
   prepočítava v každom snímku. Rozmazanie žiar je preto od 861 px spočítané do zastávok
   gradientu (_zdroj/_skripty/ziara_gradient.py, štyri pásma šírky — blur je v px, žiara vo vw).
   Rozdiel oproti blur(70px) do 5 úrovní z 255, priemer 0,3 (porovnanie_css.mjs, 11 šírok).
   Na telefóne ostáva blur: tam je žiara malá a prechod ide plynulo. */
@media (min-width: 861px) {
  .hx-ziara { filter: none; border-radius: 0; }
  .hx-ziara--a, .hx-ziara--b { background: none; }
  .hx-ziara::before { content: ""; position: absolute; inset: -50%; }
}
@media (min-width: 861px) and (max-width: 1106.98px) {
  .hx-ziara--a::before {
    background: radial-gradient(circle closest-side,
      rgba(133, 254, 255, .1794) 0%,
      rgba(133, 254, 255, .1781) 3.2%,
      rgba(133, 254, 255, .1741) 6.5%,
      rgba(133, 254, 255, .1674) 10%,
      rgba(133, 254, 255, .1580) 13.5%,
      rgba(133, 254, 255, .1344) 20.2%,
      rgba(133, 254, 255, .0776) 33.8%,
      rgba(133, 254, 255, .0543) 40%,
      rgba(133, 254, 255, .0336) 46.7%,
      rgba(133, 254, 255, .0190) 53.3%,
      rgba(133, 254, 255, .0088) 60.8%,
      rgba(133, 254, 255, .0030) 69.5%,
      rgba(133, 254, 255, .0006) 80.2%,
      rgba(133, 254, 255, .0000) 100%);
  }
  .hx-ziara--b::before {
    background: radial-gradient(circle closest-side,
      rgba(158, 130, 255, .1682) 0%,
      rgba(158, 130, 255, .1670) 3.2%,
      rgba(158, 130, 255, .1633) 6.5%,
      rgba(158, 130, 255, .1569) 10%,
      rgba(158, 130, 255, .1481) 13.5%,
      rgba(158, 130, 255, .1260) 20.2%,
      rgba(158, 130, 255, .0728) 33.8%,
      rgba(158, 130, 255, .0509) 40%,
      rgba(158, 130, 255, .0315) 46.7%,
      rgba(158, 130, 255, .0178) 53.3%,
      rgba(158, 130, 255, .0082) 60.8%,
      rgba(158, 130, 255, .0028) 69.5%,
      rgba(158, 130, 255, .0005) 80.2%,
      rgba(158, 130, 255, .0000) 100%);
  }
}
@media (min-width: 1107px) and (max-width: 1548.98px) {
  .hx-ziara--a::before {
    background: radial-gradient(circle closest-side,
      rgba(133, 254, 255, .2141) 0%,
      rgba(133, 254, 255, .2124) 3.1%,
      rgba(133, 254, 255, .2074) 6.2%,
      rgba(133, 254, 255, .1992) 9.4%,
      rgba(133, 254, 255, .1878) 12.7%,
      rgba(133, 254, 255, .1580) 19.3%,
      rgba(133, 254, 255, .0867) 32.6%,
      rgba(133, 254, 255, .0587) 38.4%,
      rgba(133, 254, 255, .0341) 44.6%,
      rgba(133, 254, 255, .0176) 50.7%,
      rgba(133, 254, 255, .0072) 57.3%,
      rgba(133, 254, 255, .0019) 65.2%,
      rgba(133, 254, 255, .0002) 75.1%,
      rgba(133, 254, 255, .0000) 100%);
  }
  .hx-ziara--b::before {
    background: radial-gradient(circle closest-side,
      rgba(158, 130, 255, .2007) 0%,
      rgba(158, 130, 255, .1991) 3.1%,
      rgba(158, 130, 255, .1945) 6.2%,
      rgba(158, 130, 255, .1868) 9.4%,
      rgba(158, 130, 255, .1760) 12.7%,
      rgba(158, 130, 255, .1481) 19.3%,
      rgba(158, 130, 255, .0813) 32.6%,
      rgba(158, 130, 255, .0551) 38.4%,
      rgba(158, 130, 255, .0320) 44.6%,
      rgba(158, 130, 255, .0165) 50.7%,
      rgba(158, 130, 255, .0067) 57.3%,
      rgba(158, 130, 255, .0017) 65.2%,
      rgba(158, 130, 255, .0002) 75.1%,
      rgba(158, 130, 255, .0000) 100%);
  }
}
@media (min-width: 1549px) and (max-width: 2575.98px) {
  .hx-ziara--a::before {
    background: radial-gradient(circle closest-side,
      rgba(133, 254, 255, .2493) 0%,
      rgba(133, 254, 255, .2474) 2.7%,
      rgba(133, 254, 255, .2417) 5.4%,
      rgba(133, 254, 255, .2323) 8.3%,
      rgba(133, 254, 255, .2184) 11.5%,
      rgba(133, 254, 255, .2012) 14.8%,
      rgba(133, 254, 255, .1788) 18.7%,
      rgba(133, 254, 255, .0869) 33.2%,
      rgba(133, 254, 255, .0570) 38.2%,
      rgba(133, 254, 255, .0309) 43.6%,
      rgba(133, 254, 255, .0215) 46.2%,
      rgba(133, 254, 255, .0142) 48.7%,
      rgba(133, 254, 255, .0050) 53.9%,
      rgba(133, 254, 255, .0009) 60.4%,
      rgba(133, 254, 255, .0000) 100%);
  }
  .hx-ziara--b::before {
    background: radial-gradient(circle closest-side,
      rgba(158, 130, 255, .2337) 0%,
      rgba(158, 130, 255, .2319) 2.7%,
      rgba(158, 130, 255, .2266) 5.4%,
      rgba(158, 130, 255, .2178) 8.3%,
      rgba(158, 130, 255, .2047) 11.5%,
      rgba(158, 130, 255, .1886) 14.8%,
      rgba(158, 130, 255, .1676) 18.7%,
      rgba(158, 130, 255, .0814) 33.2%,
      rgba(158, 130, 255, .0534) 38.2%,
      rgba(158, 130, 255, .0289) 43.6%,
      rgba(158, 130, 255, .0202) 46.2%,
      rgba(158, 130, 255, .0133) 48.7%,
      rgba(158, 130, 255, .0047) 53.9%,
      rgba(158, 130, 255, .0009) 60.4%,
      rgba(158, 130, 255, .0000) 100%);
  }
}
@media (min-width: 2576px) {
  .hx-ziara--a::before {
    background: radial-gradient(circle closest-side,
      rgba(133, 254, 255, .2770) 0%,
      rgba(133, 254, 255, .2751) 2.1%,
      rgba(133, 254, 255, .2696) 4.2%,
      rgba(133, 254, 255, .2603) 6.5%,
      rgba(133, 254, 255, .2461) 9.3%,
      rgba(133, 254, 255, .1961) 17.3%,
      rgba(133, 254, 255, .0465) 39.8%,
      rgba(133, 254, 255, .0235) 44%,
      rgba(133, 254, 255, .0099) 47.6%,
      rgba(133, 254, 255, .0031) 51.2%,
      rgba(133, 254, 255, .0004) 56%,
      rgba(133, 254, 255, .0000) 100%);
  }
  .hx-ziara--b::before {
    background: radial-gradient(circle closest-side,
      rgba(158, 130, 255, .2597) 0%,
      rgba(158, 130, 255, .2579) 2.1%,
      rgba(158, 130, 255, .2528) 4.2%,
      rgba(158, 130, 255, .2441) 6.5%,
      rgba(158, 130, 255, .2307) 9.3%,
      rgba(158, 130, 255, .1838) 17.3%,
      rgba(158, 130, 255, .0436) 39.8%,
      rgba(158, 130, 255, .0220) 44%,
      rgba(158, 130, 255, .0093) 47.6%,
      rgba(158, 130, 255, .0029) 51.2%,
      rgba(158, 130, 255, .0003) 56%,
      rgba(158, 130, 255, .0000) 100%);
  }
}

.hx-obal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--br-os);
  margin-inline: auto;
  padding: clamp(120px, 18vh, 200px) var(--br-okraj) clamp(28px, 6vh, 64px);
}
.hx-kicker {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hx-kicker::before {
  content: "";
  width: 30px; height: 2px;
  border-radius: 2px;
  background: var(--br-grad-hlboky);
}
.hx-h1 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--br-pismo-d);
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--br-atrament);
  text-wrap: balance;
}
.hx-h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--br-akcent-text);
}
.hx-sub {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.6;
  color: #223258;
  text-wrap: pretty;
}
.hx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: 999px;
  background: var(--br-grad-cta);
  color: #1F2B47;
  font-size: 15.5px;
  font-weight: 700;
  box-shadow: 0 18px 44px -16px rgba(62, 93, 174, .4);
  transition: transform .3s var(--br-ease), box-shadow .3s var(--br-ease);
}
.hx-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 52px -16px rgba(167, 157, 224, .5); }
.hx-arr { transition: translate .3s var(--br-ease); }
.hx-btn:hover .hx-arr { translate: 4px 0; }
.hx-tel {
  padding: 16px 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--br-atrament);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--br-linka);
  transition: box-shadow .3s var(--br-ease);
}
.hx-tel:hover { box-shadow: inset 0 0 0 1px rgba(51, 65, 92, .26); }

.hx-fakty {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  margin: clamp(26px, 4.5vh, 44px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--br-linka);
  list-style: none;
}
.hx-fakty li { display: grid; gap: 3px; }
.hx-fakty b {
  font-family: var(--br-pismo-d);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--br-atrament);
  font-variant-numeric: tabular-nums;
}
.hx-fakty span { font-size: 12.5px; font-weight: 500; color: var(--br-tlmene); }

@media (max-width: 720px) {
  .hx-obal { padding-top: clamp(104px, 16vh, 140px); }
  .hx-h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .hx-scrim {
    background:
      linear-gradient(to top, rgba(245, 248, 255, .96) 0%, rgba(245, 248, 255, .72) 34%, rgba(245, 248, 255, .2) 62%, rgba(245, 248, 255, .05) 80%),
      linear-gradient(180deg, rgba(245, 248, 255, .55), transparent 30%);
  }
}

/* ── pás dôkazov (tmavý) ────────────────────────────────────────────────── */

.dk { padding: clamp(64px, 9vw, 120px) var(--br-okraj); }
.dk-obal { max-width: var(--br-os); margin-inline: auto; }
.dk .br-kicker { color: #3E5DAE; }
.dk .br-kicker::before { background: var(--br-grad); }
.dk-nadpis {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--br-noc-text);
}
.dk-mriezka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: clamp(30px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.dk-polozka {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--br-noc-linka);
}
.dk-hodnota {
  font-family: var(--br-pismo-d);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--br-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.dk-popis { font-size: 15px; font-weight: 500; color: var(--br-noc-text); }
.dk-zdroj {
  font: 600 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--br-noc-tlm);
}
@media (max-width: 720px) {
  .dk-mriezka { grid-template-columns: 1fr; gap: 18px; }
}

/* ── metóda L.I.F.E. ────────────────────────────────────────────────────── */

.lf { padding: clamp(64px, 9vw, 120px) var(--br-okraj); background: var(--br-papier); }
.lf-obal {
  max-width: var(--br-os);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.lf-nadpis {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.lf-text { margin: 16px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.65; color: var(--br-tlmene); }
.lf-odkaz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--br-akcent-text);
}
.lf-odkaz span { transition: translate .3s var(--br-ease); }
.lf-odkaz:hover span { translate: 4px 0; }

/* (frekvencny panel v2 nahradeny oknom merania v3 nizsie) */

/* ── osem metód: redakčný index ─────────────────────────────────────────── */

.mx { padding: clamp(64px, 9vw, 120px) var(--br-okraj); background: var(--br-papier); }
.mx-obal { max-width: var(--br-os); margin-inline: auto; }
.mx-nadpis {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: .98;
  letter-spacing: -.04em;
}
.mx-uvod { margin: 12px 0 0; font-size: 15px; color: var(--br-tlmene); }
.mx-telo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(26px, 3.4vw, 46px);
  align-items: start;
}
.mx-zoznam { margin: 0; padding: 0; list-style: none; }
.mx-volba { position: absolute; opacity: 0; pointer-events: none; }
.mx-riadok { border-top: 1px solid var(--br-linka); }
.mx-riadok:last-child { border-bottom: 1px solid var(--br-linka); }
.mx-riadok > label {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 18px;
  padding: 17px 14px 17px 10px;
  cursor: pointer;
  border-radius: 14px;
  transition: background-color .3s var(--br-ease);
}
.mx-mini { display: none; }
.mx-cislo {
  font: 700 12px/1.8 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: var(--br-akcent-text);
  opacity: .6;
  transition: opacity .3s;
}
.mx-blok { display: grid; gap: 6px; min-width: 0; }
.mx-hlava-r { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mx-nazov {
  font-family: var(--br-pismo-d);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--br-atrament);
  transition: color .3s;
}
.mx-kat {
  font: 600 10.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(32, 80, 200, .28);
}
.mx-popis, .mx-udaj {
  /* zbalené — otvára ich vybraný stav */
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s var(--br-ease), opacity .4s var(--br-ease), margin .4s var(--br-ease);
}
.mx-popis { font-size: 14.5px; line-height: 1.6; color: var(--br-tlmene); max-width: 52ch; }
.mx-udaj {
  font: 600 11.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
}
.mx-riadok > label:hover { background: rgba(62, 93, 174, .06); }
.mx-volba:focus-visible + label { outline: 2px solid var(--br-akcent-text); outline-offset: 2px; }

/* vybraný riadok */
.mx-riadok:has(.mx-volba:checked) > label { background: rgba(62, 93, 174, .07); }
.mx-riadok:has(.mx-volba:checked) .mx-cislo { opacity: 1; }
.mx-riadok:has(.mx-volba:checked) .mx-popis { max-height: 9em; opacity: 1; margin-top: 2px; }
.mx-riadok:has(.mx-volba:checked) .mx-udaj { max-height: 3em; opacity: 1; }
.mx-riadok:has(.mx-volba:checked) .mx-nazov {
  background: var(--br-grad-hlboky);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* lepiaci foto panel */
.mx-panel {
  position: sticky;
  top: clamp(96px, 12vh, 130px);
  display: grid;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--br-r) + 6px);
  overflow: hidden;
  box-shadow: 0 36px 80px -44px rgba(51, 65, 92, .2), inset 0 0 0 1px rgba(51, 65, 92, .1);
  background: var(--br-noc);
}
.mx-foto { grid-area: 1 / 1; margin: 0; position: relative; opacity: 0; transition: opacity .55s var(--br-ease); }
.mx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(51, 65, 92, .55), rgba(51, 65, 92, .05) 42%, transparent 60%);
}
.mx-stitok {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 1;
  font: 600 11.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #3E5DAE;
}
.mx:has(#mx-biorezo:checked)   .mx-foto[data-mx="biorezo"],
.mx:has(#mx-mamo:checked)      .mx-foto[data-mx="mamo"],
.mx:has(#mx-plason:checked)    .mx-foto[data-mx="plason"],
.mx:has(#mx-komora:checked)    .mx-foto[data-mx="komora"],
.mx:has(#mx-magnet:checked)    .mx-foto[data-mx="magnet"],
.mx:has(#mx-rpz:checked)       .mx-foto[data-mx="rpz"],
.mx:has(#mx-nikotin:checked)   .mx-foto[data-mx="nikotin"],
.mx:has(#mx-somavedic:checked) .mx-foto[data-mx="somavedic"] { opacity: 1; }

@media (max-width: 900px) {
  .mx-telo { grid-template-columns: minmax(0, 1fr); }
  .mx-panel { display: none; }
  .mx-riadok > label { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .mx-mini {
    display: block;
    grid-row: 1 / 3;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
  }
  .mx-cislo { display: none; }
}

/* ── prístroje: prepínač ────────────────────────────────────────────────── */

.px { padding: clamp(64px, 9vw, 120px) var(--br-okraj); background: var(--br-plocha); }
.px-obal { max-width: var(--br-os); margin-inline: auto; }
.px-nadpis { margin: 0; font-size: clamp(30px, 4.4vw, 58px); line-height: .98; letter-spacing: -.04em; }
.px-uvod { margin: 12px 0 0; font-size: 15px; color: var(--br-tlmene); max-width: 44ch; }
.px-volba { position: absolute; opacity: 0; pointer-events: none; }
.px-taby {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 3vw, 40px);
}
.px-tab {
  padding: 11px 18px;
  border-radius: 999px;
  font: 700 12.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--br-tlmene);
  box-shadow: inset 0 0 0 1px var(--br-linka);
  cursor: pointer;
  transition: color .3s, box-shadow .3s, background-color .3s;
}
.px-tab:hover { color: var(--br-akcent-text); box-shadow: inset 0 0 0 1px rgba(32, 80, 200, .4); }
.px-volba:focus-visible + .px-tab { outline: 2px solid var(--br-akcent-text); outline-offset: 2px; }
#px-plason:checked  ~ .px-tab[for="px-plason"],
#px-rpz:checked     ~ .px-tab[for="px-rpz"],
#px-ravo:checked    ~ .px-tab[for="px-ravo"],
#px-nikotin:checked ~ .px-tab[for="px-nikotin"] {
  background: var(--br-grad-cta);
  color: #1F2B47;
  box-shadow: 0 10px 26px -12px rgba(62, 93, 174, .38);
}

.px-scena { display: grid; margin-top: clamp(20px, 2.6vw, 32px); }
.px-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  border-radius: calc(var(--br-r) + 6px);
  background: var(--br-papier);
  box-shadow: inset 0 0 0 1px var(--br-linka);
  padding: clamp(18px, 2.6vw, 36px);
  opacity: 0;
  translate: 0 14px;
  visibility: hidden;
  transition: opacity .5s var(--br-ease), translate .5s var(--br-ease), visibility 0s .5s;
}
.px:has(#px-plason:checked)  .px-panel[data-px="plason"],
.px:has(#px-rpz:checked)     .px-panel[data-px="rpz"],
.px:has(#px-ravo:checked)    .px-panel[data-px="ravo"],
.px:has(#px-nikotin:checked) .px-panel[data-px="nikotin"] {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition: opacity .5s var(--br-ease), translate .5s var(--br-ease), visibility 0s;
}
.px-foto {
  margin: 0;
  border-radius: var(--br-r);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--br-linka);
  aspect-ratio: 4 / 3;
}
.px-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-kod {
  margin: 0;
  font: 700 11.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
}
.px-nazov {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--br-atrament);
  text-wrap: balance;
}
.px-text { margin: 12px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.65; color: var(--br-tlmene); }
.px-specs { margin: 18px 0 0; display: grid; gap: 0; }
.px-spec {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--br-linka);
}
.px-spec dt {
  font: 600 11px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--br-tlmene);
}
.px-spec dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--br-atrament); }
@media (max-width: 860px) {
  .px-panel { grid-template-columns: minmax(0, 1fr); }
  .px-foto { aspect-ratio: 16 / 10; }
}

/* ── meridiány (tmavé) ──────────────────────────────────────────────────── */

.mrd { padding: clamp(64px, 9vw, 130px) var(--br-okraj); }
.mrd-obal { max-width: var(--br-os); margin-inline: auto; }
.mrd .br-kicker { color: #3E5DAE; }
.mrd .br-kicker::before { background: var(--br-grad); }
.mrd-nadpis { margin: 0; font-size: clamp(30px, 4.4vw, 58px); line-height: .98; letter-spacing: -.04em; color: var(--br-noc-text); }
.mrd-uvod { margin: 14px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--br-noc-tlm); }
.mrd-scena {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 52px);
}
.mrd-figura {
  position: relative;
  width: min(380px, 100%);
  margin-inline: auto;
  border-radius: calc(var(--br-r) + 8px);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(51, 65, 92, .28), inset 0 0 0 1px rgba(51, 65, 92, .1);
}
.mrd-telo { display: block; width: 100%; height: auto; }

.mrd-zoznam {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  align-self: center;
}
.mrd-riadok > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .25s var(--br-ease);
}
.mrd-c {
  font: 700 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: #3E5DAE;
  opacity: .6;
}
.mrd-riadok .mrd-nazov {
  font-family: var(--br-pismo-d);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--br-noc-text);
}
.mrd-okruh {
  font: 600 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--br-noc-tlm);
}
.mrd-riadok > label:hover { background: rgba(191, 228, 232, .35); }
.mrd:has(#mrd-pluca:checked)   .mrd-riadok[data-mrd="pluca"]   > label,
.mrd:has(#mrd-srdce:checked)   .mrd-riadok[data-mrd="srdce"]   > label,
.mrd:has(#mrd-pecen:checked)   .mrd-riadok[data-mrd="pecen"]   > label,
.mrd:has(#mrd-zaludok:checked) .mrd-riadok[data-mrd="zaludok"] > label,
.mrd:has(#mrd-slezina:checked) .mrd-riadok[data-mrd="slezina"] > label,
.mrd:has(#mrd-oblicky:checked) .mrd-riadok[data-mrd="oblicky"] > label {
  background: rgba(191, 228, 232, .4);
  box-shadow: inset 0 0 0 1px rgba(62, 93, 174, .25);
}
.mrd:has(#mrd-pluca:checked)   .mrd-riadok[data-mrd="pluca"]   .mrd-nazov,
.mrd:has(#mrd-srdce:checked)   .mrd-riadok[data-mrd="srdce"]   .mrd-nazov,
.mrd:has(#mrd-pecen:checked)   .mrd-riadok[data-mrd="pecen"]   .mrd-nazov,
.mrd:has(#mrd-zaludok:checked) .mrd-riadok[data-mrd="zaludok"] .mrd-nazov,
.mrd:has(#mrd-slezina:checked) .mrd-riadok[data-mrd="slezina"] .mrd-nazov,
.mrd:has(#mrd-oblicky:checked) .mrd-riadok[data-mrd="oblicky"] .mrd-nazov {
  background: var(--br-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mrd-pozn { margin: clamp(24px, 3vw, 36px) 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--br-noc-tlm); }

@media (max-width: 820px) {
  .mrd-scena { grid-template-columns: minmax(0, 1fr); }
  .mrd-figura { width: min(300px, 82%); }
}
@media (prefers-reduced-motion: reduce) {
  .mrd-cesta { transition: none; }
}

/* ── proces v3 je na konci súboru ── */

/* ── cenník (export markup, len prefarbenie) ────────────────────────────── */

#cennik [data-dc-tpl="147"] {
  position: relative;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(191, 228, 232, .55), transparent 55%),
    radial-gradient(90% 120% at 8% 100%, rgba(204, 197, 240, .5), transparent 58%),
    linear-gradient(180deg, var(--br-noc-2), var(--br-noc)) !important;
  box-shadow: 0 34px 70px -40px rgba(51, 65, 92, .2), inset 0 0 0 1px rgba(51, 65, 92, .1) !important;
}
#cennik [data-dc-tpl="149"] { color: #3E5DAE !important; }
#cennik [data-dc-tpl="153"] {
  background: var(--br-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
/* CTA v cenníku na gradient */
#cennik a[href="#kontakt"] {
  background: var(--br-grad-cta) !important;
  color: #1F2B47 !important;
  box-shadow: 0 14px 34px -14px rgba(62, 93, 174, .4) !important;
  transition: transform .28s var(--br-ease) !important;
}
#cennik a[href="#kontakt"]:hover { transform: translateY(-2px); }

/* ── FAQ + kontakt (tmavá zóna — aurora rieši .br-tma) ──────────────────── */

#faq [data-otazka] { transition: color .3s ease; }
#faq [data-otazka]:hover { color: #3E5DAE !important; }

/* formulárová karta: podklad + jemný okraj, vnútorné odsadenie NECHAŤ */
#kontakt .cform {
  box-shadow: 0 40px 90px -50px rgba(51, 65, 92, .22), inset 0 0 0 1px rgba(191, 228, 232, .5);
  border-radius: calc(var(--br-r) + 8px);
}
#kontakt button[type="submit"], #kontakt .cf-cta {
  background: var(--br-grad-cta) !important;
  color: #1F2B47 !important;
}

/* ── päta: energia prejde názvom ────────────────────────────────────────── */
/* Klient: „názov v pätičke skoro neviditeľný… nech ním prejde energia."
   Gradient text + svetelný pás, čisté CSS. Pri podpore scroll-driven
   animácií ženie prechod scroll, inak pomalá slučka. */

footer > div[aria-hidden="true"] {
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
  background:
    linear-gradient(100deg,
      rgba(191, 228, 232, 0) 0%,
      rgba(143, 201, 208, .8) 18%,
      rgba(89, 154, 255, .95) 34%,
      rgba(50, 122, 255, .9) 50%,
      rgba(167, 157, 224, .5) 66%,
      rgba(204, 197, 240, 0) 84%),
    linear-gradient(100deg, rgba(133, 254, 255, .17), rgba(89, 154, 255, .17) 40%, rgba(204, 197, 240, .42));
  background-size: 240% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pata-energia 7s linear infinite;
}
@keyframes pata-energia {
  from { background-position: 170% 0, 0 0; }
  to   { background-position: -70% 0, 0 0; }
}
@supports (animation-timeline: view()) {
  footer > div[aria-hidden="true"] {
    animation: pata-energia linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 90%;
  }
}
@media (prefers-reduced-motion: reduce) {
  footer > div[aria-hidden="true"] {
    animation: none;
    background: var(--br-grad);
    background-clip: text;
    -webkit-background-clip: text;
    opacity: .5;
  }
}

/* ── animovaný pás s názvami metód — preč (klient 30. 8.) ───────────────── */
:where(section:has(> .mqi), div:has(> .mqi), .mqi) { display: none !important; }
/* aj OBAL pasu — ostaval po nom pieskovy 40 px sev medzi hero a
   dokazmi (vlastne pozadie #F1F2F7 + padding). Marek 1. 9. */

/* content-visibility von — pri skrytej sekcii vracali jej prvky
   boxy cez nasledujuce sekcie (falosne prekryvy) a skakal scrollbar.
   Stranka je lahka, LCP drzi aj bez toho. */

/* Multiplikátor v cenníku sa lepil na cenu („5 €30× 100 €"). */
.br-cena-pozn { margin-left: 10px; }

/* Na dotykovom tablete (768+ zobrazuje desktopovú navigáciu) mali odkazy
   výšku 20 px — pod dotykovým cieľom. Padding ich zdvihne na 44 px. */
@media (pointer: coarse) {
  [data-hlavicka] .only-desktop a { padding-block: 12px; }
}

/* Mobil: miniatúra metódy — grid-row 1/3 natiahol výšku podľa obsahu
   a aspect-ratio prehral. Pevný štvorec + orez. */
@media (max-width: 900px) {
  .mx-mini { width: 64px; height: 64px; object-fit: cover; align-self: start; }
}
@media (max-width: 720px) {
  .hx-kicker { font-size: 11px; letter-spacing: .14em; }
}

/* ==========================================================================
   v3 — LIFE okno merania · ponuka · meridián player · proces story
   ========================================================================== */

/* ── logo: originál z pôvodného webu ────────────────────────────────────── */
.br-logo-orig { width: auto; height: 40px; display: block; align-self: center; }
.br-logo-orig + span { display: none; }   /* nápis nesie samotné logo */
@media (max-width: 860px) { .br-logo-orig { height: 36px; } }

/* ── LIFE — okno merania ────────────────────────────────────────────────── */
.lf-okno {
  /* Svetle okno — tmava karta sa bila s ponukou (ten isty podklad dvakrat
     pod sebou) a posobila prilis technicky. Farby kriviek cita canvas
     z tychto premennych. */
  --lf-c1: #5FA8B2;
  --lf-c2: #9A8CE0;
  --lf-mriezka: rgba(62, 93, 174, .08);
  --lf-os: rgba(70, 85, 120, .28);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  border-radius: calc(var(--br-r) + 6px);
  padding: clamp(18px, 2.2vw, 26px);
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(191, 228, 232, .5), transparent 58%),
    radial-gradient(100% 80% at 8% 100%, rgba(204, 197, 240, .4), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #F2F6FF);
  box-shadow: 0 30px 60px -42px rgba(51, 65, 92, .18), inset 0 0 0 1px var(--br-linka);
  min-height: clamp(300px, 30vw, 430px);
}
.lf-hud { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.lf-live {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--br-akcent-text);
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(32, 80, 200, .3);
}
.lf-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--br-akcent-text);
  box-shadow: 0 0 8px rgba(32, 80, 200, .8);
  animation: lf-pulz 1.6s ease-in-out infinite;
}
@keyframes lf-pulz { 50% { opacity: .35; } }
.lf-pocet { display: flex; align-items: baseline; gap: 8px; }
.lf-pocet b {
  font: 400 clamp(22px, 2.2vw, 30px)/1 var(--br-pismo-d);
  letter-spacing: -.03em;
  color: var(--br-akcent-text);
  font-variant-numeric: tabular-nums;
  min-width: 4.2ch; text-align: right;
}
.lf-pocet em { font-style: normal; font-size: 12px; color: var(--br-tlmene); max-width: 12ch; line-height: 1.3; }
.lf-graf { width: 100%; height: 100%; min-height: 180px; display: block; }
.lf-pata-okna {
  font: 600 10.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--br-tlmene);
}
@media (max-width: 900px) {
  .lf-obal { grid-template-columns: minmax(0, 1fr); }
  .lf-okno { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .lf-live i { animation: none; } }

/* ── ponuka — konverzná karta ───────────────────────────────────────────── */
.po { padding: clamp(64px, 9vw, 120px) var(--br-okraj); background: var(--br-plocha); }
.po-obal { max-width: var(--br-os); margin-inline: auto; }
.po-nadpis { margin: 0; font-size: clamp(30px, 4.4vw, 58px); line-height: .98; letter-spacing: -.04em; }
.po-karta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(26px, 3.4vw, 44px);
  border-radius: calc(var(--br-r) + 8px);
  padding: clamp(24px, 3.4vw, 48px);
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(191, 228, 232, .55), transparent 55%),
    radial-gradient(90% 120% at 8% 100%, rgba(204, 197, 240, .5), transparent 58%),
    linear-gradient(180deg, var(--br-noc-2), var(--br-noc));
  color: var(--br-noc-text);
  box-shadow: 0 40px 90px -50px rgba(51, 65, 92, .22), inset 0 0 0 1px rgba(51, 65, 92, .1);
}
.po-titul {
  margin: 0 0 6px;
  font: 800 clamp(20px, 2.2vw, 30px)/1.15 var(--br-pismo-d);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.po-zoznam { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.po-zoznam li {
  display: grid; gap: 2px;
  padding: 13px 0 13px 30px;
  position: relative;
  border-top: 1px solid var(--br-noc-linka);
}
.po-zoznam li::before {
  content: "";
  position: absolute; left: 2px; top: 19px;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--br-cyan);
  border-bottom: 2.5px solid var(--br-cyan);
  transform: rotate(-48deg);
  filter: drop-shadow(0 0 5px rgba(143, 201, 208, .6));
}
.po-zoznam b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.po-zoznam span { font-size: 12.5px; color: var(--br-noc-tlm); }
.po-pravo {
  display: grid; gap: 14px; align-content: center; justify-items: start;
  padding-left: clamp(0px, 3vw, 40px);
  border-left: 1px solid var(--br-noc-linka);
}
.po-cena { margin: 0; display: grid; gap: 4px; }
.po-cena b {
  font: 300 clamp(52px, 5.4vw, 84px)/1 var(--br-pismo-d);
  letter-spacing: -.05em;
  color: var(--br-akcent-text);
}
.po-cena span { font-size: 13px; color: var(--br-noc-tlm); }
.po-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 30px; border-radius: 999px;
  background: var(--br-grad-cta); color: #1F2B47;
  font-size: 15.5px; font-weight: 700;
  box-shadow: 0 18px 44px -16px rgba(62, 93, 174, .4);
  transition: transform .3s var(--br-ease), box-shadow .3s var(--br-ease);
}
.po-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 52px -16px rgba(167, 157, 224, .5); }
.po-btn span { transition: translate .3s var(--br-ease); }
.po-btn:hover span { translate: 4px 0; }
.po-tel { font-size: 14.5px; font-weight: 600; color: #3E5DAE; }
.po-zaruky { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--br-noc-tlm); }
@media (max-width: 860px) {
  .po-karta { grid-template-columns: minmax(0, 1fr); }
  .po-pravo { border-left: 0; border-top: 1px solid var(--br-noc-linka); padding: 18px 0 0; }
}

/* ── meridián — figúra s playerom ───────────────────────────────────────── */
.mrd-volba { position: absolute; opacity: 0; pointer-events: none; }
.mrd-figura {
  position: relative;
  width: min(360px, 100%);
  margin-inline: auto;
  border-radius: calc(var(--br-r) + 8px);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(51, 65, 92, .28), inset 0 0 0 1px rgba(51, 65, 92, .1);
  background: var(--br-noc);
}
.mrd-telo { display: block; width: 100%; height: auto; }
.mrd-prog {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  height: 3px; border-radius: 3px;
  background: rgba(51, 65, 92, .1);
  overflow: hidden;
}
.mrd-prog i {
  display: block; height: 100%;
  background: var(--br-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .12s linear;
}

/* ── služby — scrollytelling výška ──────────────────────────────────────── */
@media (min-width: 901px) and (pointer: fine) {
  .mx[data-mx-scroll] { min-height: 330vh; padding-block: 0; }
  .mx[data-mx-scroll] .mx-obal {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: clamp(84px, 10vh, 120px) 24px;
  }
}

/* ── proces v3 — sticky scroll-story ────────────────────────────────────── */
.pr { background: var(--br-papier); }
.pr-obal { max-width: var(--br-os); margin-inline: auto; width: 100%; }
.pr-nadpis { margin: 0; font-size: clamp(30px, 4.4vw, 58px); line-height: .98; letter-spacing: -.04em; }
.pr-scena {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 90px);
  align-items: center;
  margin-top: clamp(26px, 4vh, 48px);
}
.pr-cifra { position: relative; display: grid; }
.pr-cislo {
  grid-area: 1 / 1;
  font: 200 clamp(160px, 24vh, 300px)/0.9 var(--br-pismo-d);
  letter-spacing: -.06em;
  background: var(--br-grad-hlboky);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0;
}
.pr-kroky { margin: 0; padding: 0; list-style: none; display: grid; }
.pr-krok { grid-area: 1 / 1; display: grid; gap: 10px; align-content: center; opacity: 0; }
.pr-nazov { margin: 0; font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--br-atrament); }
.pr-text { margin: 0; max-width: 52ch; font-size: 15.5px; line-height: 1.65; color: var(--br-tlmene); }
.pr-cas {
  justify-self: start;
  font: 700 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--br-akcent-text);
  padding: 8px 12px; border-radius: 999px;
  background: rgba(62, 93, 174, .08);
}
.pr-prog {
  margin-top: clamp(22px, 4vh, 40px);
  height: 3px; border-radius: 3px;
  background: var(--br-linka);
  overflow: hidden;
}
.pr-prog i {
  display: block; height: 100%;
  background: var(--br-grad-hlboky);
  transform: scaleX(0);
  transform-origin: left;
}


/* Zakladny stav procesu = pokojna mriezka (plati vzdy, aj bez JS).
   Sticky pribeh zapina cinematic.js atributom data-pr-zivy: scroll
   meni len INDEX kroku a CSS transition vymenu dohra cela — ziadne
   polovicne stavy, ziadne prekryvy. */
.pr-lepidlo { padding: clamp(64px, 9vw, 120px) var(--br-okraj); }
.pr-scena { grid-template-columns: minmax(0, 1fr); }
.pr-cifra { display: none; }
.pr-kroky { gap: 22px; }
.pr-krok {
  grid-area: auto; opacity: 1;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--br-plocha);
  box-shadow: inset 0 0 0 1px var(--br-linka);
}
.pr-prog { display: none; }


/* ── proces v4 — krokovany pribeh (riadi cinematic.js) ─────────────────── */
.pr[data-pr-zivy] { min-height: 320vh; }
.pr[data-pr-zivy] .pr-lepidlo {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; align-content: center;
  padding: clamp(84px, 10vh, 120px) var(--br-okraj) 32px;
}
.pr[data-pr-zivy] .pr-scena { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.pr[data-pr-zivy] .pr-cifra { display: grid; }
.pr[data-pr-zivy] .pr-prog { display: block; }
.pr[data-pr-zivy] .pr-prog i { transition: transform .65s var(--br-ease); }
.pr[data-pr-zivy] .pr-kroky { gap: 0; }
.pr[data-pr-zivy] .pr-krok {
  grid-area: 1 / 1;
  padding: 0; background: none; box-shadow: none;
  opacity: 0;
  translate: 0 30px;
  filter: blur(6px);
  transition: opacity .6s var(--br-ease), translate .6s var(--br-ease), filter .6s var(--br-ease);
  pointer-events: none;
}
.pr[data-pr-zivy] .pr-cislo {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .6s var(--br-ease), translate .6s var(--br-ease);
}
.pr[data-krok="0"] .pr-krok[style*="--k:0"], .pr[data-krok="0"] .pr-cislo[style*="--k:0"],
.pr[data-krok="1"] .pr-krok[style*="--k:1"], .pr[data-krok="1"] .pr-cislo[style*="--k:1"],
.pr[data-krok="2"] .pr-krok[style*="--k:2"], .pr[data-krok="2"] .pr-cislo[style*="--k:2"],
.pr[data-krok="3"] .pr-krok[style*="--k:3"], .pr[data-krok="3"] .pr-cislo[style*="--k:3"] {
  opacity: 1;
  translate: 0 0;
  filter: none;
  pointer-events: auto;
}
.pr[data-pr-zivy]:not([data-krok]) .pr-krok[style*="--k:0"],
.pr[data-pr-zivy]:not([data-krok]) .pr-cislo[style*="--k:0"] { opacity: 1; translate: 0 0; filter: none; }

/* ── meridian canvas (player kresli sem, ziadne blikanie src) ───────────── */
.mrd-platno { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }


/* ==========================================================================
   RANNA HMLA — dorovnanie exportovych sekcii (biele inline farby z cias
   tmavych pasov) a dychanie kariet.
   ========================================================================== */

/* Byvala tmava zona faq→kontakt→pata je svetla; inline biele texty
   z exportu treba prebit. Obri napis v pate ma vlastne pravidlo nizsie. */
.br-tma { color: var(--br-atrament); }
#faq h2[style], #faq [data-otazka], #faq [data-otazka] span[style] {
  color: var(--br-atrament) !important;
  -webkit-text-stroke-color: rgba(51, 65, 92, .35) !important;
}
#faq [data-otazka] span[style*="text-stroke"] { color: transparent !important; }
#faq div[style*="border-top"] { border-top-color: var(--br-linka) !important; }
/* odpoved je <p> s inline bielou — atribut data-odpoved neexistuje,
   preto po rozbaleni 'neboli texty' */
#faq [data-akordeon] p[style] { color: var(--br-tlmene) !important; }
#faq [data-otazka] span[style*="border"] { border-color: rgba(51, 65, 92, .3) !important; color: var(--br-akcent-text) !important; }

#kontakt, #kontakt h2[style] { color: var(--br-atrament) !important; }
#kontakt [style*="rgba(255, 255, 255, 0.1"] {
  background: rgba(62, 93, 174, .08) !important;
  color: var(--br-akcent-text) !important;
}
#kontakt .cform { background: var(--br-plocha) !important; }

footer, footer a[style], footer div[style] { color: var(--br-tlmene) !important; }
footer b[style], footer div[style*="font-weight: 700"] { color: var(--br-atrament) !important; }
footer { background: transparent !important; }

/* obri napis v pate: vodovy zaliv, ziadny beh — pokoj */
footer > div[aria-hidden="true"] {
  color: transparent !important;
  background: linear-gradient(100deg, rgba(143, 201, 208, .55), rgba(167, 157, 224, .55)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: none !important;
}

/* cennik featured karta: mliecne sklo namiesto noci; biele inline texty
   dnu na atrament */
#cennik [data-dc-tpl="147"] {
  background: linear-gradient(135deg, rgba(191, 228, 232, .55), rgba(204, 197, 240, .55)), #FFFFFF !important;
  box-shadow: 0 30px 60px -42px rgba(51, 65, 92, .25), inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
  color: var(--br-atrament) !important;
}
#cennik [data-dc-tpl="147"] [style*="255, 255, 255"] { color: var(--br-atrament) !important; }
#cennik [data-dc-tpl="147"] [data-dc-tpl="151"] { color: var(--br-tlmene) !important; }
#cennik [data-dc-tpl="149"] { color: var(--br-akcent-text) !important; }
#cennik [data-dc-tpl="153"] { color: var(--br-akcent-text) !important; }

/* hero fakty a telefonna pilulka na mlieko */
.hx-tel { background: rgba(255, 255, 255, .8); }

/* mliecne sklo: spolocny dych vybranych kariet (9 s, jemny) */
.lf-okno, .po-karta, .mx-panel, .mrd-figura {
  animation: br-dych 9s ease-in-out infinite;
}
@keyframes br-dych { 50% { transform: scale(1.008); } }
@media (prefers-reduced-motion: reduce) {
  .lf-okno, .po-karta, .mx-panel, .mrd-figura { animation: none; }
}

/* ponuka checkmarky a stitok mx na akcent (cyan token je uz svetly) */
.po-zoznam li::before {
  border-left-color: #3E5DAE;
  border-bottom-color: #3E5DAE;
  filter: none;
}
.po-tel { color: var(--br-akcent-text); }
.mx-stitok { color: #FFFFFF; }

/* pruhy .br-noc / .br-tma: uz svetle z tokenov; hairline hore von,
   nahradzuje ju jemny prechod */
.br-noc::before, .br-tma::before { display: none; }

/* velke cisla dokazov: vodovy gradient text bol na svetle neviditelny */
.dk-hodnota {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--br-akcent-text) !important;
  font-weight: 300 !important;
}

/* aktivne nazvy (metody, drahy): gradient text bol po zvodoveni necitatelny */
.mx-riadok:has(.mx-volba:checked) .mx-nazov,
.mrd .mrd-riadok .mrd-nazov {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
.mx-riadok:has(.mx-volba:checked) .mx-nazov { color: var(--br-akcent-text) !important; }
.mrd:has(#mrd-pluca:checked)   .mrd-riadok[data-mrd="pluca"]   .mrd-nazov,
.mrd:has(#mrd-srdce:checked)   .mrd-riadok[data-mrd="srdce"]   .mrd-nazov,
.mrd:has(#mrd-pecen:checked)   .mrd-riadok[data-mrd="pecen"]   .mrd-nazov,
.mrd:has(#mrd-zaludok:checked) .mrd-riadok[data-mrd="zaludok"] .mrd-nazov,
.mrd:has(#mrd-slezina:checked) .mrd-riadok[data-mrd="slezina"] .mrd-nazov,
.mrd:has(#mrd-oblicky:checked) .mrd-riadok[data-mrd="oblicky"] .mrd-nazov {
  color: var(--br-akcent-text) !important;
}

/* ==========================================================================
   DRUHÉ OKO (audit better-accessibility + review-animations, 31. 8.)
   Hover správanie patrí len zariadeniam s ozajstným hoverom — na dotyku
   ostával po tapnutí „zaseknutý" zvýraznený riadok. Pôvodné hover pravidlá
   nižšie v kaskáde prebijeme neutralizáciou pri coarse pointeri.
   ========================================================================== */
@media (hover: none) {
  .mx-riadok > label:hover { background: transparent; }
  .mx-riadok:has(.mx-volba:checked) > label:hover { background: rgba(62, 93, 174, .07); }
  .mrd-riadok > label:hover { background: transparent; }
  .px-tab:hover { color: var(--br-tlmene); box-shadow: inset 0 0 0 1px var(--br-linka); }
  .hx-btn:hover, .po-btn:hover, #cennik a[href="#kontakt"]:hover,
  [data-hlavicka] > a[href="#kontakt"]:hover { transform: none; }
  .hx-btn:hover .hx-arr, .po-btn:hover span, .lf-odkaz:hover span { translate: 0 0; }
}

/* Player: kým sa frames načítavajú, progres jemne pulzuje — klik na dráhu
   na pomalej sieti nevyzerá mŕtvo. */
.mrd-figura[data-nacitava] .mrd-prog i {
  transform: scaleX(1);
  opacity: .45;
  animation: mrd-cakanie 1.2s ease-in-out infinite;
}
@keyframes mrd-cakanie { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .mrd-figura[data-nacitava] .mrd-prog i { animation: none; }
}


/* ==========================================================================
   PAPIER A ATRAMENT — ostrovy v hmle (v5)
   Marek: postava, papier a atrament upokojuju — "pracoval by som s tym
   viac". Meridiany a L.I.F.E. su odteraz papierove sekcie so serifom
   Sentient a atramentovymi tahmi; zvysok stranky ostava hmla.
   ========================================================================== */

:root {
  --br-papier-tepl: #FAF6EE;     /* presna farba papiera z renderu postavy */
  --br-atrament-tus: #32363E;
  --br-tus-tlmene: #6E6A5E;
  --br-tus-linka: rgba(50, 54, 62, .16);
}

/* kicker bez grafickeho prefixu — ornamenty posobili lacno */
.br-kicker::before { display: none; }

/* spoločný papierový podklad s jemným zrnom */
.mrd--papier, .lf--papier {
  /* PAPIER ZRUSENY — teply ton sa bil so schvalenou DNA Ranna hmla.
     Sekcie stoja na spolocnom systeme pozadi (viz _dna-kontrakt.md). */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70vw 50vh at 88% 100%, rgba(204, 197, 240, .16), transparent 60%),
    radial-gradient(60vw 44vh at 8% 0%, rgba(191, 228, 232, .18), transparent 58%),
    linear-gradient(180deg, var(--br-papier), var(--br-papier2));
  color: var(--br-atrament);
}
.mrd--papier .br-kicker, .lf--papier .br-kicker { color: var(--br-tlmene); }
.mrd--papier h2, .lf--papier h2,
.mrd--papier .mrd-nazov {
  color: var(--br-atrament);
}
.mrd--papier .mrd-uvod, .lf--papier .lf-text { color: var(--br-tlmene); }

/* ── meridiány v5 ───────────────────────────────────────────────────────── */
.mrd--papier { padding: clamp(72px, 10vw, 150px) var(--br-okraj); }
.mrd--papier .mrd-scena {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 90px);
  margin-top: clamp(30px, 4vw, 60px);
  align-items: center;
}

/* postava POSADENÁ do papiera — žiadna karta, žiadny rám; multiply
   zlieva biele okraje obrázka s podkladom sekcie */
.mrd--papier .mrd-figura {
  width: min(560px, 100%);
  margin-inline: auto;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: none;
  animation: none;
}
.mrd--papier .mrd-telo {
  mix-blend-mode: multiply;
  filter: saturate(1.04);
}
.mrd--papier .mrd-drahy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* atramentové ťahy: kreslia sa plynulo, predchádzajúci sa rozplynie */
.mrd-tah .mrd-cesta {
  fill: none;
  stroke: var(--br-atrament);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.mrd-tah .mrd-bod {
  r: 2.1px;
  fill: var(--br-atrament);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
}
.mrd:has(#mrd-pluca:checked)   .mrd-tah[data-mrd="pluca"] .mrd-cesta,
.mrd:has(#mrd-srdce:checked)   .mrd-tah[data-mrd="srdce"] .mrd-cesta,
.mrd:has(#mrd-pecen:checked)   .mrd-tah[data-mrd="pecen"] .mrd-cesta,
.mrd:has(#mrd-zaludok:checked) .mrd-tah[data-mrd="zaludok"] .mrd-cesta,
.mrd:has(#mrd-slezina:checked) .mrd-tah[data-mrd="slezina"] .mrd-cesta,
.mrd:has(#mrd-oblicky:checked) .mrd-tah[data-mrd="oblicky"] .mrd-cesta {
  stroke-dashoffset: 0;
  opacity: .82;
  transition: stroke-dashoffset 1.15s cubic-bezier(.33, 1, .68, 1) .1s, opacity .3s ease .1s;
}
.mrd:has(#mrd-pluca:checked)   .mrd-tah[data-mrd="pluca"] .mrd-bod,
.mrd:has(#mrd-srdce:checked)   .mrd-tah[data-mrd="srdce"] .mrd-bod,
.mrd:has(#mrd-pecen:checked)   .mrd-tah[data-mrd="pecen"] .mrd-bod,
.mrd:has(#mrd-zaludok:checked) .mrd-tah[data-mrd="zaludok"] .mrd-bod,
.mrd:has(#mrd-slezina:checked) .mrd-tah[data-mrd="slezina"] .mrd-bod,
.mrd:has(#mrd-oblicky:checked) .mrd-tah[data-mrd="oblicky"] .mrd-bod {
  opacity: .9;
  transform: scale(1);
  transition: opacity .4s ease, transform .5s cubic-bezier(.33, 1, .68, 1);
}
.mrd:has(#mrd-pluca:checked)   .mrd-tah[data-mrd="pluca"] .mrd-bod--kon,
.mrd:has(#mrd-srdce:checked)   .mrd-tah[data-mrd="srdce"] .mrd-bod--kon,
.mrd:has(#mrd-pecen:checked)   .mrd-tah[data-mrd="pecen"] .mrd-bod--kon,
.mrd:has(#mrd-zaludok:checked) .mrd-tah[data-mrd="zaludok"] .mrd-bod--kon,
.mrd:has(#mrd-slezina:checked) .mrd-tah[data-mrd="slezina"] .mrd-bod--kon,
.mrd:has(#mrd-oblicky:checked) .mrd-tah[data-mrd="oblicky"] .mrd-bod--kon {
  transition-delay: .95s;
}
/* nevybraté: len sa rozplynú; dashoffset sa vráti neviditeľne bez prechodu */
.mrd-tah .mrd-cesta, .mrd-tah .mrd-bod { transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .mrd-tah .mrd-cesta, .mrd-tah .mrd-bod { transition: none !important; }
}

.mrd--papier .mrd-zvisle {
  position: absolute;
  right: -8px;
  top: 8%;
  writing-mode: vertical-rl;
  font: 500 13px/1 "Switzer", sans-serif;
  letter-spacing: .5em;
  color: var(--br-tlmene);
  opacity: .7;
}

/* zoznam dráh v atramente */
.mrd--papier .mrd-zoznam { gap: 0; }
.mrd--papier .mrd-riadok > label {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 15px 10px;
  border-radius: 0;
  border-bottom: 1px solid var(--br-linka);
  transition: background-color .3s ease, padding-left .3s ease;
}
.mrd--papier .mrd-riadok:first-child > label { border-top: 1px solid var(--br-linka); }
.mrd--papier .mrd-c {
  font: 600 12px/1.6 "Switzer", sans-serif;
  letter-spacing: .08em;
  color: var(--br-tlmene);
  opacity: .8;
}
.mrd--papier .mrd-nazov { font-size: clamp(19px, 1.7vw, 24px); }
.mrd--papier .mrd-okruh {
  font: 400 12px/1.4 "Switzer", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--br-tlmene);
}
@media (hover: hover) {
  .mrd--papier .mrd-riadok > label:hover { background: rgba(50, 54, 62, .05); }
}
.mrd--papier .mrd-riadok > label:hover { padding-left: 10px; }
/* aktívny riadok: atramentová výplň čísla + posun */
.mrd.mrd--papier:has(#mrd-pluca:checked)   .mrd-riadok[data-mrd="pluca"]   > label,
.mrd.mrd--papier:has(#mrd-srdce:checked)   .mrd-riadok[data-mrd="srdce"]   > label,
.mrd.mrd--papier:has(#mrd-pecen:checked)   .mrd-riadok[data-mrd="pecen"]   > label,
.mrd.mrd--papier:has(#mrd-zaludok:checked) .mrd-riadok[data-mrd="zaludok"] > label,
.mrd.mrd--papier:has(#mrd-slezina:checked) .mrd-riadok[data-mrd="slezina"] > label,
.mrd.mrd--papier:has(#mrd-oblicky:checked) .mrd-riadok[data-mrd="oblicky"] > label {
  background: rgba(50, 54, 62, .055);
  box-shadow: inset 3px 0 0 var(--br-atrament);
  padding-left: 16px;
}
.mrd--papier .mrd-pozn { color: var(--br-tlmene); }

@media (max-width: 860px) {
  .mrd--papier .mrd-scena { grid-template-columns: minmax(0, 1fr); }
  .mrd--papier .mrd-figura { width: min(430px, 92%); }
  .mrd--papier .mrd-zvisle { display: none; }
}

/* ── L.I.F.E. v5 — atramentová vlna ─────────────────────────────────────── */
.lf--papier { padding: clamp(72px, 10vw, 150px) var(--br-okraj); }
.lf--papier .lf-obal { align-items: center; }
.lf--papier .lf-odkaz { color: var(--br-atrament); }
.lf--papier .lf-odkaz:hover span { translate: 4px 0; }

.lf-list { display: grid; gap: 18px; }
.lf-vlna { width: 100%; height: clamp(140px, 16vw, 210px); overflow: visible; }
.lf-vlna path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.lf-vlna-ink { stroke: var(--br-atrament); stroke-width: 4.5; opacity: .88; }
.lf-vlna-tien { stroke: #9A8CE0; stroke-width: 2; opacity: .55; }
/* vlna sa nakreslí raz, keď odhaľovanie pustí panel */
.lf-list.je-vonku .lf-vlna-ink {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.7s cubic-bezier(.33, 1, .68, 1) .15s;
}
.lf-list.je-vonku .lf-vlna-tien {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.7s cubic-bezier(.33, 1, .68, 1) .4s;
}
@media (prefers-reduced-motion: reduce) {
  .lf-vlna path { stroke-dashoffset: 0; transition: none !important; }
}
.lf-udaj { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--br-linka); padding-top: 16px; }
.lf-udaj b {
  font: 300 clamp(40px, 4.4vw, 64px)/1 "Switzer", sans-serif;
  letter-spacing: -.01em;
  color: var(--br-atrament);
  font-variant-numeric: tabular-nums;
}
.lf-udaj > span { font-size: 13px; line-height: 1.5; color: var(--br-tlmene); max-width: 26ch; }


/* ==========================================================================
   v6 — DNA kontrakt v akcii: prelevy · LIFE editorial · galéria služieb ·
   meridián video. Mechanizmy z archívu (karusel crossfade .8s
   cubic-bezier(.4,0,.2,1), polpixelový obrys, stlmený nadpis s <em>).
   ========================================================================== */

/* ── prelevy medzi sekciami ─────────────────────────────────────────────── */
.br-prelev {
  position: relative;
  z-index: 2;
  height: 0;                     /* pás visí cez šev, neberie miesto */
  pointer-events: none;
}
.br-prelev img {
  position: absolute;
  left: 50%;
  top: 0;
  width: max(100vw, 1400px);
  height: clamp(120px, 13vw, 190px);   /* nizky pas, nie tapeta */
  object-fit: cover;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  opacity: .6;
  /* makke hrany hore aj dole — pigment sa prelieva, nekonci hranou */
  -webkit-mask: linear-gradient(transparent, #000 26%, #000 74%, transparent);
  mask: linear-gradient(transparent, #000 26%, #000 74%, transparent);
}
.br-prelev--flip img { transform: translate(-50%, -50%) scaleX(-1); }
@media (max-width: 720px) { .br-prelev img { height: 96px; opacity: .55; } }

/* ── L.I.F.E. v6 — editorial číslo (P1) ─────────────────────────────────── */
.lg { padding: clamp(72px, 10vw, 150px) var(--br-okraj); background: var(--br-plocha); }
.lg-obal {
  max-width: var(--br-os);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}
.lg-cislo {
  display: grid;
  gap: 26px;
  justify-items: start;
  padding-right: clamp(0px, 4vw, 48px);
  border-right: 1px solid var(--br-linka);
}
.lg-cislo b {
  font-size: clamp(96px, 13vw, 200px);
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--br-akcent-text);
  font-variant-numeric: tabular-nums;
}
.lg-mono {
  font: 600 11.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--br-tlmene);
  max-width: 30ch;
}
/* mechanizmus: stlmenie vsetkeho ostatneho — <em> nesie vyznam */
.lg-nadpis {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: rgba(51, 65, 92, .44);
  text-wrap: balance;
  max-width: 22ch;
}
.lg-nadpis em {
  font-style: normal;
  font-weight: 600;
  color: var(--br-atrament);
}
.lg-text { margin: 16px 0 0; max-width: 54ch; font-size: 15.5px; line-height: 1.65; color: var(--br-tlmene); }
.lg-odkaz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--br-akcent-text);
}
.lg-odkaz span { transition: translate .3s var(--br-ease); }
@media (hover: hover) { .lg-odkaz:hover span { translate: 4px 0; } }
@media (max-width: 860px) {
  .lg-obal { grid-template-columns: minmax(0, 1fr); }
  .lg-cislo { border-right: 0; border-bottom: 1px solid var(--br-linka); padding: 0 0 20px; }
}

/* ── služby v6 — galéria (P0) ───────────────────────────────────────────── */
.mg { padding: clamp(72px, 10vw, 150px) var(--br-okraj); }
.mg-obal { max-width: var(--br-os); margin-inline: auto; }
.mg-nadpis { margin: 0; font-size: clamp(30px, 4.4vw, 58px); line-height: .98; letter-spacing: -.02em; }
.mg-volba { position: absolute; opacity: 0; pointer-events: none; }
.mg-scena { margin-top: clamp(24px, 3.4vw, 44px); }

.mg-okno {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 8.5;
  border-radius: calc(var(--br-r) + 6px);
  overflow: hidden;
  background: var(--br-papier2);
  /* polpixelovy obrys + makky tien — hodnoty z archivu */
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 4px 30px rgba(0, 0, 0, .08);
}
.mg-zaber {
  /* absolute namiesto grid-area: figure s img bola o ~37 px vyssia nez
     bunka a nazov na fotke padal pod overflow okna */
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1);
}
.mg-zaber img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-zaber::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(51, 65, 92, .55), rgba(51, 65, 92, .05) 38%, transparent 55%);
}
.mg-titulka {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(16px, 2.6vw, 28px);
  z-index: 1;
  display: grid;
  gap: 6px;
  color: #fff;
}
.mg-kat {
  justify-self: start;
  font: 600 10.5px/1 "Switzer", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mg-nazov2, .mg-titulka b {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.mg:has(#mg-biorezo:checked)   .mg-zaber[data-mg="biorezo"],
.mg:has(#mg-mamo:checked)      .mg-zaber[data-mg="mamo"],
.mg:has(#mg-plason:checked)    .mg-zaber[data-mg="plason"],
.mg:has(#mg-komora:checked)    .mg-zaber[data-mg="komora"],
.mg:has(#mg-magnet:checked)    .mg-zaber[data-mg="magnet"],
.mg:has(#mg-rpz:checked)       .mg-zaber[data-mg="rpz"],
.mg:has(#mg-nikotin:checked)   .mg-zaber[data-mg="nikotin"],
.mg:has(#mg-somavedic:checked) .mg-zaber[data-mg="somavedic"] { opacity: 1; z-index: 1; }

.mg-pod {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 16px clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: 16px;
}
.mg-popisy { display: grid; min-height: 86px; }
.mg-popis {
  grid-area: 1 / 1;
  display: grid;
  gap: 6px;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .5s var(--br-ease) .15s, translate .5s var(--br-ease) .15s;
}
.mg-popis p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--br-tlmene); }
.mg-udaj {
  font: 600 11.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
}
.mg:has(#mg-biorezo:checked)   .mg-popis[data-mg="biorezo"],
.mg:has(#mg-mamo:checked)      .mg-popis[data-mg="mamo"],
.mg:has(#mg-plason:checked)    .mg-popis[data-mg="plason"],
.mg:has(#mg-komora:checked)    .mg-popis[data-mg="komora"],
.mg:has(#mg-magnet:checked)    .mg-popis[data-mg="magnet"],
.mg:has(#mg-rpz:checked)       .mg-popis[data-mg="rpz"],
.mg:has(#mg-nikotin:checked)   .mg-popis[data-mg="nikotin"],
.mg:has(#mg-somavedic:checked) .mg-popis[data-mg="somavedic"] { opacity: 1; translate: 0 0; }

.mg-minis { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mg-mini {
  position: relative;
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 4px 18px rgba(0, 0, 0, .08);
  transition: transform .3s var(--br-ease), box-shadow .3s var(--br-ease), opacity .3s;
  opacity: .72;
}
.mg-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) { .mg-mini:hover { opacity: 1; transform: translateY(-3px); } }
.mg:has(#mg-biorezo:checked)   .mg-mini[data-mg="biorezo"],
.mg:has(#mg-mamo:checked)      .mg-mini[data-mg="mamo"],
.mg:has(#mg-plason:checked)    .mg-mini[data-mg="plason"],
.mg:has(#mg-komora:checked)    .mg-mini[data-mg="komora"],
.mg:has(#mg-magnet:checked)    .mg-mini[data-mg="magnet"],
.mg:has(#mg-rpz:checked)       .mg-mini[data-mg="rpz"],
.mg:has(#mg-nikotin:checked)   .mg-mini[data-mg="nikotin"],
.mg:has(#mg-somavedic:checked) .mg-mini[data-mg="somavedic"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--br-akcent-text), 0 6px 20px rgba(62, 93, 174, .3);
}
@media (max-width: 860px) {
  .mg-okno { aspect-ratio: 4 / 3.4; }
  .mg-pod { grid-template-columns: minmax(0, 1fr); }
  .mg-minis { justify-content: flex-start; }
}

/* ── meridián v6 — video kanáliky ───────────────────────────────────────── */
.mrd-figura {
  position: relative;
  width: min(520px, 100%);
  margin-inline: auto;
  border-radius: calc(var(--br-r) + 6px);
  overflow: hidden;
  background: var(--br-papier2);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 4px 30px rgba(0, 0, 0, .08);
  animation: none;
}
.mrd-scena {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
/* zoznam = kontraktova polozka: hairline, aktivna vodove pozadie + akcent */
.mrd-zoznam { gap: 0; align-self: center; }
.mrd-riadok > label {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px 12px;
  border-radius: 12px;
  border-bottom: 1px solid var(--br-linka);
  box-shadow: none;
  background: none;
  transition: background-color .3s var(--br-ease);
}
.mrd-riadok:last-child > label { border-bottom: 0; }
.mrd-c {
  font: 700 11px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: var(--br-akcent-text);
  opacity: .6;
}
.mrd .mrd-riadok .mrd-nazov {
  font-family: "Switzer", sans-serif;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--br-atrament);
}
.mrd-okruh {
  font: 600 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--br-tlmene);
}
.mrd:has(#mrd-pluca:checked)   .mrd-riadok[data-mrd="pluca"]   > label,
.mrd:has(#mrd-srdce:checked)   .mrd-riadok[data-mrd="srdce"]   > label,
.mrd:has(#mrd-pecen:checked)   .mrd-riadok[data-mrd="pecen"]   > label,
.mrd:has(#mrd-zaludok:checked) .mrd-riadok[data-mrd="zaludok"] > label,
.mrd:has(#mrd-slezina:checked) .mrd-riadok[data-mrd="slezina"] > label,
.mrd:has(#mrd-oblicky:checked) .mrd-riadok[data-mrd="oblicky"] > label {
  background: rgba(62, 93, 174, .06);
  box-shadow: none;
}
@media (max-width: 860px) {
  .mrd-scena { grid-template-columns: minmax(0, 1fr); }
  .mrd-figura { width: min(420px, 94%); }
}

/* ==========================================================================
   CINEMATIC v8 — PROFESIONÁLNY PRECHOD, BENTO SLUŽBY, PIPELINE PROCES,
   ORBIT PILLS PRE TCM A ZJEDNOTENÝ KONVERZNÝ LIEVIK
   ========================================================================== */

/* ── 1. Dokonalý bezšvový prechod Hero → Obsah ────────────────────────── */
.hx-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.5) 86%, transparent 100%);
}
.hx-scrim {
  background:
    linear-gradient(90deg, rgba(242, 248, 249, 0.96) 0%, rgba(242, 248, 249, 0.88) 36%, rgba(242, 248, 249, 0.45) 60%, rgba(242, 248, 249, 0) 84%),
    linear-gradient(to top, var(--br-papier) 0%, rgba(242, 248, 249, 0.98) 14%, rgba(242, 248, 249, 0.72) 32%, rgba(242, 248, 249, 0) 58%) !important;
}
@media (max-width: 720px) {
  .hx-scrim {
    background:
      linear-gradient(to top, var(--br-papier) 0%, rgba(242, 248, 249, 0.98) 14%, rgba(242, 248, 249, 0.8) 36%, rgba(242, 248, 249, 0.2) 65%, rgba(242, 248, 249, 0) 85%),
      linear-gradient(180deg, rgba(242, 248, 249, 0.5), transparent 28%) !important;
  }
}
/* 17. 9. 2026 (výkon opony na slabom notebooku): maska videa je od 861 px zložená do
   zvislej vrstvy závoja (_zdroj/_skripty/zavoj_bez_masky.py) — maska bola vlastná vrstva,
   ktorú grafika pri zmenšovaní úvodu prepočítavala v každom snímku. Rozdiel oproti maske
   do 4 úrovní z 255 (porovnanie_css.mjs). Do 860 px má závoj iný tvar a maska ostáva. */
@media (min-width: 861px) {
  .hx-media { -webkit-mask-image: none; mask-image: none; }
  .hx-scrim {
    background:
      linear-gradient(90deg, rgba(242, 248, 249, 0.96) 0%, rgba(242, 248, 249, 0.88) 36%, rgba(242, 248, 249, 0.45) 60%, rgba(242, 248, 249, 0) 84%),
      linear-gradient(to bottom,
      rgba(242, 248, 249, 0) 0%,
      rgba(242, 248, 249, 0) 42%,
      rgba(242, 248, 249, 0.72) 68%,
      rgba(242, 248, 249, 0.7489) 70%,
      rgba(242, 248, 249, 0.7707) 71%,
      rgba(242, 248, 249, 0.7917) 72%,
      rgba(242, 248, 249, 0.8117) 73%,
      rgba(242, 248, 249, 0.8308) 74%,
      rgba(242, 248, 249, 0.8491) 75%,
      rgba(242, 248, 249, 0.8664) 76%,
      rgba(242, 248, 249, 0.8828) 77%,
      rgba(242, 248, 249, 0.8983) 78%,
      rgba(242, 248, 249, 0.913) 79%,
      rgba(242, 248, 249, 0.9267) 80%,
      rgba(242, 248, 249, 0.9395) 81%,
      rgba(242, 248, 249, 0.9514) 82%,
      rgba(242, 248, 249, 0.9624) 83%,
      rgba(242, 248, 249, 0.9725) 84%,
      rgba(242, 248, 249, 0.9817) 85%,
      rgba(242, 248, 249, 0.99) 86%,
      rgba(242, 248, 249, 0.9914) 87%,
      rgba(242, 248, 249, 0.9927) 88%,
      rgba(242, 248, 249, 0.9938) 89%,
      rgba(243, 248, 249, 0.9949) 90%,
      rgba(243, 248, 249, 0.9959) 91%,
      rgba(243, 248, 249, 0.9967) 92%,
      rgba(243, 249, 248, 0.9975) 93%,
      rgba(243, 249, 248, 0.9982) 94%,
      rgba(243, 249, 248, 0.9987) 95%,
      rgba(243, 249, 248, 0.9992) 96%,
      rgba(244, 249, 248, 0.9995) 97%,
      rgba(244, 249, 248, 0.9998) 98%,
      rgba(244, 249, 248, 0.9999) 99%,
      rgba(244, 249, 248, 1) 100%) !important;
  }
}

#dokaz {
  position: relative;
  background: var(--br-papier) !important;
  padding: clamp(40px, 6vw, 80px) var(--br-okraj) clamp(60px, 8vw, 100px);
}
#dokaz::before, #dokaz::after {
  display: none !important; /* Zrušené umelé prechodové pásy, ktoré vytvárali švy */
}
.dk-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}
.dk-hlava {
  max-width: 68ch;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}
.dk-nadpis {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--br-atrament);
}
.dk-uvod {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--br-tlmene);
}
.dk-mriezka {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.dk-polozka {
  position: relative;
  background: #FFFFFF;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
  border: 1px solid rgba(23, 39, 89, 0.08);
  box-shadow: 0 12px 32px -10px rgba(23, 39, 89, 0.05);
}
.dk-polozka:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px -12px rgba(23, 39, 89, 0.10);
  border-color: rgba(14, 155, 184, 0.28);
}
.dk-polozka--cyan,
.dk-polozka--violet,
.dk-polozka--emerald {
  background: #FFFFFF;
  border: 1px solid rgba(23, 39, 89, 0.08);
  box-shadow: 0 12px 32px -10px rgba(23, 39, 89, 0.05);
}
.dk-polozka--cyan:hover,
.dk-polozka--violet:hover,
.dk-polozka--emerald:hover {
  border-color: rgba(14, 155, 184, 0.3);
  box-shadow: 0 20px 48px -12px rgba(23, 39, 89, 0.10);
}

.dk-polozka-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.dk-polozka-ikona {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dk-polozka:hover .dk-polozka-ikona {
  transform: scale(1.15) translateY(-4px);
}
.dk-polozka-ikona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.12));
}

/* Živé 3D kinetické animácie pre každú ikonu zvlášť */
.dk-polozka--cyan .dk-polozka-ikona img {
  animation: floatQuantum3D 4.8s ease-in-out infinite alternate;
}
.dk-polozka--violet .dk-polozka-ikona img {
  animation: floatSensor3D 5.6s ease-in-out infinite alternate;
}
.dk-polozka--emerald .dk-polozka-ikona img {
  animation: floatChrono3D 5.2s ease-in-out infinite alternate;
}

@keyframes floatQuantum3D {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  25% { transform: translateY(-5px) rotate(3deg) scale(1.04); }
  50% { transform: translateY(-9px) rotate(-2deg) scale(1.06); }
  75% { transform: translateY(-4px) rotate(-3.5deg) scale(1.02); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

@keyframes floatSensor3D {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  33% { transform: translateY(-7px) rotate(-3.5deg) scale(1.05); }
  66% { transform: translateY(-3px) rotate(3deg) scale(1.02); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

@keyframes floatChrono3D {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  30% { transform: translateY(-5px) rotate(4deg) scale(1.03); }
  70% { transform: translateY(-8px) rotate(-2.5deg) scale(1.06); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* 1. L.I.F.E. Kvantová aura pulz (jemný, decentný) */
.dk-polozka--cyan .dk-polozka-ikona::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 155, 184, 0.2) 0%, transparent 70%);
  filter: blur(8px);
  animation: cyanPulseAura 3s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
@keyframes cyanPulseAura {
  0% { transform: scale(0.9); opacity: 0.3; }
  100% { transform: scale(1.15); opacity: 0.6; }
}

/* 2. MEIK 3D tomografické radarové vlny (decentné klinické linky) */
.dk-polozka--violet .dk-polozka-ikona::before,
.dk-polozka--violet .dk-polozka-ikona::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(84, 104, 138, 0.28);
  animation: meikRadarPulse 3.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  z-index: 1;
  pointer-events: none;
}
.dk-polozka--violet .dk-polozka-ikona::after {
  animation-delay: 1.6s;
}
@keyframes meikRadarPulse {
  0% { transform: scale(0.6); opacity: 0.6; border-color: rgba(84, 104, 138, 0.35); }
  100% { transform: scale(1.5); opacity: 0; border-color: rgba(84, 104, 138, 0); }
}

/* 3. Chrono 24h Zlatá orbitálna častica a prstenec (decentný) */
.dk-polozka--emerald .dk-polozka-ikona::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(51, 65, 92, 0.15);
  animation: chronoRingRotate 14s linear infinite;
  z-index: 1;
  pointer-events: none;
}
.dk-polozka--emerald .dk-polozka-ikona::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  border-radius: 50%;
  background: #0E9BB8;
  box-shadow: 0 0 8px rgba(14, 155, 184, 0.6);
  animation: chronoPhotonOrbit 4s linear infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes chronoRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes chronoPhotonOrbit {
  from { transform: rotate(0deg) translateX(34px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(34px) rotate(-360deg); }
}

/* Decentné, vysoko dôveryhodné klinické odznaky */
.dk-polozka-badge,
.dk-badge--cyan,
.dk-badge--violet,
.dk-badge--emerald {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(23, 39, 89, 0.04);
  color: #54688A;
  border: 1px solid rgba(23, 39, 89, 0.09);
}

/* Autoritatívne, čisté medicínske čísla v tmavomodrej BioRelax farbe */
.dk-hodnota,
.dk-polozka--cyan .dk-hodnota,
.dk-polozka--violet .dk-hodnota,
.dk-polozka--emerald .dk-hodnota {
  display: inline-block;
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  color: #172759 !important;
  -webkit-text-fill-color: #172759 !important;
  background: none !important;
}
.dk-popis {
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  font-weight: 700;
  color: var(--br-atrament);
  line-height: 1.4;
  margin-bottom: 4px;
}
.dk-zdroj {
  font-size: 13px;
  color: var(--br-tlmene);
  letter-spacing: 0.02em;
}

/* Karta L.I.F.E. metódy v sekcii dôkazov */
.dk-metoda-karta {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 255, 0.9));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(143, 160, 216, 0.28);
  border-radius: 24px;
  padding: clamp(26px, 3.8vw, 48px);
  box-shadow: 0 18px 46px -20px rgba(51, 65, 92, 0.09);
}
.dk-metoda-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  margin-bottom: 12px;
}
.dk-metoda-nadpis {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--br-atrament);
}
.dk-metoda-nadpis em {
  font-style: normal;
  font-weight: 700;
  color: var(--br-akcent-text);
}
.dk-metoda-perex {
  margin: 0 0 24px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--br-tlmene);
}
.dk-metoda-akcie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.dk-btn-primarny {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--br-atrament);
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.dk-btn-primarny:hover {
  transform: translateY(-2px);
  background: #102042;
}
.dk-metoda-pozn {
  font-size: 13px;
  color: var(--br-tlmene);
}
.dk-metoda-viz {
  position: relative;
  background: rgba(240, 245, 252, 0.75);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(51, 65, 92, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dk-osciloskop {
  width: 100%;
  height: auto;
  border-radius: 12px;
  --lf-c1: #0E9BB8;
  --lf-c2: #6A3FD8;
  --lf-mriezka: rgba(51, 65, 92, 0.06);
  --lf-os: rgba(51, 65, 92, 0.18);
}
.dk-viz-udaj {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dk-viz-pocet {
  font-size: 22px;
  font-weight: 800;
  color: var(--br-akcent-text);
}
.dk-viz-popis {
  font-size: 12.5px;
  color: var(--br-tlmene);
  letter-spacing: 0.02em;
}

/* ── 2. Služby: Bento Grid všetkých 8 metód naraz ────────────────────────── */
.sl {
  position: relative;
  padding: clamp(70px, 9vw, 120px) var(--br-okraj);
  background: var(--br-papier) !important;
}
.sl-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}
.sl-hlava {
  max-width: 68ch;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.sl-nadpis {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--br-atrament);
}
.sl-uvod {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--br-tlmene);
}
.sl-bento-mriezka {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.sl-bento-karta {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(51, 65, 92, 0.09);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px -16px rgba(51, 65, 92, 0.06);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.sl-bento-karta:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -16px rgba(51, 65, 92, 0.14);
}
.sl-bento-karta--hlavna {
  grid-column: span 7;
}
.sl-bento-karta--sekundarna {
  grid-column: span 5;
}
.sl-bento-karta:not(.sl-bento-karta--hlavna):not(.sl-bento-karta--sekundarna) {
  grid-column: span 4;
}
.sl-bento-obrazok {
  position: relative;
  width: 100%;
  height: clamp(180px, 20vw, 240px);
  overflow: hidden;
  background: #E8EEF4;
}
.sl-bento-karta--hlavna .sl-bento-obrazok,
.sl-bento-karta--sekundarna .sl-bento-obrazok {
  height: clamp(230px, 24vw, 300px);
}
.sl-bento-obrazok img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sl-bento-karta:hover .sl-bento-obrazok img {
  transform: scale(1.04);
}
.sl-bento-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--br-atrament);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sl-bento-tag--diag {
  background: rgba(23, 39, 89, 0.92);
  color: #FFFFFF;
}
.sl-bento-obsah {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sl-bento-titul {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--br-atrament);
  line-height: 1.25;
}
.sl-bento-popis {
  margin: 0 0 18px;
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.6;
  color: var(--br-tlmene);
  flex: 1;
}
.sl-bento-pata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(51, 65, 92, 0.08);
  font-size: 13px;
}
.sl-bento-udaj {
  font-weight: 600;
  color: var(--br-atrament);
}
.sl-bento-odkaz {
  font-weight: 700;
  color: var(--br-akcent-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease;
}
.sl-bento-karta:hover .sl-bento-odkaz {
  transform: translateX(4px);
}
.sl-bento-cena {
  font-weight: 500;
  color: var(--br-tlmene);
}

/* ── 3. Tradičná čínska medicína: Zarovnanie & Meridian Orbit Pills ───────── */
.mrd {
  position: relative;
  padding: clamp(70px, 9vw, 120px) var(--br-okraj);
  background: var(--br-papier) !important;
}
.mrd-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}
.mrd-hlava {
  max-width: 68ch;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.mrd-scena {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.mrd-figura {
  position: relative;
  width: min(390px, 100%);
  margin-inline: auto;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(191, 228, 232, 0.4), rgba(204, 197, 240, 0.25) 60%, transparent 75%);
  box-shadow: 0 16px 40px -20px rgba(51, 65, 92, 0.12);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.mrd-platno, .mrd-telo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.mrd-zoznam {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mrd-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2.2vw, 24px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 92, 0.1);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 14px -6px rgba(51, 65, 92, 0.05);
  margin: 0;
}
.mrd-pill:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(62, 93, 174, 0.3);
  transform: translateX(6px);
  box-shadow: 0 8px 24px -8px rgba(51, 65, 92, 0.12);
}
.mrd-pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pill-farba, #0E9BB8);
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--pill-farba, #0E9BB8);
  transition: transform 0.3s ease;
}
.mrd-pill:hover .mrd-pill-dot {
  transform: scale(1.3);
}
.mrd-pill-cislo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--br-tlmene);
}
.mrd-pill-info {
  flex: 1;
  min-width: 0;
}
.mrd-pill-nazov {
  display: block;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  font-weight: 700;
  color: var(--br-atrament);
  letter-spacing: -0.02em;
}
.mrd-pill-okruh {
  display: block;
  font-size: 12.5px;
  color: var(--br-tlmene);
  margin-top: 2px;
}
.mrd-pill-zona {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(51, 65, 92, 0.06);
  color: var(--br-atrament);
}
/* Stav, keď je rádio input zakliknutý — IBA farebné orámovanie a aura, bez bielej výplne */
.mrd:has(#mrd-pluca:checked)   .mrd-pill[data-mrd="pluca"],
.mrd:has(#mrd-srdce:checked)   .mrd-pill[data-mrd="srdce"],
.mrd:has(#mrd-pecen:checked)   .mrd-pill[data-mrd="pecen"],
.mrd:has(#mrd-zaludok:checked) .mrd-pill[data-mrd="zaludok"],
.mrd:has(#mrd-slezina:checked) .mrd-pill[data-mrd="slezina"],
.mrd:has(#mrd-oblicky:checked) .mrd-pill[data-mrd="oblicky"] {
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--pill-farba, #0E9BB8);
  box-shadow: 0 0 0 2px var(--pill-farba, #0E9BB8), 0 10px 28px -6px rgba(14, 155, 184, 0.22);
  transform: translateX(8px);
}
.mrd:has(#mrd-pluca:checked)   .mrd-pill[data-mrd="pluca"]   .mrd-pill-dot,
.mrd:has(#mrd-srdce:checked)   .mrd-pill[data-mrd="srdce"]   .mrd-pill-dot,
.mrd:has(#mrd-pecen:checked)   .mrd-pill[data-mrd="pecen"]   .mrd-pill-dot,
.mrd:has(#mrd-zaludok:checked) .mrd-pill[data-mrd="zaludok"] .mrd-pill-dot,
.mrd:has(#mrd-slezina:checked) .mrd-pill[data-mrd="slezina"] .mrd-pill-dot,
.mrd:has(#mrd-oblicky:checked) .mrd-pill[data-mrd="oblicky"] .mrd-pill-dot {
  transform: scale(1.4);
}

/* Vycentrovaná hlavička TCM */
.mrd-hlava--stred {
  text-align: center;
  margin-inline: auto;
  max-width: 74ch;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.mrd-stitok-obal {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.mrd-stitok-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(14, 155, 184, 0.08);
  border: 1px solid rgba(14, 155, 184, 0.22);
  color: #0E9BB8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mrd-stitok-bodka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0E9BB8;
  box-shadow: 0 0 10px #0E9BB8;
  animation: pulseMrdDot 2s infinite ease-in-out;
}
@keyframes pulseMrdDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.8); opacity: 0.5; }
}
.mrd-nadpis--stred {
  text-align: center;
  margin-inline: auto;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--br-atrament);
}
.mrd-uvod--stred {
  text-align: center;
  margin-inline: auto;
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.68;
  color: var(--br-tlmene);
  margin-top: 16px;
  max-width: 68ch;
}

/* Postava a integrovaný status v TCM */
.mrd-figura-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mrd-figura-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(51, 65, 92, 0.08);
  box-shadow: 0 4px 12px -4px rgba(51, 65, 92, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: var(--br-tlmene);
}
.mrd-status-bodka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 8px #059669;
}

/* ── 4. Ako prebieha vyšetrenie: Animovaná časová os (Možnosť A) ────────── */
.pk {
  position: relative;
  padding: clamp(70px, 9vw, 120px) var(--br-okraj);
  background: var(--br-papier) !important;
}
.pk-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}
.pk-hlava--stred {
  text-align: center;
  margin-inline: auto;
  max-width: 68ch;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.pk-nadpis--stred {
  text-align: center;
  margin-inline: auto;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--br-atrament);
}
/* ── 4. Ako prebieha vyšetrenie: 3 Hypermoderné varianty ──────────────────── */
.pk {
  position: relative;
  padding: clamp(70px, 9vw, 120px) var(--br-okraj);
  background: var(--br-papier) !important;
}
.pk-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}
.pk-hlava--stred {
  text-align: center;
  margin-inline: auto;
  max-width: 68ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.pk-nadpis--stred {
  text-align: center;
  margin-inline: auto;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--br-atrament);
}
.pk-uvod--stred {
  text-align: center;
  margin-inline: auto;
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--br-tlmene);
}

/* Prepínanie panelov */
#proces[data-postup-aktivny="a"] .pk-variant-a { display: block !important; }
#proces[data-postup-aktivny="a"] .pk-variant-b,
#proces[data-postup-aktivny="a"] .pk-variant-c { display: none !important; }

#proces[data-postup-aktivny="b"] .pk-variant-b { display: block !important; }
#proces[data-postup-aktivny="b"] .pk-variant-a,
#proces[data-postup-aktivny="b"] .pk-variant-c { display: none !important; }

#proces[data-postup-aktivny="c"] .pk-variant-c { display: block !important; }
#proces[data-postup-aktivny="c"] .pk-variant-a,
#proces[data-postup-aktivny="c"] .pk-variant-b { display: none !important; }

/* ── VARIANT A: Synaptický svetelný lúč ─────────────────────────────────── */
.pk-synapse-kontajner {
  position: relative;
  margin-top: clamp(24px, 3.5vw, 44px);
}
.pk-synapse-track {
  position: absolute;
  top: 48px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: rgba(14, 155, 184, 0.15);
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
}
.pk-synapse-laser {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #0E9BB8, #7C3AED, #059669, #2563EB, transparent);
  opacity: 0.6;
}
.pk-synapse-pulz {
  position: absolute;
  top: -5px;
  width: 140px;
  height: 13px;
  border-radius: 999px;
  background: radial-gradient(circle, #5CE1E6 0%, #0E9BB8 60%, transparent 100%);
  filter: drop-shadow(0 0 16px #5CE1E6);
}
.pk-synapse-pulz--1 {
  animation: synapseTravel 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pk-synapse-pulz--2 {
  animation: synapseTravel 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite 2.4s;
}
@keyframes synapseTravel {
  0% { left: -10%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 95%; opacity: 0; }
}

.pk-synapse-mriezka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  position: relative;
  z-index: 2;
}
.pk-syn-karta {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 22px;
  border: 1.5px solid rgba(51, 65, 92, 0.09);
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 30px -14px rgba(51, 65, 92, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.pk-syn-karta:hover {
  transform: translateY(-8px);
}
.pk-syn-karta[data-aura="cyan"]:hover {
  border-color: rgba(14, 155, 184, 0.45);
  box-shadow: 0 22px 50px -12px rgba(14, 155, 184, 0.25);
}
.pk-syn-karta[data-aura="violet"]:hover {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 22px 50px -12px rgba(124, 58, 237, 0.25);
}
.pk-syn-karta[data-aura="emerald"]:hover {
  border-color: rgba(5, 150, 105, 0.45);
  box-shadow: 0 22px 50px -12px rgba(5, 150, 105, 0.25);
}
.pk-syn-karta[data-aura="sky"]:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 22px 50px -12px rgba(37, 99, 235, 0.25);
}

.pk-syn-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pk-syn-cislo {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--br-akcent-text);
  background: rgba(14, 155, 184, 0.1);
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(14, 155, 184, 0.2);
}
.pk-syn-badge {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(143, 160, 216, 0.15);
  color: var(--br-atrament);
}
.pk-syn-foto {
  width: 100%;
  height: clamp(140px, 14vw, 170px);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #E8EEF4;
}
.pk-syn-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.pk-syn-karta:hover .pk-syn-foto img {
  transform: scale(1.06);
}
.pk-syn-titul {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--br-atrament);
}
.pk-syn-popis {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--br-tlmene);
  flex: 1;
}
.pk-syn-spojka {
  position: absolute;
  right: -16px;
  top: 42px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #0E9BB8;
  box-shadow: 0 0 16px rgba(14, 155, 184, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.pk-syn-bodka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0E9BB8;
  box-shadow: 0 0 8px #0E9BB8;
  animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ── VARIANT B: Interaktívny Stage & Scrubber ────────────────────────────── */
.pk-stage-split {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.88fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  margin-top: clamp(24px, 3.5vw, 44px);
}
.pk-stage-display {
  position: relative;
  background: #FFFFFF;
  border-radius: 26px;
  border: 1.5px solid rgba(14, 155, 184, 0.25);
  box-shadow: 0 20px 50px -20px rgba(14, 155, 184, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pk-stage-ram {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  overflow: hidden;
  background: #0F172A;
}
.pk-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  display: block;
}
.pk-stage-hud {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: clamp(20px, 3vw, 32px);
  background: linear-gradient(to top, rgba(16, 32, 66, 0.94) 0%, rgba(16, 32, 66, 0.65) 60%, transparent 100%);
  color: #FFFFFF;
  z-index: 2;
}
.pk-hud-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5CE1E6;
}
.pk-hud-bodka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5CE1E6;
  box-shadow: 0 0 10px #5CE1E6;
  animation: pulseDot 1.6s infinite ease-in-out;
}
.pk-hud-detail {
  font-size: clamp(14px, 1.2vw, 16.5px);
  margin-top: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.pk-stage-scrubber {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.pk-scrub-krok {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1.5px solid rgba(51, 65, 92, 0.09);
  padding: clamp(16px, 1.8vw, 20px);
  display: flex;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pk-scrub-krok:hover {
  background: #FFFFFF;
  border-color: rgba(14, 155, 184, 0.4);
  transform: translateX(6px);
}
.pk-scrub-krok.je-vybraty {
  background: #FFFFFF;
  border-color: #0E9BB8;
  box-shadow: 0 14px 34px -10px rgba(14, 155, 184, 0.22);
  transform: translateX(8px);
}
.pk-scrub-cislo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pk-scrub-cislo {
  font-size: 20px;
  font-weight: 800;
  color: #0E9BB8;
  line-height: 1;
}
.pk-scrub-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: rgba(14, 155, 184, 0.2);
  margin-top: 6px;
}
.pk-scrub-info {
  flex: 1;
}
.pk-scrub-nadpis-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.pk-scrub-nadpis-rad h4 {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: 700;
  color: var(--br-atrament);
}
.pk-scrub-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(14, 155, 184, 0.1);
  color: #0E9BB8;
}
.pk-scrub-info p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--br-tlmene);
}

/* ── VARIANT C: 3D Milestone Časová os (Kinetic Scroll Draw & Spring Reveal) ─ */
.pk-milestone-cesta {
  position: relative;
  margin-top: clamp(24px, 3.5vw, 44px);
}
.pk-milestone-kolaj {
  position: absolute;
  top: 38px;
  left: 12.5%;
  right: 12.5%;
  height: 4px;
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
}
.pk-kolaj-draha {
  position: absolute;
  inset: 0;
  background: rgba(23, 39, 89, 0.08);
  border-radius: 999px;
}
.pk-kolaj-vypln {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0E9BB8 0%, #7C3AED 33%, #059669 66%, #2563EB 100%);
  box-shadow: 0 0 16px rgba(14, 155, 184, 0.6);
}
.pk-kolaj-laser-head {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 12px #5CE1E6, 0 0 22px rgba(14, 155, 184, 0.85);
  opacity: 0;
  z-index: 3;
}

.pk-milestone-mriezka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  position: relative;
  z-index: 2;
}
.pk-mstone-karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pk-mstone-sfera-obal {
  position: relative;
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pk-mstone-sfera {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FFFFFF 0%, #F5F8FF 100%);
  border: 3px solid var(--mstone-glow, #0E9BB8);
  box-shadow: 0 12px 28px -6px var(--mstone-glow, #0E9BB8), inset 0 2px 6px rgba(255, 255, 255, 0.9);
  font-size: 24px;
  font-weight: 800;
  color: var(--mstone-glow, #0E9BB8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transform: scale(0.2);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  will-change: transform, opacity;
}
.pk-mstone-sonar {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2.5px solid var(--sonar-c, #0E9BB8);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  z-index: 1;
}

.pk-mstone-telo {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  border: 1px solid rgba(51, 65, 92, 0.08);
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: 0 10px 28px -12px rgba(51, 65, 92, 0.06);
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  transform: translateY(34px) scale(0.96);
  opacity: 0;
  transition: transform 0.3s ease, border-color 0.3s ease;
  will-change: transform, opacity;
}

/* ── Kinetická animácia pri doscrollovaní (.je-odhalena) ────────── */
.pk-milestone-cesta.je-odhalena .pk-kolaj-vypln {
  animation: drawMilestoneLaser 2.2s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}
.pk-milestone-cesta.je-odhalena .pk-kolaj-laser-head {
  animation: glideLaserHead 2.2s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

/* Milestone 1 (T = 0.1s) */
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="1"] .pk-mstone-sfera {
  animation: popMilestoneSphere 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="1"] .pk-mstone-sonar {
  animation: sonarRipplePulse 0.9s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="1"] .pk-mstone-telo {
  animation: unfoldMilestoneCard 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Milestone 2 (T = 0.7s) */
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="2"] .pk-mstone-sfera {
  animation: popMilestoneSphere 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="2"] .pk-mstone-sonar {
  animation: sonarRipplePulse 0.9s cubic-bezier(0.1, 0.9, 0.2, 1) 0.8s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="2"] .pk-mstone-telo {
  animation: unfoldMilestoneCard 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* Milestone 3 (T = 1.3s) */
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="3"] .pk-mstone-sfera {
  animation: popMilestoneSphere 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="3"] .pk-mstone-sonar {
  animation: sonarRipplePulse 0.9s cubic-bezier(0.1, 0.9, 0.2, 1) 1.4s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="3"] .pk-mstone-telo {
  animation: unfoldMilestoneCard 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

/* Milestone 4 (T = 1.85s) */
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="4"] .pk-mstone-sfera {
  animation: popMilestoneSphere 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="4"] .pk-mstone-sonar {
  animation: sonarRipplePulse 0.9s cubic-bezier(0.1, 0.9, 0.2, 1) 1.95s forwards;
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta[data-mstone="4"] .pk-mstone-telo {
  animation: unfoldMilestoneCard 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.95s forwards;
}

/* Interaktívny hover po dokončení animácie */
.pk-milestone-cesta.je-odhalena .pk-mstone-karta:hover .pk-mstone-sfera {
  transform: scale(1.14) translateY(-4px) !important;
  box-shadow: 0 18px 36px -4px var(--mstone-glow, #0E9BB8);
}
.pk-milestone-cesta.je-odhalena .pk-mstone-karta:hover .pk-mstone-telo {
  transform: translateY(-4px) !important;
  border-color: rgba(14, 155, 184, 0.35);
}

@keyframes drawMilestoneLaser {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes glideLaserHead {
  0% { left: 0%; opacity: 0; }
  4% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes popMilestoneSphere {
  0% {
    transform: scale(0.2);
    opacity: 0;
    filter: brightness(1.6);
  }
  60% {
    transform: scale(1.22);
    opacity: 1;
    filter: brightness(1.3);
  }
  85% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes sonarRipplePulse {
  0% {
    transform: scale(0.7);
    opacity: 0.95;
    border-width: 3px;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes unfoldMilestoneCard {
  0% {
    transform: translateY(34px) scale(0.96);
    opacity: 0;
  }
  100% {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-kolaj-vypln { width: 100% !important; animation: none !important; }
  .pk-kolaj-laser-head { display: none !important; }
  .pk-mstone-sfera, .pk-mstone-telo { transform: none !important; opacity: 1 !important; animation: none !important; }
  .pk-mstone-sonar { display: none !important; }
}
.pk-mstone-cas {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--br-tlmene);
  margin-bottom: 8px;
  display: block;
}
.pk-mstone-titul {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  color: var(--br-atrament);
}
.pk-mstone-perex {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--br-tlmene);
  margin: 0 0 16px;
  flex: 1;
}
.pk-mstone-tagy {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pk-mstone-tagy span {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(51, 65, 92, 0.06);
  color: var(--br-atrament);
}

@media (max-width: 980px) {
  .pk-syn-spojka, .pk-synapse-track, .pk-milestone-kolaj { display: none; }
  .pk-synapse-mriezka, .pk-milestone-mriezka { grid-template-columns: repeat(2, 1fr); }
  .pk-stage-split { grid-template-columns: 1fr; }
  .pk-stage-ram { min-height: 300px; }
}
@media (max-width: 600px) {
  .pk-synapse-mriezka, .pk-milestone-mriezka { grid-template-columns: 1fr; }
}

/* ── 5. Zjednotený Cenník a Konverzia ───────────────────────────────────── */
#cennik {
  position: relative;
  background: var(--br-papier) !important;
  padding: clamp(70px, 9vw, 120px) var(--br-okraj);
}
.cn-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}
.cn-hlava {
  max-width: 68ch;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.cn-hlavna-karta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 48px);
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F8FF 100%);
  border: 2px solid rgba(62, 93, 174, 0.18);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 20px 50px -20px rgba(51, 65, 92, 0.12);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.cn-badge-top {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  margin-bottom: 12px;
}
.cn-balik-nazov {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--br-atrament);
  line-height: 1.15;
}
.cn-benefity {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cn-benefity li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(14px, 1.15vw, 16px);
}
.cn-benefity li::before {
  content: "✓";
  font-weight: 800;
  color: var(--br-akcent-text);
  flex-shrink: 0;
}
.cn-benefity b {
  color: var(--br-atrament);
}
.cn-benefity span {
  color: var(--br-tlmene);
  font-size: 0.9em;
  display: block;
}
.cn-cena-panel {
  background: rgba(240, 245, 252, 0.65);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(51, 65, 92, 0.08);
}
.cn-cena-hodnota {
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--br-atrament);
}
.cn-cena-trvanie {
  font-size: 14px;
  color: var(--br-tlmene);
  margin: 6px 0 20px;
}
.cn-btn-objednat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--br-atrament);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.25s ease, background-color 0.2s ease;
  box-shadow: 0 10px 24px -10px rgba(23, 39, 89, 0.4);
}
.cn-btn-objednat:hover {
  transform: translateY(-2px);
  background: #102042;
}
.cn-cena-tel {
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--br-akcent-text);
}

/* Ďalšie terapie tabuľka */
.cn-ostatne-nadpis {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--br-atrament);
}
.cn-riadky {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(51, 65, 92, 0.08);
  padding: 8px clamp(16px, 3vw, 32px);
}
.cn-riadok {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(51, 65, 92, 0.08);
}
.cn-riadok:last-child {
  border-bottom: none;
}
.cn-sluzba-nazov {
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  font-weight: 700;
  color: var(--br-atrament);
}
.cn-sluzba-detail {
  display: block;
  font-size: 13px;
  color: var(--br-tlmene);
  margin-top: 2px;
}
.cn-bodky {
  flex: 1;
  border-bottom: 2px dotted rgba(51, 65, 92, 0.18);
  transform: translateY(-4px);
  min-width: 20px;
}
.cn-riadok-cena {
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 800;
  color: var(--br-atrament);
  white-space: nowrap;
}

/* ── Responzivita ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sl-bento-karta--hlavna,
  .sl-bento-karta--sekundarna {
    grid-column: span 12;
  }
  .sl-bento-karta:not(.sl-bento-karta--hlavna):not(.sl-bento-karta--sekundarna) {
    grid-column: span 6;
  }
  .pk-pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .dk-mriezka {
    grid-template-columns: 1fr;
  }
  .dk-metoda-karta {
    grid-template-columns: 1fr;
  }
  .cn-hlavna-karta {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .sl-bento-karta:not(.sl-bento-karta--hlavna):not(.sl-bento-karta--sekundarna) {
    grid-column: span 12;
  }
  .pk-pipeline {
    grid-template-columns: 1fr;
  }
  .mrd-scena {
    grid-template-columns: 1fr;
  }
  .mrd-pill {
    padding: 12px 14px;
  }
  .pk-stage-split {
    grid-template-columns: 1fr !important;
  }
  .mrd-v2-mriezka {
    grid-template-columns: 1fr !important;
  }
  .mrd-v3-kanaly {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .br-variant-prepinač {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 8px;
  }
}

/* ── Živé prepínače variantov na fronte ───────────────────────────────────── */
.br-variant-prepinac,
.br-variant-prepinač {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(51, 65, 92, 0.12);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: 0 8px 24px -8px rgba(51, 65, 92, 0.1);
}
.br-prepinač-stitok {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--br-tlmene);
  padding: 0 8px 0 10px;
}
.br-prep-tlacitko,
.br-var-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--br-tlmene);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.br-prep-tlacitko:hover,
.br-var-btn:hover {
  color: var(--br-atrament);
  background: rgba(51, 65, 92, 0.06);
}
.br-prep-tlacitko.je-aktivne,
.br-var-btn.je-aktivny {
  background: var(--br-atrament);
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(23, 39, 89, 0.22);
}
.br-prep-bodka,
.br-var-bodka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--br-akcent-text);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.br-prep-tlacitko.je-aktivne .br-prep-bodka,
.br-var-btn.je-aktivny .br-var-bodka {
  background: #5CE1E6;
  box-shadow: 0 0 8px #5CE1E6;
  transform: scale(1.3);
}
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.br-prep-tlacitko.je-aktivne .br-prep-bodka {
  background: #0E9BB8;
  transform: scale(1.25);
}

/* Prepínanie v sekcii Proces */
[data-proces-aktivny="a"] .pk-stage-split {
  display: none !important;
}
[data-proces-aktivny="b"] .pk-pipeline {
  display: none !important;
}

/* Štýly pre Možnosť B v sekcii Proces: Interaktívny Cinematic Stage */
.pk-stage-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}
.pk-stage-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pk-stage-polozka {
  background: #FFFFFF;
  border: 1px solid rgba(51, 65, 92, 0.08);
  border-radius: 20px;
  padding: clamp(16px, 2.2vw, 24px);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px -6px rgba(51, 65, 92, 0.04);
}
.pk-stage-polozka:hover {
  border-color: rgba(62, 93, 174, 0.3);
  transform: translateX(4px);
}
.pk-stage-polozka.je-aktivna {
  background: #FFFFFF;
  border-color: var(--br-akcent-text);
  box-shadow: 0 12px 32px -10px rgba(51, 65, 92, 0.12), 0 0 0 1px var(--br-akcent-text);
  transform: translateX(6px);
}
.pk-stage-hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pk-stage-cislo-titul {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pk-stage-cislo {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--br-akcent-text);
  line-height: 1;
}
.pk-stage-nazov {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  color: var(--br-atrament);
}
.pk-stage-odznak {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(143, 160, 216, 0.15);
  color: var(--br-atrament);
}
.pk-stage-perex {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--br-tlmene);
}
.pk-stage-detaily {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(51, 65, 92, 0.08);
  font-size: 13px;
  color: var(--br-atrament);
}
.pk-stage-polozka.je-aktivna .pk-stage-detaily {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pk-stage-bod {
  display: flex;
  flex-direction: column;
}
.pk-stage-bod-stitok {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--br-akcent-text);
  margin-bottom: 2px;
}
.pk-stage-bod-hodnota {
  font-weight: 500;
  color: var(--br-atrament);
  line-height: 1.4;
}

/* Pravý panel scény v Možnosti B */
.pk-stage-viewport {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid rgba(51, 65, 92, 0.09);
  padding: clamp(20px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px -16px rgba(51, 65, 92, 0.08);
  min-height: 420px;
}
.pk-stage-foto-ram {
  position: relative;
  width: 100%;
  height: clamp(240px, 26vw, 330px);
  border-radius: 18px;
  overflow: hidden;
  background: #E8EEF4;
}
.pk-stage-foto-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.pk-stage-foto-item.je-aktivna {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.pk-stage-foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pk-stage-ovladace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(51, 65, 92, 0.08);
}
.pk-stage-stav-kroku {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--br-akcent-text);
  letter-spacing: 0.04em;
}
.pk-stage-nav-sipky {
  display: flex;
  gap: 8px;
}
.pk-stage-sipka {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(51, 65, 92, 0.15);
  background: #FFFFFF;
  color: var(--br-atrament);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}
.pk-stage-sipka:hover {
  background: var(--br-atrament);
  color: #FFFFFF;
}

/* ── Prepínanie v sekcii TCM: Variant 1, 2, 3 ───────────────────────────── */


/* ── Awwwards Levitujúca vlnová vrstva: Plávajúci objekt bez pozadia a bez orezu od kraja do kraja (z-index 25) ── */
.br-separe-vrstva {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(180px, 20vw, 320px);
  margin-top: clamp(-90px, -10vw, -160px);
  margin-bottom: clamp(-90px, -10vw, -160px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 25; /* Separe vrstva plávajúca nad oboma sekciami */
  pointer-events: none;
  overflow: hidden;
}
.br-separe-levitacia {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
  animation: waveLevitatePhysics 7s ease-in-out infinite alternate;
}
@keyframes waveLevitatePhysics {
  0% {
    transform: translateY(-8px) rotate(0deg);
  }
  50% {
    transform: translateY(8px) rotate(0.3deg);
  }
  100% {
    transform: translateY(-8px) rotate(-0.3deg);
  }
}
.br-separe-stuha {
  width: 100vw;
  min-width: 100vw;
  max-width: none;
  height: 100%;
  object-fit: fill; /* Panoramatická stuha ide od jedného kraja po druhý bez orezu hore/dole */
  opacity: 0.96;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 20px 45px rgba(14, 155, 184, 0.18)) drop-shadow(0 8px 18px rgba(124, 58, 237, 0.12));
  will-change: transform;
  transition: transform 0.08s ease-out;
}

/* ── Tradičná čínska medicína: Autentický Washi papier s hlbokým alfa rozptylom ── */
.mrd--washi {
  position: relative;
  background: var(--br-papier) !important;
  overflow: hidden;
}
.mrd--washi::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  background: url('foto/tcm-papier-pozadie.webp') center center / cover no-repeat;
  /* Hlboký plynulý prechod do stratena zhora aj zdola do identického plátna var(--br-papier) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 5%,
    rgba(0, 0, 0, 0.25) 12%,
    rgba(0, 0, 0, 0.7) 22%,
    #000 35%,
    #000 65%,
    rgba(0, 0, 0, 0.7) 78%,
    rgba(0, 0, 0, 0.25) 88%,
    rgba(0, 0, 0, 0.05) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 5%,
    rgba(0, 0, 0, 0.25) 12%,
    rgba(0, 0, 0, 0.7) 22%,
    #000 35%,
    #000 65%,
    rgba(0, 0, 0, 0.7) 78%,
    rgba(0, 0, 0, 0.25) 88%,
    rgba(0, 0, 0, 0.05) 95%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
.mrd--washi .mrd-obal {
  position: relative;
  z-index: 1;
}

/* Silueta tela: Delikátny sklenený pedestál s jemným rámikom a žiarivou aurou */
.mrd--washi .mrd-figura {
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.55) 65%, rgba(255, 255, 255, 0.3) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 28px !important;
  box-shadow:
    0 24px 56px -16px rgba(14, 155, 184, 0.18),
    0 4px 14px rgba(51, 65, 92, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
  padding: 18px !important;
  overflow: hidden !important;
}
.mrd--washi .mrd-figura::before {
  content: "";
  position: absolute;
  inset: 10% 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 155, 184, 0.26) 0%, rgba(124, 58, 237, 0.14) 50%, transparent 70%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}
.mrd--washi .mrd-platno,
.mrd--washi .mrd-telo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  mix-blend-mode: multiply;
  filter: contrast(1.08) brightness(0.96) drop-shadow(0 16px 32px rgba(14, 155, 184, 0.22));
}

/* ── Finálny Štýl 1: Glassmorphic Ambient v sekcii Služby (#metody) ──────── */
.sl-bento-karta {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 92, 0.09);
  border-radius: 22px;
  box-shadow: 0 12px 32px -16px rgba(51, 65, 92, 0.06);
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.sl-bento-obrazok {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.5) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.5) 92%, transparent 100%);
}
.sl-bento-karta:hover {
  transform: translateY(-5px);
}
.sl-bento-karta[data-aura="cyan"]:hover {
  border-color: rgba(14, 155, 184, 0.45);
  box-shadow: 0 20px 48px -12px rgba(14, 155, 184, 0.25);
}
.sl-bento-karta[data-aura="violet"]:hover {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 20px 48px -12px rgba(124, 58, 237, 0.25);
}
.sl-bento-karta[data-aura="emerald"]:hover {
  border-color: rgba(5, 150, 105, 0.45);
  box-shadow: 0 20px 48px -12px rgba(5, 150, 105, 0.25);
}
.sl-bento-karta[data-aura="sky"]:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 20px 48px -12px rgba(37, 99, 235, 0.25);
}
.sl-bento-karta[data-aura="gold"]:hover {
  border-color: rgba(202, 138, 4, 0.45);
  box-shadow: 0 20px 48px -12px rgba(202, 138, 4, 0.25);
}
.sl-bento-karta[data-aura="copper"]:hover {
  border-color: rgba(217, 119, 6, 0.45);
  box-shadow: 0 20px 48px -12px rgba(217, 119, 6, 0.25);
}