/* ==========================================================================
   BioRelax — vrstva „živá energia" (1. 9. 2026)
   --------------------------------------------------------------------------
   Dopisuje CSS k markupu, ktorý ostal bez štýlu (dk--glass, dk-hallmark-grid,
   br-ambient-stage), a pridáva ambientnú energiu v pozadí stránky.

   Načítava sa AŽ ZA assets/cinematic.css, takže prebíja bez !important
   všade, kde stačí poradie.

   VÝKON — prečo je to postavené takto:
     · Vrstva energie je position: fixed. Nehýbe sa pri scrolli vôbec
       (žiadny repaint), stránka len prechádza ponad ňu.
     · Animuje sa iba transform a opacity, nikdy filter ani pozadie.
     · Sklo (backdrop-filter) beží LEN na jemnom kurzore a od 861 px.
       Na dotyku ho nahrádza polopriehľadné biele pozadie bez rozmazania —
       na svetlej hmle je rozdiel takmer neviditeľný, ale mobil neplatí
       za prekresľovanie rozmazaného pozadia v každom snímku.
     · prefers-reduced-motion zastaví pohyb, vrstva ostane statická.
   ========================================================================== */

/* ── ambientná energia v pozadí ─────────────────────────────────────────── */

.br-ambient-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* vlastný stacking context — nič v ňom nevyvolá prekreslenie stránky */
  isolation: isolate;
  contain: strict;
}

.br-ambient-wave-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1700px, 150vw);
  aspect-ratio: 16 / 9;
  translate: -50% -50%;
  will-change: transform;
  animation: br-ambient-dych 46s ease-in-out infinite;
}

.br-ambient-wave-img,
.br-ambient-wave-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .5;
  /* Žiadna CSS maska — stuha má vlastný alfa kanál (81 % plochy je
     priehľadných). Maskovanie by bola práca navyše pre kompozitor
     v každom snímku; namerané: s maskou 41 fps, bez nej 59 fps
     na mobile pri 4× spomalenom CPU. */
  animation: br-ambient-tok 120s linear infinite;
  will-change: transform;
}
/* Video loop nesie pohyb sám — nerotuje sa. */
.br-ambient-wave-video {
  animation: none;
  will-change: auto;
  object-fit: cover;
}
/* Kým video nebeží (mobil, dátový režim, reduced motion), drží scénu
   statický obrázok. Video ho po spustení prekryje. */
.br-ambient-stage[data-video] .br-ambient-wave-img { display: none; }

/* obsah stránky musí ležať nad vrstvou */
#br-koren > *, .sc-host > * { position: relative; z-index: 1; }

/* Hero je v DOM PRED scénou a obe ležia v tom istom stacking contexte
   (obal data-dc-tpl=6 má z-index 1), takže sa kreslili v poradí dokumentu
   a stuha išla CEZ video. Hero potrebuje vlastný z-index nad scénou. */
#top.hx { z-index: 1; }

/* Mobil: vrstva ostáva, ale stojí — rotujúci veľký obrázok je na slabom
   telefóne zbytočná práca pre GPU a pri malej ploche ho aj tak nevidno. */
@media (max-width: 860px), (pointer: coarse) {
  /* will-change na statickom prvku drží vrstvu v pamäti bez úžitku */
  .br-ambient-wave-holder { animation: none; width: 190vw; will-change: auto; }
  .br-ambient-wave-img, .br-ambient-wave-video { animation: none; opacity: .38; will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .br-ambient-wave-holder, .br-ambient-wave-img { animation: none !important; }
}

/* ── sklo ───────────────────────────────────────────────────────────────── */
/* Jeden token pre všetky sklenené povrchy — mení sa na jednom mieste. */

:root {
  --sklo-plocha: rgba(255, 255, 255, .58);
  --sklo-ram: rgba(255, 255, 255, .85);
  --sklo-tien: 0 26px 60px -40px rgba(51, 65, 92, .42);
}

.br-sklo {
  background: var(--sklo-plocha);
  box-shadow: var(--sklo-tien), inset 0 0 0 1px var(--sklo-ram);
}
@media (min-width: 861px) and (pointer: fine) {
  .br-sklo {
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter: blur(16px) saturate(1.35);
    background: rgba(255, 255, 255, .46);
  }
}
/* Na dotyku plnšie biele pozadie namiesto rozmazania — bez neho by cez
   kartu presvital pohyblivý podklad a text by stratil kontrast. */
@media (max-width: 860px), (pointer: coarse) {
  .br-sklo { background: rgba(255, 255, 255, .82); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PREČO NÁM VERIŤ — hallmark layout
   Vľavo téza a overiteľné body, vpravo bento štyroch faktov. Sekcia stojí
   na sklenených kartách, pod ktorými prechádza ambientná energia.
   ══════════════════════════════════════════════════════════════════════════ */

.dk--glass {
  position: relative;
  padding: clamp(80px, 11vw, 170px) var(--br-okraj);
  background: transparent;          /* pod sekciou svieti ambient vrstva */
  overflow: clip;
}
.dk--glass .dk-obal {
  max-width: var(--br-os);
  margin-inline: auto;
}

.dk-hallmark-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 5vw, 92px);
  align-items: start;
}

/* ── ľavý stĺpec ──────────────────────────────────────────────────────── */

.dk-kicker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dk-kicker-row .br-kicker { margin: 0; }

.dk-pill-prax {
  font: 600 11px/1 "Switzer", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(62, 93, 174, .09);
  box-shadow: inset 0 0 0 1px rgba(62, 93, 174, .18);
  white-space: nowrap;
}

.dk--glass .dk-nadpis {
  margin: 0;
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--br-atrament);
  text-wrap: balance;
}
.dk--glass .dk-nadpis em,
.dk--glass .dk-nadpis i {
  font-style: italic;
  font-weight: 400;
  color: var(--br-akcent-text);
}

