/* ==========================================================================
   Obnova-Domu – dizajnový systém „Z červenej do zelenej"
   main.css smie meniť iba agent dizajnového systému (pozri /_SPEC.md, časť 3).
   Dokumentácia komponentov: /_partials/KOMPONENTY.md · živá ukážka: /styleguide.html
   Obsah:
     1. Tokeny            7. Energetický štítok     13. Päta, cookie lišta, mobil-lista
     2. Reset             8. Karty, bento           14. Formuláre
     3. Základ            9. Čísla, kroky, FAQ      15. Značky na overenie
     4. Typografia       10. Taby, filter, tabuľka  16. Reveal animácie
     5. Layout           11. Porovnanie, citát...   17. Tlač
     6. Tlačidlá, ikony  12. Hlavička a menu
   ========================================================================== */

/* 1. TOKENY ============================================================== */
:root {
  /* farby značky */
  --green: #86BB46;        /* výplne, tlačidlá s tmavým textom – NIE text na svetlom */
  --green-deep: #3F6B1F;   /* text a odkazy na svetlom (5,6 : 1) */
  --green-soft: #E6F0D8;
  --green-hover: #9BCB5E;
  --ink: #121412;
  --ink-2: #1C201B;
  --ink-3: #272C26;
  --paper: #F4F2EC;
  --paper-2: #EAE7DE;
  --paper-3: #FBFAF6;
  --line: #D9D5C9;
  --text: #2A2E28;
  --muted: #5E625C;
  /* termo – iba stav „pred", straty, upozornenia */
  --heat: #FF6A2B;
  --heat-2: #E23A1E;
  --heat-3: #FFB547;
  --heat-deep: #B23216;    /* termo ako text na svetlom (5,6 : 1) */
  --cool: #7FB8C9;
  /* energetické triedy */
  --tr-a: #2E9E4F; --tr-b: #6DB33F; --tr-c: #B5CF34; --tr-d: #F2D22E;
  --tr-e: #F4A628; --tr-f: #EB6B25; --tr-g: #D9302C;
  --pasik-ag: linear-gradient(90deg,
    var(--tr-a) 0 14.2857%, var(--tr-b) 0 28.5714%, var(--tr-c) 0 42.8571%, var(--tr-d) 0 57.1428%,
    var(--tr-e) 0 71.4285%, var(--tr-f) 0 85.7142%, var(--tr-g) 0);
  --pasik-ga: linear-gradient(90deg,
    var(--tr-g) 0 14.2857%, var(--tr-f) 0 28.5714%, var(--tr-e) 0 42.8571%, var(--tr-d) 0 57.1428%,
    var(--tr-c) 0 71.4285%, var(--tr-b) 0 85.7142%, var(--tr-a) 0);
  --termo-gradient: linear-gradient(120deg, var(--heat-2), var(--heat) 45%, var(--heat-3));

  /* písma */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* typografická stupnica (lineárne 360 → 1440 px) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);   /* Montserrat je širší než Bricolage → o ~15 % menšie */
  --fs-h1: clamp(2.375rem, 1.6rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.42rem + 2vw, 3.125rem);
  --fs-h3: clamp(1.375rem, 1.208rem + .741vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.083rem + .185vw, 1.25rem);
  --fs-lead: clamp(1.1875rem, 1.125rem + .278vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.042rem + .093vw, 1.125rem);
  --fs-small: clamp(.875rem, .854rem + .093vw, .9375rem);
  --fs-cislo: clamp(3rem, 2rem + 4.444vw, 6rem);

  /* priestor */
  --max: 1320px;
  --okraj: clamp(16px, 4vw, 48px);
  --sekcia-pad: clamp(72px, 10vw, 160px);
  --sekcia-pad-tesna: clamp(48px, 6vw, 96px);
  --gap: clamp(16px, 2vw, 28px);
  --gap-l: clamp(28px, 4vw, 64px);

  /* tvar */
  --r-karta: 22px;
  --r-obr: 22px;
  --r-s: 12px;
  --r-pill: 999px;
  --tien: 0 1px 0 rgba(18,20,18,.04), 0 18px 40px -24px rgba(18,20,18,.28);
  --tien-hover: 0 1px 0 rgba(18,20,18,.05), 0 30px 60px -28px rgba(18,20,18,.38);
  --tien-plavajuci: 0 2px 0 rgba(18,20,18,.03), 0 20px 50px -20px rgba(18,20,18,.35);

  /* pohyb */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --t-rychly: .18s;
  --t: .35s;
  --t-pomaly: .8s;

  /* hlavička (JS prepisuje --vyska-hlavicky skutočnou výškou) */
  --vyska-hlavicky: 76px;
  --hlavicka-h: 76px;

  /* zrno (noise) – jemná textúra tmavých plôch */
  --zrno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* tematické premenné – svetlý kontext (predvolený) */
  --c-bg: var(--paper);
  --c-text: var(--text);
  --c-nadpis: var(--ink);
  --c-muted: var(--muted);
  --c-odkaz: var(--green-deep);
  --c-linka: var(--line);
  --c-plocha: var(--paper-2);
  --c-plocha-2: var(--paper-3);
  --c-focus: var(--green-deep);
  --c-akcent: var(--green-deep);

  color-scheme: light;
}
@media (min-width: 1080px) {
  :root { --hlavicka-h: 88px; --vyska-hlavicky: 88px; }
}

/* tmavý kontext – stačí triedu pridať na ľubovoľný obal */
.sekcia--tmava, .karta--tmava, .bento__dlazdica--tmava, .paticka, .mobilne-menu,
.hero-sluzba--tmava, .dotacia-box, .kontext-tmavy {
  --c-bg: var(--ink);
  --c-text: #E4E2DA;
  --c-nadpis: var(--paper);
  --c-muted: #A9ADA4;
  --c-odkaz: var(--green);
  --c-linka: rgba(244,242,236,.16);
  --c-plocha: var(--ink-2);
  --c-plocha-2: var(--ink-3);
  --c-focus: var(--green);
  --c-akcent: var(--green);
  color-scheme: dark;
}

/* 2. RESET =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
:where(code, kbd, samp, pre) { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: .86em; }
:where(code) { padding: .1em .35em; border-radius: 5px; background: rgba(18,20,18,.06); }
.kontext-tmavy code, .sekcia--tmava code { background: rgba(244,242,236,.1); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
body { min-height: 100vh; min-height: 100dvh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li, dd, blockquote, figcaption { overflow-wrap: break-word; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
a { color: inherit; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
abbr[title] { text-decoration: none; }

/* 3. ZÁKLAD ============================================================== */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--vyska-hlavicky) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.noanim { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.je-zamknute { overflow: hidden; }
main { display: block; }
::selection { background: var(--green); color: var(--ink); }

a { color: var(--c-odkaz); text-decoration-thickness: 1.5px; text-underline-offset: .18em; transition: color var(--t-rychly), text-decoration-color var(--t-rychly); }
a:hover { text-decoration-color: currentColor; color: var(--c-nadpis); }
p a, li a, td a, .odkaz { font-weight: 600; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 6px; }
.sekcia--tmava :focus-visible, .paticka :focus-visible, .mobilne-menu :focus-visible { outline-color: var(--green); }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: none; color: var(--paper); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[id] { scroll-margin-top: calc(var(--vyska-hlavicky) + 16px); }
hr { border: 0; height: 1px; background: var(--c-linka); margin-block: var(--gap-l); }

/* 4. TYPOGRAFIA ========================================================== */
h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--c-nadpis);
  font-weight: 700;
  text-wrap: balance;
  hyphens: manual;
}
.display { font-size: var(--fs-display); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.032em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.028em; font-weight: 680; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.018em; font-weight: 650; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em; font-weight: 650; }
@media (max-width: 479px) {
  .display, .hero-sluzba__nadpis { hyphens: auto; -webkit-hyphens: auto; }
}
/* zvýraznené slovo v nadpise = „cieľová čiara" */
.display em, .h1 em, .h2 em, h1 em, h2 em, .zvyraznenie {
  font-style: normal;
  color: var(--c-akcent);
  background: linear-gradient(var(--green), var(--green)) 0 92% / 100% .08em no-repeat;
  padding-bottom: .02em;
}
.slovo-termo {
  font-style: normal;
  background: var(--termo-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text); font-weight: 500; max-width: 40em; }
.muted { color: var(--c-muted); }
.maly, small { font-size: var(--fs-small); line-height: 1.5; }
.text-meranie { max-width: 66ch; }
.text-stred { text-align: center; }
.text-stred .lead, .text-stred.lead { margin-inline: auto; }
strong, b { font-weight: 750; color: var(--c-nadpis); }
.tabularne, .cislo, [data-count] { font-variant-numeric: tabular-nums; }

/* eyebrow: malý nadpis s pásikom energetických tried */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--font-text);
  font-size: var(--fs-small); font-weight: 750; line-height: 1.3;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-nadpis);
}
.eyebrow::before {
  content: ""; flex: none; width: 2.6em; height: .5em; border-radius: 2px;
  background: var(--pasik-ag);
}
.eyebrow--termo::before { background: var(--termo-gradient); }
.eyebrow--zelena::before { background: var(--green); width: 1.4em; }
.eyebrow--bez::before { display: none; }

/* veľké číslo */
.cislo {
  display: block;
  font-family: var(--font-display); font-optical-sizing: auto;
  font-size: var(--fs-cislo); font-weight: 700; line-height: .9; letter-spacing: -.04em;
  color: var(--c-nadpis);
}
.cislo__jednotka { font-size: .42em; letter-spacing: -.01em; font-weight: 650; margin-left: .12em; }
.cislo--zelene { color: var(--c-akcent); }

/* obsah textov (články, zásady) */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose ul li::marker { color: var(--green); }
.prose blockquote { border-left: 4px solid var(--green); padding-left: 1.2em; font-size: var(--fs-lead); color: var(--c-nadpis); }
.prose img, .prose figure { border-radius: var(--r-obr); }
.prose figcaption { font-size: var(--fs-small); color: var(--c-muted); margin-top: .6em; }

/* 5. LAYOUT ============================================================== */
.wrap { width: min(100% - 2 * var(--okraj), var(--max)); margin-inline: auto; }
.wrap--uzka { max-width: 880px; }
.wrap--stredna { max-width: 1080px; }
.wrap--siroka { width: min(100% - 2 * var(--okraj), 1600px); }

.sekcia {
  position: relative;
  padding-block: var(--sekcia-pad);
  background: var(--c-bg);
  color: var(--c-text);
}
.sekcia--papier2 { --c-bg: var(--paper-2); --c-plocha: var(--paper); --c-plocha-2: var(--paper-3); }
.sekcia--zelena { --c-bg: var(--green-soft); --c-plocha: var(--paper-3); }
.sekcia--tesna { padding-block: var(--sekcia-pad-tesna); }
.sekcia--bez-hore { padding-top: 0; }
.sekcia--bez-dole { padding-bottom: 0; }
.sekcia--tmava { isolation: isolate; }
.sekcia--tmava::before, .paticka::before, .mobilne-menu::before, .karta--tmava::before,
.dotacia-box::before, .hero-sluzba--tmava::before, .zrno::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--zrno); opacity: .09; mix-blend-mode: screen;
}
.zrno { position: relative; isolation: isolate; }

