/* Písma z vlastnej domény (predtým Google Fonts = blokujúca žiadosť na cudziu doménu). latin-ext = š č ž ľ ť ň ď. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Super Strechy s.r.o. — Custom Styles */
/* Tailwind CDN handles reset + utilities. Only custom additions here. */
/* RULE: No global * {margin:0} reset. No global a {color} override. */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ====== SCROLL ANIMATIONS ====== */
/* Bez JavaScriptu musí byť text vidieť — inak vidí človek aj Google prázdnu stránku.
   Skrytie zapne až JS cez triedu .js na <html>. */
.animate-on-scroll {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .animate-on-scroll:not(.visible) {
  opacity: 0;
  transform: translateY(24px);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for cards */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ====== HERO ====== */
.hero-bg {
  background-attachment: scroll;
}

@media (min-width: 768px) {
  .hero-bg {
    background-attachment: fixed;
  }
}

/* Hero text entrance animation */
.hero-animate {
  opacity: 0;
  transform: translateY(32px);
  animation: heroFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-animate-delay-1 { animation-delay: 0.15s; }
.hero-animate-delay-2 { animation-delay: 0.3s; }
.hero-animate-delay-3 { animation-delay: 0.45s; }

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====== REZERVA POD PEVNÝMI LIŠTAMI ======
   Dole na telefóne sedia dve pevné lišty: lišta s telefónom (52 px) a cookie lišta
   (kým na ňu človek neklikne, 134–150 px). Predtým sa kvôli nim skracoval úvod podľa
   výšky obrazovky (max-height: 800px). Tá hranica nesedela na bežné telefóny —
   390×844, 393×852, 384×854, 375×812 — a tlačidlo „Napíšte nám" končilo pod lištou.
   Pri 320×568 ťuknutie naň dokonca padlo na „Odmietnuť“.
   Namiesto hádania výšky obrazovky si výšku líšt zmeriame a dáme stránke rovnako
   veľkú rezervu zdola. Rieši to každú stránku naraz, nielen tú, kde sa na to príde.
   Premennú prepisuje /assets/script.js podľa skutočnej výšky líšt; bez JavaScriptu
   cookie lišta vôbec nenabehne, takže stačí výška lišty s telefónom. */
:root {
  --listy-spodok: 0px;
}

@media (max-width: 767px) {
  :root {
    --listy-spodok: 52px;
  }
}

body {
  padding-bottom: var(--listy-spodok);
}

html {
  scroll-padding-bottom: calc(var(--listy-spodok) + 16px);
}

/* Úvod na telefóne: nikdy nie vyšší než voľná časť obrazovky nad lištami.
   Žiadna hranica podľa výšky telefónu — písmo aj medzery sa škálujú s výškou
   obrazovky (vh), takže to sedí na 568 px aj na 896 px. */
@media (max-width: 767px) {
  /* section.hero-bg (prvok + trieda) musí prebiť Tailwindovu min-h-[90vh],
     ktorá sa načítava neskôr a pri rovnakej sile by vyhrala. */
  section.hero-bg {
    min-height: calc(100vh - var(--listy-spodok));
    min-height: calc(100svh - var(--listy-spodok));
  }
  .hero-bg .hero-inner {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
  }
  .hero-bg .hero-eyebrow {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }
  .hero-bg h1 {
    font-size: clamp(1.625rem, 4.4vh, 2.375rem);
    line-height: 1.1;
  }
  .hero-bg .hero-lead {
    margin-top: clamp(0.5rem, 1.2vh, 0.75rem);
    font-size: clamp(0.8125rem, 1.9vh, 1rem);
    line-height: 1.45;
  }
  .hero-bg .hero-actions {
    margin-top: clamp(0.875rem, 2.2vh, 1.5rem);
    gap: 0.625rem;
  }
  .hero-bg .hero-actions > a {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
  }
  .hero-bg .hero-badges {
    margin-top: clamp(0.75rem, 2vh, 1.5rem);
    font-size: 0.75rem;
    gap: 0.25rem 1rem;
  }
}

/* Veľmi nízke telefóny (320×568): nad lištami zostáva len ~380 px. Ozdobné časti
   úvodu tam nemajú kam ísť — dôležité je, aby boli vidieť obe tlačidlá. */
@media (max-width: 767px) and (max-height: 640px) {
  .hero-bg .hero-eyebrow,
  .hero-bg .hero-badges {
    display: none;
  }
  .hero-bg .hero-inner {
    padding-top: 4rem;
  }
}

/* ====== PARTNER STRIP ====== */
.partners-strip {
  position: relative;
}

.partners-strip::before,
.partners-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 1;
  pointer-events: none;
}

.partners-strip::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.partners-strip::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* Pohyblivý pás partnerov (nekonečný posuv) */
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.marquee__track img {
  flex: 0 0 auto;
  margin: 0 2.25rem;
  -webkit-user-drag: none;
  user-select: none;
}
.partners-strip:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* ====== FEATURE CARD (overlapping) ====== */
.feature-overlap-card {
  position: relative;
}

@media (min-width: 1024px) {
  .feature-overlap-card {
    margin-left: -80px;
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

/* ====== PROCESS GHOST NUMBERS ====== */
.process-step-v2 {
  position: relative;
  padding-top: 1rem;
}

.process-ghost-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 7rem;
  line-height: 1;
  color: rgba(16, 46, 108, 0.06);
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (min-width: 768px) {
  .process-ghost-number {
    font-size: 8rem;
    top: -16px;
  }
}

/* Spojovacia čiara medzi krokmi.
   Pri dvoch stĺpcoch (768–1023 px) čiara vytŕčala von a stránka sa dala posúvať do strán —
   preto ju zapíname až tam, kde sú kroky vedľa seba v jednom rade. */
@media (min-width: 1024px) {
  .process-step-v2:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #B66F3E 0%, #ddd 100%);
    z-index: 0;
  }
}

/* ====== REVIEW CARDS ====== */
.review-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(16, 46, 108, 0.1);
}

.review-card::before {
  content: '\201C';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(182, 111, 62, 0.12);
  position: absolute;
  top: 8px;
  left: 20px;
  pointer-events: none;
}

/* ====== SECTION HEADINGS — Bronze accent underline ====== */
.section-heading {
  position: relative;
}

.section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #B66F3E;
  margin-top: 14px;
  border-radius: 2px;
}

.section-heading-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* ====== INNER PAGE HERO ====== */
.inner-hero {
  position: relative;
  overflow: hidden;
}

.inner-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(19, 53, 61, 0.3), transparent);
  pointer-events: none;
}