.dk-uvod {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.68;
  color: var(--br-tlmene);
  text-wrap: pretty;
}

/* overiteľné body — hairline zoznam, žiadne rámiky */
.dk-overenie-box {
  display: grid;
  gap: 0;
  margin: clamp(24px, 3vw, 36px) 0 0;
}
.dk-overenie-odrazka {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  padding: 16px 0;
  border-top: 1px solid var(--br-linka);
}
.dk-overenie-odrazka:last-child { border-bottom: 1px solid var(--br-linka); }

.dk-overenie-ikona {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--br-grad-cta);
  color: #1F2B47;
  font-size: 12px;
  line-height: 1;
  translate: 0 1px;
}
.dk-overenie-odrazka strong,
.dk-overenie-odrazka b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--br-atrament);
}
.dk-overenie-odrazka p,
.dk-overenie-odrazka span:not(.dk-overenie-ikona) {
  margin: 0;
  grid-column: 2;
  font-size: 14px;
  line-height: 1.6;
  color: var(--br-tlmene);
}

.dk-cta-row {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 38px);
}
.dk-btn-primarny {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--br-grad-cta);
  color: #1F2B47;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 18px 40px -18px rgba(62, 93, 174, .55);
  transition: transform .3s var(--br-ease), box-shadow .3s var(--br-ease);
}
@media (hover: hover) {
  .dk-btn-primarny:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -18px rgba(62, 93, 174, .65);
  }
}
.dk-metoda-pozn {
  font-size: 13px;
  line-height: 1.5;
  color: var(--br-tlmene);
  max-width: 26ch;
}

/* ── pravý stĺpec: bento faktov ───────────────────────────────────────── */

.dk-bento-fakty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.dk-fakt-karta {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: calc(var(--br-r) + 4px);
  /* sklo — deklarované cez rovnaké hodnoty ako .br-sklo */
  background: var(--sklo-plocha);
  box-shadow: var(--sklo-tien), inset 0 0 0 1px var(--sklo-ram);
  transition: transform .45s var(--br-ease), box-shadow .45s var(--br-ease);
}
@media (min-width: 861px) and (pointer: fine) {
  .dk-fakt-karta {
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter: blur(16px) saturate(1.35);
    background: rgba(255, 255, 255, .46);
  }
  .dk-fakt-karta:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 70px -40px rgba(51, 65, 92, .5), inset 0 0 0 1px rgba(255, 255, 255, .95);
  }
}
@media (max-width: 860px), (pointer: coarse) {
  .dk-fakt-karta { background: rgba(255, 255, 255, .82); }
}

/* prvá karta cez celú šírku — nesie hlavné číslo */
.dk-fakt-karta--prax { grid-column: 1 / -1; }

.dk-fakt-hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dk-fakt-cislo {
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--br-akcent-text);
  font-variant-numeric: tabular-nums;
}
.dk-fakt-karta--prax .dk-fakt-cislo { font-size: clamp(52px, 6vw, 88px); }

.dk-fakt-badge {
  font: 600 10px/1 "Switzer", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--br-akcent-text);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(62, 93, 174, .08);
  white-space: nowrap;
}
.dk-fakt-titul {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--br-atrament);
  text-wrap: balance;
}
.dk-fakt-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--br-tlmene);
  text-wrap: pretty;
}
.dk-fakt-nohy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--br-linka);
  font: 600 10.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--br-tlmene);
}
.dk-fakt-nohy > * { white-space: nowrap; }

@media (max-width: 1080px) {
  .dk-hallmark-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 560px) {
  .dk-bento-fakty { grid-template-columns: minmax(0, 1fr); }
  .dk-fakt-karta--prax { grid-column: auto; }
}

/* ── ostatné sekcie na sklo ─────────────────────────────────────────────── */
/* Ambient vrstva má zmysel len vtedy, keď cez sekcie presvitá. Sekcie,
   ktoré mali nepriehľadné pozadie, ho púšťajú ďalej. */

.sl, .pk, .mrd, #cennik, .po {
  background: transparent;
}
.sl-bento-karta, .pk-krok, .po-karta, .mrd-riadok > label {
  background: var(--sklo-plocha);
  box-shadow: var(--sklo-tien), inset 0 0 0 1px var(--sklo-ram);
}
@media (min-width: 861px) and (pointer: fine) {
  .sl-bento-karta, .pk-krok, .po-karta {
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    background: rgba(255, 255, 255, .5);
  }
}
@media (max-width: 860px), (pointer: coarse) {
  .sl-bento-karta, .pk-krok, .po-karta, .mrd-riadok > label {
    background: rgba(255, 255, 255, .84);
  }
}

/* ── dotykové ciele v kartách služieb ───────────────────────────────────── */
/* Nadpis karty aj odkaz „Viac o…" boli 17–21 px vysoké — pod normou 24 px
   (WCAG 2.5.8) a na prst príliš tesné. Zväčšené odsadením, nie fontom. */
