/* =============================================================================

   REALITNÍ MAKLÉŘ — ŠABLONA

   Design systém + komponenty. Mobile-first, systémové hodnoty přes proměnné.

   ========================================================================== */



/* -----------------------------------------------------------------------------

   1) DESIGN TOKENY

   -------------------------------------------------------------------------- */

:root {

  /* Brand / barvy */

  --color-primary: #1CC1DD;

  --color-primary-dark: #0E8EA5;   /* hover / kontrast na bílé */

  --color-primary-darker: #0A6F82; /* text-on-white když je potřeba akcent */

  --color-primary-soft: #E8FAFD;



  --color-white: #FFFFFF;

  --color-bg: #FFFFFF;

  --color-bg-soft: #F4FAFC;



  --color-text: #102027;

  --color-text-muted: #5D6B73;

  --color-border: #DDECEF;



  /* Inkoustové tóny pro tmavé „prémiové" plochy (footer, kontaktní karta) */

  --color-ink: #0C1A20;

  --color-ink-soft: #16323B;



  --color-focus: #0E8EA5;

  --color-error: #C0392B;

  --color-success: #1E7E54;



  /* Typografie — bez blokování renderu (system stacky).

     DISPLAY = patkové písmo na nadpisy a jméno → osobní, prémiový, „realitní" pocit.

     BASE = bezpatkové na text. MONO = drobné číselné/overline detaily. */

  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",

                  Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",

               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Dříve monospace pro číselné detaily — na přání sjednoceno na Montserrat (font všude stejný). */

  --font-mono: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",

               Roboto, "Helvetica Neue", Arial, sans-serif;



  --fs-h1: clamp(1.9rem, 1.2rem + 3.4vw, 3.3rem);

  --fs-h2: clamp(1.5rem, 1.05rem + 2.1vw, 2.3rem);

  --fs-h3: clamp(1.1rem, 0.98rem + 0.6vw, 1.3rem);

  --fs-lead: clamp(1.02rem, 0.95rem + 0.4vw, 1.18rem);

  --fs-base: 1rem;

  --fs-sm: 0.875rem;



  --lh-tight: 1.15;

  --lh-base: 1.6;



  /* Spacing scale (4px základ) */

  --space-1: 0.25rem;

  --space-2: 0.5rem;

  --space-3: 0.75rem;

  --space-4: 1rem;

  --space-5: 1.5rem;

  --space-6: 2rem;

  --space-7: 3rem;

  --space-8: 4rem;

  --space-9: 6rem;



  /* Layout */

  --container-max: 1440px;   /* strop pro layout (hero, karty, formulář) */

  --container-narrow: 760px; /* užší strop pro text-heavy sekce (FAQ) — čitelnost */

  --container-pad: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  --header-h: 68px;

  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  --divider-h: 56px; /* jednotný sklon šikmých předělů sekcí (levá výše, pravá níže) */



  /* Radius */

  --radius-sm: 8px;

  --radius-md: 14px;

  --radius-lg: 22px;

  --radius-pill: 999px;



  /* Stíny */

  --shadow-sm: 0 1px 2px rgba(16, 32, 39, 0.06), 0 1px 3px rgba(16, 32, 39, 0.05);

  --shadow-md: 0 6px 18px rgba(16, 32, 39, 0.08);

  --shadow-lg: 0 18px 48px rgba(16, 32, 39, 0.12);

  --shadow-primary: 0 8px 22px rgba(28, 193, 221, 0.28);

  /* Karty: běžné = card (jemný), zvýrazněné lead/CTA = card-raised. Raised NEpoužívat plošně. */

  --shadow-card: 0 14px 40px rgba(16, 32, 39, 0.04);

  --shadow-card-raised: 0 20px 50px rgba(16, 32, 39, 0.08);



  /* Přechody */

  --transition: 180ms ease;

  --transition-slow: 280ms ease;



  /* Z-index vrstvy */

  --z-header: 100;

  --z-backdrop: 110;

  --z-menu: 120;

  --z-skip: 200;

}



/* -----------------------------------------------------------------------------

   2) RESET / ZÁKLAD

   -------------------------------------------------------------------------- */

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



html {

  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;

}



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after {

    animation-duration: 0.001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.001ms !important;

  }

}



body {

  margin: 0;

  font-family: var(--font-base);

  font-size: var(--fs-base);

  line-height: var(--lh-base);

  color: var(--color-text);

  background: var(--color-bg);

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden; /* pojistka proti horizontálnímu scrollu */

}



img { max-width: 100%; height: auto; display: block; }



h1, h2, h3 { line-height: var(--lh-tight); margin: 0; }



p { margin: 0; }



a { color: var(--color-primary-darker); text-decoration: none; }

a:hover { color: var(--color-primary-dark); }



ul, ol { margin: 0; padding: 0; list-style: none; }



/* Ochrana proti rozbití layoutu dlouhými slovy / e-maily / URL — break-word

   dělí slovo uprostřed jen když se nevejde na řádek celé (na rozdíl od

   "anywhere", které láme kdykoli i zbytečně). */

h1, h2, h3, p, a, li, td { overflow-wrap: break-word; }



:focus-visible {

  outline: 3px solid var(--color-focus);

  outline-offset: 2px;

  border-radius: 4px;

}



/* -----------------------------------------------------------------------------

   3) UTILITY / LAYOUT

   -------------------------------------------------------------------------- */

.container {

  width: 100%;

  max-width: var(--container-max);

  margin-inline: auto;

  padding-inline: var(--container-pad);

}

.container--narrow { max-width: var(--container-narrow); }



.section { padding-block: var(--section-y); }

/* Jemné rozbití bílé plochy — tónované podklady vybraných sekcí.

   Žádné fotky/overlaye/tvary; jen velmi decentní gradient v rámci světlého tónu,

   aby bílé karty uvnitř (recenze, FAQ položky) stále jemně vystupovaly. */

.section--soft {

  background: linear-gradient(180deg,

    var(--color-white) 0%,

    #EBF6F9 16%,

    #EBF6F9 84%,

    var(--color-white) 100%);

}

.section--faint {

  background: linear-gradient(180deg,

    var(--color-white) 0%,

    #F4FAFC 15%,

    #F4FAFC 85%,

    var(--color-white) 100%);

}

/* Pořadí sekcí: Kontakt až jako poslední (nad zápatím), Formulář před ním */

#main { display: flex; flex-direction: column; }

/* #kontakt — viz blok 12) KONTAKT + MAPA (obsah nahoře, pás mapy dole). */



/* Služby — bílé pozadí, mřížka 3 karet. */

#sluzby { padding-top: clamp(2rem, 1.5rem + 3vw, 4.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); position: relative; }

/* Tyrkysové: Recenze + FAQ. O mně je bílý pruh mezi nimi (šikmé předěly). */

#reference {

  background: var(--color-primary);

  position: relative;

  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* +angle-h navíc dole, aby šikmý ořez (viz níž) nikdy neusekl obsah v levém rohu. */

  padding-bottom: calc(var(--section-y) + var(--divider-h));

  --angle-h: var(--divider-h);

}

#reference .container { max-width: 1200px; padding-inline: 56px; }

/* Šikmý spodní okraj — stejná technika jako FAQ (blok 11): sekce se ořízne

   sama přes clip-path, ne přes samostatný klín nad další sekcí (ten měl na

   širokých/mělkých poměrech vizuální artefakt — vlevo vypadal rovně místo

   šikmo). Levá strana výše (víc oříznuto), pravá níže (beze změny). */

#reference {

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--angle-h)));

}



/* Marquee — tmavý pruh s kroky procesu prodeje, mezi Službami a Recenzemi.

   Normální blok (ne overlay), plné šířky diky poloze přímo pod <main>. */

.marquee {

  background: #0d1b24;

  padding: 30px 0;

  overflow: hidden;

}

/* Maska sedí na samostatném wrapperu s pevnou (ne max-content) šířkou, takže se

   procenta gradientu počítají vůči viditelnému pruhu, ne vůči celé (mnohem širší)

   posouvané stopě — jinak by vyblednutí u okrajů bylo vidět jen na chvíli na

   začátku/konci smyčky a zbytek animace by "zmizelo". */

.marq-mask {

  overflow: hidden;

  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);

  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);

}

.marq-track {

  display: flex;

  width: max-content;

  animation: marq 34s linear infinite;

  will-change: transform;

}

@keyframes marq {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}

.marq-group { display: flex; align-items: center; gap: 38px; padding-right: 38px; }

.marq-step {

  display: inline-flex;

  align-items: baseline;

  white-space: nowrap;

  color: var(--color-white);

  font-family: var(--font-base);

  font-size: 19px;

  font-weight: 600;

}

.marq-num {

  color: var(--color-primary);

  font-weight: 800;

  margin-right: 10px;

}

.marq-arrow { color: var(--color-primary); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {

  .marq-track { animation: none; }

}

@media (max-width: 640px) {

  .marq-step { font-size: 16px; }

  .marquee { padding: 22px 0; }

}

/* margin-top: -1px překryje sub-pixel seam mezi sekcemi (jinak tam občas prosvítá bílá linka). */

#o-mne { background: var(--color-white); margin-top: -1px; }

/* FAQ je tyrkysová sekce se šikmým okrajem nahoře i dole — sama sebe ořízne

   přes clip-path (viz blok 11), stejně jako Kontakt. Šikmý přechod Recenze → O mně

   funguje stejně: klín je součástí #reference (viz blok výš), ne samostatný

   překryv nad O mně. */

/* Bílý text na tyrkysové sekci Recenze. */

#reference .section__title { color: var(--color-white); }

#reference .section__lead { color: var(--color-white); }



/* Editorial: levostranné záhlaví, žádné centrování */

.section__head { max-width: 720px; margin: 0 0 var(--space-7); text-align: left; }

.section__title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.5rem);

  line-height: 1.05;

  letter-spacing: -0.015em;

  text-wrap: balance;

}

.section__lead {

  margin-top: var(--space-4);

  color: var(--color-text-muted);

  font-size: var(--fs-lead);

  max-width: 56ch;

}



/* Číslovaný overline: 01 ────────  (monospace, accent číslo, tenká linka) */

.eyebrow {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  margin-bottom: var(--space-4);

  font-family: var(--font-mono);

  font-size: 0.8rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--color-primary);

}

.eyebrow::after {

  content: "";

  flex: 1 1 auto;

  height: 1px;

  background: linear-gradient(90deg, var(--color-primary), transparent);

  max-width: 200px;

}



/* Sticky header nesmí překrývat kotvy */

[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }



.skip-link {

  position: absolute;

  left: var(--space-3);

  top: -100px;

  z-index: var(--z-skip);

  background: var(--color-text);

  color: #fff;

  padding: var(--space-3) var(--space-4);

  border-radius: var(--radius-sm);

  transition: top var(--transition);

}

.skip-link:focus { top: var(--space-3); color: #fff; }



/* -----------------------------------------------------------------------------

   4) TLAČÍTKA

   -------------------------------------------------------------------------- */

.btn {

  --btn-bg: var(--color-primary);

  --btn-fg: #06363F; /* tmavý text na tyrkysové = dostatečný kontrast */

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  min-height: 50px;

  padding: var(--space-3) var(--space-6);

  font: inherit;

  font-weight: 600;

  line-height: 1.1;

  letter-spacing: 0.01em;

  text-align: center;

  color: var(--btn-fg);

  background: var(--btn-bg);

  border: 1px solid transparent;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: background var(--transition), color var(--transition),

              border-color var(--transition), box-shadow var(--transition);

}

.btn:active { transform: translateY(1px); }



.btn--primary { --btn-fg: #fff; color: #fff; }

.btn--primary:hover { --btn-bg: var(--color-text); --btn-fg: #fff; color: #fff; }



.btn--outline {

  --btn-bg: transparent;

  --btn-fg: var(--color-text);

  border-color: var(--color-border);

}

.btn--outline:hover {

  --btn-bg: rgba(28, 193, 221, 0.07);

  border-color: var(--color-primary);

  color: var(--color-primary-darker);

}



.btn--ghost {

  --btn-bg: transparent;

  --btn-fg: var(--color-text);

  border-color: var(--color-border);

}

.btn--ghost:hover { --btn-bg: var(--color-bg-soft); color: var(--color-text); }



.btn--lg { min-height: 54px; padding: var(--space-4) var(--space-6); font-size: 1.05rem; }

.btn--block { width: 100%; }



/* -----------------------------------------------------------------------------

   5) HEADER + NAVIGACE

   -------------------------------------------------------------------------- */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: var(--z-header);

  background: var(--color-primary);

  padding-top: env(safe-area-inset-top);

  /* Jemný stín místo tvrdé linky — méně "graficky", spíš jako přirozený odstup

     hlavičky od obsahu pod ní. */

  box-shadow: 0 4px 14px rgba(12, 26, 32, .22);

}

/* fixed hlavička — kotvy nesmí schovat nadpisy pod hlavičku */

.section, .hero { scroll-margin-top: calc(var(--header-h) + 1rem); }



.header__inner {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  min-height: var(--header-h);

}

@media (max-width: 560px) {

  /* --header-h je proměnná, ze které se počítá i padding-top hero sekce,

     posun mobilního menu a scroll-margin kotev — přepsáním na :root se nižší

     hlavička (menší logo + menší hamburger) promítne automaticky všude. */

  :root { --header-h: 56px; }

}



/* Brand = monogram RV (hlavička je tyrkysová — bílý, stejný motiv jako

   vodoznak „RV" v kontaktní kartě formuláře). */

.brand { display: inline-flex; align-items: center; gap: 12px; }

.brand__logo { height: 69px; width: auto; display: block; }

.brand__divider { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent); flex: none; }

@media (max-width: 560px) {

  .brand__logo { height: 51px; }

  .brand__divider { height: 31px; }

  .brand__name { font-size: 16px; }

  .brand__role { font-size: 11px; }

}

@media (max-width: 340px) {

  /* Na nejužších telefonech (320px) se logo + divider + "Radim Vrána /

     Realitní makléř" (~239px) i s hamburgerem nevejde vedle sebe a záhlaví

     přetékalo. Necháme jen logo (samo o sobě dost pro identifikaci značky).

     Zesíleno přes .brand, protože základní ".brand__monogram { display }"

     je dál v souboru a při stejné specificitě by jinak vyhrálo ono. */

  .brand .brand__divider,

  .brand .brand__monogram { display: none; }

}

.brand__monogram {

  display: flex;

  flex-direction: column;

  gap: 2px;

  white-space: nowrap;

}

.brand__name {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 19px;

  letter-spacing: -0.02em;

  line-height: 1;

  color: var(--color-white);

}

.brand__role {

  font-size: 12px;

  font-weight: 600;

  letter-spacing: -0.01em;

  line-height: 1;

  color: var(--color-white);

  opacity: 0.85;

}



.nav { margin-left: auto; }

.nav__list { display: flex; gap: var(--space-6); }

.nav__link {

  position: relative;

  color: rgba(255, 255, 255, 0.75); /* méně výrazné; hover/aktivní jsou plné bílé */

  font-weight: 500;

  padding: var(--space-2) 0;

  transition: color var(--transition);

}

.nav__link::after {

  content: "";

  position: absolute;

  left: 0; right: 0; bottom: 4px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform var(--transition);

}

.nav__link:hover::after,

.nav__link.is-active::after { transform: scaleX(1); }

.nav__link:hover { color: var(--color-white); }

.nav__link.is-active { color: var(--color-white); }



.header__actions { display: flex; align-items: center; gap: var(--space-3); }

.header__phone { font-weight: 700; color: var(--color-text); white-space: nowrap; }

.header__phone:hover { color: var(--color-primary-darker); }

/* menší CTA v hlavičce */

.header__cta { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }



/* Hamburger */

.nav-toggle {

  display: none;

  width: 44px; height: 44px;

  padding: 0;

  background: transparent;

  border: 1px solid rgba(255, 255, 255, .4);

  border-radius: var(--radius-sm);

  cursor: pointer;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

}

@media (max-width: 560px) {

  .nav-toggle { width: 34px; height: 34px; gap: 4px; }

  .nav-toggle__bar { width: 17px; }

}

.nav-toggle__bar {

  width: 22px; height: 2px;

  background: var(--color-white);

  border-radius: 2px;

  transition: transform var(--transition), opacity var(--transition);

}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* Mobilní menu */

.mobile-menu {

  position: fixed;

  top: calc(var(--header-h) + env(safe-area-inset-top));

  left: 0; right: 0;

  z-index: var(--z-menu);

  background: var(--color-white);

  border-bottom: 1px solid var(--color-border);

  box-shadow: var(--shadow-lg);

  padding: var(--space-4) var(--container-pad)

           calc(var(--space-5) + env(safe-area-inset-bottom));

  max-height: calc(100svh - var(--header-h));

  overflow-y: auto;

}

.mobile-menu[hidden] { display: none; }

.mobile-menu__list { display: flex; flex-direction: column; }

.mobile-menu__link {

  display: block;

  text-align: center;

  padding: var(--space-4) var(--space-2);

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--color-text);

  border-bottom: 1px solid var(--color-border);

  min-height: 44px;

}