/* hlavička sekcie: eyebrow + nadpis vľavo, lead/odkaz vpravo */
.sekcia__hlavicka { display: grid; gap: 20px 48px; margin-bottom: clamp(40px, 5vw, 80px); }
.sekcia__hlavicka > .stack > * + * { margin-top: 18px; }
@media (min-width: 900px) {
  .sekcia__hlavicka { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .sekcia__hlavicka--stred { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
.sekcia__hlavicka--stred { text-align: center; justify-items: center; }
.sekcia__hlavicka--stred .lead { margin-inline: auto; }

/* 12-stĺpcová mriežka */
.mriezka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mriezka-gap, var(--gap));
}
.mriezka--volna { --mriezka-gap: var(--gap-l); }
.mriezka--stred { align-items: center; }
.mriezka > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 640px) {
  .mriezka > .st-t-3 { grid-column: span 3; } .mriezka > .st-t-4 { grid-column: span 4; }
  .mriezka > .st-t-6 { grid-column: span 6; } .mriezka > .st-t-8 { grid-column: span 8; }
  .mriezka > .st-t-12 { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .mriezka > .st-1 { grid-column: span 1; }  .mriezka > .st-2 { grid-column: span 2; }
  .mriezka > .st-3 { grid-column: span 3; }  .mriezka > .st-4 { grid-column: span 4; }
  .mriezka > .st-5 { grid-column: span 5; }  .mriezka > .st-6 { grid-column: span 6; }
  .mriezka > .st-7 { grid-column: span 7; }  .mriezka > .st-8 { grid-column: span 8; }
  .mriezka > .st-9 { grid-column: span 9; }  .mriezka > .st-10 { grid-column: span 10; }
  .mriezka > .st-11 { grid-column: span 11; } .mriezka > .st-12 { grid-column: 1 / -1; }
  .mriezka > .od-2 { grid-column-start: 2; } .mriezka > .od-3 { grid-column-start: 3; }
  .mriezka > .od-4 { grid-column-start: 4; } .mriezka > .od-5 { grid-column-start: 5; }
  .mriezka > .od-6 { grid-column-start: 6; } .mriezka > .od-7 { grid-column-start: 7; }
  .mriezka > .od-8 { grid-column-start: 8; } .mriezka > .od-9 { grid-column-start: 9; }
}

/* stack: vertikálny rytmus */
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.stack--s { --stack: .75rem; }
.stack--l { --stack: 2rem; }
.stack--xl { --stack: clamp(2.5rem, 4vw, 4rem); }

/* rad tlačidiel / prvkov */
.akcie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.akcie--stred { justify-content: center; }
.riadok { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }

/* zástupné miesto pre fotku (shot list) */
.foto-miesto {
  position: relative; display: grid; place-items: end start;
  min-height: 200px; aspect-ratio: var(--pomer, 4 / 3);
  border-radius: var(--r-obr); overflow: hidden; padding: 18px;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(134,187,70,.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(18,20,18,.045) 0 1px, transparent 1px 14px),
    var(--paper-2);
  color: var(--muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.4;
  border: 1px dashed #C9C4B5;
}
.foto-miesto::before {
  content: "FOTO"; position: absolute; top: 16px; left: 18px;
  font-size: 12px; letter-spacing: .14em; font-weight: 800; color: var(--green-deep);
}
.foto-miesto--tmave { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px), var(--ink-2); color: #A9ADA4; border-color: rgba(255,255,255,.18); }
.foto-miesto--tmave::before { color: var(--green); }

/* obrázok s oblými rohmi */
.obr { border-radius: var(--r-obr); overflow: hidden; background: var(--paper-2); }
.obr img { width: 100%; height: 100%; object-fit: cover; }
.obr--cover { position: relative; }
.obr--cover img { position: absolute; inset: 0; }

/* termovízny filter pre obrázky (SVG filter #filter-termo je v päte) */
.termo-filter { filter: url(#filter-termo); }

/* 6. TLAČIDLÁ A IKONY ==================================================== */
.ikona {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.ikona--s { width: 1em; height: 1em; }
.ikona--m { width: 1.5em; height: 1.5em; }
.ikona--l { width: 2rem; height: 2rem; }
.ikona--xl { width: 3rem; height: 3rem; stroke-width: 1.5; }
/* ikona v štvorci (služby, výhody) */
.ikona-box {
  display: inline-grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--green-soft); color: var(--green-deep);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.ikona-box .ikona { width: 28px; height: 28px; }
.ikona-box--tmavy { background: var(--ink); color: var(--green); }
.ikona-box--zeleny { background: var(--green); color: var(--ink); }
.ikona-box--termo { background: #FCE3D6; color: var(--heat-deep); }
.ikona-box--s { width: 44px; height: 44px; border-radius: 12px; }
.ikona-box--s .ikona { width: 22px; height: 22px; }
.sekcia--tmava .ikona-box:not(.ikona-box--zeleny):not(.ikona-box--termo),
.karta--tmava .ikona-box:not(.ikona-box--zeleny),
.bento__dlazdica--tmava .ikona-box:not(.ikona-box--zeleny) { background: rgba(134,187,70,.14); color: var(--green); }

.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-bg-h: var(--ink);
  --btn-fg-h: var(--paper);
  --btn-border: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 26px;
  border-radius: var(--r-pill); border: 1.5px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-text); font-size: 1rem; font-weight: 750; line-height: 1.15; letter-spacing: -.005em;
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-rychly) var(--ease), box-shadow var(--t) var(--ease);
}
/* výplň, ktorá pri hoveri prebehne zľava */
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--btn-bg-h); border-radius: inherit;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .5s var(--ease);
}
.btn:hover { color: var(--btn-fg-h); border-color: var(--btn-bg-h); text-decoration: none; }
.btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.btn:active { transform: scale(.98); }
.btn .ikona { width: 1.2em; height: 1.2em; transition: transform var(--t) var(--ease); }
.btn:hover .ikona:last-child:not(:first-child) { transform: translateX(4px); }
.btn:hover .ikona--von:last-child { transform: translate(3px, -3px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--primarne { --btn-bg: var(--green); --btn-fg: var(--ink); --btn-bg-h: var(--ink); --btn-fg-h: var(--green); }
.btn--tmave { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bg-h: var(--green); --btn-fg-h: var(--ink); }
.btn--obrys { --btn-bg: transparent; --btn-fg: var(--c-nadpis); --btn-border: currentColor; --btn-bg-h: var(--c-nadpis); --btn-fg-h: var(--c-bg); }
.btn--svetle { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bg-h: var(--green); --btn-fg-h: var(--ink); }
.sekcia--tmava .btn--tmave, .paticka .btn--tmave, .karta--tmava .btn--tmave, .kontext-tmavy .btn--tmave, .bento__dlazdica--tmava .btn--tmave {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bg-h: var(--green); --btn-fg-h: var(--ink);
}
.sekcia--tmava .btn--primarne, .paticka .btn--primarne, .kontext-tmavy .btn--primarne, .karta--tmava .btn--primarne,
.dotacia-box .btn--primarne, .bento__dlazdica--tmava .btn--primarne, .mobilne-menu .btn--primarne { --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); }
.btn--velke { min-height: 64px; padding: 0 34px; font-size: 1.125rem; }
.btn--male { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn--blok { display: flex; width: 100%; }
@media (max-width: 479px) {
  .btn { white-space: normal; }
  .btn--velke { padding: 0 26px; font-size: 1.0625rem; }
  .formular__odoslat { width: 100%; }
}
.btn--ikona { width: 54px; padding: 0; }

/* textové tlačidlo so šípkou */
.btn--text {
  min-height: 44px; padding: 0; border: 0; overflow: visible;
  background: none; color: var(--c-odkaz); gap: .5em;
}
.btn--text::before { display: none; }
.btn--text > span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--t) var(--ease); padding-bottom: 1px;
}
.btn--text:hover { color: var(--c-nadpis); }
.btn--text:hover > span { background-size: 100% 1.5px; }

/* magnetické CTA – JS pridá posun, tu iba plynulý návrat */
[data-magnet] { transition: transform .4s var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }

/* odznak */
.odznak {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .32em .8em; border-radius: var(--r-pill);
  background: var(--c-plocha); color: var(--c-nadpis);
  font-size: .8125rem; font-weight: 750; line-height: 1.2; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid var(--c-linka);
}
.odznak .ikona { width: 1.05em; height: 1.05em; }
.odznak--zelene { background: var(--green); color: var(--ink); border-color: transparent; }
.odznak--jemne { background: var(--green-soft); color: var(--green-deep); border-color: transparent; }
.odznak--tmave { background: var(--ink); color: var(--paper); border-color: transparent; }
.odznak--termo { background: #FCE3D6; color: var(--heat-deep); border-color: transparent; }
.odznak--obrys { background: transparent; }
.odznak--bodka::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(134,187,70,.25); }

/* 7. ENERGETICKÝ ŠTÍTOK ================================================== */
.stitok-pasik {
  display: block; height: 6px; width: 100%; border-radius: 3px;
  background: var(--pasik-ag);
}
.stitok-pasik--ga { background: var(--pasik-ga); }
.stitok-pasik--tenky { height: 3px; }
.stitok-pasik--hruby { height: 12px; border-radius: 6px; }
.stitok-pasik--kratky { width: 84px; }
.stitok-pasik--oddelovac { margin-block: clamp(40px, 6vw, 88px); }
/* indikátor: --progres 0–1 odkryje pásik zľava (G → A) */
.stitok-pasik--progres { background: var(--c-linka); position: relative; overflow: hidden; }
.stitok-pasik--progres::after {
  content: ""; position: absolute; inset: 0; background: var(--pasik-ga);
  clip-path: inset(0 calc((1 - var(--progres, 0)) * 100%) 0 0);
  transition: clip-path .3s linear;
}

/* odznak triedy v tvare šípky */
.trieda {
  --tr: var(--tr-a);
  display: inline-flex; align-items: center; justify-content: flex-start;
  min-width: 2.4em; height: 1.7em; padding: 0 .95em 0 .55em;
  background: var(--tr); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1;
  clip-path: polygon(0 0, calc(100% - .6em) 0, 100% 50%, calc(100% - .6em) 100%, 0 100%);
  border-radius: 4px 0 0 4px;
}
.trieda[data-trieda="A"] { --tr: var(--tr-a); }
.trieda[data-trieda="B"] { --tr: var(--tr-b); }
.trieda[data-trieda="C"] { --tr: var(--tr-c); }
.trieda[data-trieda="D"] { --tr: var(--tr-d); }
.trieda[data-trieda="E"] { --tr: var(--tr-e); }
.trieda[data-trieda="F"] { --tr: var(--tr-f); }
.trieda[data-trieda="G"] { --tr: var(--tr-g); color: #fff; }
.trieda--velka { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.trieda--mala { font-size: .875rem; }

/* vertikálny rebríček A–G */
.stitok { display: grid; gap: 5px; width: 100%; max-width: 360px; padding: 0; margin: 0; }
.stitok > li {
  --tr: var(--tr-a);
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 34px; padding: 0 22px 0 12px;
  width: calc(46% + var(--i, 0) * 8%);
  background: var(--tr); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  border-radius: 4px 0 0 4px;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t);
}
.stitok > li > small { font-family: var(--font-text); font-weight: 700; font-size: .75rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stitok > [data-trieda="A"] { --tr: var(--tr-a); --i: 0; }
.stitok > [data-trieda="B"] { --tr: var(--tr-b); --i: 1; }
.stitok > [data-trieda="C"] { --tr: var(--tr-c); --i: 2; }
.stitok > [data-trieda="D"] { --tr: var(--tr-d); --i: 3; }
.stitok > [data-trieda="E"] { --tr: var(--tr-e); --i: 4; }
.stitok > [data-trieda="F"] { --tr: var(--tr-f); --i: 5; }
.stitok > [data-trieda="G"] { --tr: var(--tr-g); --i: 6; color: #fff; }
/* aktívna trieda: ostatné stlmené, aktívna vysunutá */
.stitok:has(.je-aktivna) > li:not(.je-aktivna) { opacity: .5; }
.stitok > li.je-aktivna { transform: translateX(12px); }
.stitok--maly { gap: 3px; max-width: 200px; }
.stitok--maly > li { height: 20px; font-size: .75rem; padding-left: 7px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }

/* 8. KARTY A BENTO ======================================================= */
.karta {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-karta);
  background: var(--c-plocha); color: var(--c-text);
  border: 1px solid transparent;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.karta--biela { background: var(--paper-3); }
.karta--obrys { background: transparent; border-color: var(--c-linka); }
.karta--tmava { background: var(--ink-2); isolation: isolate; overflow: hidden; }
.karta__nadpis { font-size: var(--fs-h3); }
.karta__nadpis--maly { font-size: var(--fs-h4); }
.karta__text { color: var(--c-muted); }
.karta__cislo { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -.03em; line-height: 1; color: var(--c-nadpis); font-variant-numeric: tabular-nums; }
.karta__pata { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* celá karta ako odkaz: odkaz s triedou .karta__odkaz roztiahne klikaciu plochu */
.karta__odkaz { color: inherit; text-decoration: none; }
.karta__odkaz:hover { color: inherit; }
.karta__odkaz::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.karta__odkaz:focus-visible { outline: none; }
.karta:has(.karta__odkaz:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
/* šípka v kruhu */
.karta__sipka {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--c-linka); color: var(--c-nadpis);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.karta__sipka .ikona { transform: rotate(-45deg); transition: transform var(--t) var(--ease); }
.karta:has(.karta__odkaz):hover, .karta--hover:hover { transform: translateY(-4px); box-shadow: var(--tien-hover); border-color: var(--c-linka); }
.karta:hover .karta__sipka { background: var(--green); border-color: var(--green); color: var(--ink); }
.karta:hover .karta__sipka .ikona { transform: rotate(0); }
.karta:has(.karta__odkaz):hover .ikona-box { background: var(--green); color: var(--ink); transform: rotate(-6deg); }

.karta--foto { padding: 0; gap: 0; overflow: hidden; }
.karta__media { position: relative; aspect-ratio: var(--pomer, 4 / 3); overflow: hidden; background: var(--paper-2); }
.karta__media > img, .karta__media > .foto-miesto { width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: 0; min-height: 0; aspect-ratio: auto; transition: transform .8s var(--ease); }
.karta--foto:hover .karta__media > img { transform: scale(1.045); }
.karta__telo { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px); flex: 1; }
.karta__media .odznak { position: absolute; left: 14px; top: 14px; z-index: 2; }
.karta__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--c-muted); font-weight: 650; }
.karta__meta > * { display: inline-flex; align-items: center; gap: 6px; }

/* bento mriežka */
.bento { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
  .bento__dlazdica--siroka, .bento__dlazdica--velka { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); }
  .bento__dlazdica { grid-column: span 4; }
  .bento__dlazdica--siroka { grid-column: span 8; }
  .bento__dlazdica--vysoka { grid-row: span 2; }
  .bento__dlazdica--velka { grid-column: span 8; grid-row: span 2; }
  .bento__dlazdica--pol { grid-column: span 6; }
  .bento__dlazdica--stvrtina { grid-column: span 3; }
}
.bento__dlazdica {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 230px; padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--r-karta);
  background: var(--c-plocha); color: var(--c-text);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.bento__dlazdica--tmava { background: var(--ink); }
.bento__dlazdica--tmava::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--zrno); opacity: .09; mix-blend-mode: screen; pointer-events: none; }
.bento__dlazdica--zelena { background: var(--green); --c-nadpis: var(--ink); --c-text: var(--ink); --c-muted: #1F2A15; --c-odkaz: var(--ink); --c-linka: rgba(18,20,18,.28); --c-focus: var(--ink); }
.bento__dlazdica--biela { background: var(--paper-3); }
.bento__dlazdica--foto { --c-nadpis: #fff; --c-text: #F1F0EA; --c-muted: #E4E2DA; --c-linka: rgba(255,255,255,.4); color: var(--c-text); justify-content: flex-end; background: var(--ink); }
.bento__pozadie { position: absolute; inset: 0; z-index: -2; }
.bento__pozadie > img, .bento__pozadie > .foto-miesto { width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: 0; aspect-ratio: auto; transition: transform .9s var(--ease); }
.bento__dlazdica--foto:hover .bento__pozadie > img { transform: scale(1.04); }
.bento__hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bento__nadpis { font-size: var(--fs-h3); }
.bento__dlazdica--velka .bento__nadpis { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); }
.bento__text { color: var(--c-muted); max-width: 34em; }
.bento__cislo { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); letter-spacing: -.035em; line-height: 1; color: var(--c-nadpis); font-variant-numeric: tabular-nums; }
.bento__cislo small { display: block; margin-top: 8px; font-family: var(--font-text); font-size: var(--fs-small); font-weight: 650; letter-spacing: 0; color: var(--c-muted); }
.bento__dlazdica:has(.karta__odkaz):hover { transform: translateY(-4px); box-shadow: var(--tien-hover); }
.bento__dlazdica:hover .karta__sipka { background: var(--green); border-color: var(--green); color: var(--ink); }
.bento__dlazdica--zelena:hover .karta__sipka { background: var(--ink); border-color: var(--ink); color: var(--green); }
.bento__dlazdica:hover .karta__sipka .ikona { transform: rotate(0); }
.bento__dlazdica:has(.karta__odkaz:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.bento__dlazdica:has(.karta__odkaz):hover .ikona-box { background: var(--green); color: var(--ink); transform: rotate(-6deg); }
.bento__dlazdica--zelena .ikona-box { background: var(--ink); color: var(--green); }
/* pásik tried vybehne na spodnej hrane pri hoveri */
.bento__dlazdica::after, .karta--pasik::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 2;
  background: var(--pasik-ga); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease); pointer-events: none;
}
.bento__dlazdica:hover::after, .karta--pasik:hover::after { transform: scaleX(1); }
.bento__dlazdica--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,20,18,.35) 0%, rgba(18,20,18,0) 28%, rgba(18,20,18,.2) 50%, rgba(18,20,18,.88) 100%); pointer-events: none; }
.bento__dlazdica--foto .bento__hlava { margin-bottom: auto; }
.bento__dlazdica--foto .bento__cislo { margin-top: 4px; }
.bento__dlazdica--foto .bento__nadpis, .bento__dlazdica--foto .bento__text { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.karta--pasik { overflow: hidden; }

/* 9. ČÍSLA, KROKY, FAQ =================================================== */
.cisla {
  display: grid; gap: 0; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--c-linka);
}
.cisla__polozka {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px) clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--c-linka);
}
.cisla__polozka::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px;
  background: var(--tr, var(--green));
}
.cisla__polozka:nth-child(1) { --tr: var(--tr-a); }
.cisla__polozka:nth-child(2) { --tr: var(--tr-b); }
.cisla__polozka:nth-child(3) { --tr: var(--tr-c); }
.cisla__polozka:nth-child(4) { --tr: var(--tr-d); }
.cisla__polozka:nth-child(5) { --tr: var(--tr-e); }
@media (min-width: 720px) {
  .cisla__polozka + .cisla__polozka { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--c-linka); }
  .cisla__polozka + .cisla__polozka::before { left: clamp(16px, 2vw, 32px); }
}
.cisla__popis { color: var(--c-muted); font-weight: 600; max-width: 22em; line-height: 1.45; }