@media (pointer: coarse) {
  /* .sl-bento-karta a je špecifickejšie než .sl-bento-odkaz — preto sa
     odkaz adresuje rovnako hlboko, inak by ho prebil menší padding. */
  /* nadpis karty je odkaz — 21 px textu potrebuje 12 px zhora aj
     zdola, aby cieľ dosiahol 44 px (Apple HIG / náš harness) */
  .sl-bento-karta a { padding-block: 12px; }
  .sl-bento-karta a.sl-bento-odkaz {
    padding-block: 13px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── ambientná energia: WebGL plátno ────────────────────────────────────── */
/* Plátno kreslí v polovičnom rozlíšení, CSS ho roztiahne na celú scénu. */
.br-energia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* Keď shader beží, statická stuha aj video sú zbytočné. */
.br-ambient-stage[data-energia] .br-ambient-wave-img,
.br-ambient-stage[data-energia] .br-ambient-wave-video { display: none; }
/* Držiak nesmie stuhu orezávať ani posúvať — plátno kreslí cez celú scénu. */
.br-ambient-stage[data-energia] .br-ambient-wave-holder {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  translate: none;
  animation: none;
}

/* Cenník na mobile: názov služby mal 129 px a dlhé názvy sa lámali do
   troch riadkov vedľa ceny. Na úzkom displeji ide cena pod názov. */
/* .cn-riadok je flex, nie grid — názov služby sa lámal do úzkeho stĺpca
   vedľa ceny. Na mobile ide cena pod názov. */
@media (max-width: 480px) {
  .cn-riadok { flex-direction: column; align-items: flex-start; row-gap: 6px; }
  .cn-riadok > * { width: 100%; }
  .cn-sluzba-nazov { max-width: none; }
}

/* ==========================================================================
   ENERGIA MUSÍ PRESVITAŤ (Marek 1. 9.: „je pod nimi, lebo majú background")
   Každá sekcia dostala `background: var(--br-papier) !important`, takže
   stuha za nimi nebola vidieť vôbec. Podklad drží telo stránky; sekcie
   sú priehľadné a hĺbku robia sklenené karty nad stuhou.
   ========================================================================== */
body, #br-koren {
  background: linear-gradient(180deg, var(--br-papier), var(--br-papier2));
}
#dokaz, #metody, #meridiany, #proces, #cennik, #ponuka,
.sl, .pk, .mrd, .po, .lg, .dk {
  background: transparent !important;
}
/* výnimka: washi papier v čínskej medicíne je vlastný obraz sekcie */
.mrd--washi::before { opacity: .55; }

/* ── divider medzi 1. a 2. sekciou — preč ───────────────────────────────── */
/* Marek: „ten divider deliaci 1 a 2 sekciu si mal odstrániť."
   Prechod robí samotná zmena podkladu, nie pás. */
.br-separe-vrstva { display: none !important; }

/* ==========================================================================
   AUDIT 3. 9. 2026 — opravy po kritickom prechode 1920 / 1440 / 390
   ========================================================================== */

/* FAQ chvost: export bol tmavý, texty ostali biele (rgba 255) na svetlom
   papieri — „Nenašli ste odpoveď?" a telefón boli neviditeľné. */
#faq div[style*="border-top"] > span[style] { color: var(--br-tlmene) !important; }
#faq a[href^="tel:"] {
  color: var(--br-atrament) !important;
  background: var(--br-plocha) !important;
  box-shadow: inset 0 0 0 1px var(--br-linka);
}
#faq a[href^="tel:"]:hover { background: var(--br-grad-cta) !important; color: #1F2B47 !important; }

/* FAQ čísla 01–06: boli obrysové (text-stroke) na tmavom; na svetlom ostal
   priehľadný text so slabým obrysom — nečitateľné. Plné, tlmené. */
#faq [data-otazka] span[style*="text-stroke"] {
  color: var(--br-tlmene) !important;
  -webkit-text-stroke: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: .75;
}

/* Medzi FAQ a objednávkou bolo 220 px prázdna (120 + 100). FAQ si nesie
   svoj spodok, objednávka len krátky nádych. */
#kontakt { padding-top: clamp(20px, 3.5vw, 48px) !important; }

/* Select služby na mobile presahoval a text sa sekal na „L.I.F." */
#br-sluzba { width: 100%; max-width: 100%; min-width: 0; padding-right: 28px; }

/* ── mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Hlavička: menu (stred lišty) je skryté, takže burger padol do stredu.
     A CTA „Objednať sa" na mobile chýbalo — najdôležitejšia akcia stránky. */
  [data-hlavicka] { grid-template-columns: 1fr auto auto !important; gap: 10px !important; }
  /* CTA na mobile: viazané na pozíciu, nie na href — cieľ sa zmenil na
     kontakt.html a tlačidlo z hlavičky zmizlo. */
  [data-hlavicka] > a.only-desktop:last-of-type {
    display: inline-flex !important;
    align-items: center;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
  }

  /* Hero: H1 ležal presne cez tvár ženy. Blok obsahu je zdola zarovnaný,
     takže sa dá posunúť nižšie len tým, že bude nižší: CTA do radu (telefón
     ako ikona-kruh, meno odkazu ostáva pre čítačky) a fakty do jedného
     riadka. Ušetrí ~120 px — H1 sa dostane pod tvár. */
  .hx-cta { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 10px !important; }
  .hx-cta > a[href^="tel:"] {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    color: transparent !important;
    background: var(--br-plocha) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8.1 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2z'/></svg>") center / 22px no-repeat !important;
    box-shadow: inset 0 0 0 1px var(--br-linka);
  }
  .hx-fakty {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    margin-top: 22px !important;
  }
  .hx-fakty span { font-size: 11.5px; line-height: 1.3; }
  /* závoj zdola silnejší — text leží na tele, nie na stene ako na desktope */
  .hx-scrim {
    background:
      linear-gradient(to top, rgba(245, 248, 255, .97) 0%, rgba(245, 248, 255, .9) 34%, rgba(245, 248, 255, .45) 62%, rgba(245, 248, 255, 0) 86%) !important;
  }

  /* päta: obrí nápis mal 64 px a orez zdola z neho robil pahýľ; nech
     vyplní šírku, bleed ostáva */
  footer > div[aria-hidden="true"] { font-size: 23vw !important; }
}