.mobile-menu__link:hover { color: var(--color-primary); }

.mobile-menu__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }



.menu-backdrop {

  position: fixed;

  inset: 0;

  z-index: var(--z-backdrop);

  background: rgba(16, 32, 39, 0.45);

}

.menu-backdrop[hidden] { display: none; }



/* -----------------------------------------------------------------------------

   6) HERO

   -------------------------------------------------------------------------- */

.hero {

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  /* Plná výška obrazovky mínus sticky header. min-height (ne height) =

     na nízkých displejích obsah radši přeteče dolů, než aby se ořízl.

     svh řeší mobilní adresní lišty; vh je fallback. */

  min-height: 100vh;

  min-height: 100svh;

  /* Header je position:fixed (nezabírá místo v layoutu) → hero si musí sám

     odsadit obsah o jeho výšku, jinak jméno/nadpis schová/ořízne pod ním.

     1cm minimum (viz @media min-width:900px) platí jen pro desktop. */

  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.5rem, 0.8rem + 3vw, 3rem));

  padding-bottom: var(--space-8);

  /* Fotka v pozadí + overlaye pro čitelnost textu — stejné barvy jako

     mobilní pozadí (.hero__bg-base #3aa9c4→#1b6c80 + .hero__bg-overlay

     rgba(13,27,36,...)), jen aplikované na stávající desktopové vrstvy

     (stejná struktura/stopy gradientů, jen jiné barvy). */

  background-color: var(--color-bg);

  background-image:

    linear-gradient(98deg,

      rgba(13, 27, 36, 0.77) 0%,

      rgba(13, 27, 36, 0.66) 30%,

      rgba(13, 27, 36, 0.42) 48%,

      rgba(13, 27, 36, 0.13) 66%,

      rgba(13, 27, 36, 0) 80%),

    linear-gradient(180deg,

      rgba(58, 169, 196, 0.9) 0%,

      rgba(58, 169, 196, 0) 22%,

      rgba(27, 108, 128, 0) 42%,

      #1b6c80 68%,

      #1b6c80 100%),

    url("../img/hero-bg.webp");

  background-repeat: no-repeat;

  background-position: center, center, center;

  background-size: cover, cover, cover;

}

/* S fotkou v pozadí už nepotřebujeme půdorysný motiv */

.hero__floorplan { display: none; }



/* Liniový půdorysný motiv v pozadí — decentní realitní detail (ne domeček, ne blob) */

.hero__floorplan {

  position: absolute;

  top: -6%;

  right: -10%;

  width: min(62%, 720px);

  height: auto;

  color: var(--color-primary);

  opacity: 0.08;

  pointer-events: none;

  z-index: 0;

}



/* .hero__visual = obalový kontejner nad .hero__inner (kvůli mobilnímu pozadí,

   viz @media max-width:899px níž) — přebírá "flex: 1 1 auto" po .hero__inner,

   aby hero sekce dál automaticky vyplňovala výšku obrazovky (.hero má

   min-height:100vh/100svh) a obsah uvnitř zůstal svisle vycentrovaný, i když

   je teď o úroveň hlouběji v DOM. */

.hero__visual {

  flex: 1 1 auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

}



.hero__inner {

  position: relative;

  z-index: 1;

  display: grid;

  /* minmax(0, 1fr) — bez toho by "1fr" sloupec nešel zmenšit pod min-content

     šířku svého obsahu (fixní texty), takže by přetékal container. */

  grid-template-columns: minmax(0, 1fr);

  gap: var(--space-8);

  align-items: center;     /* zarovná sloupce navzájem */

  align-content: center;   /* vycentruje obsah svisle v plné výšce */

}

@media (max-width: 560px) {

  .hero__inner { gap: 10px; }

}

/* Mobil/tablet (jeden sloupec): pořadí fotka s vizitkou → jméno+nadpis+hodnocení

   → benefity → tlačítka. .hero__content je "display:contents", aby se jeho

   podbloky staly přímými položkami .hero__inner gridu vedle .hero__card a šlo

   je přeskládat pomocí order — na desktopu (od 900px, na šířku) se nic

   nemění, tam .hero__content zůstává normální blok v původním pořadí.

   Stejný "mobilní" hero běží i na tabletech na výšku (orientation:portrait,

   i nad 900px šířky) — ten samý layout tam sedí líp než ten desktopový

   dvousloupcový (viz i .hero__inner níž). */

.hero__bg-mobile { display: none; }

@media (max-width: 899px), (min-width: 900px) and (orientation: portrait) {

  .hero {

    padding-top: calc(var(--header-h) + env(safe-area-inset-top));

    /* Vlastní vrstvené pozadí (.hero__bg-mobile) běží pod obsahem, kryje ale

       jen .hero__visual — zbytek sekce (mezera nad statistikami) dostává

       stejnou tmavou barvu, na jakou dobíhá spodek přelivu, aby to vizuálně

       navazovalo a nebyl tam vidět bílý řez. */

    background: #0e212b;

  }

  .hero__content { display: contents; }

  /* Celý blok (nadpisy+hodnocení, benefity, tlačítka) je "přilepený" ke

     spodní hraně hero sekce — margin-top: auto na PRVNÍM prvku odtlačí

     celou skupinu co nejníž najednou (i když je nad viewportem volný

     prostor), takže mezery uvnitř skupiny (hodnocení→benefity→tlačítka)

     zůstávají pořád malé a stejné, ať je displej jakkoliv vysoký.

     Zesíleno přes .hero__inner, protože základní ".hero__cta { margin-top }"

     je dál v souboru a při stejné specificitě by jinak vyhrálo ono. */

  .hero__inner .hero__content-top { order: 1; margin-top: auto; }

  .hero__content-bottom { order: 2; }

  .hero__inner .hero__cta { order: 3; margin-top: var(--space-4); }



  /* align-items: stretch (ne zděděné "center" ze desktopové grid verze) —

     jinak by se .hero__content-top / -bottom / .hero__cta centrovaly každý

     zvlášť podle VLASTNÍ šířky obsahu, a jejich levé okraje by si navzájem

     neseděly (přesně tenhle bug: nadpisy/hodnocení/benefity/tlačítka

     každé jinde). Stretch = plná šířka pro všechny, zarovnání pak řeší

     běžné doleva zarovnané bloky uvnitř. */

  .hero__inner { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; padding-bottom: var(--space-4); }

  /* Ta -6px optická kompenzace (viz .hero__name/.hero__title) byla odladěná

     pro starší (grid) mobilní layout — teď, když je .hero__inner stretch

     flex a všechno ostatní (hodnocení, benefity, tlačítka) sedí přesně na

     okraji kontejneru, by H1/H2 s ní vyčnívaly 6px moc doleva. */

  .hero__inner .hero__name,

  .hero__inner .hero__title { margin-left: 0; }

}

@media (max-width: 480px) {

  /* Základní clamp() má na těchhle šířkách moc vysoké minimum — "Realitní

     makléř Ostrava" (white-space:nowrap) pak přetékalo doprava přes okraj

     kontejneru až k okraji displeje. Čistě vw-based hodnota (bez rem

     základu) se zmenšuje rychleji s klesající šířkou, takže se nadpis

     vejde i na nejužší telefony (320px). */

  .hero__inner .hero__title { font-size: 7.4vw; }

}

@media (max-width: 340px) {

  /* Jméno + hodnocení menší a blíž k benefitům pod nimi — jen na

     nejužších telefonech (320px), kde byl celý blok (H2/H1/hodnocení)

     zbytečně velký a s velkou mezerou před benefity. */

  .hero__inner .hero__name { font-size: 9vw; }

  .hero__inner .hero__rating { margin-top: 0; }

  .hero__inner .om-rating-text { font-size: 12px; }

  .hero__inner .om-stars { font-size: 13px; }

  .hero__inner { gap: 0; }

}

@media (max-width: 899px), (min-width: 900px) and (orientation: portrait) {

  /* Na mobilu se celá karta makléře (fotka + vizitka + její vlastní tlačítko

     "Zavolat Radimovi") skrývá — stejné tlačítko už je v .hero__cta, takže by

     se jinak zobrazovalo dvakrát. */

  .hero__card { display: none; }



  /* H2 (jméno), hodnocení a benefity bílou barvou — text leží na tmavém

     přelivu (.hero__bg-overlay), tmavá/šedá barva by tu nebyla čitelná.

     Zesíleno přes .hero__inner, protože základní pravidla (.om-rating-text,

     .hero__reasons li) jsou dál v souboru a při stejné specificitě by

     jinak vyhrála ona. Hvězdičky (.om-stars) zůstávají zlaté beze změny. */

  .hero__inner .hero__name,

  .hero__inner .om-rating-text,

  .hero__inner .hero__reasons li { color: #fff; }



  /* .hero__visual = kratší kontejner jen pro horní část hero (pozadí + obsah),

     bez statistik pod ním — díky tomu pozadí končí přesně nad boxem se

     statistikami, ne za ním. Jeho horní hrana už leží přesně na spodní hraně

     záhlaví (odsazení o výšku headeru řeší .hero padding-top), takže tu

     .hero__bg-mobile netřeba nic dalšího přičítat.

     min-height = zbytek výšky displeje pod záhlavím (100svh počítá i s

     dolní vyhledávací/nástrojovou lištou Safari na iPhonu) — .hero__visual

     tak VŽDY vyplní celou první obrazovku a box se statistikami (další

     obsah v .hero, hned pod .hero__visual) začíná až pod jejím dolním

     okrajem. flex: 1 1 auto (viz základní pravidlo výš) navíc umožní

     .hero__visual ještě povyrůst, pokud by .hero (min-height 100svh) mělo

     z jiného důvodu víc volného místa — min-height je tu jen bezpečná

     spodní hranice, obsah se nikdy neořízne. */

  .hero__visual {

    position: relative;

    min-height: calc(100vh - var(--header-h) - env(safe-area-inset-top));

    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top));

  }



  /* Vrstvené pozadí hero sekce: podklad (gradient) → ořezaná fotka u spodní

     hrany → tmavé překrytí navrch pro čitelnost textu. */

  .hero__bg-mobile { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }

  .hero__bg-base,

  .hero__bg-photo,

  .hero__bg-overlay { position: absolute; inset: 0; }

  .hero__bg-base { background: linear-gradient(180deg, #3aa9c4, #1b6c80); }

  /* Vršek (hlava, rámování) zůstává stejný jako předtím (top: 1cm) — výška je

     teď vzorec, ne pevné %, aby spodní okraj fotky VŽDY (na libovolné výšce

     displeje) skončil schovaný přesně v polovině tlačítka "Zavolat Radimovi",

     ne až pod ním v mezeře, kde by bylo vidět, že se ořezává:

     1cm (odsazení vršku) + 16px (padding-bottom .hero__inner) + 27px

     (polovina výšky .btn--lg, min-height 54px) = kolik se odečítá od 100 %. */

  .hero__bg-photo { background: url("../img/lukas-suniar.webp") top 1cm center / auto calc(100% - 1cm - var(--space-4) - 27px) no-repeat; }

  /* Ztmavení začíná výš (~22 % výšky kontejneru, cca krk/ramena) a je plně

     tmavé (94 %) od 46 %, tedy ještě před blokem se jménem/hodnocením/

     benefity/tlačítky (ten díky margin-top:auto na .hero__content-top

     začíná kolem 50 %), aby byl bílý text vždy dobře čitelný. Hustá řada

     mezistupňů (S-křivka, ne lineární skok) mezi 22-46 % = oko nevnímá

     žádnou ostrou hranu (tzv. Mach band efekt na méně krocích). */

  .hero__bg-overlay {

    background: linear-gradient(180deg,

      rgba(13, 27, 36, .35) 0%,

      rgba(13, 27, 36, 0)   10%,

      rgba(13, 27, 36, 0)   22%,

      rgba(13, 27, 36, .04) 25%,

      rgba(13, 27, 36, .15) 28%,

      rgba(13, 27, 36, .30) 31%,

      rgba(13, 27, 36, .47) 34%,

      rgba(13, 27, 36, .64) 37%,

      rgba(13, 27, 36, .79) 40%,

      rgba(13, 27, 36, .90) 43%,

      rgba(13, 27, 36, .94) 46%);

  }



  /* "Zavolat Radimovi" v hero__cta — na hoveru zůstává tyrkysová výplň,

     mění se jen text na tmavý (místo výchozí .btn--primary:hover, která by

     tu měnila i pozadí). :not(.hero__cta-dark) ho odliší od prvního tlačítka. */

  .hero__cta a.btn--primary:not(.hero__cta-dark):hover {

    --btn-bg: var(--color-primary);

    --btn-fg: var(--color-text);

    color: var(--color-text);

  }

}

/* Statistiky jako spodní pruh hero sekce */

.hero__stats { position: relative; z-index: 1; }



/* Lokální badge — „specialista na danou oblast" */

.hero__location {

  display: inline-flex;

  align-items: center;

  gap: var(--space-3);

  margin-bottom: var(--space-5);

  font-family: var(--font-mono);

  font-size: 0.76rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--color-text);

}