/* ====== TEXT NA PODSTRÁNKACH ======
   Tailwind odoberá odstavcom aj zoznamom odsadenie a trieda .prose bez doplnku
   typography nerobí nič — bez tohto sa text zlieval do jedného bloku. */
.prose p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
}
.prose ul,
.prose ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5rem; }
.prose h2,
.prose h3 { margin-bottom: 0.75rem; }

/* ====== FAQ ACCORDION ====== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer.open {
  max-height: 600px;
}

.faq-chevron {
  transition: transform 0.3s ease;
}

.faq-toggle.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-item {
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(16, 46, 108, 0.06);
}

/* ====== LIGHTBOX ====== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
}

/* ====== COOKIE CONSENT ====== */
.cookie-banner {
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.cookie-banner.show {
  transform: translateY(0);
}

/* Cookie lišta nesmie zakryť tlačidlo na volanie.
   Na telefóne sedí lišta s volaním dole (52 px), tak cookie lištu posunieme nad ňu.
   Skrytý stav sa musí posunúť o rovnaký kus, inak by spodok lišty vykúkal. */
@media (max-width: 767px) {
  #cookie-consent.cookie-banner {
    bottom: 52px;
    transform: translateY(calc(100% + 52px));
    padding: 0.625rem 0.75rem;
  }
  #cookie-consent.cookie-banner.show {
    transform: translateY(0);
  }
  /* Na telefóne text cez celú šírku a tlačidlá pod ním. V jednom rade by mal text
     stĺpec široký asi 180 px a rozsypal by sa na jedenásť riadkov — lišta by potom
     zabrala tretinu obrazovky a zakryla tlačidlá v úvode. */
  #cookie-consent.cookie-banner > div {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  #cookie-consent.cookie-banner p {
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: left;
  }
  #cookie-consent.cookie-banner > div > div {
    justify-content: flex-end;
  }
  #cookie-consent.cookie-banner button {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

/* Úzke telefóny: ten istý text sa láme na viac riadkov a lišta narastie zo 134
   na 150 px. Menším písmom ju vrátime späť, aby nezaberala tretinu obrazovky. */
@media (max-width: 360px) {
  #cookie-consent.cookie-banner {
    padding: 0.5rem 0.625rem;
  }
  #cookie-consent.cookie-banner p {
    font-size: 0.6875rem;
    line-height: 1.3;
  }
}

/* Vypnutý pohyb: nič nesmie zostať schované a čakať na odhalenie (WCAG C39). */
@media (prefers-reduced-motion: reduce) {
  html.js .animate-on-scroll:not(.visible) {
    opacity: 1;
    transform: none;
  }
  .animate-on-scroll {
    transition-duration: 1ms;
  }
}