/* Čísla polí objednávky (01–04): tá istá obrysová chyba ako vo FAQ. */
#kontakt .cno {
  color: var(--br-tlmene) !important;
  -webkit-text-stroke: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: .75;
}

/* ==========================================================================
   KANDIDÁTI POZADIA (pozadia.js) — 3. 9. 2026
   ========================================================================== */

/* A · Ranné svetlo — P0 z kontraktu (aqua .18 / lila .16), ktoré dýcha,
   a jeden šikmý stĺpec svetla. Animuje sa len transform a opacity.
   17. 9. 2026 (Marek: „na starom notebooku pri scrole z úvodu do prvej sekcie seká"):
   rozmazanie sa NErasterizuje raz — filter: blur sa skladá znova v každom snímku,
   v ktorom sa nad ním niečo hýbe. Na slabej grafike (vykon_opona.mjs, režim bez GPU)
   stála táto vrstva prechod 9 → 24 fps. Hmla preto nemá filter: jej rozmazaný
   tvar je spočítaný do zastávok gradientu (_zdroj/_skripty/hmla_gradient.py), gradient
   leží na ::before, lebo rozmazanie siahalo za okraj kruhu. Rozdiel oproti blur(70px)
   je do 3 úrovní z 255 (ambient_porovnanie.mjs, päť veľkostí okna, tri časy animácie). */
.br-ambient-stage[data-pozadie="a"] .br-hmla {
  position: absolute;
  width: 62vmax; height: 62vmax;
  will-change: transform;
  animation: br-hmla-plav 96s ease-in-out infinite;
}
.br-ambient-stage[data-pozadie="a"] .br-hmla::before {
  content: "";
  position: absolute;
  inset: -25%;
}
.br-ambient-stage[data-pozadie="a"] .br-hmla--a { top: -22vmax; left: -14vmax; }
.br-ambient-stage[data-pozadie="a"] .br-hmla--b { bottom: -26vmax; right: -12vmax; animation-delay: -48s; }
.br-ambient-stage[data-pozadie="a"] .br-hmla--a::before {
  background: radial-gradient(circle closest-side,
    rgba(133, 254, 255, .1421) 0%,
    rgba(133, 254, 255, .1410) 3.6%,
    rgba(133, 254, 255, .1376) 7.3%,
    rgba(133, 254, 255, .1318) 11.3%,
    rgba(133, 254, 255, .1233) 15.7%,
    rgba(133, 254, 255, .1006) 25.2%,
    rgba(133, 254, 255, .0347) 49.8%,
    rgba(133, 254, 255, .0212) 55.9%,
    rgba(133, 254, 255, .0120) 61.3%,
    rgba(133, 254, 255, .0053) 67.4%,
    rgba(133, 254, 255, .0016) 74.4%,
    rgba(133, 254, 255, .0002) 82.6%,
    rgba(133, 254, 255, .0000) 99.9%);
}
.br-ambient-stage[data-pozadie="a"] .br-hmla--b::before {
  background: radial-gradient(circle closest-side,
    rgba(158, 130, 255, .1263) 0%,
    rgba(158, 130, 255, .1253) 3.6%,
    rgba(158, 130, 255, .1223) 7.3%,
    rgba(158, 130, 255, .1172) 11.3%,
    rgba(158, 130, 255, .1096) 15.7%,
    rgba(158, 130, 255, .0894) 25.2%,
    rgba(158, 130, 255, .0309) 49.8%,
    rgba(158, 130, 255, .0188) 55.9%,
    rgba(158, 130, 255, .0107) 61.3%,
    rgba(158, 130, 255, .0047) 67.4%,
    rgba(158, 130, 255, .0014) 74.4%,
    rgba(158, 130, 255, .0002) 82.6%,
    rgba(158, 130, 255, .0000) 99.9%);
}
@media (max-width: 1179.98px) and (max-height: 1179.98px) {
  .br-ambient-stage[data-pozadie="a"] .br-hmla--a::before {
    background: radial-gradient(circle closest-side,
      rgba(133, 254, 255, .1194) 0%,
      rgba(133, 254, 255, .1184) 4.3%,
      rgba(133, 254, 255, .1155) 8.6%,
      rgba(133, 254, 255, .1106) 13%,
      rgba(133, 254, 255, .1037) 17.6%,
      rgba(133, 254, 255, .0869) 26.4%,
      rgba(133, 254, 255, .0367) 49.3%,
      rgba(133, 254, 255, .0243) 56.2%,
      rgba(133, 254, 255, .0152) 62.7%,
      rgba(133, 254, 255, .0081) 70%,
      rgba(133, 254, 255, .0036) 77.8%,
      rgba(133, 254, 255, .0012) 86.7%,
      rgba(133, 254, 255, .0000) 99.9%);
  }
  .br-ambient-stage[data-pozadie="a"] .br-hmla--b::before {
    background: radial-gradient(circle closest-side,
      rgba(158, 130, 255, .1061) 0%,
      rgba(158, 130, 255, .1052) 4.3%,
      rgba(158, 130, 255, .1026) 8.6%,
      rgba(158, 130, 255, .0983) 13%,
      rgba(158, 130, 255, .0922) 17.6%,
      rgba(158, 130, 255, .0772) 26.4%,
      rgba(158, 130, 255, .0326) 49.3%,
      rgba(158, 130, 255, .0216) 56.2%,
      rgba(158, 130, 255, .0135) 62.7%,
      rgba(158, 130, 255, .0072) 70%,
      rgba(158, 130, 255, .0032) 77.8%,
      rgba(158, 130, 255, .0010) 86.7%,
      rgba(158, 130, 255, .0000) 99.9%);
  }
}
.br-ambient-stage[data-pozadie="a"] .br-svetlo {
  position: absolute;
  inset: -20%;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, .50) 47%,
    rgba(191, 228, 232, .30) 53%,
    rgba(204, 197, 240, .22) 60%,
    rgba(255, 255, 255, 0) 71%);
  filter: blur(36px);
  will-change: transform, opacity;
  animation: br-svetlo-dych 38s ease-in-out infinite;
}
/* Od 861 px je stĺpec svetla široký a blur(36px) mení pixely najviac o 3 úrovne —
   oko ho nevidí, grafika áno. */