.hero__location-dot {

  width: 8px; height: 8px; border-radius: 50%;

  background: var(--color-primary);

  box-shadow: 0 0 0 4px var(--color-primary-soft);

  flex: none;

}



.hero__name {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.4rem);

  line-height: 1.05;

  letter-spacing: -0.015em;

  white-space: nowrap; /* jméno vždy na jednom řádku */

  color: var(--color-text);

  margin-bottom: -0.25rem;

  margin-left: -6px; /* optické srovnání kraje s hodnocením a benefity pod ním */

}

@media (max-width: 560px) {

  .hero__name { margin-top: 0; }

}

.hero__title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem);

  line-height: 1.12;

  letter-spacing: -0.015em;

  white-space: nowrap; /* nadpis vždy na jednom řádku */

  max-width: 30ch;

  color: var(--color-primary);

  margin-left: -6px; /* optické srovnání kraje s hodnocením a benefity pod ním */

}

.hero__rating { margin: var(--space-4) 0 0; }

.hero__subtitle {

  margin-top: var(--space-5);

  font-size: var(--fs-lead);

  color: var(--color-text-muted);

  max-width: 48ch;

}

.hero__cta {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

  margin-top: var(--space-6);

}

.hero__cta .btn { flex: 1 1 auto; }

/* "Chci prodat nemovitost" — stejná tmavá barevnost jako .kontakt-card__map-route

   ("Zobrazit trasu"), místo výchozí tyrkysové .btn--primary. Zúženo na

   .hero__cta-dark, aby druhé tlačítko ("Zavolat Radimovi") mohlo zůstat

   ve výchozí tyrkysové .btn--primary — stejný vizuál jako v .hero__contact. */

.hero__cta .btn--primary.hero__cta-dark { --btn-bg: #16232b; --btn-fg: #fff; }

.hero__cta .btn--primary.hero__cta-dark:hover { --btn-bg: var(--color-primary); --btn-fg: #fff; }

/* "Zjistit cenu nemovitosti" (desktop) — na hoveru plné tyrkysové pozadí,

   text zůstává tmavý. color explicitně i v hoveru — jinak obecné

   "a:hover { color: ... }" pravidlo přebije. */

.hero__cta .btn--outline:hover { --btn-bg: var(--color-primary); border-color: var(--color-primary); color: var(--color-text); }



/* Dvě varianty druhého CTA tlačítka: na desktopu "Zjistit cenu nemovitosti"

   (původní vizuál), na mobilu "Zavolat Radimovi" (tel: odkaz). */

.hero__cta-mobile-only { display: none; }

@media (max-width: 899px), (min-width: 900px) and (orientation: portrait) {

  .hero__cta-desktop-only { display: none; }

  .hero__cta-mobile-only { display: inline-flex; }

}



/* Při hoveru na "Chci prodat nemovitost" dostane sousední "Zavolat Radimovi"

   stejnou tmavou barevnost, jakou má to první tlačítko běžně (bílý text,

   tmavá výplň #16232b) — "~" cílí na tlačítko, které v HTML následuje za ním. */

.hero__cta .hero__cta-dark:hover ~ .btn--primary {

  --btn-bg: #16232b;

  --btn-fg: #fff;

  color: #fff;

}



/* Tři konkrétní důvody důvěry */

.hero__reasons {

  display: grid;

  gap: var(--space-3);

  margin-top: var(--space-7);

}

@media (max-width: 899px), (min-width: 900px) and (orientation: portrait) {

  .hero__reasons { margin-top: 12px; }

}

.hero__reasons li {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr);

  gap: var(--space-3);

  align-items: start;

  font-size: 0.98rem;

  color: var(--color-text);

}

.hero__reason-ic { width: 20px; height: 20px; margin-top: 2px; margin-left: -3px; color: var(--color-primary); flex: none; }

@media (max-width: 560px) {

  /* Každý benefit vždy na jednom řádku — text se místo zalomení radši zmenší

     (vw-fluidní clamp), aby se vešel i na nejužší telefony (320px). */

  .hero__reasons li span { white-space: nowrap; font-size: clamp(0.6rem, 3vw, 0.9rem); }

  /* align-items:start + pevné margin-top:2px na ikoně byly odladěné pro

     desktopovou velikost textu (0.98rem) — se zmenšeným textem (viz výš)

     byla fajfka (pevných 20px) vůči textu vizuálně posazená níž. Center

     zarovná obě buňky podle výšky řádku bez ohledu na přesný poměr velikostí. */

  .hero__reasons li { align-items: center; }

  .hero__reason-ic { margin-top: 0; }

}



/* -------- Hero karta (fotka + překrývající kontaktní vizitka) -------------- */

.hero__card { position: relative; width: 100%; max-width: 440px; justify-self: center; }



.hero__photo-wrap {

  position: relative;

  aspect-ratio: 4 / 5;

  /* Žádný rámeček/box — postava makléře stojí přímo na pozadí hero sekce.

     (Vyžaduje fotku s průhledným pozadím – ořezanou postavu.) */

}

.hero__photo { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }



/* Kontaktní vizitka překrývající spodek fotky */

.hero__contact {

  position: relative;

  z-index: 3;

  margin-top: calc(-1 * var(--space-8));

  margin-inline: var(--space-4) 0;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  padding: var(--space-5);

}

.hero__signature {

  font-family: var(--font-display);

  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.7rem); /* původní velikost zachována */

  font-weight: 700;

  letter-spacing: -0.015em;

  line-height: 1.05;

  text-wrap: balance;

}

.hero__signature-line { width: 52px; height: 2px; background: var(--color-primary); margin: var(--space-3) 0; }

.hero__signature-role { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: -2px; }

.hero__phone-big {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  margin-top: var(--space-4);

  font-family: var(--font-mono);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--color-text);

}

.hero__phone-big svg { width: 18px; height: 18px; color: var(--color-primary-darker); }

.hero__contact .btn { margin-top: var(--space-4); }



/* Statistiky */

/* Statistiky = tyrkysový panel (zaoblený tvar) s čísly ve stylu H2 */

.stats {

  position: relative;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: var(--space-7);

  padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-4), 2vw, var(--space-6));

  background: linear-gradient(135deg, #20C8E2 0%, var(--color-primary) 55%, #14AEC9 100%);

  border-radius: var(--radius-lg);

  box-shadow: 0 18px 44px rgba(28, 193, 221, 0.22);

}

.stat {

  position: relative;

  text-align: center;

  padding-inline: clamp(var(--space-2), 2vw, var(--space-5));

}

.stat + .stat::before {

  content: "";

  position: absolute;

  left: 0;

  top: 8%;

  bottom: 8%;

  width: 1px;

  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);

}

@media (max-width: 560px) {

  .stats {

    grid-template-columns: 1fr;

    gap: var(--space-5);

    max-width: 320px;

    padding: var(--space-7) var(--space-6);

    margin-inline: auto;

  }

  .stat { padding-inline: 0; position: relative; }

  .stat + .stat { border-left: 0; padding-top: var(--space-4); }

  .stat + .stat::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: auto;

    left: 8%;

    right: 8%;

    width: auto;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);

  }

  /* Na jeden sloupec (každý stat na plnou šířku) je místa dost na to, aby

     číslo bylo výrazně větší než na základním (vícesloupcovém) rozvržení.

     Zesíleno přes .stats, protože základní ".stat__value { font-size }"

     je dál v souboru a při stejné specificitě by jinak vyhrálo ono. */

  .stats .stat__value { font-size: clamp(2.2rem, 1.6rem + 5vw, 3rem); }

}

.stat__value {

  display: block;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(1.8rem, 1.1rem + 3vw, 3.5rem); /* jako H2 */

  line-height: 1.02;

  letter-spacing: -0.015em;

  color: var(--color-white);

}

.stat__num { font-variant-numeric: tabular-nums; }

.stat__suffix { font-size: 0.45em; font-weight: 600; color: rgba(255, 255, 255, 0.88); margin-left: 2px; }

.stat__label {

  display: block;

  margin-top: var(--space-2);

  font-size: var(--fs-sm);

  font-weight: 500;

  color: rgba(255, 255, 255, 0.9);

}



/* -----------------------------------------------------------------------------

   7) KARTY / SLUŽBY

   -------------------------------------------------------------------------- */

/* Tři pilíře prodeje — velká čísla + obsah, oddělené jemnou linkou do ztracena */

.pillars { margin-top: var(--space-7); }

.pillar {

  display: grid;

  grid-template-columns: auto 1fr;

  column-gap: clamp(var(--space-4), 2.5vw, var(--space-6));

  row-gap: var(--space-1);

  align-items: start;

  padding-block: clamp(var(--space-4), 1.6vw, var(--space-5));

  border-top: 1px solid var(--color-border);

  border-image: linear-gradient(90deg, var(--color-border), transparent) 1;

}

.pillar:last-of-type { border-bottom: 1px solid var(--color-border); }

.pillar__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  color: var(--color-primary);

}

.pillar__icon svg { width: 100%; height: 100%; display: block; }

.pillar__body { max-width: 44ch; }

.pillar__title {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);

  letter-spacing: -0.01em;

  margin-bottom: var(--space-2);

}

.pillar__text { color: var(--color-text-muted); }



/* Dvousloupcový layout: vlevo kroky, vpravo servisní karta */

.services-layout {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--space-7);

  margin-top: var(--space-7);

  align-items: start;

}

.services-main .section__head { margin-bottom: var(--space-6); }

.services-main .pillars { margin-top: 0; }



/* Servisní karta — shrnutí celého procesu (ne generická karta) */

.services-card {

  position: relative;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: clamp(var(--space-5), 3vw, var(--space-6));

  overflow: hidden;

  box-shadow: var(--shadow-card); /* jemné zvednutí, ne výrazná karta */

}

.services-card::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--color-primary), transparent);

}

.services-card__title {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: var(--fs-h3);

  letter-spacing: -0.01em;

  margin-bottom: var(--space-3);

}

.services-card__text { color: var(--color-text-muted); }

.services-card__list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-3) var(--space-4);

  margin-top: var(--space-4);

  padding-top: var(--space-4);

  border-top: 1px solid var(--color-border);

  border-image: linear-gradient(90deg, var(--color-border), transparent) 1;

}

.services-card__list li {

  display: grid;

  grid-template-columns: auto 1fr;

  align-items: center;

  gap: var(--space-2);

  font-size: 0.95rem;

  font-weight: 500;

}

.services-card__check { width: 18px; height: 18px; color: var(--color-primary); flex: none; }



/* Pravý sloupec = karta + půdorys pod ní */

.services-side { display: grid; gap: var(--space-5); align-content: start; }

.services-floorplan {

  display: block;

  width: 100%;

  height: auto;

  transform: translateX(-48px) scale(1.12); /* posun doleva + zvětšení o 12 % */

  /* Mizí do ztracena vpravo a dole (průnik dvou gradientových masek) */

  -webkit-mask-image:

    linear-gradient(to right, #000 78%, transparent 100%),

    linear-gradient(to bottom, #000 78%, transparent 100%);

  -webkit-mask-composite: source-in;

  mask-image:

    linear-gradient(to right, #000 78%, transparent 100%),

    linear-gradient(to bottom, #000 78%, transparent 100%);

  mask-composite: intersect;

}

/* Na mobilu (vše pod sebou) půdorys nepotřebujeme — žádné prázdné místo k vyplnění */

@media (max-width: 899px) {

  .services-floorplan { display: none; }

}



@media (min-width: 900px) {

  .services-layout { grid-template-columns: 1.55fr 1fr; gap: var(--space-9); }

}



/* Doplňkové služby — kompaktní 3 položky, lehčí než hlavní prodejní sekce */

.services-more { margin-top: clamp(var(--space-7), 5vw, var(--space-9)); }

.services-more__head { max-width: 64ch; margin-bottom: var(--space-6); }

.services-more__title {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);

  letter-spacing: -0.01em;

  margin-bottom: var(--space-2);

}

.services-more__text { color: var(--color-text-muted); }

.services-more__grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));

  gap: var(--space-4);

}