/* kroky: časová os z červenej do zelenej */
.kroky { position: relative; display: grid; gap: 0; padding: 0; margin: 0; counter-reset: krok; }
.kroky::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(180deg, var(--heat-2), var(--heat) 22%, var(--tr-d) 50%, var(--tr-b) 75%, var(--green));
  border-radius: 2px; opacity: .9;
}
.krok { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 40px); padding-bottom: clamp(32px, 4vw, 56px); }
.krok:last-child { padding-bottom: 0; }
.krok__cislo {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-bg); border: 2px solid var(--krok-farba, var(--green));
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--c-nadpis);
  font-variant-numeric: tabular-nums;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.krok:nth-child(1) { --krok-farba: var(--heat-2); }
.krok:nth-child(2) { --krok-farba: var(--heat); }
.krok:nth-child(3) { --krok-farba: var(--tr-d); }
.krok:nth-child(4) { --krok-farba: var(--tr-b); }
.krok:nth-child(5), .krok:last-child { --krok-farba: var(--green); }
.krok:hover .krok__cislo { background: var(--krok-farba); color: var(--ink); }
.krok__obsah { padding-top: 10px; }
.krok__obsah > * + * { margin-top: 10px; }
.krok__nadpis { font-size: var(--fs-h3); }
.krok__text { color: var(--c-muted); max-width: 46em; }
.krok__role { display: grid; gap: 8px; margin-top: 16px; padding: 0; }
@media (min-width: 720px) { .krok__role { grid-template-columns: 1fr 1fr; gap: 12px; } }
.krok__rola { padding: 14px 16px; border-radius: 14px; background: var(--c-plocha); font-size: var(--fs-small); line-height: 1.5; }
.krok__rola strong { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; color: var(--c-akcent); }
/* vodorovná varianta (desktop) */
@media (min-width: 1024px) {
  .kroky--vodorovne { grid-template-columns: repeat(var(--pocet, 5), minmax(0, 1fr)); gap: var(--gap); }
  .kroky--vodorovne::before { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--heat-2), var(--heat) 22%, var(--tr-d) 50%, var(--tr-b) 75%, var(--green)); }
  .kroky--vodorovne .krok { grid-template-columns: 1fr; gap: 18px; padding-bottom: 0; }
  .kroky--vodorovne .krok__obsah { padding-top: 0; }
}

/* FAQ */
.faq { border-top: 1px solid var(--c-linka); }
.faq__polozka { border-bottom: 1px solid var(--c-linka); }
.faq__otazka {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.5rem); font-weight: 650; line-height: 1.3; letter-spacing: -.012em;
  color: var(--c-nadpis);
  transition: color var(--t-rychly);
}
.faq__otazka::-webkit-details-marker { display: none; }
.faq__otazka:hover { color: var(--c-akcent); }
.faq__otazka:focus-visible { outline-offset: 4px; }
.faq__ikona {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--c-linka);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.faq__ikona::before, .faq__ikona::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  background: var(--c-nadpis); border-radius: 2px; transition: transform var(--t) var(--ease), background var(--t);
}
.faq__ikona::after { transform: rotate(90deg); }
.faq__otazka:hover .faq__ikona { border-color: var(--green); }
.faq__polozka[open] > .faq__otazka .faq__ikona { background: var(--green); border-color: var(--green); transform: rotate(180deg); }
.faq__polozka[open] > .faq__otazka .faq__ikona::before, .faq__polozka[open] > .faq__otazka .faq__ikona::after { background: var(--ink); }
.faq__polozka[open] > .faq__otazka .faq__ikona::after { transform: rotate(0); }
.faq__odpoved { overflow: hidden; }
.faq__odpoved > div, .faq__odpoved-vnutro { padding: 0 64px 28px 0; color: var(--c-text); max-width: 60em; }
.faq__odpoved p + p { margin-top: .8em; }
@media (max-width: 599px) { .faq__odpoved > div, .faq__odpoved-vnutro { padding-right: 0; } }

/* 10. TABY, FILTER, ČIPY, TABUĽKA ======================================= */
.taby__zoznam {
  position: relative; display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%;
  padding: 5px; border-radius: var(--r-pill); background: var(--c-plocha);
  overflow-x: auto; scrollbar-width: none;
}
.taby__zoznam::-webkit-scrollbar { display: none; }
.taby__indikator {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0;
  width: var(--sirka, 0); transform: translateX(var(--x, 0));
  border-radius: var(--r-pill); background: var(--ink);
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.taby__tab {
  position: relative; z-index: 1; flex: none;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  font-weight: 750; font-size: 1rem; color: var(--c-nadpis); white-space: nowrap;
  transition: color var(--t) var(--ease), background var(--t);
}
.taby__tab:hover { background: rgba(18,20,18,.06); }
.taby__tab[aria-selected="true"] { color: var(--paper); }
.taby:not(.je-pripravene) .taby__tab[aria-selected="true"] { background: var(--ink); }
.sekcia--tmava .taby__indikator, .kontext-tmavy .taby__indikator { background: var(--green); }
.sekcia--tmava .taby__tab[aria-selected="true"], .kontext-tmavy .taby__tab[aria-selected="true"] { color: var(--ink); }
.sekcia--tmava .taby__tab:hover { background: rgba(255,255,255,.06); }
.taby__panel { padding-top: clamp(28px, 3vw, 44px); }
.taby__panel:focus-visible { outline-offset: 6px; }
.taby__panel.je-nove { animation: od-vstup .5s var(--ease) both; }
@keyframes od-vstup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* filter (čipy filtra) */
.filter { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.filter__cip, .filter [data-filter] {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-linka); background: transparent; color: var(--c-nadpis);
  font-weight: 700; font-size: .9375rem; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-rychly);
}
.filter__cip:hover, .filter [data-filter]:hover { border-color: var(--c-nadpis); }
.filter__cip:active, .filter [data-filter]:active { transform: scale(.97); }
.filter [aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sekcia--tmava .filter [aria-pressed="true"], .kontext-tmavy .filter [aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--ink); }
.filter__pocet { font-size: .8em; opacity: .7; font-variant-numeric: tabular-nums; }
.filter__stav { font-size: var(--fs-small); color: var(--c-muted); margin-top: 12px; }
[data-kategoria] { transition: opacity .35s var(--ease), transform .35s var(--ease); }
[data-kategoria].je-skryvane { opacity: 0; transform: scale(.96); }
[data-kategoria].je-zobrazovane { animation: od-vstup .45s var(--ease) both; }
@keyframes od-filter-vstup { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* čipy vo formulári (checkboxy) */
.cipy { display: flex; flex-wrap: wrap; gap: 10px; }
.cipy > legend { width: 100%; margin-bottom: 12px; font-weight: 700; color: var(--c-nadpis); font-size: 1rem; float: left; }
.cipy > legend + * { clear: left; }
.cip { position: relative; display: inline-flex; }
.cip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-linka); background: var(--c-plocha-2);
  font-weight: 650; font-size: .9375rem; color: var(--c-nadpis); cursor: pointer; user-select: none;
  transition: background var(--t-rychly), border-color var(--t-rychly), color var(--t-rychly), transform var(--t-rychly);
}
.cip span::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .55;
  transition: all var(--t-rychly) var(--ease);
}
.cip:hover span { border-color: var(--c-nadpis); }
.cip input:checked + span { background: var(--green); border-color: var(--green); color: var(--ink); }
.cip input:checked + span::before {
  opacity: 1; border-color: var(--ink); background: var(--ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%2386BB46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cip input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.cip input:active + span { transform: scale(.97); }

/* tabuľka */
.tabulka {
  position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-karta); border: 1px solid var(--c-linka); background: var(--c-plocha-2);
  scrollbar-width: thin;
}
.tabulka:focus-visible { outline-offset: 4px; }
.tabulka table { width: 100%; min-width: 560px; font-size: 1rem; }
.tabulka caption { text-align: left; padding: 18px 22px 0; font-weight: 700; color: var(--c-nadpis); caption-side: top; }
.tabulka th, .tabulka td { padding: 16px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-linka); }
.tabulka thead th { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); background: var(--c-plocha); border-bottom-color: var(--c-linka); white-space: nowrap; }
.tabulka tbody tr:last-child > * { border-bottom: 0; }
.tabulka tbody tr { transition: background var(--t-rychly); }
.tabulka tbody tr:hover { background: rgba(134,187,70,.08); }
.tabulka tbody th { font-weight: 700; color: var(--c-nadpis); }
.tabulka .cena, .tabulka td.cislo-bunka { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--c-nadpis); }
.tabulka__poznamka { margin-top: 12px; font-size: var(--fs-small); color: var(--c-muted); }
/* na mobile z riadkov karty (td potrebujú data-label – JS doplní z thead) */
@media (max-width: 719px) {
  .tabulka--karty { border: 0; background: none; overflow: visible; border-radius: 0; }
  .tabulka--karty table { min-width: 0; }
  .tabulka--karty thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabulka--karty tbody, .tabulka--karty tr, .tabulka--karty td, .tabulka--karty tbody th { display: block; }
  .tabulka--karty tr { margin-bottom: 12px; border-radius: 18px; background: var(--c-plocha); padding: 8px 18px; border: 1px solid var(--c-linka); }
  .tabulka--karty td, .tabulka--karty tbody th { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--c-linka); text-align: right; }
  .tabulka--karty tbody th { font-size: 1.125rem; text-align: left; }
  .tabulka--karty tr > :last-child { border-bottom: 0; }
  .tabulka--karty td::before { content: attr(data-label); font-weight: 700; color: var(--c-muted); text-align: left; font-size: var(--fs-small); }
}

/* 11. POROVNANIE, CITÁT, MARQUEE, GALÉRIA, PRED-PO ======================== */
.porovnanie {
  display: grid; gap: var(--gap);
  grid-auto-flow: column; grid-auto-columns: minmax(280px, 86%);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin;
}
@media (min-width: 900px) {
  .porovnanie { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--pocet, 3), minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}
.porovnanie__stlpec {
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-karta);
  background: var(--c-plocha); border: 1px solid var(--c-linka);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.porovnanie__stlpec:hover { transform: translateY(-4px); box-shadow: var(--tien-hover); }