@media (min-width: 861px) {
  .br-ambient-stage[data-pozadie="a"] .br-svetlo { filter: none; }
}
/* 19. 9. 2026 (Marek: „mám Samsung S20, HP pri scrole trocha seká, hlavne prvá sekcia"): na telefóne
   bol stĺpec svetla s blur(36px) jediný drahý efekt — pri DPR 3 sa v každom snímku rozmazávalo asi
   5 miliónov pixelov (vykon_mobil.mjs, režim bez GPU: 38 → 60 fps bez neho). Stĺpec je tu úzky
   a blur voči zastávkam veľký, preto sa rozmazanie nevypína, ale zapečie do gradientu
   (_zdroj/_skripty/svetlo_gradient.py, pásma telefón a tablet). Rozdiel oproti blur do 3 úrovní
   z 255 (ambient_porovnanie.mjs, 9 veľkostí od 360 × 780 po 860 × 1180). */
@media (max-width: 600px) {
  .br-ambient-stage[data-pozadie="a"] .br-svetlo {
    filter: none;
    background: linear-gradient(112deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 25%,
      rgba(255, 255, 255, 0.001) 26%,
      rgba(255, 255, 255, 0.002) 27%,
      rgba(255, 255, 255, 0.004) 28%,
      rgba(255, 255, 255, 0.006) 29%,
      rgba(255, 255, 255, 0.011) 30%,
      rgba(255, 255, 255, 0.018) 31%,
      rgba(255, 255, 255, 0.028) 32%,
      rgba(255, 255, 255, 0.041) 33%,
      rgba(255, 255, 255, 0.059) 34%,
      rgba(255, 255, 255, 0.08) 35%,
      rgba(255, 255, 255, 0.105) 36%,
      rgba(255, 255, 255, 0.134) 37%,
      rgba(255, 255, 255, 0.165) 38%,
      rgba(255, 255, 255, 0.198) 39%,
      rgba(254, 255, 255, 0.232) 40%,
      rgba(254, 255, 255, 0.265) 41%,
      rgba(253, 254, 254, 0.297) 42%,
      rgba(252, 254, 254, 0.327) 43%,
      rgba(251, 253, 254, 0.352) 44%,
      rgba(249, 252, 253, 0.372) 45%,
      rgba(247, 251, 252, 0.386) 46%,
      rgba(244, 250, 251, 0.393) 47%,
      rgba(240, 248, 250, 0.394) 48%,
      rgba(236, 246, 248, 0.388) 49%,
      rgba(231, 243, 246, 0.377) 50%,
      rgba(226, 240, 245, 0.362) 51%,
      rgba(220, 237, 243, 0.344) 52%,
      rgba(215, 233, 241, 0.326) 53%,
      rgba(211, 229, 240, 0.307) 54%,
      rgba(207, 225, 239, 0.289) 55%,
      rgba(204, 221, 238, 0.272) 56%,
      rgba(202, 217, 238, 0.256) 57%,
      rgba(201, 213, 237, 0.24) 58%,
      rgba(201, 210, 238, 0.224) 59%,
      rgba(201, 207, 238, 0.208) 60%,
      rgba(202, 205, 238, 0.191) 61%,
      rgba(202, 203, 239, 0.174) 62%,
      rgba(203, 201, 239, 0.156) 63%,
      rgba(203, 200, 239, 0.138) 64%,
      rgba(203, 199, 240, 0.12) 65%,
      rgba(204, 198, 240, 0.102) 66%,
      rgba(204, 198, 240, 0.085) 67%,
      rgba(204, 197, 240, 0.069) 68%,
      rgba(204, 197, 240, 0.054) 69%,
      rgba(204, 197, 240, 0.041) 70%,
      rgba(204, 197, 240, 0.03) 71%,
      rgba(204, 197, 240, 0.021) 72%,
      rgba(204, 197, 240, 0.014) 73%,
      rgba(204, 197, 240, 0.009) 74%,
      rgba(204, 197, 240, 0.006) 75%,
      rgba(204, 197, 240, 0.003) 76%,
      rgba(204, 197, 240, 0.002) 77%,
      rgba(204, 197, 240, 0.001) 78%,
      rgba(255, 255, 255, 0) 79%,
      rgba(255, 255, 255, 0) 100%);
  }
}
@media (min-width: 600.02px) and (max-width: 860px) {
  .br-ambient-stage[data-pozadie="a"] .br-svetlo {
    filter: none;
    background: linear-gradient(112deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 29%,
      rgba(255, 255, 255, 0.001) 30%,
      rgba(255, 255, 255, 0.003) 31%,
      rgba(255, 255, 255, 0.008) 32%,
      rgba(255, 255, 255, 0.017) 33%,
      rgba(255, 255, 255, 0.033) 34%,
      rgba(255, 255, 255, 0.055) 35%,
      rgba(255, 255, 255, 0.085) 36%,
      rgba(255, 255, 255, 0.118) 37%,
      rgba(255, 255, 255, 0.155) 38%,
      rgba(255, 255, 255, 0.192) 39%,
      rgba(255, 255, 255, 0.231) 40%,
      rgba(255, 255, 255, 0.269) 41%,
      rgba(255, 255, 255, 0.307) 42%,
      rgba(255, 255, 255, 0.344) 43%,
      rgba(254, 255, 255, 0.379) 44%,
      rgba(253, 254, 254, 0.409) 45%,
      rgba(252, 254, 254, 0.43) 46%,
      rgba(249, 252, 253, 0.439) 47%,
      rgba(244, 251, 251, 0.435) 48%,
      rgba(239, 248, 249, 0.42) 49%,
      rgba(231, 245, 246, 0.396) 50%,
      rgba(223, 241, 243, 0.369) 51%,
      rgba(214, 236, 240, 0.343) 52%,
      rgba(206, 231, 238, 0.319) 53%,
      rgba(201, 227, 236, 0.298) 54%,
      rgba(198, 222, 235, 0.282) 55%,
      rgba(197, 218, 235, 0.267) 56%,
      rgba(198, 213, 236, 0.254) 57%,
      rgba(199, 209, 237, 0.241) 58%,
      rgba(200, 205, 238, 0.228) 59%,
      rgba(202, 202, 239, 0.213) 60%,
      rgba(203, 200, 239, 0.196) 61%,
      rgba(203, 199, 240, 0.178) 62%,
      rgba(204, 198, 240, 0.159) 63%,
      rgba(204, 197, 240, 0.14) 64%,
      rgba(204, 197, 240, 0.12) 65%,
      rgba(204, 197, 240, 0.1) 66%,
      rgba(204, 197, 240, 0.081) 67%,
      rgba(204, 197, 240, 0.062) 68%,
      rgba(204, 197, 240, 0.044) 69%,
      rgba(204, 197, 240, 0.029) 70%,
      rgba(204, 197, 240, 0.017) 71%,
      rgba(204, 197, 240, 0.009) 72%,
      rgba(204, 197, 240, 0.004) 73%,
      rgba(204, 197, 240, 0.002) 74%,
      rgba(204, 197, 240, 0.001) 75%,
      rgba(255, 255, 255, 0) 76%,
      rgba(255, 255, 255, 0) 100%);
  }
}
@keyframes br-hmla-plav {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(5vmax, 3vmax, 0); }
}
@keyframes br-svetlo-dych {
  0%, 100% { transform: translate3d(-3%, 0, 0); opacity: .55; }
  50%      { transform: translate3d(3%, 1.5%, 0); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .br-ambient-stage[data-pozadie="a"] .br-hmla,
  .br-ambient-stage[data-pozadie="a"] .br-svetlo { animation: none; }
}

/* G · Úsvit (14. 9.) — tri pásy svitania (aqua → modrá → lila) sa pomaly vlnia
   šikmo cez okno. Sýta farba v úzkom tvare na svetle z A (široká bledá plocha by
   na papieri zošedla). Rozmazanie sa rasterizuje raz, animuje sa len transform. */
.br-ambient-stage[data-pozadie="a"] .br-usvit {
  position: absolute; top: -30vh; height: 160vh; width: 16vmax;
  border-radius: 50%;
  filter: blur(30px);
  will-change: transform, opacity;
  animation: br-usvit-vlna 44s ease-in-out infinite;
}
.br-ambient-stage[data-pozadie="a"] .br-usvit--1 {
  left: 6%;
  background: linear-gradient(180deg, transparent 8%, rgba(133, 254, 255, .78) 36%, rgba(89, 154, 255, .52) 62%, transparent 92%);
}
.br-ambient-stage[data-pozadie="a"] .br-usvit--2 {
  left: 46%; width: 13vmax;
  background: linear-gradient(180deg, transparent 10%, rgba(89, 154, 255, .54) 40%, rgba(158, 130, 255, .6) 66%, transparent 94%);
  animation-duration: 56s; animation-delay: -20s;
}
.br-ambient-stage[data-pozadie="a"] .br-usvit--3 {
  left: 76%;
  background: linear-gradient(180deg, transparent 6%, rgba(158, 130, 255, .64) 42%, rgba(133, 254, 255, .44) 70%, transparent 95%);
  animation-duration: 50s; animation-delay: -34s;
}
@keyframes br-usvit-vlna {
  0%, 100% { transform: translate3d(-6vw, 0, 0) rotate(16deg) scaleX(1); opacity: .5; }
  50%      { transform: translate3d(6vw, -4vh, 0) rotate(5deg) scaleX(1.4); opacity: .82; }
}

/* H · Lotos (14. 9.) — veľký kvet svetla v pravom hornom rohu (šesť lupeňov
   aqua/lila) sa otočí raz za 2,5 minúty a jemne dýcha, menší v ľavom dolnom
   rohu ide opačne. Rým s lotosom v logu. Bez masky (maska na fixnej vrstve je
   na mobile drahá) — lupene sú eliptické radiály, ktoré slabnú samy. */
.br-ambient-stage[data-pozadie="a"] .br-lotos {
  position: absolute; width: 80vmax; height: 80vmax;
  will-change: transform;
  animation: br-lotos-kruh 150s linear infinite;
}
.br-ambient-stage[data-pozadie="a"] .br-lotos i {
  position: absolute; inset: 0;
  filter: blur(10px);
  background:
    radial-gradient(ellipse 9% 27% at 50% 24%, rgba(133, 254, 255, .66), transparent 70%),
    radial-gradient(ellipse 9% 27% at 50% 76%, rgba(158, 130, 255, .58), transparent 70%);
}
.br-ambient-stage[data-pozadie="a"] .br-lotos i:nth-child(2) { rotate: 60deg; }
.br-ambient-stage[data-pozadie="a"] .br-lotos i:nth-child(3) { rotate: 120deg; }
.br-ambient-stage[data-pozadie="a"] .br-lotos--1 { top: -26vmax; right: -24vmax; }
.br-ambient-stage[data-pozadie="a"] .br-lotos--2 {
  bottom: -34vmax; left: -30vmax; width: 64vmax; height: 64vmax; opacity: .75;
  animation-duration: 190s; animation-direction: reverse;
}
@keyframes br-lotos-kruh {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .br-ambient-stage[data-pozadie="a"] .br-usvit,
  .br-ambient-stage[data-pozadie="a"] .br-lotos { animation: none; }
}

/* prepínač kandidátov — len s ?pozadie= v URL, produkcia ho nemá */
.br-prepinac {
  position: fixed;
  left: 50%; bottom: 18px;
  translate: -50% 0;
  z-index: 1000;
  display: flex; gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px -14px rgba(51, 65, 92, .38), inset 0 0 0 1px var(--br-linka);
  font: 600 12px/1 "Switzer", system-ui, sans-serif;
  letter-spacing: .02em;
}
.br-prepinac a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--br-atrament);
  text-decoration: none;
  white-space: nowrap;
}
.br-prepinac a[aria-current] { background: var(--br-grad-cta); color: #1F2B47; }
@media (max-width: 480px) { .br-prepinac { bottom: 12px; } .br-prepinac a { padding: 10px 10px; font-size: 11px; } }

/* ==========================================================================
   MOBIL — komponenty, ktoré na 390 nefungovali (Marek, 3. 9. 2026 večer)
   ========================================================================== */

/* krokovač dráh (meridiány) existuje len na mobile — vytvára ho mobil.js */
.mrd-krokovac { display: none; }

@media (max-width: 860px) {

  /* Burger: čiarky 16 × 1,6 px v 42 px kruhu vyzerali ako chyba renderu.
     44 px cieľ, dve čiarky 18 × 2 px so zaoblením, biely kruh s linkou. */
  [data-menu-prepinac] {
    width: 44px !important; height: 44px !important; gap: 5px !important;
    background: var(--br-plocha) !important;
    box-shadow: inset 0 0 0 1px var(--br-linka);
  }
  [data-menu-prepinac] span {
    width: 18px !important; height: 2px !important;
    border-radius: 2px !important;
    background: var(--br-atrament) !important;
  }

  /* SLUŽBY: 12-stĺpcové bento sa na mobile menilo na bočný pás, ktorý sa
     nedal preskočiť. Jedna karta pod druhou. */
  .sl-bento-mriezka {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .sl-bento-karta {
    grid-column: auto !important; grid-row: auto !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    flex: none !important;
  }
  .sl-bento-obrazok { aspect-ratio: 16 / 10 !important; height: auto !important; }

  /* MERIDIÁNY: figúra s orbitálnymi štítkami pretekala cez okraj. Na mobile
     je to iný komponent — figúra + krokovač dráh (mobil.js); šesťriadkový
     zoznam a štítky sú skryté, tú istú informáciu nesie krokovač. */
  .mrd { overflow: clip; }
  .mrd-scena { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .mrd-figura-blok { width: 100% !important; max-width: 100% !important; }
  .mrd-figura, .mrd--washi .mrd-figura {
    width: min(280px, 100%) !important; max-width: 100% !important;
    margin-inline: auto !important; transform: none !important;
  }
  .mrd-figura-status, .mrd-zoznam { display: none !important; }

  .mrd-krokovac {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center; gap: 10px;
    margin: 0 auto; max-width: 420px;
  }
  .mrd-krokovac button {
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: var(--br-plocha);
    box-shadow: inset 0 0 0 1px var(--br-linka);
    color: var(--br-atrament);
    font: 500 22px/1 "Switzer", system-ui, sans-serif;
    cursor: pointer;
  }
  .mrd-krokovac button:active { background: var(--br-grad-cta); }
  .mrd-krokovac-info { display: grid; gap: 3px; min-height: 44px; align-content: center; text-align: center; }
  .mrd-krokovac-nazov { font-size: 16px; font-weight: 600; color: var(--br-atrament); }
  .mrd-krokovac-okruh { font-size: 12.5px; color: var(--br-tlmene); }
  .mrd-krokovac-zona {
    display: inline-block; margin-left: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--br-akcent-text);
  }
  .mrd-krokovac-bodky { grid-column: 1 / -1; display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
  .mrd-krokovac-bodky i {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(51, 65, 92, .18);
    transition: background-color .3s var(--br-ease), transform .3s var(--br-ease);
  }
  .mrd-krokovac-bodky i[aria-current] { transform: scale(1.4); }

  /* PROCES: biela karta s guľou nad ňou nefungovala a guľa bola elipsa.
     Na mobile je to časová os: tenká zvislá linka, kruh 40 px vľavo,
     text vpravo, bez kariet. */
  .pk-milestone-kolaj { display: none !important; }
  .pk-milestone-mriezka {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    position: relative;
  }
  .pk-milestone-mriezka::before {
    content: "";
    position: absolute; left: 19px; top: 28px; bottom: 28px; width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #85FEFF, #599AFF 50%, #9E82FF);
    opacity: .5;
  }
  .pk-mstone-karta {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 16px;
    align-items: start !important;
    text-align: left !important;
    padding: 10px 0 26px !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important;
    border: 0 !important; border-radius: 0 !important;
    transform: none !important; opacity: 1 !important;
  }
  .pk-mstone-sfera-obal { width: 40px !important; height: 40px !important; margin: 0 !important; }
  .pk-mstone-sfera {
    width: 40px !important; height: 40px !important;
    aspect-ratio: 1 / 1 !important; flex: 0 0 40px !important;
    font-size: 14px !important; border-width: 2px !important;
    box-shadow: 0 0 0 5px var(--br-papier) !important;   /* rukáv z papiera prekryje linku */
    transform: none !important;
  }
  .pk-mstone-sonar { display: none !important; }
  .pk-mstone-telo {
    display: grid !important; gap: 6px !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    transform: none !important;   /* neaktívne kroky boli posunuté nadol */
  }
  .pk-mstone-sfera-obal { transform: none !important; }
  /* scroll určuje aktívny krok a ostatné tlmí — na mobile sú všetky kroky
     pod sebou a čitateľné naraz */
  .pk-mstone-karta, .pk-mstone-telo, .pk-mstone-sfera { opacity: 1 !important; filter: none !important; }
  .pk-mstone-cas { font-size: 11px !important; letter-spacing: .14em !important; }
  .pk-mstone-titul { font-size: 18px !important; margin: 0 !important; }
  .pk-mstone-perex { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; }
  .pk-mstone-tagy { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start !important; }
}

/* CTA pilulka: cinematic.css jej dáva biely text (na vodovom gradiente 1,9:1).
   Atrament, ako na všetkých ostatných pilulkách. Platí pre HP aj podstránky. */
.dk-btn-primarny, .dk-btn-primarny:hover, .dk-btn-primarny:focus-visible { color: #1F2B47 !important; }

/* ==========================================================================
   TABLET 768–860 — mobilné menu až sem
   Export prepínal na desktopové menu už od 768 px a sedem položiek sa tam
   tislo do jedného riadka bez dychu. Hranica ide na 860 px, čo je tá istá,
   akú používajú všetky ostatné dotykové pravidlá.
   ========================================================================== */
@media (max-width: 860px) {
  /* Skryť menu v strede, ale NIE posledný odkaz — to je CTA. Viazané na
     pozíciu, nie na href (cieľ sa zmenil na kontakt.html). */
  [data-hlavicka] .only-desktop:not(a:last-of-type) { display: none !important; }
  /* :not([hidden]) je nutné — ui.js zatvára menu cez atribút hidden a
     display:flex !important by ho prebil (menu by ostalo natrvalo otvorené).
     19. 9. 2026 (Marek: „pri refreshi na mobile preblikne hamburger menu a až potom sa zobrazí
     hero"): atribút hidden dáva menu až ui.js na konci stránky. Dovtedy toto pravidlo (0,2,0)
     prebilo skrytie z tokens.css ([data-menu], 0,1,0) a pri prvom vykreslení bolo celé menu
     otvorené. Menu sa teraz riadi len pravidlami [data-menu] v tokens.css. */
  .only-mobile:not([hidden]):not([data-menu]) { display: flex !important; }
}

/* Ukážkový režim formulára — musí byť jednoznačný, nie zamaskovaný ako úspech */
.br-f-hotovo--ukazka { text-align: left; }
.br-f-hotovo--ukazka h3 { color: var(--br-atrament); }
.br-f-ukazka-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.br-f-ukazka-cta a { flex: 1 1 260px; justify-content: center; text-align: center; }

/* Políčko súhlasu bolo neviditeľné (appearance:none, border 0, transparent).
   Povinné pole, ktoré nevidno, je zastavená konverzia. */
.cform input[type="checkbox"], .br-f-suhlas input[type="checkbox"] {
  appearance: auto !important; -webkit-appearance: checkbox !important;
  width: 20px !important; height: 20px !important; min-width: 20px !important;
  margin: 0 !important; padding: 0 !important;
  accent-color: #3E5DAE;
  background: #fff !important;
  border: 1px solid rgba(51, 65, 92, .35) !important;
  opacity: 1 !important; flex: 0 0 auto;
  cursor: pointer;
}
.br-f-suhlas { display: flex; align-items: flex-start; gap: 12px; }
.br-f-suhlas label, .br-f-suhlas span { cursor: pointer; }

/* CTA v hlavičke: selektor bol viazaný na href="#kontakt", ale menu Kontakt
   prešlo na kontakt.html a CTA ostalo tmavou navy pilulkou z exportu.
   Viažeme na pozíciu (posledný priamy odkaz v mriežke), nie na cieľ. */
[data-hlavicka] > a.only-desktop:last-of-type {
  background: var(--br-grad-cta) !important;
  color: #1F2B47 !important;
  box-shadow: var(--br-tien-tlacidlo, 0 12px 30px -14px rgba(62, 93, 174, .38)) !important;
}
@media (hover: hover) {
  [data-hlavicka] > a.only-desktop:last-of-type:hover { translate: 0 -1px; }
}