.services-more__item {

  display: flex;

  flex-direction: column;

  gap: var(--space-2);

  padding: var(--space-4);

  background-color: var(--color-white);

  background-position: right center;

  background-size: contain;

  background-repeat: no-repeat;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

}

/* Decentní obrázek v pozadí — silný bílý overlay, aby jen jemně prosvítal (jako hero) */

.services-more__item--odhad {

  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.92) 35%, rgba(255, 255, 255, 0.6)), url("../img/karta-odhad.webp");

}

.services-more__item--koupe {

  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.92) 35%, rgba(255, 255, 255, 0.6)), url("../img/karta-koupe.webp");

}

.services-more__item--pronajem {

  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.92) 35%, rgba(255, 255, 255, 0.6)), url("../img/karta-pronajem.webp");

}

.services-more__top { display: flex; align-items: center; gap: var(--space-2); }

.services-more__ic { width: 20px; height: 20px; color: var(--color-primary); flex: none; stroke-width: 1.5; }

.services-more__item-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

.services-more__item-text { color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.55; flex: 1 1 auto; }

.services-more__link {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  margin-top: var(--space-2);

  font-size: var(--fs-sm);

  font-weight: 600;

  color: var(--color-primary-darker);

}

.services-more__link::after { content: "→"; transition: transform var(--transition); }

.services-more__link:hover { color: var(--color-primary); }

.services-more__link:hover::after { transform: translateX(3px); }



/* Doplňkový blok — koupě / odhad */

.services-extra {

  margin-top: clamp(var(--space-6), 4vw, var(--space-7));

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-4) var(--space-6);

  padding: clamp(var(--space-6), 4vw, var(--space-7));

  background: var(--color-primary-soft);

  border: 1px solid rgba(28, 193, 221, 0.25); /* jemný tyrkysový border — patří do systému, ale odlišuje CTA */

  border-radius: var(--radius-md);

}

.services-extra__body { max-width: 62ch; }

.services-extra__title {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: var(--fs-h3);

  margin-bottom: var(--space-2);

}

.services-extra__text { color: var(--color-text-muted); }

.services-extra .btn { flex: none; }

@media (max-width: 560px) {

  .services-extra { flex-direction: column; align-items: stretch; }

  .services-extra .btn { width: 100%; }

}



/* ---- Služby: záhlaví + mřížka 3 karet ---- */

.sluzby-head {

  max-width: 100%;

  margin: 0 auto var(--space-7);

  text-align: center;

}

.sluzby-kicker {

  font-family: var(--font-display);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--color-primary);

  margin: 0 0 var(--space-3);

}

.sluzby-title {

  font-family: var(--font-display);

  font-size: clamp(1.05rem, calc(-0.05rem + 5vw), 2.75rem);

  font-weight: 700;

  letter-spacing: -0.02em;

  line-height: var(--lh-tight);

  color: var(--color-text);

  margin: 0 0 var(--space-4);

  white-space: nowrap;

}

.sluzby-lead {

  font-size: clamp(0.9rem, 0.75rem + 0.6vw, 1.05rem);

  color: var(--color-text-muted);

  max-width: 100%;

  margin: 0 auto;

}

/* Vynucený zlom řádku jen na mobilu — na desktopu text běží na jednom

   řádku přirozeně, <br> se tam neprojeví. */

.sluzby-lead__break { display: none; }

@media (max-width: 899px) {

  .sluzby-lead__break { display: inline; }

}



.sluzby-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;

}

@media (max-width: 900px) {

  .sluzby-grid { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 600px) {

  .sluzby-grid { grid-template-columns: 1fr; }

}



.sluzba-card {

  position: relative;

  display: flex;

  flex-direction: column;

  border: 1px solid #EEF1F2;

  border-radius: 20px;

  overflow: hidden;

  background: var(--color-white);

  box-shadow: 0 10px 30px rgba(16, 35, 43, 0.06);

}



.sluzba-card__media {

  position: relative;

  aspect-ratio: 16 / 11;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

}

.sluzba-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* lehký překryv fotky — při hoveru na kartě zmizí a odkryje fotku naostro */

.sluzba-card__media::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(12, 26, 32, 0.18);

  transition: opacity var(--transition-slow);

  pointer-events: none;

}

.sluzba-card:hover .sluzba-card__media::before { opacity: 0; }

/* gradient pro čitelnost nadpisu na fotce — zůstává i při hoveru */

.sluzba-card__media::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background: linear-gradient(180deg, rgba(12, 26, 32, 0) 45%, rgba(12, 26, 32, 0.55) 100%);

  pointer-events: none;

}

.sluzba-card__badge {

  position: absolute;

  z-index: 1;

  top: 14px;

  left: 14px;

  background: var(--color-primary);

  color: var(--color-ink);

  padding: 6px 12px;

  border-radius: var(--radius-pill);

  font-size: 11.5px;

  font-weight: 700;

}



.sluzba-card__body {

  flex: 1;

  display: flex;

  flex-direction: column;

  padding: 26px 24px 28px;

}

.sluzba-card__title {

  position: relative;

  z-index: 1;

  width: 100%;

  padding: 0 20px 20px;

  font-family: var(--font-display);

  font-size: 40px;

  line-height: 1.05;

  letter-spacing: -0.01em;

  font-weight: 700;

  color: var(--color-white);

  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);

  margin: 0;

  white-space: nowrap;

}

.sluzba-card__list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin: 0 0 var(--space-5);

  padding: 0;

}

.sluzba-card__list li {

  position: relative;

  padding-left: 26px;

  font-size: 13.5px;

  color: var(--color-text);

}

.sluzba-card__list li::before {

  content: "✓";

  position: absolute;

  left: 0;

  top: 0;

  color: var(--color-primary);

  font-weight: 700;

}

/* Stejná tmavá tlačítková vizualita jako „Chci prodat nemovitost" v hero sekci. */

.sluzba-card__cta {

  margin-top: auto;

  align-self: flex-start;

  display: inline-flex;

  align-items: center;

  gap: 0.4em;

  font-weight: 600;

  font-size: var(--fs-sm);

  color: var(--color-white);

  background: #16232b;

  padding: var(--space-3) var(--space-5);

  border-radius: var(--radius-sm);

  text-decoration: none;

  transition: background var(--transition);

}

.sluzba-card__cta:hover { background: var(--color-primary); color: var(--color-white); }

.sluzba-card__arrow { transition: transform var(--transition); }

.sluzba-card__cta:hover .sluzba-card__arrow { transform: translateX(4px); }



@media (prefers-reduced-motion: reduce) {

  .sluzba-card__cta, .sluzba-card__arrow { transition: none; }

}



/* -----------------------------------------------------------------------------

   AKTUÁLNÍ NABÍDKA — tmavá karta s vypíchnutou nemovitostí (foto + cena/CTA).

   -----------------------------------------------------------------------------

   Tři OSTRÉ layoutové režimy (mobil / tablet / desktop), žádné plynulé

   dopočítávání šířek mezi nimi — každý režim má vlastní pevná pravidla, aby

   na mezilehlých rozlišeních nevznikaly deformované mezistavy.

   Základ (bez media query) = mobilní pravidla (≤699px). Tablet 700–1099px

   a desktop od 1100px dál jsou samostatné @media bloky níže.

   -------------------------------------------------------------------------- */

#nabidka { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }

#nabidka .container { max-width: 1280px; }



.nabidka-card {

  max-width: 1280px;

  margin-inline: auto;

  background: #0d1b24;

  border-radius: var(--radius-lg);

  overflow: hidden; /* radius + přesahy fotek */

}



/* --- Galerie (3 samostatné fotky, ne koláž) --------------------------------

   Foto vymění nahrazením assets/img/nabidka-koupelna.webp / -dum.webp /

   -pokoj.webp (stejné názvy). grid-template-areas (ne pevná grid-row/column

   čísla) — layout jde v každém režimu kompletně přeskládat jen přejmenováním

   oblastí, beze změny HTML. */

.nabidka-card__media { min-width: 0; }

.nabidka-card__photos {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-areas: "main main" "top bottom";

  gap: 2px;

  background: rgba(255, 255, 255, .85); /* světlé mezery mezi fotkami */

}

.nabidka-card__photo-wrap { position: relative; overflow: hidden; min-width: 0; }

/* Mobil (základ): hlavní fotka širokopásmá nahoře, dvě čtvercové pod ní. */

.nabidka-card__photo-wrap--main { grid-area: main; aspect-ratio: 16 / 7; }

.nabidka-card__photo-wrap--top { grid-area: top; aspect-ratio: 1 / 1; }

.nabidka-card__photo-wrap--bottom { grid-area: bottom; aspect-ratio: 1 / 1; }

.nabidka-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }



/* Badge + cena/název — uvnitř --main wrapperu, takže se drží jen nad hlavní

   fotkou ve všech třech režimech, nikdy nezasahují do vedlejších fotek. */

.nabidka-card__badge {

  position: absolute;

  top: 14px;

  left: 14px;

  z-index: 1;

  background: var(--color-primary);

  color: var(--color-ink);

  font-size: 12px;

  font-weight: 700;

  padding: 6px 12px;

  border-radius: 999px;

}

.nabidka-card__price-box {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

  padding: 16px 18px;

  background: linear-gradient(0deg, rgba(13, 27, 36, .9), transparent);

}

.nabidka-card__price { margin: 0; font-size: 20px; font-weight: 800; color: var(--color-white); }

.nabidka-card__desc { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); }



/* --- Textový panel ---------------------------------------------------------

   min-width:0 — bez toho by ho galerie/dlouhý text mohly roztáhnout přes

   jeho gridovou buňku (relevantní hlavně pro desktop grid). */

.nabidka-card__content { min-width: 0; padding: 24px 20px; }

.nabidka-card__kicker {

  display: block;

  font-size: 12px;

  letter-spacing: .24em;

  text-transform: uppercase;

  color: var(--color-primary);

  font-weight: 600;

  margin-bottom: 12px;

}

.nabidka-card__heading {

  font-family: var(--font-display);

  font-size: 23px;

  font-weight: 700;

  line-height: 1.2;

  color: var(--color-white);

  margin: 0 0 var(--space-3);

  text-wrap: balance;

  overflow-wrap: normal;

}

.nabidka-card__heading-accent { color: var(--color-primary); }

.nabidka-card__lead {

  font-size: 14.5px;

  line-height: 1.6;

  color: rgba(255, 255, 255, .7);

  margin: 0 0 16px;

}

.nabidka-card__cta {

  width: 100%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4em;

  background: transparent;

  color: var(--color-white);

  padding: 14px 16px;

  border: 1px solid rgba(255, 255, 255, .3);

  border-radius: 12px;

  font-size: 14.5px;

  font-weight: 700;

  text-decoration: none;

  transition: background var(--transition), border-color var(--transition), color var(--transition);

}

/* color explicitně i v hoveru — jinak obecné "a:hover { color: ... }" pravidlo

   (specifičtější než jen barva zděděná ze základního stavu) přebije bílou. */

.nabidka-card__cta:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }



/* =========================================================================

   TABLET — 700–1099px. Galerie NAD textem (ne vedle sebe), ale širší fotky

   a víc vzduchu než mobil. Vlastní blok, ne mezistupeň mobilu a desktopu.

   ========================================================================= */

@media (min-width: 700px) and (max-width: 1099px) {

  .nabidka-card__photo-wrap--main { aspect-ratio: 16 / 6.5; }

  .nabidka-card__photo-wrap--top,

  .nabidka-card__photo-wrap--bottom { aspect-ratio: 16 / 7; }

  .nabidka-card__badge { top: 22px; left: 22px; font-size: 13px; padding: 8px 16px; }

  .nabidka-card__price-box { padding: 26px 28px; }

  .nabidka-card__price { font-size: 24px; }

  .nabidka-card__desc { font-size: 15px; }



  .nabidka-card__content { padding: 36px; }

  .nabidka-card__kicker { margin-bottom: 14px; }

  .nabidka-card__heading { font-size: 30px; margin-bottom: var(--space-4); }

  .nabidka-card__lead { font-size: 15px; margin-bottom: 24px; }

  .nabidka-card__cta { width: auto; max-width: 420px; padding: 15px 28px; font-size: 15px; }

}



/* =========================================================================

   DESKTOP — od 1100px. Dva sloupce vedle sebe (~60/40), stejná výška.

   Galerie: hlavní fotka vlevo (~66 %), dvě navršené vpravo (~34 %).

   ========================================================================= */

@media (min-width: 1100px) {

  .nabidka-card {

    display: grid;

    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);

    align-items: stretch;

  }

  .nabidka-card__photos {

    height: 100%;

    grid-template-columns: 2fr 1fr;

    grid-template-rows: 1fr 1fr;

    grid-template-areas: "main top" "main bottom";

  }

  /* Na desktopu výšku dodává stretch gridu (viz .nabidka-card výše), ne

     aspect-ratio — ta by při vysokém textovém sloupci nutila fotky do

     nepřirozeně vysokého poměru stran. */

  .nabidka-card__photo-wrap--main,

  .nabidka-card__photo-wrap--top,

  .nabidka-card__photo-wrap--bottom { aspect-ratio: auto; height: 100%; }



  .nabidka-card__badge { top: 22px; left: 22px; font-size: 13px; padding: 8px 16px; }

  .nabidka-card__price-box { padding: 26px 28px; }

  .nabidka-card__price { font-size: 24px; }

  .nabidka-card__desc { font-size: 15px; }



  .nabidka-card__content {

    padding: 56px 52px;

    display: flex;

    flex-direction: column;

    justify-content: center;

  }

  .nabidka-card__kicker { margin-bottom: 14px; }

  .nabidka-card__heading { font-size: 34px; margin-bottom: var(--space-4); }

  .nabidka-card__lead { font-size: 15px; max-width: 340px; margin-bottom: 28px; }

  .nabidka-card__cta { width: auto; align-self: flex-start; padding: 16px 34px; font-size: 1rem; }

}



/* -----------------------------------------------------------------------------

   9) RECENZE

   -------------------------------------------------------------------------- */

/* Hlavička: nadpis vlevo, souhrnný rating box (plná bílá karta) vpravo */