.porovnanie__stlpec--odporucane {
  --c-bg: var(--ink); --c-text: #E4E2DA; --c-nadpis: var(--paper); --c-muted: #A9ADA4; --c-linka: rgba(244,242,236,.16); --c-odkaz: var(--green); --c-akcent: var(--green); --c-focus: var(--green);
  background: var(--ink); color: var(--c-text); border-color: var(--ink);
}
.porovnanie__stlpec > .odznak { align-self: flex-start; margin-bottom: -4px; }
.porovnanie__podtitul { font-size: var(--fs-small); font-weight: 700; color: var(--c-muted); letter-spacing: .02em; }
.porovnanie__nazov { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.porovnanie__hodnota { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 16px 0; border-block: 1px solid var(--c-linka); }
.porovnanie__hodnota strong { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.porovnanie__hodnota span { font-size: var(--fs-small); color: var(--c-muted); font-weight: 600; }
.porovnanie__zoznam { display: grid; gap: 10px; padding: 0; margin: 0; }
.porovnanie__zoznam li { position: relative; padding-left: 30px; line-height: 1.45; }
.porovnanie__zoznam li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%233F6B1F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.porovnanie__stlpec--odporucane .porovnanie__zoznam li::before { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23121412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.porovnanie__stlpec > .btn, .porovnanie__stlpec > .akcie { margin-top: auto; }

/* citát / recenzia */
.citat {
  position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0;
  padding: clamp(26px, 3vw, 40px); border-radius: var(--r-karta);
  background: var(--c-plocha);
}
.citat::before {
  content: "\201C"; position: absolute; top: clamp(4px, 1vw, 10px); right: clamp(18px, 2vw, 30px);
  font-family: var(--font-display); font-weight: 800; font-size: 6rem; line-height: 1; color: var(--green); opacity: .9;
}
.citat__text { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--c-nadpis); font-weight: 500; }
.citat__text p + p { margin-top: .7em; }
.citat__autor { display: flex; align-items: center; gap: 14px; margin-top: auto; font-size: var(--fs-small); }
.citat__avatar {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--green); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
}
.citat__meno { display: block; font-weight: 800; color: var(--c-nadpis); font-size: 1rem; }
.citat__detail { display: block; color: var(--c-muted); font-weight: 600; }
.citat__zdroj { font-size: var(--fs-small); color: var(--c-muted); }
.citat--velky { background: none; padding: 0; gap: 30px; }
.citat--velky::before { position: static; display: block; font-size: clamp(6rem, 4rem + 6vw, 11rem); height: .42em; line-height: 1; margin-bottom: .05em; }
.citat--velky .citat__text { font-family: var(--font-display); font-size: clamp(1.625rem, 1.2rem + 1.9vw, 3rem); line-height: 1.15; letter-spacing: -.022em; font-weight: 600; }

/* marquee */
.marquee {
  --trvanie: 38s;
  position: relative; overflow: hidden; display: flex;
  padding-block: clamp(18px, 2vw, 26px);
  background: var(--c-bg); color: var(--c-nadpis);
  border-block: 1px solid var(--c-linka);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee--tmava { --c-bg: var(--ink); --c-nadpis: var(--paper); --c-linka: transparent; }
.marquee--zelena { --c-bg: var(--green); --c-nadpis: var(--ink); --c-linka: transparent; }
.marquee__pas { display: flex; flex: none; min-width: 100%; }
.marquee__obsah {
  display: flex; flex: none; align-items: center; gap: 0; padding: 0; margin: 0;
  animation: od-marquee var(--trvanie) linear infinite;
}
.marquee__obsah > li {
  display: inline-flex; align-items: center; gap: clamp(18px, 2.4vw, 36px);
  padding-right: clamp(18px, 2.4vw, 36px); white-space: nowrap;
  font-family: var(--font-display); font-weight: 650; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1;
}
.marquee__obsah > li::after {
  content: ""; width: .7em; height: .22em; border-radius: 2px; flex: none;
  background: var(--pasik-ag);
}
.marquee--zelena .marquee__obsah > li::after { background: var(--ink); width: .3em; height: .3em; border-radius: 50%; }
.marquee:hover .marquee__obsah { animation-play-state: paused; }
@keyframes od-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee__obsah { animation: none; } .marquee__obsah[aria-hidden="true"] { display: none; } .marquee__pas { flex-wrap: wrap; } }
.noanim .marquee__obsah { animation: none; }
.noanim .marquee__obsah[aria-hidden="true"] { display: none; }

/* horizontálna galéria (umiestnite MIMO .wrap – odsadenie si rieši sama) */
.galeria-h { --okraj-galerie: max(var(--okraj), calc((100% - var(--max)) / 2)); position: relative; }
.galeria-h__hlavicka {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-inline: var(--okraj-galerie);
}
.galeria-h__sipky { display: flex; gap: 10px; }
.galeria-h__sipka {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--c-linka); color: var(--c-nadpis); background: transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t);
}
.galeria-h__sipka:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sekcia--tmava .galeria-h__sipka:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: var(--ink); }
.galeria-h__sipka:disabled { opacity: .35; cursor: default; }
.galeria-h__pas {
  display: flex; gap: var(--gap); padding: 4px var(--okraj-galerie) 18px; margin: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--okraj-galerie);
  scrollbar-width: none; cursor: grab;
}
.galeria-h__pas::-webkit-scrollbar { display: none; }
.galeria-h__pas.je-tahane { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.galeria-h__pas.je-tahane a, .galeria-h__pas.je-tahane img { pointer-events: none; }
.galeria-h__polozka { flex: 0 0 var(--sirka-polozky, clamp(280px, 30vw, 440px)); scroll-snap-align: start; min-width: 0; }
.galeria-h__polozka--siroka { --sirka-polozky: clamp(300px, 46vw, 680px); }
.galeria-h__polozka img { -webkit-user-drag: none; }
.galeria-h__progres { margin: 6px var(--okraj-galerie) 0; height: 3px; background: var(--c-linka); border-radius: 3px; overflow: hidden; }
.galeria-h__progres > span { display: block; height: 100%; width: var(--viditelne, 30%); background: var(--pasik-ga); border-radius: 3px; transform: translateX(var(--posun, 0%)); transition: transform .15s linear; }

/* pred / po porovnanie */
.pred-po {
  --pozicia: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--pomer, 16 / 10); border-radius: var(--r-obr);
  background: var(--ink-2); user-select: none; touch-action: pan-y;
}
.pred-po__po, .pred-po__pred { position: absolute; inset: 0; }
.pred-po__po > img, .pred-po__pred > img, .pred-po__po > .foto-miesto, .pred-po__pred > .foto-miesto { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.pred-po__pred { z-index: 1; clip-path: inset(0 calc(100% - var(--pozicia)) 0 0); }
.pred-po__ciara {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pozicia); width: 3px; margin-left: -1.5px;
  background: var(--paper); pointer-events: none; box-shadow: 0 0 0 1px rgba(18,20,18,.15);
}
.pred-po__rukovat {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); color: var(--ink); box-shadow: var(--tien-plavajuci);
  transition: transform var(--t) var(--ease), background var(--t);
}
.pred-po__rukovat::before, .pred-po__rukovat::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border: solid currentColor; border-width: 0 0 2.5px 2.5px;
}
.pred-po__rukovat::before { left: 16px; transform: rotate(45deg); }
.pred-po__rukovat::after { right: 16px; transform: rotate(-135deg); }
.pred-po:hover .pred-po__rukovat { transform: scale(1.08); background: var(--green); }
.pred-po__rozsah {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.pred-po__rozsah::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100vh; cursor: ew-resize; }
.pred-po__rozsah::-moz-range-thumb { width: 60px; height: 100vh; border: 0; cursor: ew-resize; }
.pred-po:has(.pred-po__rozsah:focus-visible) .pred-po__rukovat { outline: 3px solid var(--green); outline-offset: 4px; }
.pred-po__stitok {
  position: absolute; z-index: 2; top: 16px; padding: 7px 14px; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
.pred-po__stitok--pred { left: 16px; background: var(--heat-2); color: #fff; }
.pred-po__stitok--po { right: 16px; background: var(--green); color: var(--ink); }

/* breadcrumbs */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 0; margin: 0; list-style: none; font-size: var(--fs-small); font-weight: 650; }
.breadcrumbs li { display: inline-flex; align-items: center; color: var(--c-muted); }
.breadcrumbs li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 12px; flex: none;
  border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .6;
}
.breadcrumbs a { color: var(--c-text); text-decoration: none; padding: 6px 0; }
.breadcrumbs a:hover { color: var(--c-odkaz); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-nadpis); }

/* hero podstránky */
.hero-sluzba {
  position: relative; isolation: isolate;
  padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 128px);
  background: var(--c-bg); color: var(--c-text);
}
.hero-sluzba__mriezka { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .hero-sluzba__mriezka { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero-sluzba__obsah > * + * { margin-top: 22px; }
.hero-sluzba__obsah > .breadcrumbs + * { margin-top: clamp(28px, 4vw, 56px); }
.hero-sluzba__nadpis { font-size: var(--fs-display); line-height: 1; letter-spacing: -.035em; }
.hero-sluzba .lead { max-width: 34em; }
.hero-sluzba__obsah > .akcie { margin-top: 32px; }
.hero-sluzba__media { position: relative; }
.hero-sluzba__media > img, .hero-sluzba__media > .foto-miesto, .hero-sluzba__media > picture img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 959px) { .hero-sluzba__media > img, .hero-sluzba__media > .foto-miesto { aspect-ratio: 4 / 3; } }
.hero-sluzba__plavajuci {
  position: absolute; left: clamp(-40px, -3vw, -12px); bottom: clamp(18px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; border-radius: 18px; background: var(--paper-3); color: var(--ink); box-shadow: var(--tien-plavajuci);
  max-width: 250px;
}
.hero-sluzba__plavajuci > .trieda { align-self: flex-start; }
.hero-sluzba__plavajuci > strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.hero-sluzba__plavajuci > span:not(.trieda) { font-size: var(--fs-small); color: var(--muted); font-weight: 600; line-height: 1.35; }
@media (max-width: 959px) { .hero-sluzba__plavajuci { left: 12px; bottom: 12px; } }
.hero-sluzba__fakty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0;
  margin-top: clamp(40px, 5vw, 72px); padding: 0; border-top: 1px solid var(--c-linka);
}
.hero-sluzba__fakty > li { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 4px 0; }
.hero-sluzba__fakty strong { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); letter-spacing: -.03em; line-height: 1.05; color: var(--c-nadpis); font-variant-numeric: tabular-nums; }
.hero-sluzba__fakty span { font-size: var(--fs-small); color: var(--c-muted); font-weight: 600; }
.hero-sluzba--tmava { --c-bg: var(--ink); }

/* poznámka (info box) */
.poznamka {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: clamp(20px, 2.4vw, 28px); border-radius: 18px;
  background: var(--c-plocha); color: var(--c-text);
  border-left: 4px solid var(--green);
}
.poznamka > .ikona { width: 28px; height: 28px; color: var(--c-akcent); margin-top: 2px; }
.poznamka__nadpis { font-weight: 800; color: var(--c-nadpis); margin-bottom: 4px; }
.poznamka > div > * + * { margin-top: .5em; }
.poznamka--varovanie { border-left-color: var(--heat); background: #FBEDE4; }
.poznamka--varovanie > .ikona { color: var(--heat-deep); }
.poznamka--vedeli { border-left: 0; background: var(--ink); --c-nadpis: var(--paper); --c-text: #E4E2DA; --c-akcent: var(--green); --c-odkaz: var(--green); position: relative; overflow: hidden; isolation: isolate; }
.poznamka--vedeli::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--tr-a), var(--tr-b), var(--tr-c), var(--tr-d), var(--tr-e), var(--tr-f), var(--tr-g)); }

/* box s odkazom na dotácie */
.dotacia-box {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 56px); border-radius: clamp(22px, 2.4vw, 32px);
  background: var(--ink); color: var(--c-text);
}
@media (min-width: 860px) { .dotacia-box:has(> .dotacia-box__vizual) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
/* 3. 10. 2026: energetické štítky odstránené – box bez obrázka má jeden stĺpec s čitateľnou šírkou textu */
.dotacia-box:not(:has(> .dotacia-box__vizual)) .dotacia-box__obsah { max-width: 760px; }
.dotacia-box__obsah > * + * { margin-top: 18px; }
.dotacia-box__suma {
  font-family: var(--font-display); font-weight: 700; line-height: .95; letter-spacing: -.035em;
  font-size: clamp(2.75rem, 1.8rem + 4vw, 5.5rem); color: var(--paper);
}
.dotacia-box__suma .mensie { display: block; margin-bottom: .45em; font-family: var(--font-text); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--green); }
.dotacia-box__vizual { justify-self: end; width: 100%; max-width: 340px; }
.dotacia-box .akcie { margin-top: 28px; }

/* 12. HLAVIČKA, MEGA-MENU, MOBILNÉ MENU ================================== */
.hlavicka {
  --h-bg: var(--paper);
  --h-fg: var(--ink);
  --h-muted: var(--muted);
  --h-lista-bg: transparent;
  position: sticky; top: 0; z-index: 100;
  height: var(--hlavicka-h);
  background: var(--h-bg); color: var(--h-fg);
  transition: background var(--t) var(--ease);
}
/* tmavý hero pod hlavičkou: automaticky (:has), cez body[data-hlavicka="tmava"] alebo JS triedu */
/* VÝKON: pravidlá body:has(> main > …:first-child) boli odstránené – :has() na <body> nútil prehliadač pri KAŽDEJ zmene triedy
   na stránke (príchod textu, karty…) prepočítať štýly celého dokumentu (na mobile 6× pomalšie rolovanie). To isté rieši trieda
   .hlavicka--tmava, ktorú nastavuje main.js (initHlavicka). */