/* ====== MOBILE CTA BAR ====== */
@media (min-width: 768px) {
  .mobile-cta-bar {
    display: none !important;
  }
}

/* ====== NAVBAR DROPDOWNS ====== */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

.nav-dropdown-trigger:hover .nav-dropdown,
.nav-dropdown-trigger:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ====== SERVICE CARDS ====== */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(16, 46, 108, 0.1);
}

/* ====== GALLERY IMAGES ====== */
.gallery-item {
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow 0.3s ease;
}

.gallery-item:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* ====== STAR RATING ====== */
.star-filled {
  color: #f59e0b;
}

/* ====== PRICING TABLE (cennik) ====== */
.price-table {
  border-collapse: separate;
  border-spacing: 0;
}

.price-table thead tr {
  background-color: rgba(16, 46, 108, 0.04);
}

.price-table thead th {
  font-weight: 600;
  border-bottom: 2px solid #102e6c;
}

.price-table tbody tr {
  transition: background-color 0.2s ease;
}

.price-table tbody tr:hover {
  background-color: rgba(16, 46, 108, 0.02);
}

.price-table td,
.price-table th {
  padding: 14px 16px;
}

.price-table tbody td {
  border-bottom: 1px solid #f3f4f6;
}

/* ====== CTA SECTION GRADIENT ====== */
.cta-gradient {
  background: linear-gradient(135deg, #13353D 0%, #102e6c 100%);
}

/* ====== STAT HIGHLIGHT ====== */
.stat-number {
  font-family: 'Bebas Neue', sans-serif;
  background: linear-gradient(135deg, #B66F3E, #d4915f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ====== CONTACT TILES ====== */
.contact-tile {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(16, 46, 108, 0.08);
}

/* Polia formulárov aspoň 16 px — pri menšom písme iPhone po ťuknutí priblíži celú stránku. */
@media (max-width: 767px) {
  input[type],
  input,
  select[name],
  select,
  textarea[name],
  textarea {
    font-size: 16px;
  }
}

/* ====== PRINT ====== */
@media print {
  nav, .mobile-cta-bar, .cookie-banner, .lightbox, .no-print {
    display: none !important;
  }
  body {
    font-size: 12pt;
  }
}

/* Vnútorné stránky na telefóne: kratší úvod, aby tlačidlo v ňom neskončilo pod
   lištami (spolu 186–202 px zdola). Našlo sa to 12.9.2026 na /faq.
   Hranica podľa výšky obrazovky je preč — platí to na každom telefóne rovnako. */
@media (max-width: 767px) {
  /* section.inner-hero (prvok + trieda) musí prebiť Tailwindovu py-20,
     ktorá sa načítava neskôr a pri rovnakej sile by vyhrala. */
  section.inner-hero {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  section.inner-hero h1 {
    font-size: 2rem;
    line-height: 1.1;
  }
  section.inner-hero p {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  section.inner-hero a[href^="tel:"] {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  /* Prvá sekcia hneď pod úvodom podstránky. Na /faq v nej stojí veta
     „…napíšte nám alebo zavolajte na 0948 535 814" a na bežných telefónoch
     končila pod cookie lištou. Odsadenie zhora tam nemá čo zaberať 64 px. */
  section.inner-hero + section {
    padding-top: 1.75rem;
  }
  section.inner-hero + section > div > div > .prose > h2:first-child {
    margin-top: 0;
    font-size: 1.625rem;
  }
}

/* Veľmi nízke telefóny: úvod podstránky sa musí zmestiť nad lišty aj tu. */
@media (max-width: 767px) and (max-height: 640px) {
  section.inner-hero {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }
  section.inner-hero h1 {
    font-size: 1.875rem;
  }
  section.inner-hero p {
    margin-top: 0.5rem;
    font-size: 1rem;
  }
  section.inner-hero a[href^="tel:"] {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* Úvodná fotka: menší WebP pre telefón (28 kB namiesto 158 kB), väčší WebP pre počítač.
   Inline štýl v HTML ostáva ako záloha pre prehliadač bez WebP. */
@media (max-width: 767px) { section.hero-bg { background-image: url('/assets/fotky/hero-rodina-800.webp') !important; } }
@media (min-width: 768px) { section.hero-bg { background-image: url('/assets/fotky/hero-rodina.webp') !important; } }

/* CLS: cookie lišta naskočí po 1,2 s a vtedy sa úvod (výška = obrazovka mínus lišty) skrátil a text poskočil.
   Kto ešte nevolil, dostane rezervu na lištu hneď od začiatku (približná výška 190 px, presnú doplní script.js). */
@media (max-width: 767px) {
  html.bez-volby { --listy-spodok: 190px; }
}