.reviews-head { margin-bottom: 48px; }

.reviews-head .section__head { margin-bottom: 0; }

.reference-kicker {

  display: block;

  margin-bottom: var(--space-3);

  color: #04303a;

  opacity: .7;

  font-weight: 600;

  font-size: 12px;

  letter-spacing: .24em;

  text-transform: uppercase;

}

@media (min-width: 720px) {

  .reviews-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

  .reviews-rating { flex: none; }

}

.reviews-rating {

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  background: var(--color-white);

  border-radius: 18px;

  padding: 26px 34px;

  box-shadow: 0 20px 44px rgba(4, 48, 58, .2);

  gap: 2px;

}

.reviews-rating[hidden] { display: none; }

.reviews-rating__score {

  font-family: var(--font-display);

  font-size: 1.8rem; /* původní velikost */

  font-weight: 700;  /* styl H2 */

  line-height: 1;

  letter-spacing: -0.015em;

  color: var(--color-text);

}

.reviews-rating__out { color: var(--color-text-muted); font-size: 1rem; font-weight: 500; }

.reviews-rating__stars { color: #FBBC04; letter-spacing: 2px; font-size: 0.9rem; margin-top: var(--space-2); }

.reviews-rating__label { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

.reviews-rating__sources { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary-darker); }

.reviews-rating__src { color: var(--color-primary-darker); text-decoration: none; }

.reviews-rating__src[href]:hover { text-decoration: underline; }

/* Google jako logo místo textu — odkaz zůstává klikací */

.reviews-rating__src--logo { display: inline-flex; align-items: center; vertical-align: middle; }

.reviews-rating__src--logo:hover { text-decoration: none; opacity: 0.85; }

.reviews-rating__logo { display: block; height: 19px; width: auto; }

/* Firmy.cz logo má kolem sebe průhledné okraje → o něco vyšší, ať opticky sedí ke Google */

.reviews-rating__logo--firmy { height: 28px; }



/* Mobil: karta na stejnou šířku jako karta recenze pod ní (.reviews-head

   má už teď stejnou šířku jako .review), těsně nad recenzemi. */

.reviews-rating__row { display: contents; }

@media (max-width: 560px) {

  .reviews-head { margin-bottom: 12px; }

  .reviews-head .section__head { margin-bottom: 24px; }

  .reviews-rating {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 100%;

    box-sizing: border-box;

    padding: 22px 30px;

    gap: 4px;

  }

  .reviews-rating__row {

    display: flex;

    align-items: center;

  }

  .reviews-rating__row--top { gap: 3px; }

  .reviews-rating__row--bottom { gap: 8px; }

  .reviews-rating__score { font-size: 1.05rem; line-height: 1; }

  .reviews-rating__out { font-size: 0.6rem; }

  .reviews-rating__stars { font-size: 0.6rem; letter-spacing: 0.5px; margin-top: 0; }

  .reviews-rating__label {

    font-size: 0.6rem;

    line-height: 1.2;

    margin-top: 0;

    white-space: nowrap;

  }

  .reviews-rating__sources {

    font-size: 0.6rem;

    white-space: nowrap;

  }

  .reviews-rating__logo { height: 11px; }

  .reviews-rating__logo--firmy { height: 15px; }

}



.reviews {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

  gap: var(--space-5);

}

/* Carousel recenzí: 3 viditelné karty, tlačítko „Další recenze" posune track doleva */

.reviews--carousel { display: block; }

/* overflow-x skryje karty mimo carousel; overflow-y necháme volný a padding+

   záporný margin (navzájem se ruší v layoutu) dají stínu karet místo, ať ho

   overflow neořízne. */

.reviews__viewport {

  overflow-x: hidden;

  overflow-y: visible;

  padding: 4px 12px 16px;

  margin: -4px -12px -16px;

}

.reviews__track { display: flex; gap: var(--space-5); align-items: stretch; will-change: transform; }

.reviews--carousel .review { flex: 0 0 calc((100% - 2 * var(--space-5)) / 3); }

@media (max-width: 860px) {

  .reviews--carousel .review { flex-basis: calc((100% - var(--space-5)) / 2); }

}

@media (max-width: 560px) {

  .reviews--carousel .review { flex-basis: 100%; }

}

.reviews__nav { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }

.reviews__arrow {

  appearance: none;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border: 1px solid rgba(255, 255, 255, .35);

  border-radius: 50%;

  background: transparent;

  color: rgba(255, 255, 255, .75);

  box-shadow: none;

  transition: background var(--transition), border-color var(--transition), color var(--transition);

}

.reviews__arrow svg { width: 16px; height: 16px; }

.reviews__arrow:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; }

.reviews__arrow:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

.review {

  display: flex;

  flex-direction: column;

  gap: var(--space-4);

  background: var(--color-white);

  border-radius: 18px;

  padding: 32px 30px;

  box-shadow: 0 4px 12px rgba(4, 48, 58, .14);

}

.review__stars { color: #FBBC04; letter-spacing: 2px; font-size: 1.05rem; }

/* Karty v carouselu mají align-items:stretch (viz .reviews__track), takže

   jedna hodně dlouhá recenze natáhne výšku úplně všech karet v řadě.

   13 řádků = stejná výška karet jako u Radimova webu (stejná komponenta,

   ať oba weby vypadají konzistentně bez ohledu na to, jak dlouhé texty

   recenzí konkrétní klient má). */

.review__text {

  color: var(--color-text);

  display: -webkit-box;

  -webkit-line-clamp: 13;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.review__meta {

  margin-top: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: var(--space-3);

  padding-top: var(--space-4);

  border-top: 1px solid #eef2f3;

}

.review__name { font-weight: 700; }

/* zdroj jako decentní badge */

.review__source {

  font-size: 0.78rem;

  font-weight: 600;

  color: var(--color-primary-darker);

  background: var(--color-primary-soft);

  border-radius: var(--radius-pill);

  padding: 3px var(--space-3);

  white-space: nowrap;

}

.review__source a { color: inherit; text-decoration: none; }

/* Logo Google místo textového badge — bez pilulky, čistě */

.review__source:has(.review__logo) { background: none; padding: 0; border-radius: 0; }

.review__logo { display: block; height: 18px; width: auto; }

/* Firmy.cz logo má kolem sebe průhledné okraje → o něco vyšší, ať opticky sedí ke Google */

.review__logo--firmy { height: 26px; }



/* Fallback / provider placeholder když nejsou recenze */

.reviews__empty {

  grid-column: 1 / -1;

  text-align: center;

  background: var(--color-white);

  border: 1px dashed var(--color-border);

  border-radius: var(--radius-md);

  padding: var(--space-7);

  color: var(--color-text-muted);

}

.reviews__empty strong { color: var(--color-text); display: block; margin-bottom: var(--space-2); }



.reviews__cta {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: var(--space-3) var(--space-6);

  margin-top: var(--space-7);

}

.reviews__cta:empty { display: none; }

/* sekundární textové odkazy (nekonkurují hlavnímu CTA) */

.review-link {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  font-size: var(--fs-sm);

  font-weight: 600;

  color: var(--color-primary-darker);

}

.review-link::after { content: "→"; transition: transform var(--transition); }

.review-link:hover { color: var(--color-primary-dark); }

.review-link:hover::after { transform: translateX(3px); }



/* -----------------------------------------------------------------------------

   10) O MAKLÉŘI

   -------------------------------------------------------------------------- */

.about {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--space-6);

  align-items: start;

}

/* Mobil/tablet (jeden sloupec): fotka pod text, ne nad něj. Na desktopu

   (od 900px) layout řeší grid-template-areas níž, order tam nemá vliv. */

@media (max-width: 899px) {

  .about__media { order: 2; }

  .about__head { order: 1; }

  .about__body { order: 3; }

}

/* Fotka bez rámečku, ale s jemným světelným glow za postavou */

.about__media {

  position: relative;

  isolation: isolate;

  max-width: 420px;

  margin-inline: auto;

  width: 100%;

}

@media (max-width: 560px) {

  /* Skupina foto+bar má pevnou šířku 320px (240 foto, bar začíná +130px a je 190px

     široký) — margin dopočítaný přes calc() střed skupiny drží na středu KAŽDÉ

     šířky displeje, ne jen té, na které se to ladilo. Vzájemný odstup (130px) se

     tím nemění. */

  /* max-width 288px (ne 240px jako ve vzoru) — Lukášova fotka má kvůli gestu

     širší poměr stran (~0,58 místo ~0,48 u Radima), takže by při stejné šířce

     vycházela znatelně nižší. Širší box ji přiblíží Radimově výšce (stejný

     princip jako úprava pro desktop o pár řádků výš u @media 900px). */

  .about__media { max-width: 317px; margin-left: calc((100% - 320px) / 2); margin-right: 0; margin-top: -118px; z-index: 1; }

}

.about__media::before {

  content: "";

  position: absolute;

  z-index: -1;

  inset: 4% -14% 6%;

  background: radial-gradient(58% 52% at 50% 42%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%);

  pointer-events: none;

}

/* měkký realistický kontaktní stín přesně pod nohama postavy

   (fotka má dole ~9 % průhledný okraj, proto je stín posunutý výš a mírně vlevo) */

.about__media::after {

  content: "";

  position: absolute;

  z-index: -1;

  left: 50%;

  bottom: 3%;

  width: 56%;

  height: 28px;

  transform: translateX(-50%);

  background: radial-gradient(ellipse at center, rgba(8, 20, 26, 0.34) 0%, rgba(8, 20, 26, 0.2) 38%, rgba(8, 20, 26, 0) 72%);

  filter: blur(14px);

  border-radius: 50%;

  pointer-events: none;

}

.about__photo {

  width: 100%;

  aspect-ratio: 860 / 1494; /* ≈ poměr ořezané postavy (lukas-about.webp) → vyplní box, vystředěná */

  object-fit: contain;

  object-position: center bottom;

  display: block;

}

.about__head .section__title { margin-bottom: 6px; }

.om-kicker {

  display: block;

  margin-bottom: 12px;

  color: #1CC1DD;

  font-weight: 600;

  font-size: 12px;

  letter-spacing: .22em;

  text-transform: uppercase;

  text-indent: -0.05em; /* optické srovnání kulatého "O" s hranou nadpisu pod ním */

}

.om-rating {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

  margin-top: 0;

  margin-bottom: var(--space-4);

}

.om-stars { color: #FBBC04; font-size: 15px; letter-spacing: 1px; line-height: 1; }

.om-rating .om-stars { margin-left: -5px; }

.om-rating-text { font-size: 14px; color: #6a7880; }

.om-rating-text strong { color: #16232b; font-weight: 700; }

/* zvýrazněný úvod — editorial blok */

.about__intro {

  font-size: var(--fs-lead);

  line-height: 1.7;

  color: var(--color-text);

  margin-bottom: var(--space-2);

  max-width: 44ch;

}

/* decentní trust řádek (ne velké statistiky) */

/* Stejný vizuál jako hero stats panel (tyrkysový gradient + glow), jen menší */

.about__trust {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-bottom: var(--space-6);

  padding: clamp(var(--space-5), 2.5vw, var(--space-7)) clamp(var(--space-4), 2vw, var(--space-5));

  background: linear-gradient(135deg, #20C8E2 0%, var(--color-primary) 55%, #14AEC9 100%);

  border-radius: var(--radius-lg);

  box-shadow: 0 16px 38px rgba(28, 193, 221, 0.24);

}

.about__trust li {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding-inline: var(--space-4);

  font-size: 1rem;

  font-weight: 500;

  line-height: 1.35;

  color: var(--color-white);

}

.about__trust li + li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 8%;

  bottom: 8%;

  width: 1px;

  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);

}

@media (max-width: 560px) {

  .about__trust {

    grid-template-columns: 1fr;

    width: 190px;

    max-width: 190px;

    margin-left: calc((100% - 320px) / 2 + 149px);

    margin-right: 0;

    margin-bottom: var(--space-6);

    padding: var(--space-3) var(--space-3);

    position: relative;

    z-index: 2;

  }

  .about__trust li { padding-block: 6px; font-size: 0.9rem; position: relative; }

  .about__trust li + li { border-left: 0; }

  .about__trust li + li::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: auto;

    left: 8%;

    right: 8%;

    width: auto;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);

  }

}

/* Desktop: širší bar, rozšířený symetricky na obě strany (vlevo pod fotku, vpravo do okraje),

   zůstává centrovaný → prostřední benefit „Ostrava a okolí" je pod středem textu nad barem.

   Přesah je omezený na skutečně volné místo do okraje obrazovky (1096px = šířka

   .about__body gridu: 460px + 540px sloupce + 96px mezera), aby se na užších

   desktopech (jako u hero .stats baru) zmenšil místo toho, aby se useknul.

   "100vw" počítá i se šířkou scrollbaru, ale .section (overflow:hidden) je

   reálně o tu šířku užší — bez rezervy (+10px) proto bar o pár px přesahoval

   a useklo ho to. */

@media (min-width: 900px) {

  .about__trust { margin-inline: max(-139px, min(0px, calc((1096px - 100vw) / 2 + 10px))); }

}



.about__text { color: var(--color-text-muted); line-height: 1.8; margin: 0 0 var(--space-5); break-inside: avoid; }

.about__text:last-child { margin-bottom: 0; }



/* Dlouhý příběh — rozbalitelný blok. Sloupce jsou na vnitřním wrapperu,

   aby animace výšky nerozhazovala multicol do vodorovných sloupců. */

.about__story { height: auto; overflow: hidden; transition: height 0.45s ease; }

.about__story-inner { columns: 1; }

@media (prefers-reduced-motion: reduce) { .about__story { transition: none; } }



/* Elegantní přepínač — čistý textový link se šipkou (na tyrkysové) */

.about__reveal {

  appearance: none;

  background: none;

  border: 0;

  cursor: pointer;

  align-self: flex-start;

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  margin: 0 0 var(--space-5);

  padding: var(--space-2) 0;

  color: var(--color-primary);

  font-family: var(--font-display);

  font-weight: 600;

  font-size: 0.9rem;

}

.about__reveal-ic { width: 18px; height: 18px; transition: transform var(--transition); }

.about__reveal[aria-expanded="true"] .about__reveal-ic { transform: rotate(180deg); }

.about__reveal:hover .about__reveal-label { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.about__reveal:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }



/* Jemný obrysový monogram „LŠ" v pozadí sekce (opacity ~6 %) */

#o-mne { position: relative; overflow: hidden; }

#o-mne::before {

  content: "LŠ";

  position: absolute;

  top: 6%;

  right: 12%;

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(7rem, 24vw, 34rem);

  line-height: 0.8;

  letter-spacing: -0.03em;

  color: rgba(150, 225, 240, 0.1); /* plná světle modrá výplň (decentní watermark) */

  z-index: 0;

  pointer-events: none;

}