.hlavicka--tmava:not(.hlavicka--posunuta) { --h-bg: var(--ink); --h-fg: var(--paper); --h-muted: #A9ADA4; }
body[data-hlavicka="tmava"] .hlavicka:not(.hlavicka--posunuta) { --h-bg: var(--ink); --h-fg: var(--paper); --h-muted: #A9ADA4; }
/* bez bliknutia: prvá sekcia v <main> je tmavá → tmavá hlavička (samostatné pravidlá kvôli :has) */
body[data-hlavicka="prekryv"] .hlavicka { margin-bottom: calc(-1 * var(--hlavicka-h)); }
body[data-hlavicka="prekryv"] .hlavicka:not(.hlavicka--posunuta) { --h-bg: transparent; --h-fg: #fff; --h-muted: rgba(255,255,255,.8); }
.hlavicka--posunuta { --h-bg: transparent; }

/* STABILNÁ HLAVIČKA: obsah lišty má v oboch stavoch ROVNAKÉ rozmery aj polohu – pri rolovaní sa nič nerozťahuje ani neposúva,
   iba sa pod obsahom plynulo objaví svetlá plávajúca „pilulka" s tieňom (::before). Pôvodne sa menila šírka, výška aj veľkosť loga. */
.hlavicka__lista { position: relative; isolation: isolate; height: 100%; width: 100%; margin-inline: auto; background: var(--h-lista-bg); }
.hlavicka__lista::before {
  content: ""; position: absolute; z-index: -1; top: 10px; bottom: 10px;
  left: max(4px, calc((100% - var(--max) - 48px) / 2)); right: max(4px, calc((100% - var(--max) - 48px) / 2));
  border-radius: 20px; background: rgba(251,250,246,.94); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(18,20,18,.06), var(--tien-plavajuci);
  transition: opacity .35s var(--ease);
}
.hlavicka--posunuta .hlavicka__lista::before { opacity: 1; -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.hlavicka__vnutro {
  display: flex; align-items: center; gap: 20px; height: 100%;
  width: min(100% - 2 * var(--okraj), var(--max)); margin-inline: auto;
}
.hlavicka__logo { display: inline-flex; align-items: center; flex: none; margin-right: auto; border-radius: 8px; }
.hlavicka__logo img { height: 36px; width: auto; transition: height .5s var(--ease); }
@media (min-width: 1080px) { .hlavicka__logo img { height: 42px; } }
.logo--svetle { display: none; }
.hlavicka--tmava:not(.hlavicka--posunuta) .logo--tmave, body[data-hlavicka="tmava"] .hlavicka:not(.hlavicka--posunuta) .logo--tmave, body[data-hlavicka="prekryv"] .hlavicka:not(.hlavicka--posunuta) .logo--tmave { display: none; }
.hlavicka--tmava:not(.hlavicka--posunuta) .logo--svetle, body[data-hlavicka="tmava"] .hlavicka:not(.hlavicka--posunuta) .logo--svetle, body[data-hlavicka="prekryv"] .hlavicka:not(.hlavicka--posunuta) .logo--svetle { display: block; }

/* progres skrolovania: pásik G → A pod hlavičkou */
.hlavicka__progres { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; border-radius: 0 0 20px 20px; pointer-events: none; opacity: 0; transition: opacity var(--t); }
/* farebná lišta postupu čítania pod hlavičkou je na želanie klienta VYPNUTÁ (nevracať) */
.hlavicka__progres { display: none !important; }
.hlavicka__progres > span { display: block; height: 100%; background: var(--pasik-ga); clip-path: inset(0 calc((1 - var(--posun, 0)) * 100%) 0 0); }

/* hlavné menu (desktop) */
.hlavne-menu { display: none; }
@media (min-width: 1080px) { .hlavne-menu { display: block; margin-right: auto; } }
.hlavne-menu__zoznam { display: flex; align-items: center; gap: 2px; }
.hlavne-menu__odkaz {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  color: var(--h-fg); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: color var(--t-rychly), background var(--t-rychly);
}
.hlavne-menu__odkaz::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 2px;
  background: var(--pasik-ga); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.hlavne-menu__odkaz:hover { color: var(--h-fg); }
.hlavne-menu__odkaz:hover::after, .hlavne-menu__odkaz[aria-expanded="true"]::after { transform: scaleX(1); }
.hlavne-menu__odkaz.je-aktivna::after, .hlavne-menu__odkaz[aria-current="page"]::after { transform: scaleX(1); background: var(--green); }
.hlavne-menu__odkaz .ikona { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.hlavne-menu__odkaz[aria-expanded="true"] .ikona { transform: rotate(180deg); }

.hlavicka__akcie { display: flex; align-items: center; gap: 10px; flex: none; }
.hlavicka__telefon {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px;
  color: var(--h-fg); text-decoration: none; font-weight: 800; font-size: 1.0625rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hlavicka__telefon .ikona-kruh {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: var(--ink); transition: transform var(--t) var(--ease);
}
.hlavicka__telefon .ikona { width: 18px; height: 18px; }
.hlavicka__telefon:hover { color: var(--h-fg); }
.hlavicka__telefon:hover .ikona-kruh { transform: rotate(-12deg) scale(1.06); }
.hlavicka__telefon small { display: block; font-size: .75rem; font-weight: 650; color: var(--h-muted); line-height: 1.1; }
.hlavicka__cta { display: none; }
@media (min-width: 768px) { .hlavicka__telefon { display: inline-flex; } .hlavicka__cta { display: inline-flex; } }
@media (min-width: 1080px) and (max-width: 1279px) { .hlavicka__telefon > span:last-child { display: none; } .hlavne-menu__odkaz { padding: 0 11px; } }
.hlavicka__cta.btn { min-height: 48px; padding: 0 22px; }
.hlavicka--tmava:not(.hlavicka--posunuta) .hlavicka__cta, body[data-hlavicka="tmava"] .hlavicka:not(.hlavicka--posunuta) .hlavicka__cta { --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); }

.hlavicka__hamburger {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid currentColor; color: var(--h-fg);
  font-weight: 750; font-size: .9375rem;
  transition: background var(--t-rychly), color var(--t-rychly);
}
.hlavicka__hamburger:hover { background: var(--h-fg); color: var(--h-bg); }
.hlavicka--posunuta .hlavicka__hamburger:hover { color: var(--paper); }
.hamburger__ciary { position: relative; display: block; width: 32px; height: 32px; }
.hamburger__ciary::before, .hamburger__ciary::after {
  content: ""; position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--t) var(--ease);
}
.hamburger__ciary::before { top: 12px; }
.hamburger__ciary::after { top: 18px; right: 11px; }
.hlavicka__hamburger:hover .hamburger__ciary::after { transform: scaleX(1.33); transform-origin: 0 50%; }
@media (min-width: 1080px) { .hlavicka__hamburger { display: none; } }

/* mega-menu */
.hlavne-menu__polozka--mega { position: static; }
.mega {
  position: absolute; top: calc(100% + 8px); left: 50%; z-index: 5;
  width: min(100vw - 2 * var(--okraj), var(--max));
  padding: 14px; border-radius: 26px;
  background: var(--paper-3); color: var(--text);
  box-shadow: 0 0 0 1px rgba(18,20,18,.06), 0 40px 80px -30px rgba(18,20,18,.45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -10px);
  transition: opacity .28s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mega.je-otvorene, html:not(.js) .hlavne-menu__polozka--mega:hover .mega, html:not(.js) .hlavne-menu__polozka--mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* most pre myš */
.mega__mriezka { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 14px; }
.mega__sluzby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; margin: 0; }
.mega__sluzba {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center;
  padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--text);
  transition: background var(--t-rychly);
}
.mega__sluzba .ikona-box { grid-row: span 2; }
.mega__sluzba strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.mega__sluzba span { font-size: .9375rem; color: var(--muted); line-height: 1.4; font-weight: 500; }
.mega__sluzba:hover { background: var(--paper-2); color: var(--text); }
.mega__sluzba:hover .ikona-box { background: var(--green); color: var(--ink); transform: rotate(-6deg); }
.mega__sluzba.je-aktivna { background: var(--green-soft); }
.mega__vsetky { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 800; text-decoration: none; color: var(--green-deep); border-radius: 16px; }
.mega__vsetky:hover { background: var(--paper-2); color: var(--ink); }
.mega__vsetky .ikona { transition: transform var(--t) var(--ease); }
.mega__vsetky:hover .ikona { transform: translateX(4px); }
.mega__bok { display: grid; gap: 10px; grid-template-rows: 1fr auto; }
.mega__dotacia {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 26px; border-radius: 20px; background: var(--ink); color: #E4E2DA; text-decoration: none;
}
.mega__dotacia::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--zrno); opacity: .09; mix-blend-mode: screen; }
.mega__dotacia .eyebrow { color: var(--paper); }
.mega__dotacia-suma { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: .95; letter-spacing: -.035em; color: var(--paper); }
.mega__dotacia-suma small { display: block; font-size: 1rem; letter-spacing: 0; font-weight: 650; color: var(--green); margin-bottom: 6px; }
.mega__dotacia p { font-size: .9375rem; line-height: 1.45; color: #C9CCC4; }
.mega__dotacia .btn--text { color: var(--green); min-height: 0; align-self: flex-start; }
.mega__dotacia:hover { color: #E4E2DA; }
.mega__dotacia:hover .btn--text > span { background-size: 100% 1.5px; }
.mega__dotacia:hover .btn--text .ikona { transform: translateX(4px); }
.mega__dotacia .stitok-pasik { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0; }
.mega__eshop {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px;
  background: var(--paper-2); color: var(--ink); text-decoration: none; font-weight: 750; line-height: 1.3;
  transition: background var(--t-rychly);
}
.mega__eshop small { display: block; font-weight: 600; color: var(--muted); font-size: .875rem; }
.mega__eshop > .ikona:last-child { margin-left: auto; transition: transform var(--t) var(--ease); }
.mega__eshop:hover { background: var(--green-soft); color: var(--ink); }
.mega__eshop:hover > .ikona:last-child { transform: translate(3px, -3px); }

/* mobilné menu cez celú obrazovku */
.mobilne-menu {
  position: fixed; inset: 0; z-index: 10; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--ink); color: var(--c-text);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--ease-io);
}
.mobilne-menu.je-otvorene { clip-path: inset(0 0 0 0); }
.mobilne-menu__hlavicka {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--hlavicka-h); padding-inline: var(--okraj); background: var(--ink);
}
.mobilne-menu__hlavicka img { height: 36px; width: auto; }
.mobilne-menu__zavriet {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid rgba(244,242,236,.4); color: var(--paper); font-weight: 750; font-size: .9375rem;
}
.mobilne-menu__zavriet:hover { background: var(--paper); color: var(--ink); }
.mobilne-menu__zavriet .ikona { width: 32px; height: 32px; padding: 6px; }
.mobilne-menu__telo { flex: 1; display: flex; flex-direction: column; gap: 36px; padding: 12px var(--okraj) calc(40px + env(safe-area-inset-bottom)); }
.mobilne-menu__zoznam { margin: 0; padding: 0; }
.mobilne-menu__zoznam > li { border-bottom: 1px solid rgba(244,242,236,.12); }
.mobilne-menu__odkaz {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 14px 0; min-height: 64px;
  font-family: var(--font-display); font-weight: 650; font-size: clamp(1.875rem, 1.2rem + 3.4vw, 2.75rem); letter-spacing: -.03em; line-height: 1.05;
  color: var(--paper); text-decoration: none; text-align: left;
}
.mobilne-menu__odkaz:hover, .mobilne-menu__odkaz.je-aktivna, .mobilne-menu__odkaz[aria-current="page"] { color: var(--green); }
.mobilne-menu__odkaz .odznak { font-family: var(--font-text); letter-spacing: .01em; }
.mobilne-menu__odkaz > .ikona { width: 28px; height: 28px; flex: none; transition: transform var(--t) var(--ease); }
.mobilne-menu__odkaz[aria-expanded="true"] > .ikona { transform: rotate(180deg); }
.mobilne-menu__sluzby { display: grid; gap: 4px; padding: 0 0 18px; margin: 0; }
@media (min-width: 560px) { .mobilne-menu__sluzby { grid-template-columns: 1fr 1fr; } }
.mobilne-menu__sluzby a {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 10px; border-radius: 14px;
  color: #E4E2DA; text-decoration: none; font-weight: 700; font-size: 1.0625rem;
}
.mobilne-menu__sluzby a:hover, .mobilne-menu__sluzby a.je-aktivna { background: rgba(244,242,236,.07); color: var(--paper); }
.mobilne-menu__sluzby .ikona-box { width: 42px; height: 42px; border-radius: 12px; background: rgba(134,187,70,.14); color: var(--green); }
.mobilne-menu__sluzby .ikona-box .ikona { width: 22px; height: 22px; }
.mobilne-menu__kontakt { display: grid; gap: 14px; margin-top: auto; }
.mobilne-menu__telefon { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem); letter-spacing: -.03em; line-height: 1; color: var(--paper); text-decoration: none; font-variant-numeric: tabular-nums; }
.mobilne-menu__telefon:hover { color: var(--green); }
.mobilne-menu__info { display: grid; gap: 6px; color: #A9ADA4; font-size: 1rem; }
.mobilne-menu__info a { color: #E4E2DA; font-weight: 650; text-decoration: none; }
.mobilne-menu__info a:hover { color: var(--green); }
.mobilne-menu .stitok-pasik { flex: none; }
/* postupné objavenie položiek */
.mobilne-menu__zoznam > li, .mobilne-menu__kontakt { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li, .mobilne-menu.je-otvorene .mobilne-menu__kontakt { opacity: 1; transform: none; }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li:nth-child(1) { transition-delay: .12s; }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li:nth-child(2) { transition-delay: .16s; }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li:nth-child(3) { transition-delay: .2s; }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li:nth-child(4) { transition-delay: .24s; }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li:nth-child(5) { transition-delay: .28s; }
.mobilne-menu.je-otvorene .mobilne-menu__zoznam > li:nth-child(6) { transition-delay: .32s; }
.mobilne-menu.je-otvorene .mobilne-menu__kontakt { transition-delay: .36s; }
@media (min-width: 1080px) { .mobilne-menu { display: none !important; } }

/* 13. PÄTA, COOKIE LIŠTA, MOBIL-LIŠTA ==================================== */
.paticka {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--c-text);
  padding-top: clamp(72px, 9vw, 140px);
  font-size: 1rem;
}
.paticka a { color: #E4E2DA; text-decoration: none; }
.paticka a:hover { color: var(--green); text-decoration: underline; }
.paticka__cta { display: grid; gap: 32px; align-items: end; padding-bottom: clamp(48px, 6vw, 88px); }
@media (min-width: 960px) { .paticka__cta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.paticka__cta-nadpis { font-size: clamp(2.5rem, 1.6rem + 4vw, 5.5rem); line-height: .98; letter-spacing: -.032em; color: var(--paper); max-width: 12em; }
.paticka__cta-nadpis em { color: var(--green); }
.paticka__cta-bok { display: grid; gap: 20px; justify-items: start; }
@media (min-width: 960px) { .paticka__cta-bok { justify-items: end; text-align: right; } }
.paticka__telefon { display: inline-flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -.035em; line-height: 1; color: var(--paper) !important; font-variant-numeric: tabular-nums; }
.paticka__telefon small { font-family: var(--font-text); font-size: .9375rem; font-weight: 650; letter-spacing: 0; color: #A9ADA4; margin-bottom: 8px; }
.paticka__telefon:hover { color: var(--green) !important; text-decoration: none !important; }
.paticka__mriezka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--c-linka); }
.paticka__znacka, .paticka__mriezka > :last-child { grid-column: 1 / -1; }
@media (min-width: 1100px) { .paticka__znacka, .paticka__mriezka > :last-child { grid-column: auto; } }
@media (min-width: 1100px) { .paticka__mriezka { grid-template-columns: minmax(0, 3.2fr) repeat(3, minmax(0, 1.7fr)) minmax(0, 3fr); } }
.paticka__nadpis { font-family: var(--font-text); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #A9ADA4; margin-bottom: 18px; }
.paticka__odkazy { display: grid; gap: 4px; padding: 0; margin: 0; }
.paticka__odkazy a { display: inline-block; padding: 6px 0; font-weight: 600; }
.paticka__odkazy a .ikona { display: inline-block; vertical-align: -2px; margin-inline: 2px 6px; }
.paticka__odkazy .ikona { width: 16px; height: 16px; }
.paticka__znacka > * + * { margin-top: 18px; }
.paticka__znacka img { height: 42px; width: auto; }
.paticka__claim { color: #C9CCC4; max-width: 24em; }
.paticka__kontakt { display: grid; gap: 12px; padding: 0; margin: 0; }
.paticka__kontakt li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.45; }
.paticka__kontakt .ikona { width: 20px; height: 20px; color: var(--green); margin-top: 2px; }
.paticka__kontakt small { display: block; color: #A9ADA4; font-size: .875rem; }
.paticka__clanky { display: grid; gap: 14px; padding: 0; margin: 0; }
.paticka__clanky a { display: block; font-weight: 650; line-height: 1.35; }
.paticka__clanky time { display: block; font-size: .8125rem; color: #A9ADA4; margin-top: 4px; font-weight: 600; }
.paticka__udaje { padding-block: 24px; border-top: 1px solid var(--c-linka); font-size: .9375rem; color: #A9ADA4; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.paticka__udaje strong { color: #E4E2DA; }
.paticka__spodok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px 28px; font-size: .9375rem; color: #A9ADA4; }
.paticka__spodok ul { list-style: none; align-items: center; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0; }
.paticka__spodok a, .paticka__spodok button { color: #E4E2DA; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; min-height: 32px; font-size: inherit; }
.paticka__spodok button:hover { color: var(--green); }
/* dekor: energetické triedy cez celú šírku */
.paticka__triedy { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 0; }
.paticka__triedy li {
  display: flex; align-items: flex-end; padding: 0 0 8px 12px;
  background: var(--tr); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, .7rem + 1.4vw, 1.75rem); line-height: 1;
  border-radius: 10px 10px 0 0; opacity: .92;
  transform-origin: 50% 100%; transition: transform .5s var(--ease), opacity var(--t);
}
.paticka__triedy li:nth-child(1) { --tr: var(--tr-a); height: clamp(48px, 6.2vw, 92px); }
.paticka__triedy li:nth-child(2) { --tr: var(--tr-b); height: clamp(45px, 5.8vw, 85px); }
.paticka__triedy li:nth-child(3) { --tr: var(--tr-c); height: clamp(42px, 5.4vw, 78px); }
.paticka__triedy li:nth-child(4) { --tr: var(--tr-d); height: clamp(39px, 5vw, 71px); }
.paticka__triedy li:nth-child(5) { --tr: var(--tr-e); height: clamp(36px, 4.6vw, 64px); }
.paticka__triedy li:nth-child(6) { --tr: var(--tr-f); height: clamp(33px, 4.2vw, 57px); }
.paticka__triedy li:nth-child(7) { --tr: var(--tr-g); height: clamp(30px, 3.8vw, 50px); color: #fff; }
.paticka__triedy { align-items: end; }
.paticka__triedy li:hover { transform: scaleY(1.08); opacity: 1; }

/* cookie lišta */
.cookie-lista {
  position: fixed; z-index: 120; left: 12px; right: 12px; bottom: 12px;
  max-width: 620px; max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: clamp(20px, 2.4vw, 28px); border-radius: 22px;
  background: var(--ink-2); color: #E4E2DA;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  font-size: .9688rem; line-height: 1.55;
  --c-nadpis: var(--paper); --c-odkaz: var(--green); --c-focus: var(--green); --c-linka: rgba(244,242,236,.16); --c-bg: var(--ink-2);
  animation: od-cookie .6s var(--ease) both;
}
@media (min-width: 768px) { .cookie-lista { left: 24px; bottom: 24px; } }
@keyframes od-cookie { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cookie-lista__nadpis { font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; color: var(--paper); margin-bottom: 8px; letter-spacing: -.01em; }
.cookie-lista a { color: var(--green); }
.cookie-lista__tlacidla { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
@media (min-width: 480px) { .cookie-lista__tlacidla { grid-template-columns: repeat(3, 1fr); } }
.cookie-lista__tlacidla .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bg-h: var(--green); --btn-fg-h: var(--ink); min-height: 50px; padding: 0 16px; }
.cookie-lista__nastavenia { margin-top: 18px; display: grid; gap: 10px; }
.prepinac { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(244,242,236,.06); cursor: pointer; }
.prepinac strong { color: var(--paper); font-size: 1rem; }
.prepinac small { grid-column: 1; color: #A9ADA4; font-size: .875rem; line-height: 1.4; }
.prepinac input { grid-row: 1 / span 2; grid-column: 2; appearance: none; -webkit-appearance: none; width: 52px; height: 30px; border-radius: 30px; background: #4A5047; position: relative; cursor: pointer; transition: background var(--t); margin: 0; }
.prepinac input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transition: transform var(--t) var(--ease); }
.prepinac input:checked { background: var(--green); }
.prepinac input:checked::after { transform: translateX(22px); }
.prepinac input:disabled { opacity: .6; cursor: not-allowed; }
.prepinac input:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* lepiaca spodná lišta na mobile */
.mobil-lista {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,250,246,.96); box-shadow: 0 -1px 0 rgba(18,20,18,.08), 0 -16px 36px -18px rgba(18,20,18,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .45s var(--ease);
}
.mobil-lista .btn { min-height: 52px; padding: 0 14px; font-size: 1rem; }
.mobil-lista.je-skryta { transform: translateY(110%); }
@media (min-width: 768px) { .mobil-lista { display: none; } }
@media (max-width: 767px) { .paticka { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } }

/* 14. FORMULÁRE ========================================================== */
.formular { display: grid; gap: 20px; }
.formular__polia { display: grid; gap: 20px; }
.formular__riadok { display: grid; gap: 20px; }
@media (min-width: 640px) { .formular__riadok { grid-template-columns: 1fr 1fr; } }
.pole { display: grid; gap: 8px; align-content: start; }
.pole__label { font-weight: 750; font-size: 1rem; color: var(--c-nadpis); line-height: 1.3; }
.pole__povinne { color: var(--heat-deep); margin-left: 2px; }
.pole__volitelne { font-weight: 600; color: var(--c-muted); font-size: .875rem; }
.pole__vstup, .formular input[type="text"], .formular input[type="tel"], .formular input[type="email"], .formular input[type="number"], .formular select, .formular textarea {
  width: 100%; min-height: 56px; padding: 14px 18px;
  border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink);
  font-size: 1.0625rem; line-height: 1.4; font-weight: 550;
  transition: border-color var(--t-rychly), box-shadow var(--t-rychly), background var(--t-rychly);
}
.formular textarea { min-height: 128px; resize: vertical; }
.formular select { appearance: none; -webkit-appearance: none; padding-right: 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23121412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 20px no-repeat; }
.pole__vstup::placeholder, .formular ::placeholder { color: #8A8E86; opacity: 1; font-weight: 500; }
.pole__vstup:hover, .formular input:hover, .formular textarea:hover, .formular select:hover { border-color: #B8B3A4; }
.pole__vstup:focus, .formular input:focus, .formular textarea:focus, .formular select:focus { outline: none; border-color: var(--green-deep); box-shadow: 0 0 0 4px rgba(134,187,70,.28); }
.pole--chyba .pole__vstup, .formular [aria-invalid="true"] { border-color: var(--heat-2); background: #FFF8F4; }
.pole--chyba .pole__vstup:focus, .formular [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(226,58,30,.18); }
.pole--ok .pole__vstup { border-color: var(--green-deep); }
.pole__chyba { display: flex; align-items: flex-start; gap: 8px; color: var(--heat-deep); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.pole__chyba::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--heat-2); color: #fff; font-size: .75rem; font-weight: 900; margin-top: 1px; }
.pole__napoveda { font-size: .875rem; color: var(--c-muted); }
.pole-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.suhlas { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9688rem; line-height: 1.5; cursor: pointer; }
.suhlas input {
  appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 8px;
  border: 1.5px solid #A9A493; background: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-rychly), border-color var(--t-rychly);
}
.suhlas input::after { content: ""; width: 12px; height: 7px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform var(--t-rychly) var(--ease); }
.suhlas input:checked { background: var(--green); border-color: var(--green); }
.suhlas input:checked::after { transform: rotate(-45deg) scale(1); }
.suhlas input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.suhlas input[aria-invalid="true"] { border-color: var(--heat-2); }
.suhlas .pole__chyba { grid-column: 2; }
.formular__odoslat { justify-self: start; }
.formular__pata { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.formular__pata small { color: var(--c-muted); }
.formular__stav:empty { display: none; }
.formular__stav { padding: 12px 16px; border-radius: 12px; background: #FBEDE4; color: var(--heat-deep); font-weight: 700; font-size: .9375rem; }
.formular__podakovanie { display: grid; gap: 14px; justify-items: start; padding: clamp(8px, 2vw, 20px) 0; }
.formular__podakovanie:focus { outline: none; }
.formular__podakovanie-ikona { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: var(--ink); animation: od-pop .6s var(--ease) both; }
.formular__podakovanie-ikona .ikona { width: 34px; height: 34px; stroke-width: 2.4; }
@keyframes od-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.formular--odoslane .formular__polia { display: none; }
.formular.je-odosielany .formular__odoslat { opacity: .6; pointer-events: none; }
/* polia v tmavom kontexte */
.formular--tmavy .pole__vstup, .formular--tmavy input:not([type="checkbox"]):not([type="radio"]), .formular--tmavy textarea, .formular--tmavy select {
  background: rgba(244,242,236,.06); border-color: rgba(244,242,236,.24); color: var(--paper);
}
.formular--tmavy .pole__chyba { color: #FF9D78; }
.formular--tmavy .pole__label, .formular--tmavy legend { color: var(--paper); }
.formular--tmavy .pole__povinne { color: var(--heat-3); }
.pole:has(.suhlas) > .pole__chyba { padding-left: 38px; }

/* CTA sekcia (partial) */
.cta-sekcia__vnutro { display: grid; gap: clamp(40px, 5vw, 80px); align-items: start; }
.cta-sekcia__vnutro > * { min-width: 0; }
@media (min-width: 1000px) { .cta-sekcia__vnutro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.cta-sekcia__uvod > * + * { margin-top: 22px; }
.cta-sekcia__nadpis { font-size: clamp(2.375rem, 1.7rem + 2.9vw, 4.5rem); line-height: 1; letter-spacing: -.032em; }
.cta-sekcia__telefon { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px !important; color: var(--paper); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cta-sekcia__telefon .ikona-kruh { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: var(--ink); flex: none; transition: transform var(--t) var(--ease); }
.cta-sekcia__telefon .ikona-kruh .ikona { width: 24px; height: 24px; }
.cta-sekcia__telefon:hover { color: var(--green); }
.cta-sekcia__telefon:hover .ikona-kruh { transform: rotate(-12deg) scale(1.05); }
.cta-sekcia__hodiny { color: var(--c-muted); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.cta-sekcia__hodiny .ikona { color: var(--green); }
.cta-sekcia__kroky { display: grid; gap: 0; margin-top: 36px !important; padding: 0; counter-reset: ck; border-top: 1px solid var(--c-linka); }
.cta-sekcia__kroky li { counter-increment: ck; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--c-linka); }
.cta-sekcia__kroky li::before { content: "0" counter(ck); font-family: var(--font-display); font-weight: 800; color: var(--green); font-size: 1.125rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.cta-sekcia__kroky strong { display: block; color: var(--paper); font-size: 1.0625rem; }
.cta-sekcia__kroky span { color: var(--c-muted); font-size: .9688rem; line-height: 1.5; }
.cta-sekcia__formular {
  --c-bg: var(--paper-3); --c-text: var(--text); --c-nadpis: var(--ink); --c-muted: var(--muted); --c-odkaz: var(--green-deep); --c-linka: var(--line); --c-plocha: var(--paper-2); --c-plocha-2: #fff; --c-focus: var(--green-deep); --c-akcent: var(--green-deep);
  position: relative; padding: clamp(24px, 3.4vw, 48px); border-radius: clamp(22px, 2.4vw, 30px);
  background: var(--paper-3); color: var(--text);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.6);
  color-scheme: light;
}
.cta-sekcia__formular-nadpis { font-size: var(--fs-h3); margin-bottom: 6px; }
.cta-sekcia__formular > .stitok-pasik { position: absolute; left: clamp(24px, 3.4vw, 48px); top: 0; width: 120px; height: 5px; border-radius: 0 0 4px 4px; }

/* 15. ZNAČKY NA OVERENIE ================================================= */
.doplnit {
  display: inline; padding: .05em .4em; border-radius: 5px;
  border: 1.5px dashed var(--heat); background: rgba(255,106,43,.08);
  color: var(--heat-deep); font-weight: 700; font-size: .92em; font-family: var(--font-text); letter-spacing: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sekcia--tmava .doplnit, .paticka .doplnit, .kontext-tmavy .doplnit, .mega__dotacia .doplnit, .dotacia-box .doplnit { color: var(--heat-3); background: rgba(255,181,71,.08); border-color: var(--heat-3); }
html.overit [data-overit] { background: #FFE66B !important; color: #121412 !important; -webkit-text-fill-color: #121412; outline: 2px solid #D4A900; outline-offset: 1px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
html.overit .doplnit { background: #FFD6C2; outline: 2px solid var(--heat-2); color: #7A1E0A; }
.overit-panel {
  position: fixed; z-index: 130; right: 12px; top: calc(var(--hlavicka-h) + 12px);
  display: grid; gap: 6px; max-width: 280px; padding: 14px 16px; border-radius: 16px;
  background: #FFE66B; color: #121412; font-size: .875rem; line-height: 1.4; box-shadow: var(--tien-plavajuci);
}
.overit-panel strong { color: #121412; }
.overit-panel button { justify-self: start; font-weight: 800; text-decoration: underline; min-height: 32px; }

/* 16. REVEAL ANIMÁCIE ==================================================== */
@property --em-ciara { syntax: '<color>'; inherits: false; initial-value: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.noanim) [data-reveal]:not(.je-odhalene),
  html.js:not(.noanim) [data-reveal-group] > :not(.je-odhalene) { opacity: 0; transform: translateY(34px); }
  html.js:not(.noanim) [data-reveal="fade"]:not(.je-odhalene) { transform: none; }
  html.js:not(.noanim) [data-reveal="scale"]:not(.je-odhalene), html.js:not(.noanim) [data-reveal-group="scale"] > :not(.je-odhalene) { transform: scale(.94); }
  html.js:not(.noanim) [data-reveal-group="fade"] > :not(.je-odhalene) { transform: none; }
  html.js:not(.noanim) [data-reveal="lines"].je-rozdelene { opacity: 1; transform: none; }
  html.js:not(.noanim) [data-reveal], html.js:not(.noanim) [data-reveal-group] > * {
    transition: opacity .9s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--oneskorenie, 0ms);
  }
  html.js:not(.noanim) [data-reveal-group] > .je-odhalene { transition: opacity .9s var(--ease) var(--oneskorenie, 0ms), transform 1.1s var(--ease) var(--oneskorenie, 0ms), box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
  /* po riadkoch: slová sú zabalené v .rl-w > .rl-i */
  .rl-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .05em .16em; margin: -.14em -.05em -.16em; }
  .rl-i { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .5s ease; transition-delay: calc(var(--riadok, 0) * 120ms + var(--oneskorenie, 0ms)); }
  .je-odhalene .rl-i { transform: none; opacity: 1; }
  /* podčiarknutie zvýrazneného slova (<em>): počas príchodu slov je NEVIDITEĽNÉ a objaví sa (plynulé zosvetlenie farby,
     žiadne kreslenie zľava doprava) až keď dosadne posledné slovo zvýraznenia – --em-riadok nastavuje main.js */
  html.js:not(.noanim) [data-reveal="lines"].je-rozdelene em {
    --em-ciara: transparent;
    background-image: linear-gradient(var(--em-ciara), var(--em-ciara));
    transition: --em-ciara .6s ease calc(var(--em-riadok, 0) * 120ms + 1.05s + var(--oneskorenie, 0ms));
  }
  html.js:not(.noanim) [data-reveal="lines"].je-rozdelene.je-odhalene em { --em-ciara: var(--green); }
  /* poistka: ak by sa main.js nenačítal, obsah sa po 4 s ukáže */
  html.js:not(.od-ready) [data-reveal], html.js:not(.od-ready) [data-reveal-group] > * { animation: od-poistka 0s 4s forwards; }
}
@keyframes od-poistka { to { opacity: 1; transform: none; } }

/* 17. TLAČ =============================================================== */
@media print {
  .hlavicka, .mobil-lista, .cookie-lista, .mobilne-menu, .overit-panel, .skip-link, .galeria-h__sipky, .paticka__triedy, .marquee { display: none !important; }
  body { background: #fff; color: #000; padding: 0 !important; font-size: 11pt; }
  .sekcia, .paticka, .hero-sluzba { padding-block: 24px; background: #fff !important; color: #000 !important; --c-bg: #fff; --c-text: #000; --c-nadpis: #000; --c-muted: #333; }
  .sekcia::before, .paticka::before { display: none; }
  [data-reveal], [data-reveal-group] > *, .rl-i { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .btn { border: 1px solid #000; background: none !important; color: #000 !important; }
  .faq__odpoved { height: auto !important; }
  img { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* E-shop klimatizácií v hlavnom menu (namiesto položky Radca) – zvýraznený zeleným obrysom, otvára sa v novom okne */
.hlavne-menu__odkaz--eshop { box-shadow: inset 0 0 0 1.5px var(--green); }
.hlavne-menu__odkaz--eshop .ikona { width: 14px; height: 14px; opacity: .8; }
@media (min-width: 1080px) and (max-width: 1279px) { .hlavne-menu__odkaz--eshop .ikona { display: none; } }
@media (min-width: 1080px) and (max-width: 1419px) {
  .hlavicka__telefon > span:last-child { display: none; }
  .hlavne-menu__odkaz { padding: 0 8px; font-size: .9375rem; }
  .hlavicka__cta.btn { padding: 0 16px; font-size: .9375rem; }
  .hlavicka__cta.btn .ikona { display: none; }
  .hlavicka__logo img { height: 36px; }
}

/* ==========================================================================
   18. FAREBNÉ PLOCHY S PRELÍNANÍM NA PODSTRÁNKACH (inšpirácia 89co.eu, vo farbách webu)
   Striedajú sa so svetlými sekciami, aby stránka nebola „v jednom duchu". Bez zásahu do HTML:
     · .sekcia--tmava            → hlboká lesná zelená s mäkkými svetlami
     · sekcia s animáciou (.ao-) → nočná zelená (okno animácie je tmavé, sadne do nej)
     · .sekcia--zelena (záver)   → sýta značková zelená
     · CTA s formulárom          → tmavá s teplým zeleným svitom
   Plochy sú odsadené od okrajov a majú veľké zaoblenie ako panel. Domovská stránka má vlastný štýl.
   ========================================================================== */
body:not([data-page="domov"]) main > .sekcia--tmava:not(.cta-sekcia),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka),
body:not([data-page="domov"]) main > .sekcia--zelena,
main > .cta-sekcia {
  --gp-okraj: clamp(8px, 1.4vw, 20px);
  margin: var(--gp-okraj); border-radius: clamp(22px, 3vw, 44px); overflow: clip; isolation: isolate;
  padding-block: clamp(56px, 7vw, 112px);
}
/* 1) hlboká lesná zelená */
body:not([data-page="domov"]) main > .sekcia--tmava:not(.cta-sekcia) {
  background:
    radial-gradient(90% 85% at 0% 0%, rgba(74,150,52,.85) 0%, rgba(74,150,52,0) 58%),
    radial-gradient(70% 70% at 100% 8%, rgba(134,187,70,.30) 0%, rgba(134,187,70,0) 60%),
    radial-gradient(85% 90% at 100% 100%, rgba(8,30,18,.95) 0%, rgba(8,30,18,0) 62%),
    linear-gradient(155deg, #2a6b2a 0%, #14391f 46%, #0b1f13 100%);
}
/* 2) sekcia s animáciou – nočná zelená, tmavý kontext */
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) {
  --c-bg: #0f2418; --c-text: #E4E2DA; --c-nadpis: var(--paper); --c-muted: #B4BBAF; --c-odkaz: var(--green);
  --c-linka: rgba(244,242,236,.16); --c-plocha: rgba(255,255,255,.06); --c-plocha-2: rgba(255,255,255,.1); --c-focus: var(--green); --c-akcent: var(--green);
  color: var(--c-text); color-scheme: dark;
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(63,107,31,.9) 0%, rgba(63,107,31,0) 60%),
    radial-gradient(60% 60% at 95% 30%, rgba(134,187,70,.22) 0%, rgba(134,187,70,0) 62%),
    radial-gradient(90% 80% at 50% 110%, rgba(5,18,11,.95) 0%, rgba(5,18,11,0) 60%),
    linear-gradient(170deg, #173a22 0%, #0f2418 55%, #0a1710 100%);
}
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) :is(h2, h3, strong) { color: var(--paper); }
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) .ao-text em { color: var(--green); }
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) .ao-text :is(li, li > span, p:not(.eyebrow)) { color: #DCDDD4; }
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) .ao-body .ikona,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) li .ikona { background: rgba(134,187,70,.2); color: var(--green); }
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka) .ao-okno { border-color: rgba(255,255,255,.14); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
/* 3) záverečný pás – sýta značková zelená */
body:not([data-page="domov"]) main > .sekcia--zelena {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(190,230,120,.95) 0%, rgba(190,230,120,0) 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(74,140,40,.75) 0%, rgba(74,140,40,0) 62%),
    linear-gradient(135deg, #a5d65e 0%, #86BB46 48%, #6ea83a 100%);
  --c-text: #16240c; --c-nadpis: #0f1a08; --c-muted: #2c3d1a; --c-akcent: #14320a; --c-odkaz: #14320a;
}
body:not([data-page="domov"]) main > .sekcia--zelena em { color: #14320a; background-image: linear-gradient(#14320a, #14320a); }
/* 4) CTA s formulárom – tmavá so zeleným svitom (na všetkých stránkach) */
main > .cta-sekcia {
  background:
    radial-gradient(75% 80% at 0% 0%, rgba(63,107,31,.75) 0%, rgba(63,107,31,0) 58%),
    radial-gradient(55% 60% at 100% 100%, rgba(134,187,70,.22) 0%, rgba(134,187,70,0) 60%),
    linear-gradient(160deg, #16301d 0%, #121412 52%, #0c0e0c 100%);
}
/* dve farebné plochy tesne za sebou nech sa nezlievajú */
main > :is(.sekcia--tmava, .sekcia--zelena, .cta-sekcia) + :is(.sekcia--tmava, .sekcia--zelena, .cta-sekcia) { margin-top: calc(var(--gp-okraj, 12px) * -0.25); }
@media print { main > .sekcia { margin: 0 !important; border-radius: 0 !important; background: #fff !important; } }
/* striedanie: ak sekcia s animáciou nasleduje hneď po tmavej ploche (alebo je pred ňou), ostáva SVETLÝ panel */
body:not([data-page="domov"]) main > .sekcia--tmava + .sekcia:has(> .wrap.ao-mriezka),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ .sekcia--tmava) {
  --c-bg: var(--paper-2); --c-text: var(--text); --c-nadpis: var(--ink); --c-muted: var(--muted); --c-odkaz: var(--green-deep);
  --c-linka: var(--line); --c-plocha: var(--paper); --c-plocha-2: var(--paper-3); --c-focus: var(--green-deep); --c-akcent: var(--green-deep);
  color: var(--text); color-scheme: light;
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(134,187,70,.22) 0%, rgba(134,187,70,0) 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(63,107,31,.12) 0%, rgba(63,107,31,0) 60%),
    var(--paper-2);
}
body:not([data-page="domov"]) main > .sekcia--tmava + .sekcia:has(> .wrap.ao-mriezka) :is(h2, h3, strong),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ .sekcia--tmava) :is(h2, h3, strong) { color: var(--ink); }
body:not([data-page="domov"]) main > .sekcia--tmava + .sekcia:has(> .wrap.ao-mriezka) .ao-text em,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ .sekcia--tmava) .ao-text em { color: var(--green-deep); }
body:not([data-page="domov"]) main > .sekcia--tmava + .sekcia:has(> .wrap.ao-mriezka) .ao-text :is(li, li > span, p:not(.eyebrow)),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ .sekcia--tmava) .ao-text :is(li, li > span, p:not(.eyebrow)) { color: var(--text); }
body:not([data-page="domov"]) main > .sekcia--tmava + .sekcia:has(> .wrap.ao-mriezka) li .ikona,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ .sekcia--tmava) li .ikona { background: var(--green-soft); color: var(--green-deep); }
/* 5) každá druhá svetlá sekcia (.sekcia--papier2) je na podstránkach jemne zelenkastý zaoblený panel */
body:not([data-page="domov"]) main > .sekcia--papier2:not(:has(> .wrap.ao-mriezka)) {
  --gp-okraj: clamp(8px, 1.4vw, 20px);
  margin: var(--gp-okraj); border-radius: clamp(22px, 3vw, 44px); overflow: clip;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(134,187,70,.26) 0%, rgba(134,187,70,0) 62%),
    radial-gradient(55% 70% at 100% 100%, rgba(63,107,31,.14) 0%, rgba(63,107,31,0) 60%),
    linear-gradient(135deg, #eef1e2 0%, var(--paper-2) 55%, #e6e3d6 100%);
}

/* ==========================================================================
   19. MENU BEZ CHVENIA
   Panel bol centrovaný cez left:50 % + translate(-50 %) → poloha na pol pixela, text sa pri animácii triasol.
   Teraz je centrovaný okrajmi (celé pixely) a animuje sa len jemný zvislý posun. Ikony sa pri prechode myšou NEHÝBU.
   ========================================================================== */
.mega { left: 0; right: 0; margin-inline: auto; transform: translateY(-8px); backface-visibility: hidden; }
.mega.je-otvorene, html:not(.js) .hlavne-menu__polozka--mega:hover .mega, html:not(.js) .hlavne-menu__polozka--mega:focus-within .mega { transform: none; }
.mega__sluzba .ikona-box, .mega__sluzba:hover .ikona-box { transform: none; transition: background var(--t-rychly), color var(--t-rychly); }
.mega__vsetky .ikona, .mega__vsetky:hover .ikona,
.mega__dotacia .btn--text .ikona, .mega__dotacia:hover .btn--text .ikona,
.mega__eshop > .ikona:last-child, .mega__eshop:hover > .ikona:last-child,
.hlavne-menu__odkaz .ikona, .hlavne-menu__odkaz:hover .ikona { transform: none; transition: none; }
.hlavne-menu__odkaz[aria-expanded="true"] .ikona { transform: rotate(180deg); }
.hlavicka__cta.btn .ikona, .hlavicka__cta.btn:hover .ikona { transform: none; }

/* ==========================================================================
   20. TLAČIDLÁ – jednotný, čistý vzhľad
   Hover už nie je „prebiehajúca výplň" pseudo-prvkom (na zaoblení nechávala zvyšky rámika), ale plynulá zmena
   farby pozadia; rámik má vždy farbu tlačidla. Na zelených plochách má každé tlačidlo čitateľný hover.
   ========================================================================== */
.btn {
  --btn-border: var(--btn-bg);
  border: 1.5px solid var(--btn-border); background-color: var(--btn-bg); background-clip: padding-box;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-rychly) var(--ease), box-shadow var(--t) var(--ease);
}
.btn::before { content: none; }
.btn:hover { background-color: var(--btn-bg-h); border-color: var(--btn-bg-h); color: var(--btn-fg-h); }
.btn--obrys { --btn-border: currentColor; }
.btn--obrys:hover { border-color: var(--btn-bg-h); }
.btn:focus-visible { outline: 3px solid var(--c-focus, var(--green-deep)); outline-offset: 3px; }
.btn .ikona, .btn:hover .ikona, .btn:hover .ikona:last-child:not(:first-child), .btn:hover .ikona--von:last-child { transform: none; }
/* textové tlačidlo nemá plochu ani rámik */
.btn--text, .btn--text:hover { background-color: transparent; border-color: transparent; }
/* zelené plochy: primárne (zelené) tlačidlo by splynulo → tmavé; hover vždy biely s tmavým textom */
.sekcia--zelena .btn--primarne, .bento__dlazdica--zelena .btn--primarne, .db-vyzva .btn--primarne { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.sekcia--zelena .btn--primarne, .sekcia--zelena .btn--tmave, .sekcia--zelena .btn--svetle,
.bento__dlazdica--zelena .btn, .db-vyzva .btn { --btn-bg-h: #fff; --btn-fg-h: var(--ink); }
.sekcia--zelena .btn--obrys, .bento__dlazdica--zelena .btn--obrys { --btn-fg: var(--ink); --btn-border: var(--ink); --btn-bg-h: var(--ink); --btn-fg-h: #fff; }
/* tmavé a farebné plochy s prelínaním: obrysové tlačidlo svetlé, hover biely */
.sekcia--tmava .btn--obrys, .kontext-tmavy .btn--obrys, .hero-sluzba .btn--obrys { --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); }

/* ==========================================================================
   21. VÝRAZNÁ ÚVODNÁ SEKCIA KAŽDEJ PODSTRÁNKY – lesná zelená s prelínaním, zaoblený panel, svetlý text
   ========================================================================== */
body:not([data-page="domov"]) main > .hero-sluzba {
  --c-bg: #123020; --c-text: #E4E6DC; --c-nadpis: #fff; --c-muted: #B9C2B2; --c-odkaz: var(--green);
  --c-linka: rgba(244,242,236,.18); --c-plocha: rgba(255,255,255,.08); --c-plocha-2: rgba(255,255,255,.12); --c-focus: var(--green); --c-akcent: var(--green);
  --gp-okraj: clamp(8px, 1.4vw, 20px);
  margin: 0 var(--gp-okraj) var(--gp-okraj); border-radius: clamp(22px, 3vw, 44px); overflow: clip; isolation: isolate;
  color: var(--c-text); color-scheme: dark;
  background:
    radial-gradient(85% 90% at 0% 0%, rgba(98,170,60,.9) 0%, rgba(98,170,60,0) 56%),
    radial-gradient(60% 70% at 100% 0%, rgba(134,187,70,.35) 0%, rgba(134,187,70,0) 60%),
    radial-gradient(90% 90% at 100% 100%, rgba(6,24,14,.95) 0%, rgba(6,24,14,0) 62%),
    linear-gradient(150deg, #2f7a2c 0%, #17422a 44%, #0b2014 100%);
}
body:not([data-page="domov"]) main > .hero-sluzba :is(h1, h2, h3, strong, .hero-sluzba__nadpis) { color: #fff; }
body:not([data-page="domov"]) main > .hero-sluzba h1 em { color: var(--green); background-image: linear-gradient(var(--green), var(--green)); }
body:not([data-page="domov"]) main > .hero-sluzba :is(.lead, p, li, dd, dt, small, figcaption) { color: var(--c-text); }
body:not([data-page="domov"]) main > .hero-sluzba .eyebrow { color: #fff; }
body:not([data-page="domov"]) main > .hero-sluzba :is(.breadcrumbs, .breadcrumbs a, .breadcrumbs li, [class*="breadcrumb"] a, [class*="breadcrumb"] li) { color: #CBD3C4; }
body:not([data-page="domov"]) main > .hero-sluzba [aria-current="page"] { color: #fff; }
body:not([data-page="domov"]) main > .hero-sluzba .btn--primarne { --btn-bg-h: #fff; --btn-fg-h: var(--ink); }
body:not([data-page="domov"]) main > .hero-sluzba .btn--tmave { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bg-h: var(--green); --btn-fg-h: var(--ink); }
body:not([data-page="domov"]) main > .hero-sluzba .btn--obrys { --btn-fg: #fff; --btn-border: rgba(255,255,255,.7); }
body:not([data-page="domov"]) main > .hero-sluzba .btn--text { color: #fff; }
body:not([data-page="domov"]) main > .hero-sluzba a:not(.btn) { color: var(--green); }
body:not([data-page="domov"]) main > .hero-sluzba img { box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
/* svetlé plávajúce kartičky v hero ostávajú svetlé s tmavým textom; omrvinky svetlé */
body:not([data-page="domov"]) main > .hero-sluzba .hero-sluzba__plavajuci,
body:not([data-page="domov"]) main > .hero-sluzba .hero-sluzba__plavajuci :is(strong, span, small, p) { color: var(--ink); }
body:not([data-page="domov"]) main > .hero-sluzba .hero-sluzba__plavajuci span:not(.trieda):not([data-overit]) { color: var(--muted); }
body:not([data-page="domov"]) main > .hero-sluzba :is(nav, ol, ul)[class*="breadcrumb"] a,
body:not([data-page="domov"]) main > .hero-sluzba .breadcrumbs a { color: #D5DCCD; }
body:not([data-page="domov"]) main > .hero-sluzba .breadcrumbs a:hover { color: #fff; }
/* oprava po audite tlačidiel: textové tlačidlo si pri hoveri drží vlastnú farbu; zelené tlačidlo vo svetlej karte formulára tmavne */
.btn--text, .btn--text:hover { border: 0; padding: 0; }
.btn--text:hover { color: var(--c-nadpis); }
body:not([data-page="domov"]) main > .hero-sluzba .btn--text:hover { color: var(--green); }
.cta-sekcia__formular .btn--primarne, .hero-kontakt__karta .btn--primarne { --btn-bg-h: var(--ink); --btn-fg-h: var(--green); }

/* ==========================================================================
   21b. BEZ VIACFAREBNÝCH VZOROV (želanie klienta: žiadne dúhové pásiky energetických tried nikde na webe)
   · dekoratívne pásiky (.stitok-pasik) sú skryté, značka nad nadpisom (.eyebrow) má jednofarebnú zelenú čiarku,
   · všetky prelínania a akcenty, ktoré brali farby tried A–G, sú v jednej zelenej,
   · stupnica tried (písmená A–G pri certifikátoch) je v odtieňoch zelenej – poradie je čitateľné, ale nie je to dúha.
   ========================================================================== */
:root {
  --pasik-ag: linear-gradient(var(--green), var(--green));
  --pasik-ga: linear-gradient(var(--green), var(--green));
  --tr-a: #4E8F2A; --tr-b: #6FA83C; --tr-c: #86BB46; --tr-d: #A3CB72;
  --tr-e: #BCD89A; --tr-f: #D0E3BA; --tr-g: #E1EAD5;
}
.stitok-pasik, .kroky__pasik { display: none !important; }
.eyebrow::before, .eyebrow--termo::before { width: 1.6em; height: 3px; border-radius: 2px; background: var(--green); }
.poznamka--vedeli::after, .pribeh__zaver-box::before { background: var(--green); }
.on-hodnota, .cisla__polozka { --tr: var(--green); }
.kroky::before, .kroky--vodorovne::before { background: var(--green) !important; }
/* tlačidlá sa pri prechode myšou nehýbu (magnetický efekt vypnutý) */
[data-magnet] { transform: none !important; }
/* IKONY SA PRI PRECHODE MYŠOU NENAKLÁŇAJÚ (želanie klienta) – iba zmena farby */
.karta:has(.karta__odkaz):hover .ikona-box, .bento__dlazdica:has(.karta__odkaz):hover .ikona-box, .mega__sluzba:hover .ikona-box,
.hlavicka__telefon:hover .ikona-kruh, .cta-sekcia__telefon:hover .ikona-kruh { transform: none !important; }
/* rozbaľovacie menu Služby: bez dlaždice Dotácie (želanie klienta) – v bočnom stĺpci ostal len e-shop, zarovnaný hore */
.mega__mriezka { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* 9 služieb (od 30. 9. 2026 aj Pergoly a Obklady a dlažby) v mriežke 3 × 3 cez celú šírku */
.mega__sluzby { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.hlavne-menu__odkaz[data-mega-tlacidlo] { text-decoration: none; }
/* menu so 7 položkami (pribudol Blog): kompaktná hlavička až do 1560 px, pod 1200 px ešte užšia */
@media (min-width: 1080px) and (max-width: 1559px) {
  .hlavicka__telefon > span:last-child { display: none; }
  .hlavne-menu__odkaz { padding: 0 8px; font-size: .9375rem; }
  .hlavicka__cta.btn { padding: 0 16px; font-size: .9375rem; }
  .hlavicka__cta.btn .ikona { display: none; }
  .hlavicka__logo img { height: 36px; }
}
@media (min-width: 1560px) {   /* plná hlavička (s hodinami a číslom) je širšia než obsah stránky → lišta o 120 px širšia */
  .hlavicka__vnutro { width: min(100% - 2 * var(--okraj), var(--max) + 120px); }
  .hlavicka__lista::before { left: max(4px, calc((100% - var(--max) - 168px) / 2)); right: max(4px, calc((100% - var(--max) - 168px) / 2)); }
}
@media (min-width: 1080px) and (max-width: 1239px) {
  .hlavicka__vnutro { gap: 12px; }
  .hlavne-menu__odkaz { padding: 0 6px; font-size: .875rem; }
  .hlavne-menu__odkaz--eshop { padding: 0 10px; }
  .hlavicka__cta.btn { padding: 0 14px; font-size: .875rem; }
}

/* tlačidlo „späť hore" v spodnom riadku pätičky (len šípka) */
.paticka__spodok { position: relative; }
.paticka__hore {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; min-height: 48px; margin-left: auto; padding: 0;
  border: 0; border-radius: 50%; background: var(--green) !important; color: var(--ink) !important; text-decoration: none !important; cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.paticka__hore .ikona { width: 22px; height: 22px; transform: rotate(180deg); }
.paticka__hore:hover { background: var(--paper) !important; color: var(--ink) !important; }
.paticka__hore:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (max-width: 767px) { .paticka__hore { position: absolute; right: 0; top: 16px; } .paticka__spodok > p { padding-right: 60px; } }

/* ==========================================================================
   21c. CTA BEZ ZMIENKY O DOTÁCII (služby, na ktoré sa dotácia nevzťahuje – pergoly, katalóg obkladov)
   <section class="cta-sekcia" data-bez-dotacie> skryje všetko s [data-dotacia-zmienka] (vety v úvode a v krokoch, čip „Dotácia").
   Generuje tools/integracia_2026_09_30.py – časť sa dá prepísať opakovaným behom.
   ========================================================================== */
.cta-sekcia[data-bez-dotacie] [data-dotacia-zmienka] { display: none !important; }

/* ==========================================================================
   22. DVE ZELENÉ PLOCHY NIKDY ZA SEBOU
   Úvodná plocha, tmavé sekcie, sekcia s animáciou, záverečný zelený pás a formulár sú farebné. Ak by dve
   vyšli tesne za sebou, tá „slabšia" (animácia, záverečný pás, bežná tmavá sekcia) sa zmení na SVETLÝ panel
   s jemným zeleným nádychom. Generuje tools/uprav_plochy_paticka.py, kontrola: work/audit_plochy.py
   ========================================================================== */
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka),
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)),
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) {
  --c-bg: var(--paper-2); --c-text: var(--text); --c-nadpis: var(--ink); --c-muted: var(--muted); --c-odkaz: var(--green-deep);
  --c-linka: var(--line); --c-plocha: var(--paper); --c-plocha-2: var(--paper-3); --c-focus: var(--green-deep); --c-akcent: var(--green-deep);
  color: var(--text); color-scheme: light;
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(134,187,70,.24) 0%, rgba(134,187,70,0) 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(63,107,31,.13) 0%, rgba(63,107,31,0) 60%),
    linear-gradient(135deg, #eef1e2 0%, var(--paper-2) 55%, #e6e3d6 100%);
}
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka) :is(h2, h3, h4, strong),
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka) :is(h2, h3, h4, strong),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) :is(h2, h3, h4, strong),
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) :is(h2, h3, h4, strong),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena :is(h2, h3, h4, strong),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena :is(h2, h3, h4, strong),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) :is(h2, h3, h4, strong) { color: var(--ink); }
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka) em,
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka) em,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) em,
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) em,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena em,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena em,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) em { color: var(--green-deep); background-image: linear-gradient(var(--green), var(--green)); }
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka) :is(p:not(.eyebrow), li, li > span, dd, dt),
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka) :is(p:not(.eyebrow), li, li > span, dd, dt),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) :is(p:not(.eyebrow), li, li > span, dd, dt),
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) :is(p:not(.eyebrow), li, li > span, dd, dt),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena :is(p:not(.eyebrow), li, li > span, dd, dt),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena :is(p:not(.eyebrow), li, li > span, dd, dt),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) :is(p:not(.eyebrow), li, li > span, dd, dt) { color: var(--text); }
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka) .eyebrow,
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka) .eyebrow,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) .eyebrow,
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) .eyebrow,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena .eyebrow,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena .eyebrow,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) .eyebrow { color: var(--green-deep); }
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka) li .ikona,
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka) li .ikona,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) li .ikona { background: var(--green-soft); color: var(--green-deep); }
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia:has(> .wrap.ao-mriezka) .ao-okno,
body:not([data-page="domov"]) main > .sekcia--zelena + .sekcia:has(> .wrap.ao-mriezka) .ao-okno,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) .ao-okno { border-color: color-mix(in srgb, var(--ink) 80%, #fff); box-shadow: 0 30px 70px -30px rgba(0,0,0,.45); }
/* tlačidlá na svetlom paneli: tmavé → hover zelený; obrysové → hover tmavý */
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) :is(.btn--primarne, .btn--tmave, .btn--svetle),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena :is(.btn--primarne, .btn--tmave, .btn--svetle),
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena :is(.btn--primarne, .btn--tmave, .btn--svetle),
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) :is(.btn--primarne, .btn--tmave, .btn--svetle) { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bg-h: var(--green); --btn-fg-h: var(--ink); }
body:not([data-page="domov"]) main > .sekcia--zelena:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia)) .btn--obrys,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia) + .sekcia--zelena .btn--obrys,
body:not([data-page="domov"]) main > .sekcia:has(> .wrap.ao-mriezka):not(:has(+ :is(.hero-sluzba, .sekcia--tmava, .cta-sekcia))) + .sekcia--zelena .btn--obrys,
body:not([data-page="domov"]) main > :is(.hero-sluzba, .sekcia--tmava:not(.cta-sekcia)) + .sekcia--tmava:not(.cta-sekcia) .btn--obrys { --btn-fg: var(--ink); --btn-border: var(--ink); --btn-bg-h: var(--ink); --btn-fg-h: #fff; }

/* ==========================================================================
   23. MOBILY – dotykové ciele, čitateľnosť, kratšie stránky
   Generuje tools/optimalizuj_mobil.py; kontrola: work/audit_mobil.py
   ========================================================================== */
/* dotykové ciele aspoň 44 px */
.hlavicka__logo { display: inline-flex; align-items: center; min-height: 44px; }
.paticka__spodok button, .paticka__spodok a { display: inline-flex; align-items: center; min-height: 44px; }
/* POZOR: .karta__odkaz NIKDY nerobiť flex – text s vnoreným <span> sa rozpadne do stĺpcov; celá karta je aj tak klikateľná cez ::after */
.re-karta__viac { display: inline-flex; align-items: center; min-height: 44px; }
.ao-okno__cele { min-width: 44px; min-height: 44px; justify-content: center; }
/* šípka „von" sa nesmie zalomiť na samostatný riadok */
.paticka__odkazy a .ikona { margin-inline: 4px 0; }
.paticka__odkazy a:has(> .ikona:last-child) { white-space: nowrap; }
@media (max-width: 767px) {
  /* iOS pri poli s písmom < 16 px priblíži celú stránku → všetky polia 16 px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  /* najmenšie písmo 12 px */
  .sp-karta__docasne, .doplnit, table th, table td small { font-size: .75rem !important; }
  sup { font-size: .75em; }
  /* formulár: voľby služieb po dvoch v riadku (predtým 8 riadkov pod sebou) */
  .cipy { gap: 8px; }
  .cip span { min-height: 44px; padding: 0 13px; gap: 6px; font-size: .875rem; }
  .cip span::before { width: 16px; height: 16px; }
  /* kratšia pätička a výzva s formulárom */
  .paticka { padding-top: 48px; }
  main > .cta-sekcia { padding-block: 44px 28px; }
  /* ťažké efekty, ktoré na mobile spôsobujú zasekávanie pri rolovaní */
  /* rozmazanie pozadia pod pevnou hlavičkou a spodnou lištou sa prepočítava pri každom posune (pozadie je aj tak z 95 % nepriehľadné) */
  .hlavicka--posunuta .hlavicka__lista::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(251,250,246,.98); }
  .mobil-lista { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(251,250,246,.985); }
}
/* dotykové zariadenia: žiadne „hover" posuny kariet, ktoré po ťuknutí ostávajú visieť */
@media (hover: none) {
  .karta:hover, .db-prog:hover, .sp-karta:hover, .rc-karta:hover { transform: none; }
}

/* 24. BEZ PODČIARKNUTIA TEXTU (3. 10. 2026, želanie používateľa: „všetky podčiarknutia textu daj preč")
   – zvýraznené slová v nadpisoch ostávajú zelené, ale bez čiary
   – odkazy, textové tlačidlá a päta bez podčiarknutia (odkaz v texte odlišuje farba a hrúbka písma)
   – aktívna položka hlavného menu bez čiary, odlišuje ju zelená farba */
:is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .zvyraznenie) em, .zvyraznenie,
html.js [data-reveal="lines"].je-rozdelene em { background-image: none !important; padding-bottom: 0 !important; }
*, *::before, *::after { text-decoration: none !important; }
.btn--text > span, .rz-otvor > span { background-image: none !important; }
.hlavne-menu__odkaz::after { display: none !important; }
.hlavne-menu__odkaz.je-aktivna, .hlavne-menu__odkaz[aria-current="page"] { color: var(--green-deep); }
/* 25. MEGA-MENU 10 SLUŽIEB (3. 10. 2026: pribudli Pergoly a Strechy) – od 1280 px 5 stĺpcov = 2 plné rady */
@media (min-width: 1280px) { .mega__sluzby { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 26. MEGA-MENU ZAROVNANIE (5. 10. 2026): ikona aj nadpis vždy hore, aby nadpisy v rade začínali v rovnakej výške */
.mega__sluzba { align-items: start; align-content: start; }
.mega__sluzba .ikona-box { align-self: start; }
.mega__sluzba strong { align-self: start; padding-top: 2px; }
.mega__sluzby > li { display: flex; }
.mega__sluzby > li > .mega__sluzba { flex: 1 1 auto; }
@media (min-width: 1280px) {
  .mega__sluzba { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 10px; padding: 16px; }
  .mega__sluzba .ikona-box { grid-row: auto; }
  .mega__sluzba strong { padding-top: 0; }
  /* ikony, nadpisy aj popisy v jednom rade na rovnakej línii (aj keď má nadpis 2 riadky) */
  @supports (grid-template-rows: subgrid) {
    .mega__sluzby { row-gap: 4px; }
    .mega__sluzby > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .mega__sluzby > li > .mega__sluzba { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
  }
}
/* 27. DOTYK BEZ MODRÉHO RÁMČEKA (5. 10. 2026): Android/iOS pri ťuknutí a podržaní kreslil modrý obdĺžnik
   (tap highlight) a pri podržaní označil text / ponúkol kontextové menu odkazu – pôsobilo to neprofesionálne.
   Fokus z klávesnice (:focus-visible) ostáva. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"], .cip, .btn { -webkit-tap-highlight-color: transparent; }
@media (hover: none) and (pointer: coarse) {
  header, .hlavicka, .mobilne-menu, .mega, .pp, .btn, button, summary, .cip, .filter__cip, .sp-karta, .karta__odkaz, .taby, nav {
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  }
}