#o-mne .container { position: relative; z-index: 1; }



/* CTA v pravém bloku — jednoduché bílé pill tlačítko (zarovnané s textem) */

.about__call {

  align-self: flex-start;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: var(--space-5);

  padding: 14px 22px;

  background: var(--color-white);

  color: var(--color-text);

  border-radius: var(--radius-pill);

  font-weight: 600;

  text-decoration: none;

  box-shadow: 0 8px 22px rgba(16, 32, 39, 0.14);

  transition: transform var(--transition), box-shadow var(--transition), color var(--transition);

}

.about__call:hover {

  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(16, 32, 39, 0.2);

  color: var(--color-primary-darker);

}

.about__call:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }



/* Kompaktní kontaktní (closing) blok — bílá karta v levém sloupci pod fotkou */

.about__cta {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: var(--space-3);

  padding: var(--space-5);

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

}

.about__cta-title {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: 1.15rem;

  letter-spacing: -0.01em;

  margin-bottom: var(--space-2);

}

.about__cta-text { color: var(--color-text-muted); font-size: var(--fs-sm); }

.about__cta .btn { align-self: flex-start; }

@media (max-width: 560px) {

  .about__cta .btn { width: 100%; align-self: stretch; }

}



/* -----------------------------------------------------------------------------

   11) FAQ — tyrkysový pruh, nahoře rovný okraj, dole šikmý (sekce sama sebe

   ořízne přes clip-path, žádný extra wedge netřeba).

   -------------------------------------------------------------------------- */

#faq {

  background: var(--color-primary);

  position: relative;

  --faq-slant: 44px;

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--faq-slant)));

  padding: 74px 56px 88px;

}



/* Dvousloupcová kompozice: vlevo (sticky) kicker/nadpis/perex/kontaktní karta, vpravo akordeon.

   Na mobilu jeden sloupec — levý blok nahoře (nesticky), akordeon pod ním. */

.faq-layout {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--space-6);

  padding-inline: 0;

}



.faq-kicker {

  display: block;

  margin-bottom: var(--space-3);

  color: #04303a;

  opacity: .7;

  font-weight: 700;

  font-size: 12px;

  letter-spacing: .22em;

  text-transform: uppercase;

}

.faq-title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 34px;

  letter-spacing: -0.02em;

  line-height: 1.05;

  color: var(--color-white);

  margin: 0 0 var(--space-3);

}

.faq-lead {

  color: rgba(255, 255, 255, .85);

  font-size: var(--fs-base);

  line-height: 1.6;

  margin: 0 0 var(--space-6);

  max-width: 42ch;

}

.faq-card {

  max-width: 350px;

  background: var(--color-white);

  border-radius: 18px;

  padding: 22px 24px;

  box-shadow: 0 14px 34px rgba(4, 48, 58, .2);

}

.faq-card__title { margin: 0 0 4px; font-weight: 700; color: var(--color-text); }

.faq-card__text { margin: 0 0 var(--space-4); color: #6a7880; font-size: var(--fs-sm); }



.faq-list { display: flex; flex-direction: column; gap: 12px; }



.faq__item {

  background: var(--color-white);

  border-radius: 16px;

  box-shadow: 0 10px 26px rgba(4, 48, 58, .14);

  transition: box-shadow var(--transition);

}

.faq__item-head { margin: 0; }

.faq__btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-4);

  padding: 22px 28px;

  background: none;

  border: 0;

  margin: 0;

  font: inherit;

  text-align: left;

  cursor: pointer;

  color: inherit;

  transition: padding var(--transition);

}

.faq__q { font-size: 16.5px; font-weight: 600; color: var(--color-text); transition: font-weight var(--transition); }

.faq__toggle {

  flex: none;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: #eafafd;

  color: var(--color-primary);

  font-size: 18px;

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background var(--transition), color var(--transition);

}

.faq__toggle::before { content: "+"; }



/* Otevřená položka — třídu .is-open přepíná JS (main.js initFaqAccordion) podle aria-expanded */

.faq__item.is-open .faq__btn { padding: 24px 28px; }

.faq__item.is-open .faq__q { font-weight: 700; }

.faq__item.is-open .faq__toggle { background: var(--color-primary); color: #fff; }

.faq__item.is-open .faq__toggle::before { content: "\2212"; } /* − */



.faq__panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }

/* Fallback bez JS (progressive enhancement): staticky otevřená první položka. */

.faq__item.is-open .faq__panel { max-height: none; }

.faq__panel-inner { padding: 0 28px 22px; }

.faq__panel-inner p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.7; color: #4d5b62; }



@media (prefers-reduced-motion: reduce) {

  .faq__item, .faq__btn, .faq__q, .faq__toggle, .faq__panel { transition: none; }

}



@media (max-width: 900px) {

  #faq { --faq-slant: 28px; padding: 48px 20px 56px; }

}



@media (min-width: 901px) {

  .faq-layout { grid-template-columns: .72fr 1.28fr; column-gap: 52px; align-items: start; padding-inline: 0; }

  .faq-col { align-self: start; }

  .faq-title { font-size: 46px; }

}

/* Mobil/tablet (jeden sloupec): .faq-card zůstává v HTML uvnitř .faq-col (aby

   na desktopu seděla přesně pod perexem beze změny), ale visuálně ji tu

   posuneme až za otázky — .faq-col je "display:contents" (jeho děti se stanou

   přímými položkami .faq-layout gridu) a .faq-card/.faq-list dostanou order. */

@media (max-width: 900px) {

  .faq-col { display: contents; }

  .faq-list { order: 1; }

  .faq-card { order: 2; }

  /* display:contents dělá z kicker/title/lead přímé položky .faq-layout gridu,

     takže se jim navíc přičítá i gridový gap (32px) k jejich vlastnímu

     margin-bottom — bez korekce by mezery byly dvojnásobné. */

  .faq-kicker { margin-bottom: calc(var(--space-3) - var(--space-6)); }

  .faq-title { margin-bottom: calc(var(--space-3) - var(--space-6)); }

  .faq-lead { margin-bottom: -8px; }

}



/* -----------------------------------------------------------------------------

   12) KONTAKT + MAPA — full-bleed: obsah nahoře (tyrkysový blok), pás mapy dole.

   Pozadí (tyrkysová + mapa) jde od kraje ke kraji obrazovky; texty/ovládací

   prvky uvnitř zůstávají zarovnané na standardní šířku .container.

   -------------------------------------------------------------------------- */

#kontakt { padding: 0; }



.kontakt-card__top {

  background: var(--color-primary);

  color: var(--color-white);

  padding-block: 96px 76px;

}

/* Bílý focus outline — výchozí :focus-visible (tmavě tyrkysová) by na tomhle

   pozadí neměl dost kontrastu. */

.kontakt-card__top a:focus-visible { outline-color: var(--color-white); }



.kontakt-card__head { margin-bottom: 36px; }

.kontakt-card__intro { max-width: 620px; }

/* Eyebrow nad nadpisem — stejný styl a barva jako .faq-kicker */

.kontakt-card__kicker {

  display: block;

  margin-bottom: var(--space-3);

  color: #04303a;

  opacity: .7;

  font-weight: 700;

  font-size: 12px;

  letter-spacing: .22em;

  text-transform: uppercase;

}

.kontakt-card__heading {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 44px;

  letter-spacing: -0.02em;

  line-height: 1.05;

  margin: 0 0 var(--space-3);

}

.kontakt-card__heading-dark { display: block; color: #16232b; }

.kontakt-card__lead { color: #eafcff; opacity: .95; max-width: 560px; margin: 0; }



.kontakt-card__tiles {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

}

/* Na užších desktopech/tabletech (900-1199px) se 4 dlaždice vedle sebe

   nevejdou — adresa (nowrap) přetékala do sousední dlaždice "Působnost".

   Dvě na řádek dají adrese dost místa; nad ~1200px se 4 vejdou v pohodě. */

@media (min-width: 900px) and (max-width: 1199px) {

  .kontakt-card__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

.kontakt-card__tile { display: flex; align-items: center; gap: 12px; }

/* flex položka bez min-width:0 se nezmenší pod obsah (e-mail/adresa jako

   jeden nedělitelný token) a přeteče přes okraj dlaždice. */

.kontakt-card__tile > div { min-width: 0; }

.kontakt-card__tile-value { overflow-wrap: anywhere; }

.kontakt-card__tile-icon {

  flex: none;

  width: 38px; height: 38px;

  border-radius: 10px;

  background: rgba(255, 255, 255, .2);

  display: flex;

  align-items: center;

  justify-content: center;

}

.kontakt-card__tile-icon svg { width: 18px; height: 18px; }

.kontakt-card__tile-label {

  display: block;

  margin: 0 0 2px;

  font-size: 10.5px;

  letter-spacing: .12em;

  text-transform: uppercase;

  opacity: .85;

}

.kontakt-card__tile-value { display: block; font-size: 14.5px; font-weight: 700; color: var(--color-white); text-decoration: none; }

.kontakt-card__tile-value--nowrap { white-space: nowrap; }

a.kontakt-card__tile-value:hover { color: rgba(255, 255, 255, .85); }



/* Pás mapy — full-bleed pozadí, ale plovoucí karty odsazené na šířku

   .container (stejný vzorec jako container's vlastní odsazení), ne přilepené

   k okraji obrazovky. */

.kontakt-card__map {

  position: relative;

  height: 280px;

  --kontakt-map-inset: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));

}

.kontakt-card__iframe { width: 100%; height: 100%; border: 0; display: block; }

.kontakt-card__map-placeholder {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  text-align: center;

  padding: var(--space-5);

  background: linear-gradient(135deg, var(--color-bg-soft), var(--color-primary-soft));

  color: var(--color-text-muted);

}

.kontakt-card__map-placeholder-ic { width: 34px; height: 34px; color: var(--color-primary-darker); }

.kontakt-card__map-placeholder-text { max-width: 40ch; font-size: var(--fs-sm); margin: 0; }

.kontakt-card__map-placeholder-btn { background: var(--color-white); }

/* Tyrkysový závoj přes mapu — zmizí při najetí myší (mapa je do té doby jen

   dekorativní náhled, ne rušivě interaktivní). */

.kontakt-card__map::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(28, 193, 221, .55);

  transition: opacity var(--transition);

  pointer-events: none;

}

.kontakt-card__map:hover::before { opacity: 0; }



.kontakt-card__map-card {

  position: absolute;

  z-index: 2;

  right: var(--kontakt-map-inset);

  top: 26px;

  max-width: 280px;

  background: var(--color-white);

  border-radius: 12px;

  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);

  padding: 14px 18px;

}

.kontakt-card__map-card-head {

  margin: 0 0 4px;

  color: var(--color-primary);

  font-weight: 700;

  font-size: 12.5px;

  white-space: nowrap;

}

.kontakt-card__map-card-line1 { margin: 0; font-weight: 700; color: var(--color-text); }

.kontakt-card__map-card-line2 { margin: 0; color: #8a97a0; font-size: 13px; }



/* Tlačítko je teď součástí karty (pod adresou), stejná tyrkysová jako

   "Zavolat" v FAQ (.btn.btn--primary). */

.kontakt-card__map-route {

  display: inline-flex;

  align-items: center;

  gap: 0.4em;

  margin-top: 12px;

  background: var(--color-primary);

  color: var(--color-white);

  border-radius: 11px;

  padding: 11px 20px;

  font-weight: 700;

  font-size: 13px;

  text-decoration: none;

  /* vlastní vrstva — stejná pojistka jako u marquee, ať přechod barvy na

     hoveru neproblikne přes potomka mapy pod tímhle tlačítkem */

  isolation: isolate;

  transition: background var(--transition);

}

.kontakt-card__map-route:hover { background: var(--color-text); color: var(--color-white); }



@media (max-width: 900px) {

  .kontakt-card__top { padding-block: 40px 32px; }

  .kontakt-card__intro { max-width: none; }

  .kontakt-card__heading { font-size: 30px; }

  /* Jeden kontakt na řádek — dva vedle sebe byly na úzkých telefonech příliš

     těsné na to, aby se e-mail vešel na jeden řádek i při čitelné velikosti

     písma. Adresa smí zalomit (viz --nowrap → normal níž), ostatní hodnoty

     (telefon, e-mail, působnost) jsou teď na plnou šířku, takže se na jeden

     řádek vejdou samy, bez nutnosti zmenšovat písmo. */

  .kontakt-card__tiles { grid-template-columns: 1fr; gap: 16px; }

  .kontakt-card__tile-value:not(.kontakt-card__tile-value--nowrap) { white-space: nowrap; }

  .kontakt-card__tile-value--nowrap { white-space: normal; }

}

@media (max-width: 900px) and (min-width: 700px) and (orientation: portrait) {

  /* Tablety na výšku mají dost místa na dva kontakty na řádek místo jednoho. */

  .kontakt-card__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kontakt-card__map { height: 220px; }

  .kontakt-card__map-card { right: 16px; top: 16px; max-width: 170px; padding: 10px 14px; }

  .kontakt-card__map-card-head { font-size: 11px; white-space: normal; }

  .kontakt-card__map-card-line1 { font-size: 13.5px; }

  .kontakt-card__map-card-line2 { font-size: 11.5px; }

  .kontakt-card__map-route { padding: 10px 16px; font-size: 12px; }

}

@media (max-width: 560px) {

  /* Na mobilu je karta s adresou nad mapou zbytečná — stejné údaje jsou

     už výš v dlaždicích (Kancelář) a na malé mapě karta zabírá moc místa. */

  .kontakt-card__map-card { display: none; }

}



/* Sekce Napište mi — jedna karta: tyrkysový „vizitka" panel + formulář */

#napiste { background: #eef3f5; position: relative; padding: 60px 56px; }

/* FAQ nad touto sekcí se sama ořízne přes clip-path (viz --faq-slant) a vlevo tak

   nechává na spodním okraji trojúhelníkový průhled do bílého pozadí stránky.

   Tenhle klín ho vybarví stejnou šedou jako zbytek #napiste, aby průhled nebyl vidět. */

#napiste::before {

  content: "";

  position: absolute;

  top: -46px; left: 0;

  width: 100%; height: 46px;

  background: #eef3f5;

  clip-path: polygon(0 0, 0 100%, 100% 100%);

  z-index: 0;

  pointer-events: none;

}

#napiste .container { position: relative; z-index: 1; padding-inline: 0; max-width: 1180px; }

@media (max-width: 900px) {

  #napiste { padding: 40px 16px; }

  #napiste::before { top: -30px; height: 30px; }

}

.lead-card {

  display: grid;

  grid-template-columns: 1fr;

  border-radius: 26px;

  overflow: hidden;

  box-shadow: 0 26px 60px rgba(16, 35, 43, .14);

}



/* Levý panel — pitch/vizitka na tyrkysovém gradientu */

.lead-card__pitch {

  position: relative;

  overflow: hidden;

  background: linear-gradient(165deg, #1CC1DD, #0f9db6);

  color: var(--color-white);

  padding: 40px 28px;

}

/* Vodoznak „RV" vpravo dole — dekorace, nepřekáží obsahu */

.lead-card__mark {

  position: absolute;

  right: -0.1em;

  bottom: -0.14em;

  z-index: 0;

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 220px;

  line-height: 1;

  color: rgba(255, 255, 255, .1);

  pointer-events: none;

  user-select: none;

}

.lead-card__content { position: relative; z-index: 2; }



.lead-card__agent { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }

.lead-card__photo {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  object-fit: cover;

  border: 3px solid rgba(255, 255, 255, .5);

  flex: none;

}

.lead-card__agent-name { margin: 0; font-weight: 700; }

.lead-card__agent-role { margin: 0; font-size: 13px; line-height: 1.3; opacity: .85; }



.lead-card__title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 34px;

  letter-spacing: -0.02em;

  line-height: 1.15;

  margin: 0 0 14px;

}

.lead-card__text {

  font-size: 15px;

  line-height: 1.6;

  color: rgba(255, 255, 255, .9);

  margin: 0 0 24px;

  max-width: 42ch;

}



.lead-card__perks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.lead-card__perks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }

.lead-card__check {

  flex: none;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: rgba(255, 255, 255, .22);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  font-weight: 700;

}



.lead-card__divider { border-top: 1px solid rgba(255, 255, 255, .25); margin: 0 0 20px; }



.lead-card__call-label { margin: 0 0 4px; font-size: 13px; opacity: .85; }

.lead-card__phone { display: inline-block; font-size: 22px; font-weight: 800; color: var(--color-white); text-decoration: none; margin: 0 0 20px; }

.lead-card__phone:hover { color: rgba(255, 255, 255, .85); }



.lead-card__rating { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .85); }

.lead-card__stars { color: #FBBC04; letter-spacing: 2px; }



@media (max-width: 900px) {

  .lead-card__mark { display: none; }

}

@media (max-width: 400px) {

  /* Na užších telefonech se popisek "hodnocení klientů" nevejde na jeden

     řádek vedle "5,0" a hvězdiček a zalamuje se — radši ho schováme, zůstane

     jen číslo a hvězdičky. */

  .lead-card__rating-label { display: none; }

}



/* Social */

.social { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.social:empty { display: none; }

.social a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 44px;

  min-height: 44px;

  padding: 0 var(--space-3);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-pill);

  font-weight: 600;

  font-size: var(--fs-sm);

  color: var(--color-text);

}

.social a:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-text); }



/* Pravý sloupec — formulář */

.lead-card__form-wrap { padding: 40px 28px; background: var(--color-white); }



.lead-form { display: grid; gap: var(--space-4); }

/* align-content:start — bez toho by se label/input/chyba uvnitř řádku

   roztažené na výšku sourozedního sloupce (viz .lead-form__grid) rozpočítaly

   proporčně na všechny 3 vnitřní řádky, takže by input v kratším sloupci

   (bez viditelné chyby) sedal jinde než v tom delším. Takhle se vždy

   skládají odshora a přebývající místo zůstane dole, mimo cestu. */

.lead-form__row { display: grid; align-content: start; gap: var(--space-2); }

.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.lead-form__label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-text); }



.lead-form__input {

  width: 100%;

  padding: 14px 16px;

  font: inherit;

  font-size: 14px;

  color: var(--color-text);

  background: var(--color-white);

  border: 1px solid #e3e8ea;

  border-radius: 12px;

  transition: border-color var(--transition), box-shadow var(--transition);

}

.lead-form__input::placeholder { color: #9aa6ac; }

.lead-form__input:focus-visible {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 3px rgba(28, 193, 221, .15);

}

.lead-form__input[aria-invalid="true"] { border-color: #e5484d; }

.lead-form__textarea { min-height: 82px; resize: vertical; }



/* Výběr služby — segmentované dlaždice (přístupný radio group: skrytý input + klikací label) */

.lead-form__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }

.lead-form__tile-input {

  position: absolute;

  opacity: 0;

  width: 1px;

  height: 1px;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

}

.lead-form__tile {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 14px 6px;

  border: 1px solid #e3e8ea;

  border-radius: 12px;

  font-size: 13.5px;

  color: var(--color-text);

  cursor: pointer;

  transition: border-color var(--transition), background var(--transition), color var(--transition);

}

.lead-form__tile-input:checked + .lead-form__tile {

  border: 2px solid var(--color-primary);

  background: var(--color-primary);

  color: #fff;

  font-weight: 600;

}

.lead-form__tile-input:focus-visible + .lead-form__tile {

  outline: 2px solid var(--color-focus);

  outline-offset: 2px;

}



.lead-form__row--check { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }

.lead-form__checkbox { width: 20px; height: 20px; margin-top: 0; accent-color: var(--color-primary-dark); }

.lead-form__check-label { font-size: 12px; color: var(--color-text-muted); }

.lead-form__row--check .lead-form__error { grid-column: 1 / -1; }



/* min-height (ne display:none při prázdném stavu) — chybová hláška si musí

   držet místo i prázdná, jinak se sloupce Telefon/E-mail (viz .lead-form__grid)

   při zobrazení chyby jen u jednoho z nich vzájemně posunou. */

.lead-form__error { color: #e5484d; font-size: var(--fs-sm); min-height: 1em; }

.lead-form__error--general { margin: 0 0 var(--space-3); min-height: 0; }

.lead-form__error--general:empty { margin: 0; }



.lead-form__submit {

  width: 100%;

  padding: 17px;

  border: 0;

  border-radius: 12px;

  background: var(--color-primary);

  color: var(--color-white);

  font: inherit;

  font-weight: 700;

  font-size: 15px;

  cursor: pointer;

  box-shadow: 0 12px 28px rgba(28, 193, 221, .4);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4em;

  transition: background var(--transition), box-shadow var(--transition);

}

/* color explicitně i v hoveru — jinak obecné "a:hover"/dědičné pravidlo může přebít bílou. */

.lead-form__submit:hover { background: var(--color-text); color: var(--color-white); box-shadow: 0 12px 28px rgba(16, 32, 39, .4); }

.lead-form__submit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }



.lead-form__note { margin: -4px 0 0; text-align: center; color: #8a97a0; font-size: 12px; }



.lead-form__success {

  text-align: center;

  padding: 48px 0;

  font-size: 17px;

  font-weight: 600;

  color: var(--color-text);

}



/* Honeypot — skrytý mimo viewport, ale dostupný pro boty */

.lead-form__hp {

  position: absolute;

  left: -9999px;

  width: 1px; height: 1px;

  overflow: hidden;

}



@media (min-width: 901px) {

  .lead-card { grid-template-columns: .92fr 1.08fr; }

  .lead-card__pitch { padding: 48px 44px; }

  .lead-card__form-wrap { padding: 48px 46px; }

}

@media (max-width: 900px) {

  .lead-form__tiles { grid-template-columns: repeat(2, 1fr); }

  .lead-form__grid { grid-template-columns: 1fr; }

}



/* -----------------------------------------------------------------------------

   13) FOOTER

   -------------------------------------------------------------------------- */

.site-footer {

  background: #0d1b24;

  color: rgba(255, 255, 255, .82);

}



.footer__grid {

  max-width: 1200px;

  margin-inline: auto;

  display: grid;

  grid-template-columns: 1fr;

  gap: 36px;

  padding: 48px 24px 36px;

  border-bottom: 1px solid transparent;

  border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18) 50%, transparent) 1;

}



.footer__col--brand { display: flex; flex-direction: column; }

.footer__name {

  font-family: var(--font-display);

  font-size: 24px;

  font-weight: 700;

  line-height: 1.1;

  color: var(--color-white);

  margin: 0 0 6px;

}

.footer__claim {

  color: rgba(255, 255, 255, .62);

  max-width: 270px;

  font-size: 14px;

  line-height: 1.6;

  margin: 0 0 22px;

}



/* Sociální ikony — čtvercové odznaky, tyrkysové ikony na tlumeném bílém pozadí */

.footer__social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }

.footer__social:empty { display: none; }

.footer__social a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

  transition: opacity var(--transition);

}

.footer__social svg { width: 19px; height: 19px; }

.footer__social img { width: 19px; height: 19px; object-fit: contain; display: block; }

.footer__social a:hover { opacity: .75; }



.footer__heading {

  font-size: 12px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: var(--color-primary);

  font-weight: 600;

  margin: 0 0 18px;

}

.footer__links { display: flex; flex-direction: column; gap: 13px; list-style: none; padding: 0; margin: 0; font-size: 14.5px; }

.footer__links a { color: rgba(255, 255, 255, .82); text-decoration: none; }

.footer__links a:hover { color: var(--color-primary); }



/* Kontakt s ikonami v zápatí — stejné ikony jako v sekci Kontakt */

.footer__contact { display: flex; flex-direction: column; gap: 13px; list-style: none; padding: 0; margin: 0; font-size: 14.5px; }

.footer__contact li { display: flex; align-items: center; gap: 10px; }

.footer__contact li.footer__contact-item--address { align-items: flex-start; }

.footer__contact-ic { width: 18px; height: 18px; color: var(--color-primary); flex: none; }

.footer__contact-item--address .footer__contact-ic { margin-top: 1px; }

.footer__contact a { color: rgba(255, 255, 255, .82); text-decoration: none; }

.footer__contact a:hover { color: var(--color-primary); }



.footer__bottom {

  max-width: 1200px;

  margin-inline: auto;

  display: flex;

  justify-content: center;

  text-align: center;

  padding: 20px 24px;

  padding-bottom: calc(20px + env(safe-area-inset-bottom));

  color: rgba(255, 255, 255, .5);

  font-size: 13px;

}

.footer__bottom p { margin: 0; }



/* -----------------------------------------------------------------------------

   13b) COOKIE CONSENT — lišta dole + panel nastavení kategorií

   -------------------------------------------------------------------------- */

.cookie-consent {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  flex-wrap: wrap;

  padding: 24px 40px;

  background: #0d1b24;

  font-family: "Poppins", var(--font-base);

  box-shadow: 0 -12px 30px rgba(0, 0, 0, .18);

  transform: translateY(100%);

  opacity: 0;

  transition: transform .38s ease, opacity .38s ease;

  pointer-events: none;

}

.cookie-consent.is-visible {

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}

.cookie-consent__left {

  display: flex;

  align-items: center;

  gap: 16px;

}

.cookie-consent__icon {

  flex: 0 0 44px;

  width: 44px;

  height: 44px;

  border-radius: 12px;

  background: rgba(255, 255, 255, .08);

  color: #1CC1DD;

  display: flex;

  align-items: center;

  justify-content: center;

}

.cookie-consent__icon svg { width: 22px; height: 22px; }

.cookie-consent__text {

  margin: 0;

  font-size: 13.5px;

  line-height: 1.55;

  color: rgba(255, 255, 255, .75);

  white-space: nowrap;

}

.cookie-consent__link { color: #1CC1DD; font-weight: 600; }

.cookie-consent__link:hover { color: #1CC1DD; text-decoration: underline; }

.cookie-consent__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }



.cookie-btn {

  appearance: none;

  cursor: pointer;

  font-family: "Poppins", var(--font-base);

  font-size: 13.5px;

  white-space: nowrap;

  transition: background var(--transition), border-color var(--transition), color var(--transition);

}

.cookie-btn--outline {

  background: transparent;

  border: 1.5px solid rgba(255, 255, 255, .35);

  color: #fff;

  font-weight: 600;

  border-radius: 10px;

  padding: 12px 20px;

}

.cookie-btn--outline:hover { background: #1CC1DD; border-color: #1CC1DD; color: #fff; }

.cookie-btn--solid {

  background: #1CC1DD;

  border: 1.5px solid transparent;

  color: #fff;

  font-weight: 700;

  border-radius: 10px;

  padding: 13px 24px;

}

.cookie-btn--solid:hover { background: transparent; border-color: #1CC1DD; color: #fff; }



@media (max-width: 720px) {

  .cookie-consent { padding: 18px 20px; gap: 16px; }

  .cookie-consent__text { white-space: normal; }

  .cookie-consent__actions { width: 100%; }

  .cookie-consent__actions .cookie-btn { flex: 1 1 auto; text-align: center; }

}



/* Panel nastavení kategorií — jednoduchý centrovaný modal */

.cookie-settings {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  opacity: 0;

  transition: opacity .3s ease;

  pointer-events: none;

}

.cookie-settings.is-visible { opacity: 1; pointer-events: auto; }

.cookie-settings__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(8, 15, 20, .55);

}

.cookie-settings__panel {

  position: relative;

  width: 100%;

  max-width: 460px;

  background: var(--color-white);

  border-radius: 18px;

  padding: 32px;

  font-family: "Poppins", var(--font-base);

  box-shadow: 0 30px 60px rgba(4, 48, 58, .3);

  transform: translateY(12px);

  transition: transform .3s ease;

}

.cookie-settings.is-visible .cookie-settings__panel { transform: translateY(0); }

.cookie-settings__title {

  font-family: var(--font-display);

  font-size: 20px;

  font-weight: 700;

  color: var(--color-text);

  margin: 0 0 10px;

}

.cookie-settings__lead {

  font-size: 13.5px;

  line-height: 1.55;

  color: var(--color-text-muted);

  margin: 0 0 24px;

}

.cookie-settings__row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 16px 0;

  border-top: 1px solid #eef2f3;

}

.cookie-settings__row-title { margin: 0 0 2px; font-weight: 700; font-size: 14.5px; color: var(--color-text); }

.cookie-settings__row-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }

.cookie-settings__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }

.cookie-settings__actions .cookie-btn { color: var(--color-text); }

.cookie-settings__actions .cookie-btn--outline { border-color: var(--color-border); }

.cookie-settings__actions .cookie-btn--outline:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text); }

.cookie-settings__actions .cookie-btn--solid { color: #fff; }

.cookie-settings__actions .cookie-btn--solid:hover { background: var(--color-text); color: #fff; }



.cookie-toggle {

  position: relative;

  flex: 0 0 auto;

  display: inline-flex;

  width: 42px;

  height: 24px;

  border-radius: 999px;

  background: #dfe6e8;

  cursor: pointer;

  transition: background var(--transition);

}

.cookie-toggle input {

  position: absolute;

  opacity: 0;

  width: 100%;

  height: 100%;

  margin: 0;

  cursor: pointer;

}

.cookie-toggle__thumb {

  position: absolute;

  top: 3px;

  left: 3px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);

  transition: transform var(--transition);

}

.cookie-toggle input:checked ~ .cookie-toggle__thumb { transform: translateX(18px); }

.cookie-toggle:has(input:checked) { background: var(--color-primary); }

.cookie-toggle--locked { background: var(--color-primary); opacity: .6; cursor: not-allowed; }

.cookie-toggle--locked .cookie-toggle__thumb { transform: translateX(18px); }



/* -----------------------------------------------------------------------------

   14) RESPONZIVITA

   -------------------------------------------------------------------------- */



/* Tablet a výš: zobraz desktop nav, schovej hamburger zůstává do 900px */

@media (min-width: 560px) {

  .form__grid { grid-template-columns: 1fr 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; }

}



/* Do 1080px = hamburger (full nav + telefon + CTA by se jinak tísnily) */

@media (max-width: 1079px) {

  .nav { display: none; }

  .header__cta { display: none; }

  .nav-toggle { display: inline-flex; }

  /* Hamburger doprava (dřív ho tam tlačil jen .nav svým margin-left:auto,

     který zmizel spolu s .nav). Logo+jméno teď zůstává vlevo vidět. */

  .header__actions { margin-left: auto; }

}

/* Nelámat texty v hlavičce */

.nav__link, .header__cta, .header__phone { white-space: nowrap; }



/* Na malých mobilech schovej telefon v headeru (je v menu) */

@media (max-width: 419px) {

  .header__phone { display: none; }

}



/* Desktop layout pro hero — jen orientation:landscape, aby se to nepralo

   s mobilním hero layoutem, který teď (viz výš) běží i na tabletech na

   výšku přes 900px šířky. About/kontakt/footer (blok níž) beze změny —

   ty desktopové rozvržení dostávají vždy od 900px, bez ohledu na orientaci. */

@media (min-width: 900px) and (orientation: landscape) {

  /* 1cm minimum nad fotkou makléře i pod kartou "Zavolat Radimovi" — jen na desktopu. */

  .hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + max(1cm, clamp(1.5rem, 0.8rem + 3vw, 3rem))); }

  .stats { margin-top: 0; }

  /* flex:1 — .hero__inner vyplní celou výšku .hero__visual (místo aby ho

     .hero__visual svisle centroval jako menší box). .hero__inner je

     position:relative (viz base pravidlo), takže z něj jde přes absolutní

     pozicování udělat spolehlivý "fill" pro kartu — bez spoléhání na to,

     jak přesně prohlížeč stretchuje grid řádek/flex položku (to se ukázalo

     nespolehlivé mezi headless testem a reálným Chrome). */

  .hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-9); flex: 1 1 auto; }

  /* H2 (jméno), hodnocení klientů a benefity bílou barvou — stejně jako na

     mobilu, teď když desktopové pozadí používá stejný tmavý přeliv.

     Hvězdičky (.om-stars) zůstávají zlaté beze změny. */

  .hero__inner .hero__name,

  .hero__inner .om-rating-text,

  .hero__inner .hero__reasons li { color: #fff; }

  /* Textový sloupec posunutý o 1cm doprava oproti statistikám pod ním

     (ty začínají na okraji containeru beze změny). */

  .hero__content { margin-left: 1cm; }

  .hero__cta .btn { flex: 0 1 auto; }

  /* "Zavolat Radimovi" (desktop) — na hoveru zůstává tyrkysová výplň, mění

     se jen text na tmavý (stejné chování jako mobilní varianta výš). */

  .hero__cta a.btn--primary:not(.hero__cta-dark):hover {

    --btn-bg: var(--color-primary);

    --btn-fg: var(--color-text);

    color: var(--color-text);

  }

  /* Karta (fotka + vizitka) je vyjmutá z gridu a napozicovaná absolutně

     přes top:0/bottom:0 — spolehlivě vyplní přesně výšku .hero__inner

     (viz komentář výš), spodek tak vždy sahá až k tyrkysovému pruhu

     statistik pod ní. right = stejný 1cm odsazení jako předtím přes

     justify-self:end + margin-right. */

  .hero__card {

    position: absolute;

    /* bottom:0 = SPODNÍ referenční bod, beze změny (vůči .hero__inner, který

       sahá až k tyrkysovému pruhu statistik). top:0 taky beze změny — jen

       určuje horní STROP (.hero__inner už sám začíná pod hlavičkou +

       gap z .hero padding-top). Nic z tohohle se v této úpravě nemění. */

    top: 0;

    bottom: 0;

    /* 1cm MEZERA od pravého konce baru (ne zarovnání s ním) — bar sám

       končí v containeru na var(--container-pad), takže + 1cm navíc. */

    right: calc(var(--container-pad) + 1cm);

    width: auto;

    /* 680px kolidovalo s textem na 1920×1080 (foto by bylo 612px široké) —

       590px je bezpečná horní hranice, ověřená proti celé testovací matici. */

    max-width: 590px;

    /* Fotka o 10 % menší — scale místo změny top/bottom, aby spodek zůstal

       přesně na tyrkysovém pruhu a pravý okraj na stejném 1cm odsazení

       (transform-origin = ten roh, odkud se zmenšuje). */

    transform: scale(0.9);

    transform-origin: bottom right;

  }

  /* height:100% karty (ta je definovaná přes top:0/bottom:0 = pevný spodek

     i strop) a width:auto — na <img> (replaced element) se width:auto

     dopočítá ze skutečného poměru stran zdrojového souboru nativně

     prohlížečem, spolehlivěji napříč prohlížeči než CSS aspect-ratio na

     obalovém divu. */

  .hero__photo-wrap { height: 100%; width: auto; max-width: 590px; min-height: 340px; }

  .hero__photo {

    display: block;

    height: 100%;

    width: auto;

    /* Stejný strop jako .hero__card/.hero__photo-wrap — bez něj <img>

       přetéká mimo kartu (přesah do textu při širším poměru stran fotky). */

    max-width: 590px;

    object-fit: contain;

    object-position: bottom center;

  }

  /* Celá vizitka (jméno, telefon, tlačítko, bílý panel) na desktopu pryč —

     zůstává jen fotka, ta teď (flex:1 na .hero__photo-wrap výš) vyplní

     celou kartu sama a sahá až k tyrkysovému pruhu statistik. */

  .hero__contact { display: none; }

}

@media (min-width: 900px) {

  .about {

    grid-template-columns: minmax(0, 460px) minmax(0, 540px);

    grid-template-areas:

      "media head"

      "body  body";

    justify-content: center;   /* celý blok vystředěný v containeru */

    align-items: stretch;

    column-gap: var(--space-9);

    row-gap: var(--space-7);

  }

  /* max-width 460px (ne 400px jako ve vzoru) — Lukášova fotka je kvůli gestu širší

     vůči výšce (poměr ~0,58 místo ~0,48), takže při stejné šířce jako u Radima by

     vycházela znatelně nižší. Širší box ji přiblíží Radimově výšce, aniž by přetekl

     mimo grid sloupec (ten má minmax(0, 460px), viz výš). */

  .about__media { grid-area: media; align-self: start; max-width: 460px; margin-inline: 0; }

  /* pravý blok = stejná výška jako fotka, obsah svisle vycentrovaný, editorial šířka */

  .about__head { grid-area: head; display: flex; flex-direction: column; justify-content: center; max-width: 540px; }

  /* dlouhý text po rozbalení do 2 sloupců s příjemnou šířkou řádku */

  .about__body { grid-area: body; }

  .about__story-inner { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }

  .contact { grid-template-columns: 1.3fr 0.7fr; align-items: start; }

  .form-section { grid-template-columns: 0.85fr 1fr; gap: var(--space-9); align-items: start; }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 44px; padding: 60px 56px 46px; }

  .footer__bottom { padding: 20px 56px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

}



/* Plná navigace až když je na ni místo */

@media (min-width: 1080px) {

  .menu-backdrop { display: none !important; }

  .header__actions { display: none; } /* obsahuje jen mobilní hamburger → na desktopu pryč */

}



/* Nízké obrazovky (notebooky 1366×768 apod.) — zkompaktni hero,

   ať se „full height" vejde bez ořezu i bez velkého přetečení.

   orientation:landscape ze stejného důvodu jako u desktopového hero bloku

   výš — na tabletech na výšku běží místo toho mobilní hero. */

@media (min-width: 900px) and (max-height: 940px) and (orientation: landscape) {

  .hero__title { font-size: clamp(1.7rem, 1rem + 1.8vw, 2.3rem); }

  .hero__subtitle { margin-top: var(--space-3); }

  .hero__cta { margin-top: var(--space-5); }

  .hero__reasons { margin-top: var(--space-4); padding-top: var(--space-4); gap: var(--space-2); }

  .hero__photo-wrap { min-height: 280px; }

  .stats { margin-top: 0; padding-block: var(--space-4); }

  /* Předtím klesalo číslo (1.6rem/25.6px max) skoro na úroveň popisku

     (--fs-sm, 14px, fixní) — číslo muselo zůstat výrazně větší. */

  .stat__value { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }

}



/* Velmi široké displeje (4K apod.) — text-heavy sekce drž čitelné,

   ale hero/karty/formulář ať využijí víc plochy. */

@media (min-width: 1700px) {

  .hero__inner { gap: var(--space-9); }

}



/* Tisk (drobnost pro produkční použitelnost) */

@media print {

  .site-header, .mobile-menu, .menu-backdrop, .nav-toggle, .form { display: none !important; }

}



/* -----------------------------------------------------------------------------

   16) PRÁVNÍ STRÁNKY (ochrana osobních údajů, cookies)

   -------------------------------------------------------------------------- */

.legal-hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--space-8)); padding-bottom: var(--space-6); }

.legal-back {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-bottom: var(--space-6);

  color: var(--color-text-muted);

  font-weight: 600;

  font-size: var(--fs-sm);

}

.legal-back:hover { color: var(--color-primary-darker); }

.legal-back svg { width: 16px; height: 16px; flex: none; }

.legal-updated { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-3); }



.legal-toc {

  margin-top: var(--space-6);

  padding: var(--space-5);

  background: var(--color-bg-soft);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

}

.legal-toc__title {

  margin: 0 0 var(--space-3);

  font-weight: 700;

  font-size: var(--fs-sm);

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--color-text-muted);

}

.legal-toc ol {

  margin: 0;

  padding-left: 1.2em;

  columns: 1;

}

.legal-toc li { margin-bottom: var(--space-2); }

.legal-toc li:last-child { margin-bottom: 0; }

.legal-toc a { color: var(--color-primary-darker); text-decoration: none; }

.legal-toc a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 700px) {

  .legal-toc ol { columns: 2; column-gap: var(--space-6); }

}



.legal-content { padding-bottom: var(--space-9); color: var(--color-text); }

.legal-content h2 {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: var(--fs-h3);

  letter-spacing: -0.01em;

  margin: var(--space-8) 0 var(--space-4);

}

.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {

  font-weight: 700;

  font-size: 1.05rem;

  margin: var(--space-6) 0 var(--space-3);

}

.legal-content p { color: var(--color-text-muted); line-height: 1.8; margin: 0 0 var(--space-4); }

.legal-content p:last-child { margin-bottom: 0; }

.legal-content ul, .legal-content ol {

  color: var(--color-text-muted);

  line-height: 1.8;

  margin: 0 0 var(--space-4);

  padding-left: 1.3em;

}

.legal-content li { margin-bottom: var(--space-2); }

.legal-content li:last-child { margin-bottom: 0; }

.legal-content strong { color: var(--color-text); }

.legal-content a { color: var(--color-primary-darker); text-decoration: underline; text-underline-offset: 2px; }

.legal-content a:hover { color: var(--color-primary-dark); }



.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

.legal-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--fs-sm); }

.legal-table th, .legal-table td { text-align: left; padding: var(--space-3) var(--space-4); vertical-align: top; }

.legal-table th { background: var(--color-bg-soft); color: var(--color-text); font-weight: 700; white-space: nowrap; }

.legal-table td { color: var(--color-text-muted); border-top: 1px solid var(--color-border); }

.legal-table tr:first-child td { border-top: 0; }