/* ============================================
   LEXIA - Právní pojištění
   Design system & shared styles
   ============================================ */

:root {
  /* Brand barvy - dle brand manuálu Lexia 2025 */
  --primary: #0045bf;          /* Cobalt Blue */
  --primary-dark: #003599;
  --primary-light: #7da0dc;    /* Baby Blue */
  --heading: #001a4d;          /* Deep Navy - hlavní nadpis stránky (h1) a drobné nadpisy h3-h6 */
  --heading-soft: #0045bf;     /* Cobalt - nadpisy sekcí (h2) a menší bold texty (Jednotlivec, image captions...) */
  --accent: #00a5bf;           /* Blue Teal */
  --accent-yellow: #f2d800;    /* Yellow */
  --accent-deep: #005f72;      /* Deep Teal */
  --bg-light: #f0f5ff;
  --bg-section: #f7f9fc;
  --white: #ffffff;            /* Snow White */
  --text: #1a1f2e;             /* Body primary - cooler, deeper than #222 for closer rapport with brand navy */
  --text-muted: #4a5468;       /* Body secondary - lifted from #555 for AA contrast on white */
  --text-light: #8a93a6;       /* Tertiary / metadata */
  --border: #e5e9f0;
  --border-strong: #cfd6e2;    /* For inputs at rest, table dividers */
  --success: #00a5bf;          /* Blue Teal - používáme pro "online/active" indikátory místo univerzální zelené, aby zůstaly brand barvy */
  --warning: #f2d800;
  --danger: #ef463f;           /* Brand Red */

  /* Typography — dle brand manuálu Lexia 2025 (str. 24–27):
     nadpisy = Nunito ExtraBold, podnadpisy = Poppins Medium,
     běžný text = Poppins Regular, doplňkové (fallback) = Arial */
  --font-heading: 'Nunito', Arial, sans-serif;   /* nadpisy: Nunito ExtraBold (800) */
  --font-base: 'Poppins', Arial, sans-serif;     /* běžný text: Poppins Regular (400) */

  /* Shadows — three-step scale, brand-tinted (cooler navy instead of warm grey).
     Use --shadow-1 for resting elevation, --shadow-2 for cards in hover/focus,
     --shadow-3 for floating panels (hero card, CTA banner). */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-2: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 16px 32px -8px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  /* Aliases kept for backwards compat with existing rules */
  --shadow-sm: var(--shadow-1);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);

  /* Radius scale */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

/* Dekorační symboly v sekcích (.has-glyph::after) jsou schválně posunuté
   za okraj (right: -4vw), aby vypadaly uříznuté. Nikdo je ale neořezával,
   takže stránku reálně rozšiřovaly o 4 % okna a šlo s ní hýbat do strany —
   na 1440 px o 58 px, na telefonu o 15 px. Samotné `overflow-x: clip` na body
   to nestačilo; `overflow-x: hidden` na html posun spolehlivě zastaví
   a rozumí mu i starší prohlížeče. Ověřeno, že lepivá hlavička drží
   a kotvy se zastavují na stejném místě jako dřív. */
html { overflow-x: hidden; }

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Default links use the primary brand color at rest; the lighter baby-blue is
   reserved for decorative dots/halos, never as a tappable affordance. */
a { color: var(--primary); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--primary-dark); }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading);
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.038em; line-height: 1.05; }
/* Nadpisy sekcí jsou na celém webu kobaltové — jedno místo, kde se ta barva
   určuje. Hlavní nadpis stránky (h1) zůstává námořnický, takže je mezi nimi
   jasná hierarchie: tmavší nahoře, světlejší níž. */
h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--heading-soft); }
h3 { font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.3; }
h4 { font-size: 1rem; letter-spacing: -0.005em; }

p { color: var(--text-muted); line-height: 1.65; }
/* Emphasis is communicated by weight + the body's primary text color, not by
   re-painting every bolded word brand-blue. Keeps reading rhythm calm. */
p strong, li strong, span strong, strong { color: var(--text); font-weight: 700; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============= PROMO BANNER (top of page) — Cobalt Blue ============= */
.promo-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  padding: 10px 20px;
  position: relative;
  z-index: 101;
  font-size: 0.88rem;
  text-align: center;
}
.promo-banner-content {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.promo-banner .promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.promo-banner .promo-pill .icon { width: 13px; height: 13px; color: var(--white); }
.promo-banner a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.promo-banner strong,
.promo-banner span strong,
.promo-banner p strong {
  color: var(--white) !important;
}
.promo-banner-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 8px;
  border-radius: 50%;
  line-height: 1;
}
.promo-banner-close:hover { background: rgba(255, 255, 255, 0.15); }
.promo-banner[hidden] { display: none; }

/* ============= HEADER ============= */
.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  z-index: 100;
  transition: all 0.3s ease;
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--border);
}

/* Stejná šířka i odsazení jako .container, aby logo začínalo přesně tam,
   kde začíná obsah stránky pod ním. Dřív bylo 1120/28 proti 1080/24, takže
   logo viselo na širokých obrazovkách o 16 px vlevo a na úzkých o 4 px vpravo. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.logo img { height: 32px; width: auto; display: block; }

.logo-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary-light);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Odkazy jsou vystředěné vůči celé navigaci. Dřív se to řešilo přes
   position:absolute + left:50%, jenže absolutně pozicovaný box dostane jen
   polovinu šířky hlavičky — pod 1020 px se proto názvy lámaly do dvou řádků
   a pod 793 px zajížděly pod tlačítka vpravo, takže „Kontakt" nešlo kliknout.
   Řešení: odkazy zůstávají v normálním toku a střed drží tím, že logo i
   tlačítka dostanou stejný díl zbylého místa (flex: 1 1 0). Vystředění je
   proto pixel na pixel stejné jako dřív, ale odkazy se už nemají o co opřít. */
.nav > .logo { flex: 1 1 0; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  color: var(--heading);
  font-family: var(--font-heading); /* Nunito — sjednoceno s nadpisy dle brand manuálu */
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  transition: color 0.18s var(--ease);
}

.nav-links a:hover, .nav-links a.active {
  color: var(--primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  /* Stejný díl zbylého místa jako logo — drží odkazy přesně na středu.
     Nahrazuje dřívější margin-left: 32px, které střed rozhazovalo. */
  flex: 1 1 0;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: 0.3s;
}

/* ============= BUTTONS ============= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  min-height: 40px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-family: var(--font-heading); /* Nunito — sjednoceno s nadpisy dle brand manuálu */
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), box-shadow 0.18s var(--ease),
              transform 0.18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.btn .icon { width: 16px; height: 16px; }

.btn-primary {
  background: linear-gradient(90deg, #0045bf 0%, #0057f0 100%);
  color: var(--white);
  border-color: #0057f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 35, 96, 0.18);
}

.btn-primary:hover {
  background: linear-gradient(90deg, #003799 0%, #0045bf 100%);
  border-color: #0045bf;
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 10px -2px rgba(0, 35, 96, 0.32);
}

.btn-outline {
  background: var(--white);
  color: var(--heading);
  border: 1.5px solid var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 35, 96, 0.06);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover { color: var(--primary); background: var(--neutral-100, var(--bg-section)); }

.btn-lg { padding: 10px 24px; min-height: 40px; font-size: 0.9375rem; border-radius: 100px; }
.btn-lg .icon { width: 17px; height: 17px; }

/* Minimalist navbar button - menší, decentnější */
.nav-actions .btn-primary {
  padding: 6px 15px;
  min-height: 33px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}
.nav-actions .btn-primary .icon { width: 14px; height: 14px; }
.nav-actions .btn-primary:hover {
  box-shadow: 0 2px 6px -1px rgba(0, 35, 96, 0.22);
}

/* Round icon-only button - klienták v navbaru */
.btn-icon {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--primary);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn-icon .icon { width: 17px; height: 17px; }
/* Profil ikona v navbaru */
.nav-actions .btn-icon { width: 32px; height: 32px; min-height: 32px; }
.nav-actions .btn-icon .icon { width: 15px; height: 15px; }

.btn-icon:hover {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 10px -2px rgba(0, 35, 96, 0.25);
}

/* Mobile-only nav item - default hidden */
.nav-mobile-only { display: none; }

/* ============= HERO ============= */
/* Family/lifestyle foto na světlém pozadí — silný light overlay aby tmavé texty vynikly */
.hero {
  padding: 48px 0 170px;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  background-image:
    /* Vertikální gradient — zesvětlí střed (stats) kvůli čitelnosti textu
       a u spodního okraje plynule přechází do čisté bílé, aby navazoval
       bez modrého pruhu na následující sekci */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.45) 52%,
      rgba(255, 255, 255, 0.55) 66%,
      rgba(255, 255, 255, 0.65) 82%,
      rgba(255, 255, 255, 1) 100%
    ),
    linear-gradient(100deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.20) 55%, rgba(255, 255, 255, 0.10) 75%, rgba(255, 255, 255, 0.25) 100%),
    url('assets/hero-bg.png');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Decorative § paragraph glyph — jasný legal vizuální signal v pozadí hero.
   Serif, low-opacity, ukotvené vlevo dole pod textem; nepřekrývá chat kartu napravo. */
.hero::after {
  content: '§';
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(280px, 36vw, 540px);
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  letter-spacing: -0.04em;
  user-select: none;
}

@media (max-width: 720px) {
  .hero::after { font-size: 220px; left: -8vw; bottom: 0; opacity: 0.04; }
}

/* ============= SECTION BACKGROUND GLYPH SYSTEM
   Velký low-opacity legal symbol v rohu sekce — tématický vizuální kontext
   (váhy, štít, zákoník, instituce, kladívko, paragraf). Atribut data-glyph
   přepíná konkrétní symbol, .has-glyph--left/--right řídí stranu, CSS proměnné
   ladí offset. Pseudo-element ::after, aby nekolidoval s .bg-section::before
   (radial dot pattern). ============= */
.has-glyph {
  position: relative;
  /* Záměrně bez overflow: hidden — glyph::after smí přesahovat mimo sekci
     a překrývat hranici se sousední sekcí pro plynulý vizuální tok. */
}
.has-glyph::after {
  content: '';
  position: absolute;
  width: clamp(280px, 32vw, 480px);
  height: clamp(280px, 32vw, 480px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* Default: vpravo dole */
  right: var(--glyph-x, -4vw);
  bottom: var(--glyph-y, -6vw);
  left: auto;
  top: auto;
  filter: var(--glyph-filter, none);
}
.has-glyph > .container,
.has-glyph > * { position: relative; z-index: 1; }

/* Position modifiers */
.has-glyph--left::after {
  right: auto;
  left: var(--glyph-x, -4vw);
  bottom: var(--glyph-y, -6vw);
}
.has-glyph--top-right::after {
  right: var(--glyph-x, -4vw);
  bottom: auto;
  top: var(--glyph-y, -6vw);
}
.has-glyph--top-left::after {
  right: auto;
  left: var(--glyph-x, -4vw);
  bottom: auto;
  top: var(--glyph-y, -6vw);
}

/* Glyph sources — SVG path z icon library, fill=transparent / stroke=primary.
   Inline data-URI ať není potřeba další request. */
.has-glyph[data-glyph="scales"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M5 21h14M6 7l-3 7a3 3 0 0 0 6 0L6 7Zm12 0-3 7a3 3 0 0 0 6 0L18 7ZM5 6h14'/></svg>");
}
.has-glyph[data-glyph="shield"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/></svg>");
}
.has-glyph[data-glyph="book"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/></svg>");
}
.has-glyph[data-glyph="building"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1'/><path d='M9 7h2M9 11h2M9 15h2M13 7h2M13 11h2M13 15h2M10 21v-3a2 2 0 0 1 4 0v3'/></svg>");
}
.has-glyph[data-glyph="gavel"]::after {
  /* Stylizované soudcovské kladívko: rotovaná hlava + diagonal handle + úderová podstava */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2.5l8 8M6 6l8 8M3 9.5l8 8M10.5 13.5L4 20M3 22h10M14 4l6 6'/></svg>");
}
.has-glyph[data-glyph="briefcase"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='2'/><path d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/></svg>");
}
.has-glyph[data-glyph="paragraph"]::after {
  content: '§';
  background: none;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(280px, 36vw, 480px);
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.04em;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .has-glyph::after { width: 200px; height: 200px; opacity: 0.04; }
  .has-glyph[data-glyph="paragraph"]::after { font-size: 200px; }
}

/* Lifebuoy dekorace odstraněna (překrývala chat mockup) */

.hero .container { position: relative; z-index: 2; }

@keyframes hero-ring-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Inward (concave) SVG vlna dole — bílá zahnutá dovnitř, opak footer-curve */
.hero-inward-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 190px;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.hero-inward-curve path { fill: #ffffff; }

/* Promo pill v hero sekci — info o aktuální akci nad kartami */
.hero-promo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  padding: 6px 8px 6px 6px;
  margin: 0 auto 28px;
  text-decoration: none;
  color: var(--heading);
  font-size: 0.9rem;
  box-shadow: 0 8px 28px rgba(0, 26, 77, 0.18);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 3;
  max-width: 100%;
  flex-wrap: nowrap;
}
.hero-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 26, 77, 0.24);
  color: var(--heading);
}

.hero-promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--success);
  color: var(--white) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  flex-shrink: 0;
}
.hero-promo-tag .icon { width: 13px; height: 13px; }

.hero-promo-text {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-promo-text strong {
  color: var(--primary) !important;
  font-weight: 700;
}

.hero-promo-cta {
  font-weight: 700;
  color: var(--primary) !important;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
}

/* Centered nad hero-grid */
.hero .container > .hero-promo {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 720px) {
  .hero-promo {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 16px;
    padding: 10px 12px;
    gap: 8px;
  }
  .hero-promo-text {
    white-space: normal;
    text-align: center;
    font-size: 0.85rem;
  }
}

/* ============= HERO LAYOUT — text vlevo nahoře, chat zarovnaný úplně vpravo ============= */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

/* LEFT: text vlevo, svisle vycentrovaný vůči pravému sloupci s produkty */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 580px;
}

/* Badge — světlý pill (default - pro použití na světlém pozadí) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: 8px;
  padding: 6px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8125rem;
  color: var(--heading);
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-1);
}
.hero-badge .icon { color: var(--accent); width: 14px; height: 14px; }
/* Removed redundant ::before dot — the icon + text combo was already a complete
   visual unit; the extra teal dot added noise without information. */
.hero-badge::before { content: none; }

/* Light variant — pill se sklem na tmavém ocean foto */
.hero-badge--light {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.hero-badge--light .icon { color: var(--primary-light); }
.hero-badge--light::before {
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(125, 160, 220, 0.35);
}

/* Hero title — default na světlém pozadí */
.hero-title {
  margin-bottom: 14px;
  font-size: clamp(2.9rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--heading);
  font-weight: 800;
}
.hero-title-accent {
  color: var(--primary); /* Cobalt Blue */
}
/* Každý řádek nadpisu drží pohromadě (nezalomí se uvnitř) — jen na desktopu */
@media (min-width: 721px) {
  .hero-title-l { white-space: nowrap; }
}
.hero-title-price {
  /* Pouze pro mobilní verzi — na desktopu skryté */
  display: none;
  color: var(--primary);
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

/* Light variant — bílý titulek na tmavé fotce, accent v Baby Blue */
.hero-title--light {
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0, 26, 77, 0.30);
}
.hero-title--light .hero-title-accent {
  color: var(--primary-light); /* Baby Blue - dobře čitelná na tmavém pozadí */
}

/* Hero lead text */
.hero-lead {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 22px;
  max-width: 540px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-weight: 400;
}
.hero-lead strong { color: var(--heading); font-weight: 700; }

/* Light variant — světlý lead text na fotce */
.hero-lead--light {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 26, 77, 0.40);
}
.hero-lead--light strong { color: var(--white); font-weight: 700; }

/* Actions row */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

/* Ikona u hero-stat — defaultně skrytá, na mobilu se ukáže */
i.icon.hero-stat-icon {
  display: none;
  width: 22px;
  height: 22px;
  color: var(--primary);
}

/* Light outline button — pouze pro CTA banner dole na dark gradientu */
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.btn-outline-light .icon,
.btn-outline-light .icon svg { color: var(--white); }
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.cta-microbenefit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.cta-microbenefit .icon { width: 14px; height: 14px; color: var(--accent); }

/* ============= HERO STATS — čistý textový stack (jako v původním designu) ============= */
.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  max-width: 580px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2px;
}
.hero-stat span {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .hero-stats { gap: 20px; flex-wrap: wrap; }
}

/* RIGHT: chat karta — posazená do pravého spodního rohu hero sekce */
.hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  min-height: 380px;
  padding-top: 210px;
  padding-right: 50px;
}

/* Vánek/proud od tabletu — SVG za kartou, sahá pod ní dolů k pozici tabletu */
.hero-tablet-wind {
  position: absolute;
  bottom: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 320px;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(125, 160, 220, 0.5));
  mix-blend-mode: screen;
}

/* Drobné stoupající částice naznačující emanaci z tabletu */
.hero-tablet-spark {
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 80px;
  height: 130px;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}
.hero-tablet-spark span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(125, 160, 220, 0.7) 60%, transparent 100%);
  opacity: 0;
  animation: spark-rise 3.6s ease-in infinite;
}
.hero-tablet-spark span:nth-child(1) { left: 20%; animation-delay: 0s; }
.hero-tablet-spark span:nth-child(2) { left: 55%; animation-delay: 0.9s; width: 3px; height: 3px; }
.hero-tablet-spark span:nth-child(3) { left: 35%; animation-delay: 1.7s; width: 5px; height: 5px; }
.hero-tablet-spark span:nth-child(4) { left: 70%; animation-delay: 2.4s; width: 3px; height: 3px; }

@keyframes spark-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.9; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-130px); opacity: 0; }
}

/* Chips sekce odstraněna — chat karta končí typing indikátorem */

.hero-card-halo {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 69, 191, 0.12) 0%, rgba(125, 160, 220, 0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

.hero-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 20px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 380px;
  /* Karta sedí těsně pod hlavou ženy v hero pozadí — bez záporného margin-bottom. */
  margin-bottom: 0;
}

/* Speech bubble tail — levá strana karty, ukazuje doleva k tabletu */
.hero-card::after {
  content: '';
  position: absolute;
  top: 130px;
  left: -10px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
  box-shadow: -6px 6px 16px -4px rgba(0, 35, 96, 0.18);
}

@keyframes wisp-drift {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 0.85; }
  50% { transform: translateX(-4px) translateY(2px); opacity: 1; }
}

.hero-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.hero-card-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: rgba(0, 165, 191, 0.12);
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.hero-card-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-light) 0%, #d6e2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.hero-card-avatar .avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0, 165, 191, 0.2);
}

.hero-card-info strong { display: block; font-size: 0.95rem; color: var(--heading); }
.hero-card-info span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.hero-card-info .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(0, 165, 191, 0.18);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 165, 191, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(0, 165, 191, 0.05); }
}

.hero-chat-msg {
  position: relative;
  background: #f2f4f7;
  padding: 9px 14px 16px;
  border-radius: 14px 14px 14px 4px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
  max-width: 88%;
  width: fit-content;
}

.hero-chat-msg.own {
  background: var(--primary);
  color: var(--white);
  border-radius: 14px 14px 4px 14px;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(0, 69, 191, 0.15);
}

.msg-time {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.hero-chat-msg.own .msg-time { color: rgba(255, 255, 255, 0.85); opacity: 0.7; }

.hero-chat-msg.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
}
.hero-chat-msg.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-light);
  animation: chat-typing 1.4s ease-in-out infinite;
}
.hero-chat-msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.hero-chat-msg.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== HERO PRODUKTY — 3 karty k okamžitému sjednání ===== */
.hero-visual--products {
  padding-top: 232px;
  margin-top: -40px;
  padding-right: 0;
  margin-right: -28px;
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-end;
}

.hero-products {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 370px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Hlavička karty produktů — pouze nadpis, bez ikon a tagu */
.hero-card-header--simple { gap: 0; flex-direction: column; align-items: stretch; padding-bottom: 11px; margin-bottom: 11px; }
.hero-products-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--primary);
  line-height: 1.25;
}

/* Produkty uvnitř karty (stejný rám jako chat) — lákavé klikací řádky */
.hero-card--products { margin-left: auto; max-width: 424px; padding-top: 16px; padding-bottom: 16px; }
.hero-card--products .hero-product {
  display: flex;
  align-items: center;          /* ikona i šipka svisle na střed rámečku */
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 6px -3px rgba(0, 35, 96, 0.12);
  padding: 11px 16px;
  margin-bottom: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hero-card--products .hero-product:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 14px 28px -14px rgba(0, 69, 191, 0.40);
}
/* Textový sloupec — nadpis a podnadpis zarovnané vlevo */
.hero-card--products .hero-product-body { flex: 1; min-width: 0; text-align: left; }
.hero-card--products .hero-product-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.hero-card--products .hero-product-name { flex: 1 1 auto; white-space: nowrap; }
.hero-card--products .hero-product-sub { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: var(--accent); margin: 1px 0 0; }
.hero-card--products .hero-product--featured .hero-product-sub { color: #ffd66b; }
.hero-card--products .hero-product-desc { padding-left: 0; margin: 1px 0 0; line-height: 1.42; }

/* Ikona produktu — jemné světle modré pozadí, na hover „naskočí" do plné barvy */
.hero-card--products .hero-product-icon {
  width: 38px;
  height: 38px;
  background: #e7eefb;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hero-card--products .hero-product:hover .hero-product-icon {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.06);
}
/* Cena — větší, „/měs." na stejném řádku */
.hero-card--products .hero-product-price { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; }
.hero-card--products .hero-product-price strong { display: inline; font-size: 1rem; }

/* Šipka jako kulatý modrý button */
.hero-card--products .hero-product-arrow {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 4px 10px -3px rgba(0, 69, 191, 0.45);
  transition: background 0.18s ease, transform 0.18s ease;
}
.hero-card--products .hero-product-arrow svg { width: 18px; height: 18px; }
.hero-card--products .hero-product:hover .hero-product-arrow {
  background: var(--primary-dark);
  transform: translateX(3px);
}

/* ===== Bestseller — celý modrý s bílým obsahem ===== */
.hero-card--products .hero-product--featured {
  position: relative;
  margin-top: 4px;
  margin-bottom: 0;
  padding: 18px 13px 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: 2px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 14px 30px -12px rgba(0, 69, 191, 0.55);
}
.hero-card--products .hero-product--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -12px rgba(0, 69, 191, 0.65);
}
/* Bílý obsah, ať vynikne na modrém pozadí */
.hero-card--products .hero-product--featured .hero-product-name,
.hero-card--products .hero-product--featured .hero-product-price strong { color: var(--white); }
.hero-card--products .hero-product--featured .hero-product-price span,
.hero-card--products .hero-product--featured .hero-product-desc { color: rgba(255, 255, 255, 0.85); }
/* Ikona — průsvitně bílá */
.hero-card--products .hero-product--featured .hero-product-icon,
.hero-card--products .hero-product--featured:hover .hero-product-icon {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}
/* Šipka jako bílý button s modrou šipkou */
.hero-card--products .hero-product--featured .hero-product-arrow {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 10px -3px rgba(0, 20, 60, 0.45);
}
.hero-card--products .hero-product--featured:hover .hero-product-arrow { background: var(--white); }
/* Badge „BESTSELLER" — bílý s modrým ohraničením, ať nesplývá s bílou */
.hero-card--products .hero-product--featured .hero-product-badge {
  position: absolute;
  top: -14px;
  left: 10px;
  right: auto;
  margin: 0;
  font-size: 0.67rem;
  padding: 4px 12px;
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  box-shadow: 0 4px 10px -2px rgba(0, 20, 60, 0.30);
}
.hero-card--products .hero-product--featured .hero-product-badge .icon { color: var(--accent-yellow); }

/* Výběžek (cíp) karty — na rovné části levé hrany u bestseller karty (jako na
   předloze), ne až u zaobleného spodního rohu. */
.hero-card--products::after { top: auto; bottom: 122px; }

.hero-products-eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: 100px;
  box-shadow: var(--shadow-1);
  margin-bottom: 2px;
}
.hero-products-eyebrow .icon { width: 12px; height: 12px; }

.hero-product {
  display: block;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 6px 18px -10px rgba(0, 35, 96, 0.20);
  border: 1px solid var(--border);
  padding: 11px 14px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hero-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0, 35, 96, 0.28);
  border-color: var(--primary-light);
}

.hero-product-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-product-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--primary-light);
  color: var(--primary);
}
.hero-product-icon .icon { width: 21px; height: 21px; }
.hero-product-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--heading);
}
.hero-product-price {
  flex-shrink: 0;
  text-align: right;
  line-height: 1.05;
  white-space: nowrap;
}
.hero-product-price strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--primary);
}
.hero-product-price span {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.hero-product-arrow {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--primary);
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.hero-product:hover .hero-product-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.hero-product-desc {
  margin: 5px 0 0;
  padding-left: 42px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Bestseller — zvýrazněná karta */
.hero-product--featured {
  position: relative;
  border-color: var(--primary);
  box-shadow: 0 10px 24px -12px rgba(0, 69, 191, 0.30);
}
.hero-product--featured .hero-product-icon {
  background: var(--primary);
  color: var(--white);
}
.hero-product-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 100px;
  box-shadow: var(--shadow-1);
}
.hero-product-badge .icon { width: 11px; height: 11px; }

/* Hero responsive */
@media (max-width: 980px) {
  .hero { padding: 40px 0 100px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-text-card { padding: 28px 24px; }
  .hero-stats { gap: 16px; flex-wrap: wrap; }
  .hero-visual--products { padding-top: 0; margin-top: -56px; }
  .hero-products { max-width: 480px; margin: 0 auto; }
}

/* ===== MOBILE optimization — hero ===== */
@media (max-width: 720px) {
  .hero {
    padding: 2px 0 30px;
    background-color: #ffffff;
    /* (4) Spojitá fotka rodiny v pozadí — vertikální gradient slabší nahoře, silnější dole */
    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.60) 20%,
        rgba(255, 255, 255, 0.50) 40%,
        rgba(255, 255, 255, 0.75) 60%,
        rgba(255, 255, 255, 0.95) 80%,
        rgba(255, 255, 255, 1) 95%,
        rgba(255, 255, 255, 1) 100%
      ),
      url('assets/hero-bg.png');
    background-size: cover, cover;
    background-position: center, center 45%;
    background-repeat: no-repeat, no-repeat;
    min-height: auto;
  }
  .hero::after { display: none; }

  /* Flattenuje hero-content do hero-grid (flex), abychom mohli pomocí order
     přesunout stats AŽ za visual blok na mobilu */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-areas: none;
  }
  .hero-content { display: contents; }
  .hero-badge, .hero-title, .hero-lead, .hero-actions, .cta-microbenefit { order: 1; }
  .hero-visual { order: 2; }
  .hero-stats { order: 3; }
  /* Na mobilu kartu produktů netáhneme nahoru pod tlačítka — ponecháme mezeru */
  .hero-visual--products { margin-top: 18px; }

  /* Badge — užší mezera pod ním */
  .hero-badge { margin-bottom: 10px; }

  /* (3) Title bez ceny v 3. řádku, kompaktnější mezery */
  .hero-title { font-size: 2.55rem; line-height: 1.04; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.02em; }
  /* Badge — kompaktnější, ale původní světlý styl */
  .hero-badge {
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  /* (2) Skrýt "Od 179 Kč měsíčně" subtitle v titulku — i na mobilu */
  .hero-title-price { display: none; }
  /* (3) Text "Hodíme vám záchr..." s minimální mezerou */
  .hero-lead { font-size: 0.92rem; margin-bottom: 8px; line-height: 1.45; }
  .hero-lead strong { color: var(--primary); }

  /* (1) Buttons na plnou šířku, kompaktnější — menší vnitřní padding, minimální mezera mezi sebou */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 4px;
  }
  .hero-actions .btn-lg {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 8px 20px;
    font-size: 0.9rem;
  }
  .cta-microbenefit {
    justify-content: flex-start;
    display: flex;
    margin: 4px 0 14px;
    font-size: 0.82rem;
  }
  .cta-microbenefit .icon { color: var(--success); }

  /* (4) Visual transparentní — chat karta vycentrovaná, žádné překryvy */
  .hero-visual {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 8px 0;
    background-image: none;
    background: transparent;
    margin-left: 0;
    margin-right: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 0;
  }

  /* Chat karta — širší, vycentrovaná, bez trojúhelníčku (žádný tablet projection na mobilu) */
  .hero-card {
    position: relative;
    max-width: 100%;
    width: 100%;
    transform: none;
    margin: 0 auto;
    padding: 10px 12px;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 24px -6px rgba(0, 35, 96, 0.18);
    border: 1px solid var(--border);
    border-radius: 14px;
  }

  /* Trojúhelníček skrytý na mobilu — žádné napojení na tablet */
  .hero-card::after { display: none; }

  /* Kompaktnější header karty */
  .hero-card-header {
    gap: 8px;
    padding-bottom: 7px;
    margin-bottom: 7px;
  }
  .hero-card-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }
  /* Smazat zelenou kuličku na avataru */
  .hero-card-avatar .avatar-status { display: none; }
  .hero-card-info strong { font-size: 0.82rem; line-height: 1.15; }
  .hero-card-info span { font-size: 0.66rem; white-space: nowrap; }
  .hero-card-tag { font-size: 0.58rem; padding: 2px 7px; }

  /* Kompaktnější zprávy */
  .hero-chat-msg { font-size: 0.74rem; padding: 6px 10px 9px; line-height: 1.3; margin-bottom: 4px; }
  .hero-chat-msg .msg-time { font-size: 0.58rem; margin-top: 2px; }
  .hero-chat-msg.typing { padding: 8px 12px; }
  .hero-chat-msg.typing span { width: 4px; height: 4px; }

  /* Benefits: 3 karty s ikonami, plná šířka mřížka */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 0;
    margin-top: 18px;
    border-top: none;
    max-width: 100%;
  }
  .hero-stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 8px;
    align-items: center;
    text-align: center;
    gap: 4px;
    box-shadow: 0 2px 8px -2px rgba(0, 35, 96, 0.06);
  }
  i.icon.hero-stat-icon { display: inline-flex; }
  .hero-stat strong {
    font-size: 0.95rem !important;
    color: var(--primary);
    line-height: 1.1;
  }
  .hero-stat span {
    font-size: 0.68rem !important;
    color: var(--text-muted) !important;
    line-height: 1.25;
  }
}
@media (max-width: 640px) {
  .hero-title { font-size: clamp(2.4rem, 9vw, 2.8rem); }
  .hero-stat strong { font-size: 1rem; }
  .hero-stat span { font-size: 0.72rem; }
}

/* ============= SECTIONS ============= */
section { padding: 64px 0; }

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  border-radius: 0;
  box-shadow: none;
}
.section-eyebrow .icon { width: 14px; height: 14px; }

.section-header h2 { margin-bottom: 14px; }
.section-header p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); max-width: 56ch; margin: 0 auto; }

/* Varianta zarovnaná vlevo — pro FAQ apod. */
.section-header--left { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
.section-header--left p { margin-left: 0; margin-right: 0; }

/* ============= GRID CARDS ============= */
.grid {
  display: grid;
  gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 30px;
  border: 1px solid var(--border);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s var(--ease);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

.card h3 { font-size: 1.0625rem; }
.card p { font-size: 0.9375rem; }

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 20px;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.card-icon .icon { width: 24px; height: 24px; }

.card:hover .card-icon {
  background: var(--primary);
  color: var(--white);
}

/* Brand color variants — thin top accent for visual rhythm matching hero stat cards */
.card--cobalt::before,
.card--teal::before,
.card--baby::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card--cobalt::before { background: var(--primary); }
.card--cobalt .card-icon { background: rgba(0, 69, 191, 0.10); color: var(--primary); }
.card--cobalt:hover .card-icon { background: var(--primary); color: var(--white); }

.card--teal::before { background: var(--accent); }
.card--teal .card-icon { background: rgba(0, 165, 191, 0.12); color: var(--accent); }
.card--teal:hover .card-icon { background: var(--accent); color: var(--white); }

.card--baby::before { background: var(--primary-light); }
.card--baby .card-icon { background: rgba(125, 160, 220, 0.18); color: var(--primary-dark); }
.card--baby:hover .card-icon { background: var(--primary-light); color: var(--white); }

/* ============= PROČ U NÁS / BENEFITS ============= */
.why-us-title {
  font-family: var(--font-heading); /* Nunito — stejně jako ostatní nadpisy h2 */
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.35rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin-bottom: 36px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 34px 28px 32px;
  text-align: center;
  box-shadow: var(--shadow-2);
  transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--border-strong);
}

.why-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
}
.why-icon .icon { width: 38px; height: 38px; }
/* Ikony Group-81/82/84 mají vlastní kroužek → odebíráme okraj .why-icon, ať není dvojitý */
.why-icon:has(img) { border: none; }
.why-icon img { width: 100%; height: 100%; object-fit: contain; }

.why-card h3 {
  font-family: var(--font-heading);
  color: var(--primary);
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 800;
  margin-bottom: 14px;
}

.why-card p {
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 24ch;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .why-us-title { text-align: center; }
}

/* ============= SVG ICON SYSTEM ============= */
i.icon, span.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
}

i.icon svg, span.icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }

.card h3 { margin-bottom: 10px; }

.card-link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
}

/* ============= TARGET CARDS ============= */
.target-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  border: 1px solid var(--border);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s var(--ease);
}

.target-card h3 { font-size: 1.0625rem; margin-bottom: 8px; color: var(--heading); letter-spacing: -0.01em; }
.target-card p { font-size: 0.875rem; line-height: 1.5; }

.target-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.target-icon .icon { width: 24px; height: 24px; }

.target-card:hover .target-icon {
  background: var(--primary);
  color: var(--white);
}

/* ===== TARGET GROUPS — image cards ("Naše právní ochrana se hodí všem") ===== */
.tg-header {
  text-align: left;
  max-width: 780px;
  margin: 0 0 40px;
}
.tg-header h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 16px;
}
.tg-header h2 .tg-accent { color: var(--primary-light); }
.tg-header p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 70ch;
  margin: 0;
}

.tg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.tg-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease);
}
.tg-card:hover { transform: translateY(-4px); }

.tg-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-2);
}
.tg-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--primary);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 69, 191, 0.45);
}
.tg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}
.tg-card:hover .tg-media img { transform: scale(1.05); }

.tg-body { padding: 18px 2px 4px; }
.tg-body h3 {
  color: var(--primary);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.tg-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.tg-more {
  display: block;
  text-align: right;
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.tg-card:hover .tg-more { color: var(--primary-light); }

@media (max-width: 860px) {
  .tg-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .tg-grid { grid-template-columns: 1fr; }
}

/* ============= HOW IT WORKS — „Jak to celé funguje" (plavba) ============= */
.howworks {
  background: var(--white);
  overflow: hidden;
  padding-bottom: 0;
  scroll-margin-top: 100px;
}
.howworks-intro {
  max-width: 720px;
  margin-bottom: 64px;
}
.howworks-title {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 16px;
}
.howworks-title .text-accent { color: var(--primary-light); }
.howworks-intro p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 64ch;
  margin: 0;
}

.howworks-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: center;
}
.ww-step {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ww-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  color: var(--primary);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ww-icon svg { width: 50px; height: 50px; }
.ww-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ww-step:hover .ww-icon {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 69, 191, 0.16);
}
.ww-label {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--primary-light);
  font-weight: 600;
}
.ww-label strong {
  display: block;
  color: var(--primary);
  font-weight: 800;
}

/* Dekorativní plavba — tečkovaná dráha + plachetnice */
.howworks-route {
  position: relative;
  width: 100%;
  height: clamp(96px, 11vw, 150px);
  margin-top: 8px;
}
.ww-route-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 860px) {
  .howworks-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 520px) {
  .howworks-steps { grid-template-columns: 1fr; }
  .ww-icon { width: 76px; height: 76px; }
  .ww-icon svg { width: 42px; height: 42px; }
}

/* ============= PROCESS STEPS ============= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 18px;
  transition: all 0.25s ease;
  border: 2px solid var(--primary);
  box-shadow: 0 4px 14px rgba(0, 69, 191, 0.18);
  position: relative;
  z-index: 2;
}
.step:hover .step-num {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.05);
}

/* ============= WORKFLOW REVEAL — postupné zobrazení 1-4 ============= */
.step--workflow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step--workflow.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Postupný stagger 1 → 2 → 3 → 4 (vidět jak workflow plyne) */
.step--workflow[data-step="1"] { transition-delay: 0.05s; }
.step--workflow[data-step="2"] { transition-delay: 0.35s; }
.step--workflow[data-step="3"] { transition-delay: 0.65s; }
.step--workflow[data-step="4"] { transition-delay: 0.95s; }

/* Pulse efekt na step-num při zobrazení */
@keyframes step-pulse {
  0%   { box-shadow: 0 4px 14px rgba(0, 69, 191, 0.18), 0 0 0 0 rgba(0, 69, 191, 0.45); }
  50%  { box-shadow: 0 4px 14px rgba(0, 69, 191, 0.18), 0 0 0 10px rgba(0, 69, 191, 0); }
  100% { box-shadow: 0 4px 14px rgba(0, 69, 191, 0.18), 0 0 0 0 rgba(0, 69, 191, 0); }
}
.step--workflow.in-view .step-num {
  background: var(--primary);
  color: var(--white);
  animation: step-pulse 1.2s ease-out;
}

/* Workflow progress čára — naplní se postupně zleva doprava */
.steps--workflow::before {
  background: var(--border);
  opacity: 1;
  overflow: hidden;
}
.steps--workflow::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 12%;
  width: 0;
  max-width: 76%;
  height: 2px;
  background: var(--primary);
  z-index: 1;
  transition: width 2.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}
.steps--workflow.in-view::after {
  width: 76%;
}

/* Connector line between steps (desktop only) — pod kruhy v stacking order */
.steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12%;
  right: 12%;
  height: 2px;
  z-index: 0;
  background: repeating-linear-gradient(90deg, var(--primary-light) 0 6px, transparent 6px 14px);
  opacity: 0.5;
  z-index: 0;
}
@media (max-width: 900px) { .steps::before { display: none; } }

.step h3 { margin-bottom: 8px; font-size: 1.0625rem; }
.step p { font-size: 0.9375rem; }

/* ============= CTA SECTION ============= */
.cta-banner {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border-radius: var(--radius-lg);
  padding: 72px 40px 78px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -8px rgba(0, 35, 96, 0.28);
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 70% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 0%, black 0%, transparent 70%);
}

.cta-banner::after {
  content: '';
  position: absolute;
  top: -180px;
  right: -200px;
  width: 520px;
  height: 520px;
  background: url('assets/lifebuoy-large.svg') no-repeat center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.10;
  z-index: 0;
}

.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); margin-bottom: 14px; letter-spacing: -0.03em; }
.cta-banner p { color: rgba(255, 255, 255, 0.78); font-size: 1.0625rem; margin-bottom: 28px; }
.cta-banner strong, .cta-banner p strong { color: var(--white); font-weight: 600; }
.calc-summary strong, .calc-total strong, .calc-summary-row strong { color: var(--white); }
.footer strong, .footer p strong, .footer-bottom strong { color: var(--white); }
.testimonial-info strong { color: var(--heading); }
.hero-card-info strong { color: var(--heading); }
.hero-chat-msg.own strong { color: var(--white); }
.stats-illustration strong, .stats-illustration p strong { color: var(--white); }

.cta-banner .btn-primary {
  background: var(--white);
  color: var(--heading);
  border-color: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cta-banner .btn-primary:hover {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.25);
}

/* ── Legal-protection CTA card (water + lifebuoy banner) ───────────── */
.lpc-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 380px;
  display: flex;
  align-items: center;
  padding: 56px;
  /* photo background with a soft dark gradient for card-side contrast */
  background:
    linear-gradient(105deg, rgba(0, 28, 75, 0.62) 0%, rgba(0, 30, 80, 0.28) 50%, rgba(0, 30, 80, 0.10) 100%),
    url('assets/cta-foto.png') no-repeat center / cover;
  box-shadow: 0 16px 40px -12px rgba(0, 35, 96, 0.35);
}

.lpc-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px 44px;
  max-width: 540px;
  box-shadow: 0 18px 44px -16px rgba(0, 26, 77, 0.30);
}

.lpc-card h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.lpc-card p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: 28px;
}

.lpc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lpc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  min-height: 40px;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.lpc-btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--ease);
}

.lpc-btn:hover {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 8px 20px -6px rgba(0, 69, 191, 0.45);
}

.lpc-btn:hover .icon { transform: translateX(3px); }

@media (max-width: 820px) {
  .lpc-banner {
    padding: 32px;
    min-height: 0;
  }
  .lpc-card {
    max-width: 100%;
    padding: 32px 28px;
  }
  .lpc-card h2 { font-size: 1.625rem; }
}

@media (max-width: 480px) {
  .lpc-actions { flex-direction: column; align-items: stretch; }
  .lpc-btn { justify-content: center; }
}

/* ============= TESTIMONIALS ============= */
.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid var(--border);
}

.testimonial-stars { color: var(--primary); margin-bottom: 14px; font-size: 1rem; }
.testimonial-text { color: var(--text); font-size: 1.02rem; margin-bottom: 20px; }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid var(--border);
}

/* Fotka místo iniciál v kolečku */
.testimonial-avatar { overflow: hidden; padding: 0; }
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.testimonial-info strong { display: block; }
.testimonial-info span { font-size: 0.85rem; color: var(--text-muted); }

/* ============= FAQ ============= */
.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid transparent;
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  transition: background 0.2s;
  letter-spacing: -0.005em;
}

.faq-question:hover { background: var(--bg-section); }

.faq-question .icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--primary-light);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  transition: transform 0.3s;
}

.faq-item.active .faq-question .icon { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--text-muted);
}

.faq-item.active .faq-answer { max-height: 400px; }

.faq-answer-inner { padding: 18px 24px; }

/* ============= FORMS ============= */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Kdyby se rozbalovací seznam nestihl nahradit vlastním (assets/customselect.js
   neproběhne), zůstane vidět nativní <select> — a dlouhá položka by z něj lezla
   ven. Zkrácení třemi tečkami je pojistka právě pro tenhle případ; vlastní
   seznam (.ds-display) to má vyřešené sám a proti roztažení sloupce chrání
   celý web společné pravidlo v sekci POJISTKA PROTI ROZTAŽENÍ MŘÍŽEK. */
.form-select { text-overflow: ellipsis; }

/* Discount badge on calc-option pro roční platbu — green pill, floating top-right */
.discount-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--success);
  color: #FFFFFF !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 12px;
  border-radius: 100px;
  line-height: 1.5;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.92rem;
  color: var(--text);
}

.form-group label .req { color: var(--danger); }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 69, 191, 0.14);
}

.form-textarea { resize: vertical; min-height: 110px; }

/* Nevyplněné povinné pole po pokusu o odeslání */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--danger);
  background: rgba(239, 70, 63, 0.04);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 70, 63, 0.16);
}
.form-group.is-invalid > label,
.claim-field.is-invalid > label { color: var(--danger); }
.claim-card.is-invalid > h2,
.claim-card.is-invalid .claim-consent { color: var(--danger); }
.claim-card.is-invalid { box-shadow: 0 0 0 1.5px var(--danger), var(--shadow-2); }
input[type="checkbox"].is-invalid,
input[type="radio"].is-invalid { outline: 2px solid var(--danger); outline-offset: 2px; }

.form-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
}

.form-checkbox input { margin-top: 3px; }

/* ============= PRICING ============= */
.price-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  position: relative;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s var(--ease);
}

.price-card.featured {
  border-color: var(--primary);
  border-width: 1.5px;
  box-shadow: var(--shadow-2);
  background: linear-gradient(180deg, rgba(0, 69, 191, 0.04) 0%, rgba(0, 69, 191, 0) 60%), var(--white);
}

.price-card.featured::before {
  content: 'Nejoblíbenější';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ============= PRICE CARD VARIANTS (sluzby.html)
   Tři barvové akcenty napříč ceníkem — Základní (baby), Rozšířený (cobalt featured),
   Premium (teal). Tenký 4px top-band + tónovaná částka v ceně, žádné velké barevné
   plochy. ============= */
.price-card--basic,
.price-card--premium {
  position: relative;
  overflow: hidden;
}
.price-card--basic::after,
.price-card--premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.price-card--basic::after { background: var(--primary-light); }
.price-card--basic .price-amount strong { color: var(--primary-dark); }

.price-card--premium::after { background: var(--accent); }
.price-card--premium .price-amount strong { color: var(--accent-deep); }
.price-card--premium .price-name { color: var(--accent-deep); }

/* ============= ADDON PRICE LABELS (sluzby.html)
   Barevně tonované cenové štítky v doplňkových modulech — drobný pill místo
   plain bold textu, ladí s barevným pruhem nahoře karty. ============= */
.addon-price {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.addon-price--cobalt {
  background: rgba(0, 69, 191, 0.10);
  color: var(--primary-dark);
}
.addon-price--teal {
  background: rgba(0, 165, 191, 0.12);
  color: var(--accent-deep);
}
.addon-price--baby {
  background: rgba(125, 160, 220, 0.22);
  color: var(--primary-dark);
}

.price-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-desc { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 24px; }

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.price-amount strong {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.03em;
}
.price-amount span { color: var(--text-muted); font-size: 0.9375rem; }

.price-list { list-style: none; margin-bottom: 28px; }
.price-list li {
  padding: 8px 0;
  display: flex;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text);
  align-items: center;
}

.price-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-11'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.price-list li.muted { color: var(--text-light); }
.price-list li.muted::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'><path d='M5 12h14'/></svg>");
}

/* ============= PACKAGE CARDS (sluzby.html)
   Reálné balíčky LEXIA vedle sebe — DRIVE, DRIVE PLUS, HOME, GARANCE PLUS, TRIO
   (proklik na sjednání = objednavka) + INDIVIDUAL (proklik na kalkulačku).
   6-up na širokém desktopu, postupně se zalamuje. ============= */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  /* Vystoupí ze základního containeru (1080px) ať se 6 balíčků vejde do 1 řádku,
     stále vycentrované vůči stránce. */
  width: min(calc(100vw - 40px), 1360px);
  margin: 8px auto 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1240px) {
  .pkg-grid { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 1080px; left: auto; transform: none; }
}
@media (max-width: 760px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); max-width: 680px; } }

/* Varianty mřížky — 3 aktuální balíčky nahoře, 5 připravovaných níže.
   Musí být AŽ ZA výchozími media query výše, jinak je přebijí. */
.pkg-grid--3 { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 1080px; left: auto; transform: none; }
.pkg-grid--4 { grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 1180px; left: auto; transform: none; }
.pkg-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1240px) {
  .pkg-grid--3, .pkg-grid--5 { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 1080px; left: auto; transform: none; }
}
/* Čtyři karty se lámou rovnou na 2×2 — 3+1 nechává osamocenou kartu v druhé řadě. */
@media (max-width: 900px) {
  .pkg-grid--4 { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
}
@media (max-width: 760px) {
  .pkg-grid--3, .pkg-grid--4, .pkg-grid--5 { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
}
/* Mobilní úpravy balíčkových karet jsou níže, za základními pravidly .pkg-*
   (kvůli pořadí v souboru / specificitě). Viz "PACKAGE CARDS — MOBILE". */

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px 22px;
  box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.12), 0 12px 30px -12px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.10);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 -10px 30px -14px rgba(15, 23, 42, 0.16), 0 22px 44px -14px rgba(15, 23, 42, 0.26), 0 8px 16px -6px rgba(15, 23, 42, 0.12);
  border-color: var(--primary-light);
}
.pkg-card--featured {
  border-color: var(--primary);
  border-width: 1.5px;
  box-shadow: 0 -10px 28px -12px rgba(0, 69, 191, 0.20), 0 16px 38px -12px rgba(0, 69, 191, 0.28), 0 5px 12px -4px rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, rgba(0, 69, 191, 0.05) 0%, rgba(0, 69, 191, 0) 55%), var(--white);
}
.pkg-card--individual {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(0, 165, 191, 0.06) 0%, rgba(0, 165, 191, 0) 55%), var(--white);
}

.pkg-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background: var(--primary);
  color: var(--white);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pkg-badge .icon { width: 12px; height: 12px; color: var(--accent-yellow); }
.pkg-badge--calc { background: var(--accent); }
.pkg-badge--calc .icon { color: var(--white); }

.pkg-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; min-height: 72px; }
.pkg-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--bg-light);
  color: var(--primary);
}
.pkg-icon .icon { width: 24px; height: 24px; }
.pkg-card--featured .pkg-icon { background: var(--primary); color: var(--white); }
.pkg-card--individual .pkg-icon { background: var(--accent); color: var(--white); }
.pkg-titles { min-width: 0; }
.pkg-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.pkg-sub { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.3; }

.pkg-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; }
.pkg-price strong {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.03em;
}
.pkg-price span { font-size: 0.85rem; color: var(--text-muted); }
.pkg-price-from { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); align-self: center; }
.pkg-card--featured .pkg-price strong { color: var(--primary-dark); }
.pkg-card--individual .pkg-price strong { color: var(--accent-deep); }
.pkg-price-year {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.pkg-list { list-style: none; margin: 0 0 12px; padding: 0; }
.pkg-list li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: break-word;
}
.pkg-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-11'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.pkg-disputes {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  margin-bottom: 16px;
}
.pkg-disputes-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pkg-disputes p { font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); margin: 0; }

.pkg-cta { width: 100%; justify-content: center; }
.pkg-note { text-align: center; color: var(--text-muted); margin-top: 22px; font-size: 0.9rem; }

/* Připravované balíčky — zatlumené, zatím nejdou sjednat online */
.pkg-card--soon { background: var(--bg-light); border-style: dashed; box-shadow: none; }
.pkg-card--soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
.pkg-card--soon .pkg-icon { background: rgba(15, 23, 42, 0.07); color: var(--text-muted); }
.pkg-card--soon .pkg-price strong { color: var(--text-muted); }
.pkg-badge--soon { background: var(--text-muted); }
.pkg-badge--soon .icon { color: var(--white); }
.pkg-cta.is-soon { pointer-events: none; opacity: 0.5; }

/* Odkaz na detail nabídky („Kompletní rozsah ZDE") */
.pkg-detail {
  display: inline-block;
  margin: auto 0 16px;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: none;
}
.pkg-detail span {
  color: var(--primary);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pkg-detail:hover span { color: var(--primary-dark); }
.pkg-card--individual .pkg-detail span { color: var(--accent-deep); }

/* „+" odznáček na ikoně DRIVE PLUS — vizuálně odlišuje od DRIVE */
.pkg-icon--plus { position: relative; overflow: visible; }
.pkg-icon--plus::after {
  content: '+';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--white);
}

/* ============= PACKAGE CARDS — MOBILE =============
   Umístěno ZA základními .pkg-* pravidly, aby je v mobilu správně přebilo.
   Vždy aspoň 2 karty vedle sebe + hlavička ve stylu LP. */
@media (max-width: 520px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr); max-width: 460px; gap: 12px; }
  .pkg-card { padding: 18px 14px 18px; }
  /* Hlavička jako na LP: ikona vedle textu, svisle vycentrovaná s textovým blokem */
  .pkg-head { flex-direction: row; align-items: center; gap: 10px; min-height: 0; margin-bottom: 14px; }
  .pkg-name { font-size: 0.98rem; }
  /* název + podnadpis vlevo, menší mezera mezi nimi */
  .pkg-sub { font-size: 0.74rem; margin-top: 1px; }
  /* cena zarovnaná vlevo (stejně jako na desktopu), roční cena pod ní; bez oddělovací čáry */
  .pkg-price { justify-content: flex-start; }
  .pkg-price strong { font-size: 1.5rem; }
  .pkg-price span { font-size: 0.78rem; }
  .pkg-price-year {
    font-size: 0.78rem;
    text-align: left;
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
  }
  .pkg-list li { font-size: 0.8rem; padding-left: 20px; }
  .pkg-detail { font-size: 0.72rem; }
  .pkg-cta { font-size: 0.82rem; padding-left: 10px; padding-right: 10px; }
}

/* Na úzkých telefonech jedna karta na řádek. Dva sloupce nechávaly kartě jen
   130 px na text, takže z ní na 320 px lezlo ven osm textů — názvy („INDIVIDUAL",
   „Jednotlivec"), podnadpisy i ceny („od 269 Kč/měs."). Zalomit je nešlo, protože
   jsou to jednotlivá slova. Přes 480 px se karty vejdou vedle sebe bez přetečení,
   proto se dvousloupcové rozložení ruší až pod touto hranicí. */
@media (max-width: 480px) {
  .pkg-grid,
  .pkg-grid--3,
  .pkg-grid--4,
  .pkg-grid--5 { grid-template-columns: 1fr; max-width: 420px; }
}

/* Pojistka pro případ, že do karty přibude delší jednoslovný název nebo cena:
   raději slovo zalomit než ho nechat vylézt z rámečku. */
.pkg-name,
.pkg-sub,
.pkg-list li { overflow-wrap: anywhere; }

/* ============= INCLUDES STRIP (co Lexia hradí) ============= */
.includes-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 16px 56px;
  max-width: 900px;
}
.includes-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.includes-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 165, 191, 0.12);
  color: var(--accent);
}
.includes-check .icon { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .includes-grid { grid-template-columns: 1fr; justify-content: start; }
  .includes-grid li { white-space: normal; }
}

/* ============= COMPARISON TABLE (6 balíčků) ============= */
.compare-table th,
.compare-table td { text-align: center; }
.compare-table th:first-child,
.compare-table td:first-child { text-align: left; }
.compare-table thead th.is-featured { color: var(--primary); }
.compare-table td.is-featured { background: rgba(0, 69, 191, 0.04); }
.compare-table td.tc { color: var(--accent); }
.compare-table td.tc .icon { color: var(--accent); }
.compare-group td {
  background: var(--bg-section);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  text-align: left;
}
.compare-cta td { padding-top: 18px; padding-bottom: 18px; }
.btn-sm { padding: 7px 16px; min-height: 34px; font-size: 0.82rem; border-radius: 100px; }

/* --- Srovnávací tabulka na mobilu: horizontální scroll + ukotvený 1. sloupec --- */
@media (max-width: 720px) {
  #srovnani .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* jemný stín na pravém okraji jako náznak, že lze scrollovat */
    background:
      linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
      linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  #srovnani .compare-table { min-width: 600px; }
  #srovnani .compare-table th,
  #srovnani .compare-table td {
    padding: 11px 12px;
    font-size: 0.8rem;
  }
  #srovnani .compare-table th { font-size: 0.68rem; }
  /* ukotvený první sloupec (názvy funkcí) */
  #srovnani .compare-table th:first-child,
  #srovnani .compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
    min-width: 140px;
    box-shadow: 1px 0 0 var(--border);
  }
  #srovnani .compare-table thead th:first-child { background: var(--bg-section); }
  /* skupinový nadpis přes celou šířku ukotvovat nemá smysl */
  #srovnani .compare-table .compare-group td {
    position: static;
    box-shadow: none;
  }
  #srovnani .compare-table td.is-featured { background: rgba(0, 69, 191, 0.06); }
  #srovnani .btn-sm { padding: 6px 12px; font-size: 0.75rem; min-height: 30px; }
}

/* --- Šipky pro posun tabulky (zobrazí se jen když je co scrollovat) --- */
.table-scroller { position: relative; }
.table-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.28), 0 2px 6px -2px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease);
}
.table-scroll-btn svg { width: 22px; height: 22px; }
.table-scroll-btn:active { transform: translateY(-50%) scale(0.92); }
.table-scroll-btn--left { left: 4px; }
.table-scroll-btn--right { right: 4px; }
.table-scroll-btn.is-hidden { opacity: 0; pointer-events: none; }

/* --- Tabulka 30 právních oblastí (kalkulačka): na mobilu karty místo tabulky --- */
@media (max-width: 720px) {
  /* wrapper přestává být "rámeček tabulky", karty mají vlastní styl */
  .legal-areas-table { background: transparent; }
  .table-wrapper:has(.legal-areas-table) {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .legal-areas-table,
  .legal-areas-table thead,
  .legal-areas-table tbody,
  .legal-areas-table tr,
  .legal-areas-table td { display: block; width: 100%; }
  /* hlavička tabulky není na kartách potřeba */
  .legal-areas-table thead { display: none; }
  /* každý řádek = karta */
  .legal-areas-table tr {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 12px);
    box-shadow: var(--shadow-2);
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .legal-areas-table td {
    border: none;
    padding: 0;
    font-size: 0.9rem;
  }
  /* 1. buňka (#) jako malý odznak nad názvem oblasti */
  .legal-areas-table td:nth-child(1) {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 9px;
    margin-bottom: 8px;
    border-radius: 100px;
    background: rgba(0, 69, 191, 0.08);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.78rem;
  }
  /* 2. buňka = název oblasti (titulek karty) */
  .legal-areas-table td:nth-child(2) {
    display: block;
    font-weight: 700;
    color: var(--heading);
    font-size: 0.98rem;
    line-height: 1.35;
    margin: 0 0 10px;
  }
  /* 3. + 4. buňka = řádky label : hodnota */
  .legal-areas-table td:nth-child(3),
  .legal-areas-table td:nth-child(4) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
  }
  .legal-areas-table td:nth-child(3)::before { content: "Limit plnění"; }
  .legal-areas-table td:nth-child(4)::before { content: "Územní rozsah"; }
  .legal-areas-table td:nth-child(3)::before,
  .legal-areas-table td:nth-child(4)::before {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
  }
}

/* ============= DETAIL NABÍDKY (nabidka.html) ============= */
.detail-hero { text-align: left; padding-bottom: 8px; }
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 22px;
}
.detail-back:hover { color: var(--primary); }
.detail-back .icon { width: 15px; height: 15px; transform: rotate(180deg); }

.detail-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.detail-head-text { min-width: 0; text-align: left; }
/* menší mezera mezi názvem a podnadpisem (desktop i mobil) */
.detail-hero .detail-head-text h1 { margin-bottom: 0; line-height: 1.1; }
/* zpětný odkaz zarovnaný vlevo (ne na střed) */
.detail-hero .container { text-align: left; }
.detail-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--primary);
  color: var(--white);
}
.detail-icon .icon { width: 32px; height: 32px; }
.detail-hero h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.detail-sub { margin: 0; color: var(--text-muted); font-size: 1.05rem; max-width: none; }

/* cena vpravo vedle názvu (na stejném řádku), roční cena pod měsíční */
.detail-pricing { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0 0 0 auto; flex-shrink: 0; text-align: right; }
.detail-price { display: flex; align-items: baseline; gap: 6px; }
.detail-price strong {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.03em;
}
.detail-price span { color: var(--text-muted); font-size: 1rem; }
.detail-price-year { color: var(--text-light); font-size: 0.95rem; }

.detail-cols { margin-top: 0; align-items: start; }
.detail-card { padding: 30px 28px; }

/* Sloučený frame: Rozsah krytí + Typické spory v jedné kartě,
   oddělené tenkou modrou čarou → zarovnané zhora i zdola. */
.detail-card--split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  align-items: center;
}
.detail-card--split .detail-col { padding: 30px 28px; }
/* Jemná, kratší dělící čára vystředěná na výšku obsahu */
.detail-card--split::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 70%;
  background: var(--primary-light);
  opacity: 0.4;
}
@media (max-width: 720px) {
  .detail-card--split { grid-template-columns: 1fr; }
  .detail-card--split::before {
    left: 50%;
    top: 50%;
    width: 70%;
    height: 1px;
  }
}
.detail-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin-bottom: 18px;
}
.detail-card-title .icon { width: 22px; height: 22px; color: var(--primary); }
.detail-card .price-list { margin-bottom: 0; }
@media (max-width: 720px) {
  .detail-head { gap: 12px; align-items: center; flex-wrap: nowrap; }
  .detail-icon { width: 50px; height: 50px; border-radius: 13px; }
  .detail-icon .icon { width: 25px; height: 25px; }
  /* název menší, ať se vejde cena vedle; mezera mezi názvem a podnadpisem na polovinu */
  .detail-hero .detail-head-text h1 { font-size: 1.3rem; line-height: 1.1; margin-bottom: 4px; }
  .detail-sub { margin-top: 0; font-size: 0.9rem; line-height: 1.25; }
  .detail-head-text { flex: 1 1 auto; }
  /* cena vedle názvu, vpravo; roční cena pod měsíční */
  .detail-pricing { flex-shrink: 0; }
  .detail-price strong { font-size: 1.5rem; }
  .detail-price span { font-size: 0.8rem; }
  .detail-price-year { font-size: 0.78rem; text-align: right; }
  /* oddělovací čára mezi „Rozsah krytí" a „Typické spory" na mobilu pryč */
  .detail-card--split::before { display: none; }
}

/* ============= SCROLL COMPANION (Záchranný kruh) =============
   Subtle: small, single bob animation, no glow, no floating label. */
.scroll-companion {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 64px;
  height: 64px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.scroll-companion.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scroll-companion .ring-wrapper {
  width: 100%;
  height: 100%;
  animation: companion-bob 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0, 35, 96, 0.18));
}
.scroll-companion .ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.scroll-companion .ring-bg {
  stroke: #E6EAF2;
}
.scroll-companion .progress-ring {
  transition: stroke-dashoffset 0.4s var(--ease);
}
.scroll-companion .check-mark {
  transition: stroke-dashoffset 0.7s var(--ease);
}

/* Label hidden — the ring + check is enough as a signal; removing the "POJIŠTĚNO"
   pill removes a layer of “gamification” that conflicts with insurance gravitas. */
.scroll-companion .label { display: none; }

@keyframes companion-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 900px) {
  .scroll-companion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-companion .ring-wrapper { animation: none; }
  .scroll-companion.complete .ring-wrapper { animation: none; }
}

/* ============= IMAGES ============= */
.image-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-light);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 69, 191, 0.08);
}
.image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.image-frame:hover img { transform: scale(1.03); }

.image-frame--16x9 { aspect-ratio: 16/9; }
.image-frame--4x3 { aspect-ratio: 4/3; }
.image-frame--3x2 { aspect-ratio: 3/2; }
.image-frame--square { aspect-ratio: 1/1; }
.image-frame--portrait { aspect-ratio: 4/5; }

.image-frame--tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 32, 80, 0) 40%, rgba(0, 32, 80, 0.35) 100%);
  pointer-events: none;
}

.image-frame .image-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.image-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
  position: relative;
  background: var(--bg-light);
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px -10px rgba(0, 69, 191, 0.15);
}
.image-hero img { width: 100%; height: 100%; object-fit: cover; }

.image-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.image-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.image-caption {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.55;
}

.image-caption strong { color: var(--heading-soft); display: block; margin-bottom: 2px; }

.section-image {
  margin-bottom: 24px;
  max-width: 460px;
}

@media (max-width: 720px) {
  .image-grid-3 { grid-template-columns: 1fr; }
  .image-grid-2 { grid-template-columns: 1fr; }
  .image-hero { aspect-ratio: 16/9; }
  .section-image { max-width: 100%; }
}

/* ============= FOOTER ============= */
.footer-curve {
  display: block;
  width: 100%;
  height: 175px;
  margin-bottom: -1px;
  color: var(--primary);
}
.footer-curve path { fill: currentColor; }

.footer {
  background: var(--primary);
  background-image: none;
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0 24px;
  margin-top: 0;
  font-size: 0.8125rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
  align-items: start;
}

.footer-brand .logo img {
  height: 32px;
  filter: brightness(0) invert(1);
  margin-bottom: 18px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.footer-contact li .icon {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.95;
  width: 14px;
  height: 14px;
}
.footer-contact li .icon svg { width: 14px; height: 14px; }

.footer h4 {
  color: var(--white);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.8125rem;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 8px; }
.footer ul li a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
  line-height: 1.45;
  display: inline-block;
}
.footer ul li a:hover { color: var(--white); opacity: 1; }

.footer .logo img { filter: brightness(0) invert(1); }
.footer .logo img { height: 32px; }

.footer-bottom {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.85); }
.footer-bottom a:hover { color: var(--white); }

@media (max-width: 720px) {
  .footer-curve { height: 70px; }
  .footer { padding: 24px 0 24px; }
}

/* ============= PAGE HERO ============= */
.page-hero {
  background: var(--white);
  padding: 48px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Dvě stránky si k té mezeře přidávaly vlastní odsazení navíc a vycházelo
   jim 84 a 62 px místo 48. Formulář hlášení a tlačítka v hero detailu nabídky
   ho tedy pod úvodním blokem nepotřebují. */
.report-page > .lead-form-card { margin-top: 0; }
.detail-hero .hero-actions { margin-bottom: 0; }

/* Jednotná mezera pod úvodním blokem stránky. Dřív kolísala od 19 do 92 px
   podle toho, kolik si která stránka nastavila sama — při proklikávání webu
   měla každá stránka jiný nádech. Varianty s dekorativní křivkou (O nás,
   Kontakt, ceník, microsite) si spodní odsazení řídí samy, křivka ho vyplní. */
.page-hero + section,
.hero + section,
.pt-hero + section,
.zp-hero + section { padding-top: 48px; }
.page-hero h1 { margin-bottom: 12px; }
.page-hero p { max-width: 720px; margin: 0 auto; }

/* ----- O nás: hero s fotkou na pozadí a kartou (dle předlohy) ----- */
.page-hero--onas {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: left;
  /* Spodní padding = výška bílé vlny (.hero-inward-curve), aby karta
     zůstala celá na fotce a nepřetékala do bílé plochy pod vlnou. */
  padding: 48px 0 190px;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.page-hero--onas::before,
.page-hero--onas::after { display: none; }
.page-hero--onas .container { width: 100%; }
.page-hero--onas .onas-hero-card {
  background: var(--white);
  border-radius: 24px;
  padding: 48px;
  max-width: 560px;
  box-shadow: 0 24px 60px rgba(20, 45, 80, 0.18);
}
.page-hero--onas .onas-hero-card h1 {
  margin: 0 0 20px;
  text-align: left;
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  line-height: 1.1;
}
.page-hero--onas .onas-hero-card p {
  margin: 0 0 32px;
  max-width: none;
  text-align: left;
  color: var(--text-muted, #4a5568);
}
.page-hero--onas .onas-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
}
.page-hero--onas .onas-hero-btn span { transition: transform 0.2s ease; }
.page-hero--onas .onas-hero-btn:hover span { transform: translateX(4px); }

@media (max-width: 600px) {
  .page-hero--onas { min-height: 480px; padding: 32px 0 170px; }
  .page-hero--onas .onas-hero-card { padding: 32px 24px; border-radius: 18px; }
}

/* ============================================
   PRODUCT BLOCKS (pro-koho.html)
   ============================================ */
.product-block {
  margin-bottom: 56px;
  padding: 0;
}
.product-block--bg {
  background: var(--bg-section);
  padding: 40px;
  border-radius: var(--radius-lg);
}

/* UNIFIED 2-COL GRID: oba sloupce zarovnané nahoře, přirozený flow */
.product-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-block__col-left,
.product-block__col-right {
  display: flex;
  flex-direction: column;
}

/* Mezera pod obrázkem */
.product-block__col-right .image-frame {
  margin-bottom: 24px;
}

/* INFO-BOX v levém sloupci pod pilíře — vyplní spodní prostor a vizuálně odděluje doplňující info */
.product-block__info-box {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--bg-light);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
}
.product-block__info-box .product-block__h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.product-block__info-box p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.55;
}
.product-block__info-box p strong { color: var(--heading); font-weight: 700; }
.product-block__col-left h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: clamp(1.875rem, 2.8vw, 2.375rem);
  line-height: 1.1;
}
.product-block__lead {
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.55;
}
.product-block__lead strong { color: var(--heading); font-weight: 700; }
.product-block__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.product-block__badge {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  padding: 4px 12px;
  background: var(--primary);
  color: var(--white);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

/* Mezisekční h4 — Co kryjeme / Příklady / Náš servis */
.product-block__h4 {
  color: var(--primary);
  font-size: 1rem;
  margin: 0 0 14px;
  font-weight: 700;
}

.product-pilire,
.product-examples-list,
.product-coming-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-pilire li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.95rem;
  align-items: flex-start;
  color: var(--text);
}
.product-pilire .check {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 5px;
  background: none;
}
.product-pilire .check .icon { display: none; }
.product-pilire .check::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.product-examples-list li {
  padding: 7px 0;
  font-size: 0.94rem;
  color: var(--text);
  position: relative;
  padding-left: 18px;
}
.product-examples-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

.product-coming-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 16px 0;
  align-items: center;
  border-top: 1px solid var(--border);
}
.product-coming-list li:first-child { border-top: none; padding-top: 8px; }

.product-coming-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 69, 191, 0.12);
}
.product-coming-icon .icon { width: 28px; height: 28px; }
/* Pozor: cílíme pouze na strong/span uvnitř DIVU (textový obsah), ne na .product-coming-icon span */
.product-coming-list li > div > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--heading);
  margin-bottom: 2px;
}
.product-coming-list li > div > span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.product-block__note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text);
}
.product-block__note strong { color: var(--heading); font-weight: 700; }

@media (max-width: 900px) {
  .product-block__grid { grid-template-columns: 1fr; gap: 28px; }
  .product-block--bg { padding: 28px 20px; }
  .product-block { margin-bottom: 40px; }
}

/* ============= CONTACT HERO (kontakt.html) ============= */
.contact-hero {
  padding: 36px 0 56px;
  background: var(--bg-section);
  position: relative;
  overflow: hidden;
}
.contact-hero-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.contact-hero-head h1 { margin-bottom: 12px; }
.contact-hero-head .hero-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0 auto;
  text-align: center;
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.contact-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Karta „Sídlo společnosti" navazuje hned na kontaktní dlaždice se stejnou
   mezerou (14px) jako mezi nimi — sloupec má rovnoměrné rozestupy a karta
   se neodsouvá zbytečně dolů. */
.contact-options .card { margin-top: 0; }

.contact-option {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text);
}
.contact-option:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.contact-option-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.contact-option-icon .icon { width: 22px; height: 22px; }
.contact-option:hover .contact-option-icon {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.06);
}

.contact-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-option-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  font-weight: 700;
}
.contact-option-info strong {
  font-size: 1.1rem;
  color: var(--heading);
  font-weight: 700;
  line-height: 1.3;
}
.contact-option-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Formulář v kontaktní kartě přebírá podtržítkový/plovoucí design z LP,
   ale rám karty zajišťuje už .contact-form-card → vnořený lead-form-card
   nesmí přidávat vlastní pozadí, okraj ani padding. */
.contact-form-card .lead-form-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}

/* Kompaktnější varianta formuláře v kontaktní kartě — menší texty a mezery,
   aby byl formulář o něco nižší než levý sloupec; pak se spodek formuláře
   srovná se spodkem karty „Sídlo společnosti" bez velké prázdné mezery. */
.contact-form-card .lead-form-card .form-group { margin-bottom: 22px; }
.contact-form-card .lead-form-card .form-input,
.contact-form-card .lead-form-card .form-textarea,
.contact-form-card .lead-form-card .ds-display {
  padding-top: 20px;
  padding-bottom: 7px;
  font-size: 0.92rem;
}
.contact-form-card .lead-form-card .form-textarea { min-height: 96px; }
.contact-form-card .lead-form-card .ds-display { min-height: 50px; }
.contact-form-card .lead-form-card .ds-icon { top: 14px; }
.contact-form-card .lead-form-card .form-group label { font-size: 0.68rem; }
.contact-form-card .lead-form-card .form-group.field-empty label {
  top: 20px;
  font-size: 0.9rem;
}
/* Konsent řádek = nejméně výrazný prvek: nejmenší písmo, světle šedá. */
.contact-form-card .lead-form-consent {
  font-size: 0.74rem;
  color: var(--text-light);
  margin: 2px 0 14px;
}
.contact-form-card .lead-form-consent a { font-weight: 500; color: var(--text-muted); }

/* CONTACT SPLIT — urgent / report / ask paths */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.contact-split--three { grid-template-columns: repeat(3, 1fr); }

/* Karty rozcestníku — čistý bílý panel, ikona v řádku s nadpisem,
   akce jako obrysové pilulkové tlačítko (podle předlohy). */
.contact-split-card {
  display: grid;
  grid-template-columns: auto 1fr;
  /* řádky: nadpis · popis (roztažitelný) · akce → tlačítka všech karet v jedné linii */
  grid-template-rows: auto 1fr auto;
  column-gap: 12px;
  row-gap: 10px;
  padding: 26px 24px;
  background: var(--white);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 30px -16px rgba(15, 23, 42, 0.18), 0 2px 8px -4px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-split-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.24), 0 4px 12px -6px rgba(15, 23, 42, 0.10);
}

/* Ikona v kolečku — stejný princip jako u kontaktních dlaždic níže */
.split-icon {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.split-icon .icon { width: 20px; height: 20px; }
.contact-split-card:hover .split-icon {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.06);
}

/* Obsah karty se rozpadne přímo do gridu karty, aby ikona seděla v řádku s nadpisem */
.split-content { display: contents; }

.contact-split-card h3 {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  font-size: 1.12rem;
  margin: 0;
  line-height: 1.3;
  color: var(--heading);
}
.contact-split-card p {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

.split-action {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
/* Tlačítko drží stejné rozměry jako .btn napříč webem */
.split-action strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 100px;
  padding: 11px 22px;
  margin-bottom: 0;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.split-action span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 10px;
}
.contact-split-card:hover .split-action strong {
  background: var(--primary);
  color: var(--white);
}

/* Barevné varianty — jen ikona a štítek, karta zůstává bílá a klidná */
.contact-split-card--urgent .split-icon { color: var(--danger); background: rgba(239, 70, 63, 0.10); }
.contact-split-card--urgent:hover .split-icon { background: var(--danger); color: var(--white); }
.contact-split-card--urgent .split-action strong { color: var(--danger); border-color: var(--danger); }
.contact-split-card--urgent:hover .split-action strong { background: var(--danger); color: var(--white); }

.contact-split-card--report .split-icon { color: var(--primary); }

.contact-split-card--ask .split-icon { color: var(--primary); }

/* Divider "or" */
.contact-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto 40px;
  max-width: 1120px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.contact-divider::before, .contact-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

@media (max-width: 900px) {
  .contact-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-form-card { padding: 28px; }
  .contact-split--three { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; }
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: -50px 0 -50px 0;
  background-image: radial-gradient(circle, rgba(125, 160, 220, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 var(--parallax-y, 0);
  -webkit-mask-image: radial-gradient(ellipse at center top, black 20%, transparent 60%);
  mask-image: radial-gradient(ellipse at center top, black 20%, transparent 60%);
  pointer-events: none;
  will-change: background-position;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: url('assets/hero-decoration.svg') no-repeat center;
  background-size: contain;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero h1 { margin-bottom: 16px; }
.page-hero p { font-size: 1.0625rem; max-width: 640px; margin: 0 auto; }

/* ============= PAGE HERO — LEGAL VARIANT (sluzby.html)
   Vizuální právní signál na první pohled: velký dekorační § v pozadí,
   pre-title pill, a trust strip pod leadem (váhy / štít / dohled ČNB).
   Všechno uvnitř existující page-hero — žádná nová sekce. ============= */
.page-hero--legal {
  padding: 56px 0 40px;
  text-align: center;
}

/* Velký dekorační § v pozadí — okamžitý vizuální signál „právo".
   Serif glyph, very low-opacity cobalt, ukotvený vlevo nahoře.
   Skrytý pod text vrstvou, neinteraktivní. */
.page-hero--legal::before {
  content: '§';
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(180px, 22vw, 320px);
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
  /* Zachová původní dot pattern overlay z .page-hero::before tím,
     že přepíše stejný pseudo-element — to je v pořádku, dot pattern
     je nahrazen výraznějším paragrafem. */
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
  inset: auto;
  width: auto;
  height: auto;
}

/* Pre-title pill — drobný legal indikátor nad nadpisem */
.page-hero-pretitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
  position: relative;
  z-index: 1;
}

.page-hero-pretitle .paragraph-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  padding-top: 1px;
  flex-shrink: 0;
}

/* Trust strip — 3 micro-cards: scales / shield / book.
   Vodorovný row, jemné dělící čáry mezi položkami; každý prvek má ikonu
   v cobalt kruhu, strong title a description ve druhém řádku. */
.legal-trust {
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.legal-trust li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-right: 1px solid var(--border);
  text-align: left;
}
.legal-trust li:last-child { border-right: none; }

.legal-trust li .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--primary);
  padding: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.legal-trust li span {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.legal-trust li span strong {
  color: var(--heading);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}

@media (max-width: 720px) {
  .legal-trust {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .legal-trust li {
    border-right: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .legal-trust li:last-child { border-bottom: none; }
  .page-hero--legal::before { font-size: 180px; opacity: 0.04; }
}

/* ============= CALCULATOR WIZARD (stepper + steps) ============= */
.calc-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  counter-reset: step;
}
.calc-stepper .step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.calc-stepper .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: var(--border);
  z-index: 0;
  transition: background 0.3s ease;
}
.calc-stepper .step.is-completed:not(:last-child)::after {
  background: var(--primary);
}
.calc-stepper .step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  border: 2px solid var(--border);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.calc-stepper .step.is-active .step-num {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 69, 191, 0.28);
  transform: scale(1.05);
}
.calc-stepper .step.is-completed .step-num {
  background: var(--success);
  color: var(--white);
  border-color: var(--success);
}
.calc-stepper .step-label {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}
.calc-stepper .step.is-active .step-label {
  color: var(--heading);
  font-weight: 700;
}
.calc-stepper .step.is-completed .step-label { color: var(--text); }

@media (max-width: 720px) {
  .calc-stepper { margin-bottom: 32px; }
  .calc-stepper .step-label { font-size: 0.7rem; }
  .calc-stepper .step-num { width: 30px; height: 30px; font-size: 0.85rem; }
  .calc-stepper .step:not(:last-child)::after { top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); }
}

/* Step panels - show/hide */
.calc-step { animation: stepFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.calc-step[hidden] { display: none; }

/* Step navigation (back/next buttons) */
.calc-nav {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.calc-nav .btn { flex: 1; min-width: 180px; }

@media (max-width: 600px) {
  .calc-nav { flex-direction: column-reverse; }
  .calc-nav .btn { width: 100%; }
}

/* Echo summary box (sticky on right) - reuse calc-summary styles */
.calc-summary--echo { position: sticky; top: 90px; }

/* Single-column step layout (centered, max-width) */
.calc-single {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Visuálně oddělená karta pro každou sekci rekapitulace */
.recap-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.recap-card-title {
  color: var(--heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--bg-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.recap-card-title .icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  background: var(--bg-light);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}

/* HERO summary card — cobalt gradient nahoře */
.recap-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: 0 12px 32px rgba(0, 69, 191, 0.22);
  position: relative;
  overflow: hidden;
}
.recap-hero::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: url('assets/stats-pattern.svg') no-repeat center;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
}
.recap-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.recap-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recap-hero-stat .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.recap-hero-stat .label .icon {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}
.recap-hero-stat strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.recap-hero-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.recap-hero-price-label {
  display: block;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}
.recap-hero-price-sub {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}
.recap-hero-price-sub strong {
  color: var(--white);
  font-weight: 600;
}
.recap-hero-price-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

/* Protection list — chip-style with brand check icon */
.recap-protection-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recap-protection-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 600;
}
.recap-protection-list li .icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: content-box;
  flex-shrink: 0;
}
.recap-protection-list li .recap-price-tag {
  margin-left: auto;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  border: none;
}

/* User data grid (2-col) */
.recap-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.recap-data-item {
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}
.recap-data-item .label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.recap-data-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--heading);
  font-weight: 600;
}
.recap-data-item--wide {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .recap-hero-stats { grid-template-columns: 1fr; }
  .recap-hero-price { flex-direction: column; align-items: flex-start; }
  .recap-data-grid { grid-template-columns: 1fr; }
  .recap-data-item--wide { grid-column: 1; }
}

.recap-card--price {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 69, 191, 0.18);
}
.recap-card--price .recap-row { color: rgba(255, 255, 255, 0.92); }
.recap-card--price .recap-row strong { color: var(--white); }
.recap-card--price .recap-card-title { border-bottom-color: rgba(255, 255, 255, 0.2); }

/* Recap layout (zachováno pro zpětnou kompatibilitu) */
.recap-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.recap-row strong { color: var(--heading); }

.recap-list { list-style: none; padding: 0; font-size: 0.95rem; }
.recap-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.recap-list li:last-child { border-bottom: none; }

.recap-accordion details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  padding: 12px 16px;
  transition: background 0.2s ease;
}
.recap-accordion details[open] { background: var(--bg-light); border-color: var(--primary-light); }
.recap-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--heading);
  font-size: 0.95rem;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.recap-accordion summary::-webkit-details-marker { display: none; }
.recap-accordion summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 400;
  transition: transform 0.2s ease;
}
.recap-accordion details[open] summary::after { content: '−'; }
.recap-accordion details p {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Payment layout */
.pay-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.pay-box {
  background: var(--bg-light);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 30px;
}

/* Completion / state cards */
.state-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  box-shadow: 0 8px 28px rgba(0, 26, 77, 0.08);
}
.state-card[hidden] { display: none; }

.state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.state-icon .icon { width: 40px; height: 40px; }
.state-icon--success { background: rgba(0, 165, 191, 0.12); color: var(--success); }
.state-icon--pending { background: rgba(125, 160, 220, 0.20); color: var(--primary-dark); }
.state-icon--custom { background: var(--bg-light); color: var(--primary); }

.state-card h2 { margin-bottom: 12px; }
.state-card > p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 28px; }
.state-details {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 28px;
  text-align: left;
}
.state-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.state-switcher button { font-size: 0.85rem; padding: 6px 14px; }

/* ===== Založení smlouvy — platební blok ===== */
.state-card--wide { max-width: 720px; }

.pay-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: #fffbe6;
  border: 1px solid #f2d800;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  color: #7a6a00;
  font-weight: 600;
  line-height: 1.5;
}
.pay-warning .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #b59b00; }
.pay-warning strong { color: #5c5000; }

.pay-block { margin-bottom: 28px; }

.pay-gateway-btn { width: 100%; }

.pay-secure {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 12px 0 0;
}
.pay-secure .icon { width: 13px; height: 13px; vertical-align: -1px; }

.pay-alt { margin-top: 24px; }
.pay-alt-head {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pay-alt-head::before,
.pay-alt-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.pay-alt-head span { padding: 0 14px; }

.pay-alt-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: left;
}
.pay-qr {
  flex: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  line-height: 0;
}
.pay-alt-rows { flex: 1; }

@media (max-width: 560px) {
  .pay-alt-body { flex-direction: column; align-items: stretch; text-align: center; }
  .pay-alt-rows { text-align: left; }
}

@media (max-width: 800px) {
  .recap-wrap, .pay-wrap { grid-template-columns: 1fr; }
  .calc-summary--echo { position: static; }
}

/* ============= CALCULATOR ============= */
.calc-wrapper {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}

.calc-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.calc-summary {
  background: var(--primary);
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  position: sticky;
  top: 100px;
}

.calc-summary h3 { color: var(--white); margin-bottom: 18px; }

.calc-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.95rem;
}

.calc-total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}

/* Mandatory pilíř (Základní právní ochrana) — bez modrého rámečku, jen modrý text */
.calc-option.selected:has(input:disabled) {
  background: var(--white);
  border-color: var(--border);
  box-shadow: none;
}
.calc-option.selected:has(input:disabled) strong {
  color: var(--primary);
}

.calc-total strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 8px 0;
}

.calc-total span { font-size: 0.95rem; opacity: 0.9; }

/* Drobný náhled roční částky bez slevy (u měsíční platby) — jen jemný popisek */
.calc-total .calc-year-hint {
  display: block;
  margin-top: -2px;
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.6;
}
.calc-total .calc-year-hint[hidden] { display: none; }
.calc-total .calc-year-hint strong {
  display: inline;
  font-size: inherit;
  font-weight: 400;
  margin: 0;
}

/* Řádek s roční úsporou v souhrnu — svítí jen při roční platbě */
.calc-saving {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
  line-height: 1.35;
}
.calc-saving[hidden] { display: none; }
.calc-saving .icon { width: 16px; height: 16px; flex-shrink: 0; }
.calc-saving strong { font-weight: 800; }

.calc-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.calc-section:last-child { border-bottom: none; }
.calc-section h4 { margin-bottom: 14px; }

/* ===== FIXED-PRODUCT CHECKOUT (e-shop styl) ===== */
.fixed-product {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--bg-light);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-sm);
}
.fixed-product-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary);
  color: var(--white);
}
.fixed-product-icon .icon { width: 26px; height: 26px; }
.fixed-product-body { flex: 1; min-width: 0; }
.fixed-product-name { display: block; font-size: 1.15rem; font-weight: 700; }
.fixed-product-sub { display: block; margin: 1px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--primary); }
.fixed-product-desc { margin: 4px 0 0; font-size: 0.9rem; color: var(--text-muted); }
.fixed-product-price {
  flex: none;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.fixed-product-price .fpp-now { display: flex; align-items: baseline; gap: 4px; }
.fixed-product-price strong { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.fixed-product-price span { font-size: 0.85rem; color: var(--text-muted); }
.fixed-product-year { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); line-height: 1; }
/* Upsell DRIVE → DRIVE PLUS */
.fixed-upsell {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.fixed-upsell[hidden] { display: none; }
.fixed-upsell:hover { border-color: var(--primary); }
.fixed-upsell:has(input:checked) { border-color: var(--primary); background: #eef3fd; }
.fixed-upsell input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.fixed-upsell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fixed-upsell-body strong { font-size: 0.95rem; font-weight: 700; }
.fixed-upsell-body span { font-size: 0.82rem; color: var(--text-muted); }
.fixed-upsell-price { flex: none; font-weight: 700; color: var(--primary); white-space: nowrap; }
.fixed-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--success);
  font-weight: 600;
}
@media (max-width: 560px) {
  .fixed-product { flex-wrap: wrap; }
  .fixed-product-price { width: 100%; justify-content: flex-end; }
}

/* Online objednávka — vzdušnější rozestup mezi řádky formuláře pojistníka.
   Mezera pod každým řádkem i pod samostatnou skupinou (ne mezi sloupci uvnitř řádku). */
#insured-form .form-row,
#insured-form .calc-section > .form-group { margin-bottom: 18px; }
#insured-form .calc-section > :last-child { margin-bottom: 0; }

.calc-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.calc-option {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: center;
}

.calc-option input { position: absolute; opacity: 0; }
.calc-option:hover { border-color: var(--primary-light); }

.calc-option.selected {
  border-color: var(--primary);
  background: var(--bg-light);
}

.calc-option strong { display: block; margin-bottom: 4px; }
.calc-option span { font-size: 0.85rem; color: var(--text-muted); }

/* Addon stack - stacked checkbox items in calculator section 3 */
.addon-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bloky "Předmět pojištění" v kroku 2 kalkulačky */
.subject-block {
  padding: 18px;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

.subject-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--heading);
  margin-bottom: 14px;
}

.subject-block-title .icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.subject-block .form-group:last-child { margin-bottom: 0; }

/* Řádky vozidel v podmíněném detailu pilíře "Vozidla a řidiči" */
.veh-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.veh-row {
  display: grid;
  grid-template-columns: 1fr auto 88px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.veh-row .veh-name {
  font-size: 0.92rem;
  color: var(--heading);
  font-weight: 600;
}

.veh-row .veh-price {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.veh-row .form-input {
  padding: 8px 10px;
  text-align: center;
}

@media (max-width: 560px) {
  .veh-row {
    grid-template-columns: 1fr 80px;
    row-gap: 4px;
  }
  .veh-row .veh-name { grid-column: 1 / 2; }
  .veh-row .veh-price { grid-column: 1 / 2; grid-row: 2; }
  .veh-row .form-input { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
}

.addon-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--white);
}

.addon-option:hover {
  border-color: var(--primary-light);
}

.addon-option input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

.addon-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--bg-light);
}

.addon-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.addon-info strong {
  display: block;
  font-size: 1rem;
  color: var(--heading);
}

.addon-info span {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============= BREADCRUMBS ============= */
.breadcrumbs {
  padding: 16px 0;
  background: var(--bg-section);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--primary); }

/* ============= LOGIN ============= */
.auth-wrapper {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  background: var(--white);
}

.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
}

/* Řádek pod heslem: „Pamatovat si přihlášení" a „Zapomněli jste heslo?"
   se do 344 px karty nevešly a lámaly se každý do dvou řádků. Menší písmo
   a zákaz lámání je udrží vedle sebe, každý na jednom řádku. */
.auth-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  /* Na velmi úzkém telefonu se oba texty vedle sebe fyzicky nevejdou —
     tam se pod sebe zalomí jako celek, ale nikdy uvnitř slova. */
  flex-wrap: wrap;
}
.auth-form-row .form-checkbox { margin: 0; }
.auth-form-row span,
.auth-form-row a { white-space: nowrap; }

.auth-card h1 { text-align: center; margin-bottom: 8px; }
.auth-card .lead { text-align: center; margin-bottom: 28px; color: var(--text-muted); }

/* ============= CLIENT DASHBOARD ============= */
.dash-wrapper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 0;
}

.dash-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 100px;
}

.dash-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
}

.dash-nav a:hover, .dash-nav a.active {
  background: var(--bg-light);
  color: var(--primary);
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.stat-card .label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }
.stat-card .value { font-size: 1.75rem; font-weight: 800; color: var(--heading); }
.stat-card .trend { font-size: 0.85rem; color: var(--success); margin-top: 4px; }

/* ============= POJISTKA PROTI ROZTAŽENÍ MŘÍŽEK =============
   Sloupec 1fr znamená ve skutečnosti minmax(auto, 1fr) — nikdy se nezmenší
   pod šířku svého nejdelšího nezalomitelného slova. Dlouhý název, e-mail nebo
   číslo pak roztáhne sloupec, s ním celou mřížku a obsah vyleze mimo obrazovku.
   Přesně tak přetékaly názvy balíčků na ceníku. Tohle pravidlo dovolí buňkám
   zmenšit se pod obsah, takže se text raději zalomí, než aby rozbil layout.
   Řeší to na jednom místě, ne přepisováním 114 jednotlivých mřížek. ============= */
.admin-form-grid > *,
.admin-layout > *,
.admin-pages-list > *,
.admin-quick-grid > *,
.admin-stats > *,
.calc-options > *,
.calc-wrapper > *,
.contact-hero-grid > *,
.contact-split > *,
.contact-split--three > *,
.contact-split-card > *,
.coverage > *,
.dash-stats > *,
.dash-wrapper > *,
.detail-card--split > *,
.dp-grid > *,
.dp-week > *,
.dp-years > *,
.faq-layout > *,
.featured-promo > *,
.footer-grid > *,
.form-row > *,
.fp-case__prices > *,
.fp-hero-card > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-5 > *,
.hero-grid > *,
.hero-stats > *,
.howworks-steps > *,
.image-grid-2 > *,
.image-grid-3 > *,
.includes-grid > *,
.includes-with-photo > *,
.kontakt-grid > *,
.kontakt-hero-paths > *,
.lead-form > *,
.pay-wrap > *,
.pd-feature-row > *,
.pd-row > *,
.pd-variants__grid > *,
.pkg-grid > *,
.pkg-grid--3 > *,
.pkg-grid--4 > *,
.pkg-grid--5 > *,
.product-block__grid > *,
.product-card__grid > *,
.product-detail__pillars > *,
.product-detail__variant-grid > *,
.product-showcase-row > *,
.recap-data-grid > *,
.recap-hero-stats > *,
.recap-wrap > *,
.steps > *,
.testimonials-grid > *,
.tg-grid > *,
.veh-row > *,
.why-grid > * { min-width: 0; }

/* Výjimka: .fp-stats na microsite — v buňce je cena „2 500 až 5 000 Kč/h",
   která se schválně nesmí lámat, takže buňka svou šířku potřebuje. */

/* ============= TABLE ============= */
.table-wrapper {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Posunout do strany jde na každé šířce, ne jen na mobilu. Dřív tu bylo
     overflow: hidden a posouvání se zapínalo až pod 720 px — širší tabulka
     se na tabletu tiše ořízla a k useknutým sloupcům se nedalo dostat. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: var(--bg-section);
}

th {
  text-align: left;
  padding: 14px 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

td {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text);
}

tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--bg-section); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  /* Štítek stavu se nikdy neláme — „Čeká na podpis" se v úzkém sloupci
     tabulky roztrhlo na dva řádky a pilulka pak vypadala rozbitě. */
  white-space: nowrap;
}

.badge-success { background: rgba(0, 165, 191, 0.14); color: var(--accent-deep); }
.badge-warning { background: rgba(125, 160, 220, 0.20); color: var(--primary-dark); }
.badge-info { background: var(--bg-light); color: var(--primary); }

/* ============= UTILITIES ============= */
.text-center { text-align: center; }
.mt-4 { margin-top: 32px; }
.mb-4 { margin-bottom: 32px; }
.bg-section {
  /* Plynulý gradient: bílá nahoře přechází do bg-section a zpět do bílé dole
     → bezešvé navázání na okolní bílé sekce */
  background: linear-gradient(180deg,
    var(--white) 0%,
    var(--bg-section) 56px,
    var(--bg-section) calc(100% - 56px),
    var(--white) 100%
  );
  position: relative;
  /* Bez overflow: hidden — aby legal glyphy z .has-glyph mohly přesahovat
     přes hranice sekce a plynule navazovat mezi sekcemi. */
}

/* Dvě bg-section sekce za sebou — vnitřní hranice je gray-to-gray,
   tak nepotřebujeme fade ven/dovnitř */
.bg-section + .bg-section {
  background: linear-gradient(180deg,
    var(--bg-section) 0%,
    var(--bg-section) calc(100% - 56px),
    var(--white) 100%
  );
}

/* Sekce hned po hero s vlnou — začíná rovnou barvou sekce (bez horního
   bílého přechodu), aby spodní oblouk hero tvořil jediný předěl a pod ním
   nevznikal bílý pruh/čára před sekcí */
.hero + .bg-section {
  background: linear-gradient(180deg,
    var(--bg-section) 0%,
    var(--bg-section) calc(100% - 56px),
    var(--white) 100%
  );
}

.bg-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(125, 160, 220, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 165, 191, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bg-section > .container { position: relative; z-index: 1; }

/* ============================================
   ANIMATIONS - scroll reveal & micro-interactions
   ============================================ */

/* Smooth transitions across UI */
.btn, .card, .target-card, .testimonial, .price-card, .faq-item,
.stat-card, .calc-option, .addon-option, .nav-links a, .footer ul li a,
.card-link, .card-icon, .target-icon, .step-num, i.icon svg {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll reveal - elementy začínají skoro vidlitelné, jemný subtlety */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays — kratší aby řada cards neměla velké zpoždění */
.reveal-d1 { transition-delay: 0.04s; }
.reveal-d2 { transition-delay: 0.08s; }
.reveal-d3 { transition-delay: 0.12s; }
.reveal-d4 { transition-delay: 0.16s; }
.reveal-d5 { transition-delay: 0.20s; }
.reveal-d6 { transition-delay: 0.24s; }

/* Slide-in varianty — méně dramatické */
.reveal-left {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

/* DŮLEŽITÉ: Nadpisy a section-header se NESCHOVÁVAJÍ — vždy okamžitě viditelné */
.section-header.reveal,
h1.reveal, h2.reveal, h3.reveal, h4.reveal,
.section-header h1, .section-header h2, .section-header h3,
.product-block__head, .product-block__head.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Vylepšené hover stavy karet — jednotný recept (drobný lift, jemný token-shadow,
   tint border). Nahrazuje původní duplicitní pravidla výše (-3px / vlastní shadow recipe). */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

.target-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

.testimonial:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

/* Step number hover (in step card) — jen subtle scale, žádný shadow burst */
.step:hover .step-num {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(0, 35, 96, 0.20);
}

/* Tlačítka — press feedback je jemný "sink" (translateY 1px),
   ne material-y water ripple. čititelnější na firemní/instituciálním brandu. */
.btn { position: relative; }
.btn:active { transform: translateY(1px); }

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 16px -4px rgba(0, 35, 96, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 35, 96, 0.20);
}

/* Navigation underline animace — jemná 2px linka, hover/active stejně. */
.nav-links a {
  position: relative;
  padding-bottom: 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.25s var(--ease);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Footer link hover — jen barva, žádný posun. Posun štěká sloupcem při hover. */
.footer ul li a {
  position: relative;
  transition: color 0.18s var(--ease);
}

.footer ul li a:hover {
  color: var(--white);
}

/* Card-link arrow micro-interaction */
.card-link {
  transition: gap 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-link:hover {
  gap: 10px;
}

/* Icon micro-interactions — jemnější (1.05 místo 1.1) */
.card:hover i.icon svg {
  transform: scale(1.05);
}

.target-card:hover .target-icon i.icon svg {
  transform: rotate(-2deg) scale(1.04);
}

.step:hover .step-num {
  background: var(--primary-dark);
}

/* Hero card — gentle, slow float; pauses on interaction. Reduced amplitude
   so it stops competing with the typing-dots animation. */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.hero-card {
  animation: float-gentle 7s ease-in-out infinite;
}

.hero-card:hover {
  animation-play-state: paused;
  box-shadow: var(--shadow-3);
}

/* Header on scroll — jen hairline border, žádný box-shadow. Linear-style. */
.header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--border);
  box-shadow: none;
}

/* Subtle parallax na hero dot pattern */
.hero::before {
  transition: transform 0.1s linear;
  will-change: transform;
}

.page-hero::before {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* FAQ vylepšení - smoother expand */
.faq-item {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.faq-item:hover { box-shadow: var(--shadow-2); }
.faq-item.active { box-shadow: var(--shadow-2); }

/* Otevřená otázka — jemné modré podbarvení pozadí */
.faq-item.active .faq-question { background: var(--bg-light); }

.faq-answer { transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* Calc option focus-ring na hover */
.calc-option:hover {
  border-color: var(--primary-light);
  transform: translateY(-1px);
}

.calc-option.selected {
  box-shadow: 0 0 0 4px rgba(0, 69, 191, 0.1);
}

.addon-option:hover {
  border-color: var(--primary-light);
  transform: translateY(-1px);
}

/* Stat card - subtle hover */
.stat-card { transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

/* Price card lift on hover */
.price-card { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease); }
.price-card:not(.featured):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

/* Avatar subtle hover */
.testimonial:hover .testimonial-avatar,
.card:hover .testimonial-avatar {
  transform: scale(1.05);
}

/* Form input focus glow */
.form-input:focus, .form-select:focus, .form-textarea:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Logo subtle hover */
.logo { transition: opacity 0.2s ease; }
.logo:hover { opacity: 0.85; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-card { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============= RESPONSIVE ============= */
@media (max-width: 968px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .calc-wrapper { grid-template-columns: 1fr; }
  .calc-summary { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-wrapper { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
}

/* ============= MOBILNÍ MENU =============
   Hamburger se zapíná na 960 px, ne až na 720 px. Mezi 721 a 960 px se dřív
   zobrazovalo plné desktopové menu, které se ale na šířku nevešlo: názvy se
   lámaly do dvou řádků a odkaz „Kontakt" zajížděl pod tlačítko „Spočítat cenu",
   takže na něj nešlo kliknout. Na 961 px zbývá menu 35 px rezervy vlevo
   a 67 px vpravo, takže se nezalomí ani nepřekryje. */
@media (max-width: 960px) {
  .nav-links { display: none; }
  /* Odsazení od tlačítka „Spočítat cenu" — bez něj se ho hamburger dotýkal,
     mezi nimi bylo jen 8 px vlastního odsazení hamburgeru. */
  .menu-toggle { display: block; margin-left: 14px; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    gap: 16px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 200;
  }

  /* Mobile: hide klient icon button (je v dropdown menu jako "Přihlásit se") */
  .nav-actions .btn-icon { display: none; }

  /* Mobile: zobrazit "Přihlásit se" v dropdown menu */
  .nav-links.open .nav-mobile-only {
    display: block;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    width: 100%;
  }

  .nav-links.open .nav-mobile-only a {
    color: var(--primary);
    font-weight: 600;
  }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .hero { padding: 50px 0 60px; }
  section { padding: 44px 0; }
  .auth-card { padding: 32px 24px; }
  .calc-options { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
}

/* ============= NAV NEW DOT (Akce notifikace) — static, not pulsing.
   A constantly pulsing red dot on a legal-insurance nav reads as anxiety;
   a steady marker is enough to draw attention without nagging. */
.nav-new-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: super;
  box-shadow: 0 0 0 3px rgba(239, 70, 63, 0.14);
}

/* ============= AKCE PAGE: featured promo + grid ============= */
.featured-promo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  max-width: 1200px;
  margin: 0 auto;
}
.featured-promo-image {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  overflow: hidden;
}
.featured-promo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: luminosity;
  opacity: 0.85;
}
.featured-promo-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.featured-promo-content {
  padding: 40px 40px 40px 0;
}
.featured-promo-tag {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 12px;
}
.featured-promo-content h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 16px; line-height: 1.15; }
.featured-promo-content > p { margin-bottom: 20px; }
.featured-promo-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.featured-promo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.95rem;
}
.featured-promo-list li .icon {
  color: var(--success);
  width: 18px;
  height: 18px;
}
.featured-promo-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* PROMO CARD GRID */
.promo-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.22s var(--ease);
}
.promo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.promo-card-media {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}
.promo-card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.promo-card-tag--discount { background: var(--danger); color: var(--white); }
.promo-card-tag--bonus { background: var(--success); color: var(--white); }
.promo-card-tag--gift { background: var(--white); color: var(--primary); }
.promo-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.promo-card-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.promo-card-body p { font-size: 0.92rem; margin-bottom: 14px; flex: 1; }
.promo-card-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.promo-card-meta .icon { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .featured-promo { grid-template-columns: 1fr; gap: 0; }
  .featured-promo-content { padding: 30px 24px; }
}

/* ============= ADMIN DASHBOARD ============= */
.admin-body {
  background: var(--bg-section);
}
.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: 20px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  flex: 1;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.93rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.admin-nav a:hover { background: var(--bg-light); color: var(--primary); }
.admin-nav a.active {
  background: var(--primary);
  color: var(--white);
}
.admin-nav a .icon { width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav-badge {
  margin-left: auto;
  background: var(--bg-light);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}
.admin-nav a.active .admin-nav-badge { background: rgba(255, 255, 255, 0.22); color: var(--white); }

.admin-sidebar-bottom {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}
.admin-user:hover { background: var(--bg-light); }
.admin-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid var(--border);
}
.admin-user-info { display: flex; flex-direction: column; line-height: 1.3; }
.admin-user-info strong { font-size: 0.9rem; color: var(--heading); }
.admin-user-info span { font-size: 0.75rem; color: var(--text-muted); }

.admin-main {
  padding: 28px 36px 60px;
  max-width: 100%;
  overflow-x: hidden;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.admin-topbar h2 { margin: 0; font-size: 1.6rem; }
.admin-topbar-actions { display: flex; gap: 10px; }
.admin-topbar-actions .btn { font-size: 0.85rem; padding: 8px 14px; min-height: 36px; }

.admin-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 20px;
}
.admin-section h3 { margin-bottom: 16px; font-size: 1.05rem; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.admin-stats .stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
}
.admin-stats .stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.admin-stats .label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.admin-stats .value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--heading);
  line-height: 1.1;
  margin-bottom: 4px;
}
.admin-stats .trend { font-size: 0.78rem; color: var(--success); }

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.admin-quick-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s ease;
}
.admin-quick-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-light);
  background: var(--white);
}
.admin-quick-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.admin-quick-icon .icon { width: 20px; height: 20px; }
.admin-quick-card strong { color: var(--heading); font-size: 0.95rem; }
.admin-quick-card span { font-size: 0.82rem; color: var(--text-muted); }

.admin-activity {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-activity li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text);
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.admin-activity li:last-child { border-bottom: none; }
.admin-activity-time {
  flex-shrink: 0;
  width: 100px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* V administraci je h2 název stránky, ne nadpis sekce — zůstává námořnický. */
#admin-page-title { color: var(--heading); }

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}

.admin-table {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 24px;
}
.admin-table thead th {
  background: var(--bg-section);
  padding: 14px 18px;
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.admin-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg-section); }

.admin-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.admin-pill--primary { background: var(--bg-light); color: var(--primary); }
.admin-pill--success { background: rgba(0, 165, 191, 0.14); color: var(--success); }
.admin-pill--warning { background: rgba(125, 160, 220, 0.22); color: var(--primary-dark); }
.admin-pill--accent { background: rgba(0, 165, 191, 0.14); color: var(--accent); }
.admin-pill--muted { background: var(--bg-section); color: var(--text-muted); }

.admin-icon-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.admin-icon-btn:hover { background: var(--bg-light); color: var(--primary); }
.admin-icon-btn .icon { width: 16px; height: 16px; }

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.admin-upload {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 30px;
  text-align: center;
  background: var(--bg-section);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.admin-upload:hover { border-color: var(--primary); background: var(--bg-light); }

.admin-pages-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.admin-page-item {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}
.admin-page-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.admin-page-item strong { color: var(--heading); font-size: 1rem; }
.admin-page-item span { font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; height: auto; }
  .admin-stats, .admin-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-form-grid, .admin-pages-list { grid-template-columns: 1fr; }
  .admin-table { font-size: 0.85rem; }
  .admin-main { padding: 20px 16px 40px; }
}

/* ===================================================================
   MOBILE OVERRIDE — musí být na konci CSS, aby přebily pozdější
   @media (max-width: 968px) a (max-width: 980px) v souboru
   =================================================================== */
@media (max-width: 720px) {
  /* Hero-grid: flex column s gap 0, ne 40px z 968px breakpointu */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-areas: none;
    grid-template-columns: 1fr;
  }
  .hero-content { display: contents; }
  .hero-badge, .hero-title, .hero-lead, .hero-actions, .cta-microbenefit { order: 1; }
  .hero-visual { order: 2; }
  .hero-stats { order: 3; }

  /* Mezery — kompaktní */
  .hero-badge { margin-bottom: 10px; }
  .hero-title { font-size: 2.55rem; line-height: 1.04; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.02em; }
  .hero-title-price { display: none; }
  .hero-lead { font-size: 0.92rem; margin-bottom: 8px; line-height: 1.45; }
  .hero-lead strong { color: var(--primary); }

  /* Tlačítka: full-width, kompaktní vertikální padding, minimální gap mezi nimi */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 4px;
  }
  .hero-actions .btn-lg {
    width: 100% !important;
    min-height: 0;
    height: auto;
    padding: 10px 20px;
    font-size: 0.95rem;
    text-align: center;
    justify-content: center;
  }
  .cta-microbenefit {
    justify-content: flex-start;
    display: flex;
    margin: 4px 0 14px;
    font-size: 0.82rem;
  }
}

/* ============================================
   CUSTOM SELECT — čistý brand chevron místo
   systémové šipky (appearance: none)
   ============================================ */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230045bf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}
.form-select::-ms-expand { display: none; }

/* ============================================
   CUSTOM DATEPICKER — kalendář v brand designu
   nahrazuje nativní <input type=date> (assets/datepicker.js)
   ============================================ */

/* Skryje původní nativní date input — ten zůstává jen jako skrytý
   nositel hodnoty pro odeslání formuláře */
.dp-native-hidden { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Skryje nativní šipky / spinner / kalendářovou ikonu kdyby zůstal type=date */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none; -webkit-appearance: none; }

.dp { position: relative; }

/* Viditelné pole — vypadá jako .form-input + ikona kalendáře */
.dp-display {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  text-align: left;
  cursor: text;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.dp-display.is-placeholder { color: var(--text-light); }
.dp-display:hover { border-color: var(--primary-light); }
.dp.is-open .dp-display,
.dp-display:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 69, 191, 0.14);
}
.dp-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--primary);
  pointer-events: none;
}
.dp-icon svg { width: 100%; height: 100%; display: block; }

/* Popup kalendář */
.dp-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 308px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.dp.is-open .dp-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dp-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--heading);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.dp-title:hover { background: var(--bg-light); color: var(--primary); }
.dp-nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.dp-nav:hover { background: var(--bg-light); border-color: var(--primary-light); }
.dp-nav svg { width: 16px; height: 16px; }

.dp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.dp-week span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 0;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.dp-day.is-muted { color: var(--text-light); opacity: 0.45; }
.dp-day:hover:not(.is-disabled) { background: var(--bg-light); color: var(--primary); }
.dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary-light); font-weight: 700; }
.dp-day.is-selected,
.dp-day.is-selected:hover {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 4px 10px -2px rgba(0, 69, 191, 0.45);
}
.dp-day.is-disabled { color: var(--border-strong); cursor: not-allowed; opacity: 0.55; }

/* Výběr roku */
.dp-years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  max-height: 232px;
  overflow-y: auto;
}
.dp-year {
  padding: 10px 0;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.dp-year:hover { background: var(--bg-light); color: var(--primary); }
.dp-year.is-selected { background: var(--primary); color: var(--white); font-weight: 700; }

.dp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dp-foot button {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.dp-foot button:hover { background: var(--bg-light); }

/* ============================================
   CUSTOM SELECT — rozbalovací seznam v brand designu
   nahrazuje nativní <select class="form-select"> (assets/customselect.js)
   sdílí vizuální jazyk s datepickerem (.dp)
   ============================================ */

/* Skryje původní nativní select — zůstává jen jako skrytý nositel hodnoty */
.ds-native-hidden { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.ds { position: relative; }

/* Viditelné pole — vypadá jako .form-input + ikona šipky */
.ds-display {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.ds-display.is-placeholder { color: var(--text-light); }
.ds-display:hover { border-color: var(--primary-light); }
.ds.is-open .ds-display,
.ds-display:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 69, 191, 0.14);
}
.ds-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--primary);
  pointer-events: none;
  transition: transform 0.18s var(--ease);
}
.ds.is-open .ds-icon { transform: translateY(-50%) rotate(180deg); }
.ds-icon svg { width: 100%; height: 100%; display: block; }

/* Popup se seznamem možností */
.ds-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  min-width: 100%;
  max-height: 288px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.ds.is-open .ds-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Když se seznam nevejde, musí být na první pohled vidět, že jde scrollovat:
   1) max-height končí uprostřed položky → poslední je vidět jen napůl,
   2) tenký, stále viditelný posuvník v brand barvě. */
.ds-pop {
  /* Výška končí uprostřed položky → je vidět, že seznam pokračuje. */
  max-height: 244px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  /* Jemné zesvětlení u spodní hrany jako druhý signál „scrolluj dál". */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), rgba(0, 0, 0, 0.15) 100%);
}
.ds-pop::-webkit-scrollbar { width: 10px; }
.ds-pop::-webkit-scrollbar-track { background: transparent; }
.ds-pop::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid var(--white);
}
.ds-pop::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }

.ds-group-label {
  padding: 10px 12px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ds-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.ds-option--grouped { padding-left: 22px; }
/* Prázdná první položka (placeholder nativního selectu) se v seznamu nezobrazuje
   — jinak je nahoře prázdný modrý řádek. */
.ds-option:empty { display: none; }
.ds-option:hover:not(:disabled),
.ds-option.is-active:not(:disabled) { background: var(--bg-light); color: var(--primary); }
.ds-option.is-selected,
.ds-option.is-selected:hover,
.ds-option.is-selected.is-active {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
}
.ds-option:disabled { color: var(--border-strong); cursor: not-allowed; opacity: 0.6; }

/* ============================================
   HOMEPAGE — sekce přidané dle lexia.cz
   (segmenty „Již brzy", pokrytí/mapa, reference,
    FAQ s ilustrací, lead formulář „Pomůžeme Vám")
   ============================================ */

.text-accent { color: var(--primary-light); }

/* „Již brzy" badge na kartách segmentů */
.target-card--soon { position: relative; }
.soon-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg-light);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

/* Pokrytí — síť specialistů (text + mapa) */
.coverage {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.coverage-text h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  line-height: 1.12;
  margin: 0 0 16px;
}
.coverage-text h2 .text-accent { color: var(--primary-light); }
.coverage-text p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 22px; max-width: 42ch; }
.coverage-map img { width: 100%; max-width: 440px; height: auto; display: block; margin-left: auto; border-radius: var(--radius); }

/* Reference (testimonials) */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ===== Testimonials carousel ===== */
/* Fotopás na pozadí — bílá karta s citátem leží vlevo přes fotku */
.testimonials-stage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 48px;
  background: var(--bg-light) url('assets/lx-reference-more.jpg') center / cover no-repeat;
}

.testimonials-stage .testimonials-carousel {
  border: 0;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28);
  margin: 0;
}

.testimonials-carousel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 32px;
  max-width: 460px;
}

.testimonials-viewport {
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.testimonials-carousel .testimonial {
  flex: 0 0 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Slide uvnitř karuselu nesmí mít vlastní stín ani rámeček — jinak vzniká
   podbarvení po krajích uvnitř karty (globální pravidlo pro .testimonial). */
.testimonials-carousel .testimonial,
.testimonials-carousel .testimonial:hover {
  box-shadow: none;
  border-color: transparent;
  transform: none;
}

.testimonials-carousel .testimonial-text {
  font-size: 0.96rem;
  line-height: 1.6;
  margin-bottom: 22px;
}

.testimonials-carousel .testimonial-author { gap: 12px; }
.testimonials-carousel .testimonial-info { line-height: 1.2; }
.testimonials-carousel .testimonial-info strong { margin-bottom: 1px; }
.testimonials-carousel .testimonial-info strong { font-size: 0.92rem; }
.testimonials-carousel .testimonial-info span { font-size: 0.8rem; }

/* Autor podle předlohy — jméno modře, pozice pod ním tmavě */
.testimonials-carousel .testimonial-info strong {
  color: var(--primary);
  font-weight: 600;
}
.testimonials-carousel .testimonial-info span {
  color: var(--text);
}

.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}

.testimonials-arrow {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.testimonials-arrow svg { width: 16px; height: 16px; }
.testimonials-arrow:hover { background: var(--primary); color: var(--white); }
.testimonials-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Tečky uprostřed mezi šipkami */
.testimonials-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1 1 auto;
}

.testimonials-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9d4e6;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testimonials-dot:hover { background: var(--primary-light); }
.testimonials-dot.is-active {
  background: var(--primary);
}
.testimonials-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* FAQ s ilustrací otazníku */
.faq-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.faq-illustration { display: flex; align-items: center; justify-content: center; }
.faq-illustration img,
.faq-illustration svg { width: min(240px, 70%); height: auto; opacity: 0.95; }

/* Lead formulář „Pomůžeme Vám" — dle předlohy:
   vlevo titulek + karta formuláře, vpravo nahoře obrysový záchranný kruh.
   Pole jsou v podtržítkovém stylu (jen spodní linka), bez rámečků. */
.lead-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: start;
}
.lead-form-intro h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.12;
}
.lead-form-intro p { color: var(--text); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; }

/* Ilustrace záchranného kruhu vpravo nahoře, zarovnaná k titulku */
.lead-form-illustration { display: flex; justify-content: center; align-items: flex-start; }
.lead-form-illustration img { width: min(340px, 90%); height: auto; }

/* Karta formuláře — bílá, jemný stín */
.lead-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 40px 44px;
  margin-top: 36px;
}
/* Odesílací tlačítko formuláře — na střed */
.lead-form-card > button[type="submit"] {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.lead-form-card .form-group { margin-bottom: 26px; position: relative; }
.lead-form-card .form-group--half { max-width: calc(50% - 9px); }

/* Plovoucí popisek — výchozí stav: malý, vyjetý nad linku */
.lead-form-card .form-group label {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--primary);
  pointer-events: none;
  transition: top 0.16s var(--ease), font-size 0.16s var(--ease),
              color 0.16s var(--ease), font-weight 0.16s var(--ease);
}

/* Podtržítkový styl: jen spodní linka v brand modré, bez rámečku.
   Horní padding vytváří místo pro plovoucí popisek. */
.lead-form-card .form-input,
.lead-form-card .form-textarea,
.lead-form-card .ds-display {
  border: none;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  background: transparent;
  padding: 22px 0 8px;
  box-shadow: none;
}
.lead-form-card .form-input:focus,
.lead-form-card .form-textarea:focus,
.lead-form-card .ds.is-open .ds-display,
.lead-form-card .ds-display:focus-visible {
  outline: none;
  border-bottom-color: var(--primary-dark);
  box-shadow: none;
}
.lead-form-card .ds-display:hover { border-bottom-color: var(--primary-dark); }
.lead-form-card .form-textarea { min-height: 40px; }

/* Prázdné a nezaměřené pole (třídu .field-empty řídí JS na reálných
   událostech input/focus/blur/change) → popisek leží na lince (na místě
   psaní), větší a v šedé barvě jako placeholder. Po začátku psaní / focusu
   třída zmizí a popisek vyjede nahoru do výchozí malé pozice. */
.lead-form-card .form-group.field-empty label {
  top: 22px;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--text-light);
}

/* Select: kulaté světle modré tlačítko se šipkou — menší a posazené nad linku.
   min-height srovná výšku prázdného pole s inputem, aby spodní linka spadla
   pod popisek i šipku (jinak by je u prázdného selectu protínala). */
.lead-form-card .ds-display { padding-right: 38px; min-height: 55px; }
.lead-form-card .ds-icon {
  right: 0;
  top: 16px;
  bottom: auto;
  transform: none;
  width: 26px;
  height: 26px;
  background: var(--primary-light);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lead-form-card .ds.is-open .ds-icon { transform: rotate(180deg); }
.lead-form-card .ds-icon svg { width: 13px; height: 13px; }

/* Doplňkový text o zpracování osobních údajů — drobnější než pole formuláře */
.lead-form-consent { font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); margin: 4px 0 20px; }
.lead-form-consent a { color: var(--primary); font-weight: 600; }

/* Odeslat — modrá pilulka vpravo dole */
.lead-form-card button[type="submit"] { display: block; margin-left: auto; }

/* Kompaktní varianta formuláře v sekci „Pomůžeme Vám s výběrem" —
   stejné velikosti textu a mezery jako formulář „Nezávazně se zeptat"
   na stránce Kontakt (.contact-form-card .lead-form-card). */
.lead-form-main .lead-form-card .form-group { margin-bottom: 22px; }
.lead-form-main .lead-form-card .form-input,
.lead-form-main .lead-form-card .form-textarea,
.lead-form-main .lead-form-card .ds-display {
  padding-top: 20px;
  padding-bottom: 7px;
  font-size: 0.92rem;
}
.lead-form-main .lead-form-card .form-textarea { min-height: 96px; }
.lead-form-main .lead-form-card .ds-display { min-height: 50px; }
.lead-form-main .lead-form-card .ds-icon { top: 14px; }
.lead-form-main .lead-form-card .form-group label { font-size: 0.68rem; }
.lead-form-main .lead-form-card .form-group.field-empty label {
  top: 20px;
  font-size: 0.9rem;
}
.lead-form-main .lead-form-consent {
  font-size: 0.74rem;
  color: var(--text-light);
  margin: 2px 0 14px;
}
.lead-form-main .lead-form-consent a { font-weight: 500; color: var(--text-muted); }

@media (max-width: 860px) {
  .coverage,
  .testimonials-grid,
  .faq-layout,
  .lead-form { grid-template-columns: 1fr; gap: 28px; }
  .testimonials-carousel { padding: 24px 20px; }
  .testimonials-stage { padding: 20px; border-radius: 18px; }
  .faq-illustration { order: -1; }
  .faq-illustration svg { width: 140px; }
  .lead-form-illustration { order: -1; justify-content: flex-start; }
  .lead-form-illustration img { width: 160px; }
  .lead-form-card { padding: 28px 24px; margin-top: 24px; }
  .lead-form-card .form-group--half { max-width: 100%; }
}

/* ============= PRODUKTOVÉ SEKCE (pro-koho.html) ============= */
/* Bez viditelného orámování. Obrázek se střídá ze strany na stranu,
   každá druhá sekce má jemný světle modrý podklad. */
.product-card {
  padding: 0;
  margin-bottom: 48px;
  /* Odsazení při prokliku z kotvy (#jednotlivci, #rodiny…), aby se karta
     zastavila pod sticky hlavičkou a byla vidět její horní hranice. */
  scroll-margin-top: 120px;
}

/* Poslední karta už spodní odsazení nepotřebuje — přičítalo se k odsazení
   sekce a mezera pod poslední kartou tím vycházela 176 px místo 128 px
   jako všude jinde na webu. */
.product-card:last-child { margin-bottom: 0; }
/* Každá druhá sekce — jemný světle modrý podklad bez viditelného okraje */
.product-card--bg {
  background: var(--bg-light);
  padding: 44px;
  border-radius: var(--radius-lg);
}

/* Náhled: 2 sloupce — vlevo stručné intro + tlačítka, vpravo obrázek */
.product-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.product-card__col-left,
.product-card__col-right {
  display: flex;
  flex-direction: column;
}
/* Mobil: obrázek má pevný ořez 3:2 (jako fotka) */
.product-card__col-right .image-frame {
  margin-bottom: 0;
  aspect-ratio: 3 / 2;
  height: auto;
}
.product-card__col-right .image-frame img {
  position: absolute;
  inset: 0;
}
/* Desktop: obrázek vedle textu, text svisle na střed s menším odsazením nahoře/dole */
@media (min-width: 861px) {
  .product-card__grid { align-items: center; }
  .product-card__col-left { padding: 12px 0; }
  .product-card__col-right .image-frame {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
/* První karta (Jednotlivci): posun obrázku nahoru, ať nejsou postavy bez hlavy */
#jednotlivci .product-card__col-right .image-frame img { object-position: center top; }
/* Reverzní sekce: obrázek vlevo, text vpravo */
.product-card--reverse .product-card__col-right { order: -1; }

.product-card__col-left h2 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 2.7vw, 2.25rem);
  line-height: 1.12;
}
.product-card__lead {
  margin: 0 0 24px;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.55;
  max-width: 52ch;
}
.product-card__lead strong { color: var(--heading); font-weight: 700; }

.product-card__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  /* tlačítka hned pod textem (ne přilepená dole k obrázku) */
  margin-top: 4px;
}
.product-card__buttons .btn { justify-content: center; }

/* Po rozbalení detailu skryjeme náhledový obrázek a mřížku přepneme na jeden
   sloupec — detail se pak zobrazí hned pod textem a tlačítky (přes místo
   obrázku dané sekce). */
.product-card.is-open .product-card__grid {
  grid-template-columns: 1fr;
}
.product-card.is-open .product-card__col-right {
  display: none;
}

.product-card__examples-title {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 14px;
}

/* Detail po rozbalení — oddělovací linka, ať je jasné, že patří k sekci */
.product-card .product-detail {
  margin-top: 28px;
}

@media (max-width: 860px) {
  .product-card { margin-bottom: 36px; }
  .product-card--bg { padding: 28px 22px; }
  .product-card__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Na mobilu (jeden sloupec) obrázek zpět na vlastní poměr stran */
  .product-card__col-right .image-frame {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
  .product-card__buttons { margin-top: 20px; }
  /* Na mobilu je obrázek vždy pod textem */
  .product-card--reverse .product-card__col-right { order: 0; }
}

/* ============= ROZBALOVACÍ DETAIL PRODUKTU (pro-koho.html) ============= */
/* Detail se po rozbalení tváří jako otevřené „okno" / dropdown —
   bílá karta s modrým rámečkem, šipkou nahoře, titulní lištou a stínem. */
.product-detail {
  position: relative;
  margin-top: 28px;
  scroll-margin-top: 100px;
  background: #fff;
  border: 1.5px solid var(--primary-light);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px rgba(0, 69, 191, 0.06), 0 22px 48px rgba(0, 26, 77, 0.18);
  animation: productDetailFade 0.28s ease;
}
.product-detail[hidden] { display: none; }
/* Šipka nahoře — naznačuje, že okno „vyjelo" z tlačítka Zobrazit detail */
.product-detail::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 56px;
  width: 20px;
  height: 20px;
  background: var(--bg-light);
  border-left: 1.5px solid var(--primary-light);
  border-top: 1.5px solid var(--primary-light);
  transform: rotate(45deg);
  border-radius: 4px 0 0 0;
}
/* U reverzních karet je tlačítko vpravo — šipku přesuneme doprava */
.product-card--reverse .product-detail::before { left: auto; right: 56px; }
@keyframes productDetailFade {
  from { opacity: 0; transform: translateY(-10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Lepkavá titulní lišta okna — drží se nahoře při scrollování,
   takže detail jde kdykoli skrýt. Vkládá ji script.js. */
.product-detail__bar {
  position: sticky;
  top: 86px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--bg-light);
  border-bottom: 1.5px solid var(--primary-light);
  border-radius: calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0 0;
}
.product-detail__bar-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--heading);
}
.product-detail__bar-label .icon { width: 18px; height: 18px; color: var(--primary); }
.product-detail__bar-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--primary-light);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.product-detail__bar-close:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.product-detail__bar-x { font-size: 1.15rem; line-height: 1; }

/* Vnitřní odsazení obsahu okna (mimo titulní lištu) */
.product-detail__body { padding: 28px 32px 32px; }
@media (max-width: 860px) {
  .product-detail__body { padding: 20px 18px 24px; }
  .product-detail__bar { top: 80px; padding: 11px 18px; }
  .product-detail__bar-label { font-size: 0.88rem; }
}

.product-detail__intro { max-width: 780px; margin-bottom: 28px; }
.product-detail__title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--heading);
}
.product-detail__intro p {
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.6;
  font-size: 1.0rem;
}
.product-detail__intro p:last-child { margin-bottom: 0; }

.product-detail__pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.product-detail__pillar {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}

.product-detail__pillar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--heading);
}

.product-detail__pillar .product-examples-list li,
.product-detail__variant .product-examples-list li { padding: 5px 0 5px 18px; }

.product-detail__heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 22px;
}

.product-detail__pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 800;
}

.product-detail__pillar-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--white);
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* Blok variant — přes celou šířku */
.product-detail__variants {
  grid-column: 1 / -1;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}
.product-detail__variant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 4px;
}
.product-detail__variant {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.product-detail__variant > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--primary);
}
.product-detail__variant-sub {
  display: block;
  margin: 2px 0 6px;
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* Doplněk (manažerská právní ochrana) */
.product-detail__addon {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px dashed var(--primary);
  border-radius: 10px;
}
.product-detail__addon > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading);
  font-size: 0.94rem;
}

/* První pilíř přes celou šířku — seznam ve dvou sloupcích */
.product-detail__pillar--wide { grid-column: 1 / -1; }
.product-detail__pillar--wide > .product-examples-list {
  columns: 2;
  column-gap: 32px;
}
.product-detail__pillar--wide > .product-examples-list li { break-inside: avoid; }

/* Hint v náhledu, který vede k rozbalení detailu */
.product-block__detail-hint {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.product-block__detail-hint strong { color: var(--heading); font-weight: 700; }

/* Showcase varianta detailu — střídavé řádky text + obrázek (Garance Plus) */
.product-detail--showcase .product-detail__intro { max-width: 880px; }
.product-showcase {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.product-showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
/* Desktop: obrázek kopíruje výšku textového sloupce vedle (vzor: Jednotlivci) */
@media (min-width: 901px) {
  .product-showcase-row__media { display: flex; }
  .product-showcase-row .image-frame { width: 100%; height: 100%; aspect-ratio: auto; }
}
.product-showcase-row--media-left .product-showcase-row__media { order: -1; }
.product-showcase-row__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--primary);
  margin: 0 0 18px;
}
.product-showcase-row__list { margin: 0; }
.product-showcase-row .image-frame { margin: 0; }
.product-showcase-row--full {
  display: block;
  text-align: left;
  max-width: 760px;
  margin: 8px 0 0;
}
.product-showcase-row--full .product-showcase-row__list {
  display: block;
  text-align: left;
}

@media (max-width: 900px) {
  .product-detail__pillars { grid-template-columns: 1fr; }
  .product-detail__variant-grid { grid-template-columns: 1fr; }
  .product-detail__pillar--wide > .product-examples-list { columns: 1; }
  .product-showcase { gap: 36px; }
  .product-showcase-row { grid-template-columns: 1fr; gap: 22px; }
  .product-showcase-row__media { order: -1; }
}

/* ===== DETAIL JEDNOTLIVCI — alternující obrázek + text (dle předlohy) ===== */
/* Úvod */
.pd-intro { margin-bottom: 48px; max-width: 1000px; }
.pd-intro__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  color: var(--primary);
  margin: 0 0 22px;
}
.pd-intro__title span { color: var(--primary-light); }

/* Checklist s fajfkami */
.pd-checklist { list-style: none; margin: 0; padding: 0; }
.pd-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  color: var(--text-muted);
  line-height: 1.55;
  font-size: 1rem;
}
/* Fajfka bez rámečku (vzor: Podnikatelé a firmy), zelená/teal */
.pd-check {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 12px;
  margin-top: 5px;
  background: none;
}
.pd-check .icon { display: none; }
.pd-check::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pd-intro__list li { font-size: 1.0625rem; padding: 9px 0; }
.pd-intro__list li strong { color: var(--heading); font-weight: 700; }

/* Velký nadpis sekce */
.pd-section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  color: var(--primary);
  margin: 0 0 40px;
}

/* Řádek pilíře: střídavě obrázek + text */
.pd-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) 1.08fr;
  gap: 52px;
  align-items: stretch;
  margin-bottom: 56px;
}
.pd-row--reverse .pd-row__media { order: 2; }
.pd-row--reverse .pd-row__body { order: 1; }
.pd-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
/* Desktop: obrázek kopíruje výšku textového sloupce vedle (nikdy ji nepřetahuje) */
@media (min-width: 901px) {
  .pd-row__media { position: relative; }
  .pd-row__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}
.pd-row__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--primary);
  margin: 0 0 18px;
}

/* Doplněk (manažerská) + inline poznámka */
.pd-addon {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-light);
  border-radius: 12px;
}
.pd-addon > strong {
  display: block;
  color: var(--primary);
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.pd-addon .pd-checklist li { font-size: 0.94rem; padding: 5px 0; }
.pd-note-inline {
  margin: 16px 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted);
}

/* CTA tlačítko uvnitř řádku pilíře (odkaz na microsite) */
.pd-row__cta { margin-top: 24px; }

/* Stavový štítek přes fotku řádku pilíře */
.pd-row__media { position: relative; }
.pd-row__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-muted);
}
.pd-row__tag--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 69, 191, 0.35);
}

/* Blok variant — přes celou šířku */
.pd-variants {
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  margin-bottom: 56px;
}
.pd-variants__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
  margin: 0 0 20px;
}
.pd-variants__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pd-variant {
  background: var(--white);
  border-radius: 14px;
  padding: 20px 22px;
}
.pd-variant > strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--primary);
  font-size: 1.2rem;
}
.pd-variant__sub {
  display: block;
  margin: 2px 0 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* CTA button na konci každého detailu */
.pd-cta {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 900px) {
  .pd-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
  .pd-row__media { order: -1; }
  .pd-row--reverse .pd-row__media { order: -1; }
  .pd-row--reverse .pd-row__body { order: 0; }
  .pd-variants { padding: 22px 20px; }
  .pd-variants__grid { grid-template-columns: 1fr; }
}

/* ===== FEATURE LAYOUT DETAILU PRODUKTU (Podnikatele a firmy) ===== */
.product-detail--feature .product-detail__intro { max-width: 920px; }
.product-detail--feature .product-detail__title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 22px;
}
.product-detail--feature .product-detail__title span { color: var(--primary); }

.pd-intro-checks { list-style: none; margin: 0; padding: 0; }
.pd-intro-checks li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--text);
  line-height: 1.6;
  font-size: 1.02rem;
}
.pd-intro-checks li:last-child { margin-bottom: 0; }
.pd-intro-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 12px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.product-detail--feature .product-detail__heading {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.15;
  margin: 40px 0 36px;
}

.pd-feature-rows { display: flex; flex-direction: column; gap: 60px; }
.pd-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}
.pd-feature-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 24px 50px -28px rgba(15, 35, 75, 0.45);
}
/* Desktop: obrázek kopíruje výšku textového sloupce vedle (vzor: Jednotlivci) */
@media (min-width: 901px) {
  .pd-feature-row__media { position: relative; }
  .pd-feature-row__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}
.pd-feature-row--reverse .pd-feature-row__media { order: 2; }

.pd-feature-row__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin: 0 0 20px;
}

.pd-checks { list-style: none; margin: 0; padding: 0; }
.pd-checks li {
  position: relative;
  padding: 10px 0 10px 32px;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text);
}
.pd-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 15px;
  height: 12px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 900px) {
  .pd-feature-rows { gap: 44px; }
  .pd-feature-row { grid-template-columns: 1fr; gap: 22px; }
  .pd-feature-row--reverse .pd-feature-row__media { order: 0; }
  .pd-feature-row__media img { aspect-ratio: 16 / 10; }
}

/* ===== KOMPAKTNĚJŠÍ ROZBALENÉ DETAILY (zmenšení – jen detail, ne náhled) ===== */
/* Nadpisy */
.product-detail .pd-intro__title,
.product-detail .pd-section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 18px;
}
.product-detail .pd-section-title { margin-bottom: 26px; }
.product-detail .pd-row__title,
.product-detail .pd-feature-row__title,
.product-detail .product-showcase-row__title {
  font-size: clamp(1.3rem, 2.1vw, 1.62rem);
  margin-bottom: 12px;
}
.product-detail .product-detail__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--primary);
  margin-bottom: 18px;
}
.product-detail .product-detail__title span { color: var(--primary-light); }
.product-detail .product-detail__heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 26px 0 26px;
}

/* Texty a odrážky */
.product-detail .pd-checklist li,
.product-detail .pd-checks li,
.product-detail .pd-intro-checks li,
.product-detail .pd-intro__list li,
.product-detail .product-examples-list li,
.product-detail .product-showcase-row__list li {
  font-size: 0.9rem;
  line-height: 1.45;
}
.product-detail .pd-checks li { padding-top: 7px; padding-bottom: 7px; }
.product-detail .pd-checklist li { padding: 5px 0; }
.product-detail .pd-intro__list li { padding: 6px 0; }

/* Menší obrázky */
.product-detail .pd-row__media img,
.product-detail .pd-feature-row__media img {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
}
.product-detail .product-showcase-row .image-frame { aspect-ratio: 16 / 10; }

/* Stažené mezery */
.product-detail .pd-intro { margin-bottom: 30px; }
.product-detail .pd-row { gap: 36px; margin-bottom: 34px; }
.product-detail .pd-feature-rows { gap: 38px; }
.product-detail .pd-feature-row,
.product-detail .product-showcase { gap: 36px; }
.product-detail .pd-variants { padding: 22px 24px; margin-bottom: 34px; }
.product-detail .pd-variants__title { font-size: 1.3rem; margin-bottom: 16px; }

/* ============================================
   GLOBÁLNÍ SJEDNOCENÍ KARET — stín místo šedé linky
   Bílé karty napříč webem: rámeček zprůhledněn,
   dominuje jemný stín (stejný princip jako FAQ položky).
   Týká se obsahových karet/panelů — NE formulářových
   polí, selectů, kalendáře, avatarů a badge.
   ============================================ */
.card,
.why-card,
.target-card,
.testimonial,
.price-card,
.contact-option,
.contact-form-card,
.legal-trust,
.recap-card,
.recap-accordion details,
.state-card,
.calc-form,
.stat-card,
.table-wrapper,
.featured-promo,
.promo-card,
.lead-form-card,
.product-detail__pillar,
.product-detail__variants,
.product-detail__variant {
  border-color: transparent;
  box-shadow: var(--shadow-2);
}

/* Hover: stín se prohloubí (z původních pravidel), šedá linka se neobjevuje */
.card:hover,
.why-card:hover,
.target-card:hover,
.price-card:hover,
.contact-option:hover,
.recap-card:hover,
.state-card:hover,
.featured-promo:hover,
.promo-card:hover,
.product-detail__variant:hover {
  border-color: transparent;
}

/* Silnější stín (shora i zdola) — sjednoceno s kartami balíčků na sluzby.html.
   Karty „Proč si sjednat…" (.why-card) a formulář „Pomůžeme Vám s výběrem…"
   (.lead-form-card) tak nesplývají s bílým pozadím. */
.why-card,
.lead-form-card {
  box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.12), 0 12px 30px -12px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.10);
}
.why-card:hover {
  box-shadow: 0 -10px 30px -14px rgba(15, 23, 42, 0.16), 0 22px 44px -14px rgba(15, 23, 42, 0.26), 0 8px 16px -6px rgba(15, 23, 42, 0.12);
}

/* ============================================================
   MICROSITE SEGMENTU — právní ochrana pro finanční poradce
   Prefix `fp-`. Používá se jen na /financni-poradci a v šabloně
   `_sablona-microsite`. Nezasahuje do žádné existující komponenty.
   ============================================================ */

/* Štítek sekce ve tvaru pilulky */
/* Barvu nadpisu sekce dává základní pravidlo pro h2, zvýrazněná část
   je v --primary-light (stejně jako h2 na hlavních stránkách). */
.fp-h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  line-height: 1.18;
  margin: 0 0 16px;
}
.fp-h2 span { color: var(--primary-light); }
.fp-lead {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 1000px;
  margin: 0 0 40px;
}

/* Cenový blok pod hero */
.fp-price-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.fp-price-now {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--heading);
  line-height: 1;
}
.fp-price-old {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.fp-price-old s { color: var(--text-light); font-weight: 700; font-size: 1.15rem; }
.fp-price-for { color: var(--text-muted); font-size: 1rem; }
.fp-discount {
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Řada výhod se zaškrtnutím pod cenou */
.fp-benefits { margin-top: 8px; }

/* Modrý pruh se statistikami */
.fp-stats {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
/* barvu je nutné vynutit — globální pravidlo pro nadpisy jinak přebije
   dědění z .fp-stats a text by byl tmavý na modrém pozadí */
.fp-stats .fp-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.25;
  white-space: nowrap;
  margin-bottom: 10px;
  color: var(--white);
}
.fp-stats .fp-stat strong.fp-stat--wrap { white-space: normal; }
.fp-stats .fp-stat span {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--white);
}

/* Zvýrazněný informační rámeček */
/* Zvýrazněná poznámka: bílá karta s modrým proužkem vlevo, ve stylu
   ostatních bloků webu. Dřívější plná modrá plocha působila lacině. */
.fp-note {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.fp-note h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--heading);
  margin: 0 0 8px;
}
.fp-note h3 .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--primary); }
.fp-note strong { color: var(--heading); }
.fp-note p { margin: 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; }
.fp-note__single { display: flex; align-items: flex-start; gap: 9px; }
.fp-note__single .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--primary); margin-top: 2px; }

/* Karta typické situace */
.fp-case { display: flex; flex-direction: column; }
.fp-case__kicker {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 10px;
}
.fp-case__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--heading);
  margin: 0 0 12px;
  line-height: 1.3;
}
.fp-case p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.6; margin: 0 0 16px; }
.fp-case__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.fp-case__price { border-radius: var(--radius-sm); padding: 12px 10px; }
.fp-case__price small {
  display: block;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 4px;
}
/* částka i „Kč" musí zůstat na jednom řádku, box je úzký */
.fp-case__price b {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
}
.fp-case__price-note {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.85;
}
.fp-case__price--without { background: #fdecea; }
.fp-case__price--without small { color: #b03a34; }
.fp-case__price--without b { color: var(--danger); }
.fp-case__price--with { background: var(--bg-light); }
.fp-case__price--with small { color: var(--primary); }
.fp-case__price--with b { color: var(--primary); }
.fp-case__covers {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  margin-top: 0;
  padding-top: 14px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.fp-case__covers .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--primary); margin-top: 1px; }
.fp-case__covers b { color: var(--primary); font-weight: 700; }
.fp-footnote { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; margin: 28px 0 0; }

/* Seznam pojistných oblastí */
.fp-cover {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.fp-cover__check {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-cover__check .icon { width: 18px; height: 18px; }
.fp-cover strong { display: block; color: var(--heading); font-weight: 600; line-height: 1.4; margin-bottom: 3px; }
/* jen popisek s limitem, ne kolečko se zaškrtnutím (to je také <span>) */
.fp-cover > div > span { color: var(--text-light); font-size: 0.9rem; }

/* Přepínač měsíčně / ročně */
.fp-toggle {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px;
  margin-bottom: 22px;
}
.fp-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 9px 22px;
  border-radius: 100px;
  cursor: pointer;
}
.fp-toggle button[aria-pressed="true"] { background: var(--primary); color: var(--white); }
/* bublina „sleva" nad tlačítkem Ročně */
.fp-toggle button { position: relative; }
.fp-toggle__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
}

/* Závěrečné nabídkové karty */
.fp-offer {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.fp-offer__kicker {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.fp-offer p { color: rgba(255, 255, 255, 0.88); font-size: 0.9rem; line-height: 1.55; }
.fp-offer__pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  padding: 6px 14px;
  border-radius: 100px;
  margin: 18px 0 14px;
}
.fp-offer__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.fp-offer__price b { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1; }
.fp-offer__price s { color: rgba(255, 255, 255, 0.6); font-weight: 700; font-size: 1.05rem; }
.fp-offer__disc {
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 100px;
}
/* barvu je nutné vynutit — globální pravidla pro nadpisy a <strong> jinak
   přebijí dědění z .fp-offer a text by byl tmavý na modrém pozadí */
.fp-offer h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 20px 0 12px;
  color: var(--white);
}
.fp-offer p strong { color: var(--white); }
.fp-offer ul { list-style: none; margin: 0 0 22px; padding: 0; }
.fp-offer li {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
}
.fp-offer li .icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.fp-offer .btn-primary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.fp-offer .btn-primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--primary); }

.fp-bonus {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.fp-bonus__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fp-bonus__kicker { text-transform: uppercase; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.07em; color: var(--heading); }
.fp-bonus__gift {
  background: var(--bg-light);
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  padding: 6px 14px;
  border-radius: 100px;
}
.fp-bonus__pct { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 16px; }
.fp-bonus__pct b { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1; color: var(--heading); }
.fp-bonus__pct span { color: var(--text-muted); font-size: 1.05rem; }
.fp-bonus h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--heading);
  margin: 0 0 10px;
}
.fp-bonus h4 .icon { color: var(--primary); }
.fp-bonus p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 12px; }
.fp-bonus p a, .fp-bonus strong { color: var(--primary); }
.fp-bonus__small { font-size: 0.86rem; color: var(--text-light); }

/* Právní poznámka nad patičkou */
.fp-legal {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  font-size: 0.86rem;
  color: var(--text-light);
  line-height: 1.65;
}
.fp-legal strong { color: var(--text-muted); }

@media (max-width: 980px) {
  .fp-stats { grid-template-columns: repeat(2, 1fr); padding: 36px 28px; }
}
@media (max-width: 760px) {
  .fp-stats { grid-template-columns: 1fr; gap: 24px; }
  .fp-offer, .fp-bonus { padding: 32px 24px; }
  .fp-case__prices { grid-template-columns: 1fr; }
  .fp-toggle { flex-wrap: wrap; justify-content: center; }
}

/* Hero microsite: karta je vyšší než na „O nás" (badge + tlačítko),
   proto vlastní výška a vrstvení nad spodní křivkou. */
.page-hero--fp { min-height: 660px; padding: 90px 0 150px; }
.page-hero--fp .onas-hero-card { position: relative; z-index: 2; max-width: 620px; }
@media (max-width: 900px) {
  .page-hero--fp { min-height: 0; padding: 48px 0 110px; }
}

/* Kotvy ve vlastní navigaci microsite: lepivá hlavička je 79 px vysoká,
   bez odsazení by po skoku zakryla štítek i nadpis sekce. */
.page-hero--fp ~ section[id] { scroll-margin-top: 100px; }

/* Hero microsite: nadpis se musí vejít nejvýš do 3 řádků.
   Hodnoty odpovídají .fp-hero-title — tady musí být kvůli specificitě
   (přebíjí .page-hero--onas .onas-hero-card h1). */
.page-hero--fp .onas-hero-card { max-width: 660px; }
.page-hero--fp .onas-hero-card h1 {
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 0;
  color: var(--heading);
}
@media (max-width: 560px) {
  .page-hero--fp .onas-hero-card h1 { font-size: 1.5rem; }
}

/* Rozbalovací detail karty typické situace: karta ukazuje jen nadpis
   a porovnání ceny, dlouhý text se dočte až po rozkliknutí. */
.fp-case__more {
  align-self: flex-start;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fp-case__more::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s var(--ease);
}
.fp-case__more[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.fp-case__more:hover { text-decoration: underline; }
.fp-case__detail { margin-top: 16px; }

/* Cenový blok uvnitř bílé karty v hero: kompaktnější než v sekci,
   aby se karta i s tlačítky vešla do výšky hero. */
.page-hero--fp .onas-hero-card p { margin-bottom: 22px; font-size: 0.98rem; line-height: 1.6; }
.page-hero--fp .fp-price-old { margin-bottom: 4px; }
.page-hero--fp .fp-price-old s { font-size: 1rem; }
.page-hero--fp .fp-price-head { margin-bottom: 12px; gap: 6px 12px; }
.page-hero--fp .fp-price-now { font-size: clamp(1.75rem, 3.2vw, 2.35rem); }
.page-hero--fp .hero-actions { margin-top: 26px; margin-bottom: 0; }

/* ------------------------------------------------------------
   Typické situace: rozbalovací seznam místo mřížky karet.
   Zavřený řádek nese jen srozumitelný název a částku, detail
   se dočte po rozkliknutí.
   ------------------------------------------------------------ */
.fp-sit-group { margin-bottom: 36px; }
.fp-sit-group__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.fp-sit {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.fp-sit__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
}
.fp-sit__head:hover { background: var(--bg-light); }
.fp-sit__title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--heading);
}
/* Karta typické situace staví na vzoru .tg-card z hlavní stránky.
   Zvýrazněná je ÚSPORA, ne náklad — dřív to červené číslo působilo,
   že jde o částku k zaplacení. */
.tg-card.fp-sit { cursor: default; }
.tg-card.fp-sit .tg-body { display: flex; flex-direction: column; }
.tg-card.fp-sit h3 { margin-bottom: 14px; }
.fp-sit__save {
  background: rgba(0, 165, 191, 0.08);
  border: 1px solid rgba(0, 165, 191, 0.28);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.fp-sit__save small {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--accent-deep);
  margin-bottom: 2px;
}
.fp-sit__save b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--accent-deep);
  white-space: nowrap;
}
.fp-sit__save span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-light);
}
/* Rozbalovací karty situací — každá karta má vlastní výšku, aby otevření
   jedné nenafouklo prázdným místem i ty zavřené vedle ní. */
.tg-grid:has(.fp-sit) { align-items: start; }

/* Rozbalený detail leží jako překryv pod kartou — obsah pod ní se neposouvá.
   Karta nesmí ořezávat přetékající obsah, zaoblení fotky proto řeší .tg-media. */
.tg-card.fp-sit { position: relative; overflow: visible; }
.tg-card.fp-sit .tg-media { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.tg-card.fp-sit.is-open { z-index: 40; }
/* Otevřená karta a panel tvoří jeden celek — dole rovný spoj bez zaoblení */
#situace .tg-card.fp-sit.is-open,
.tg-card.fp-sit.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.tg-card.fp-sit .fp-sit__body {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% - 1px);
  z-index: 40;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 44px -20px rgba(15, 23, 42, 0.28);
  padding: 0 20px 22px;
  max-height: 60vh;
  overflow-y: auto;
}

.fp-sit__body { padding: 0 20px 20px; }
/* Poslední odstavec v detailu už nepřidává spodní mezeru — odsazení
   drží jen padding, takže je pod textem všude stejné. */
.fp-sit__body > :last-child { margin-bottom: 0; }
.fp-sit__lead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--heading);
  margin: 0 0 8px;
}
.fp-sit__body p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 12px; }
.fp-sit__covers {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.fp-sit__covers .icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--primary); margin-top: 2px; }
.fp-sit__covers b { color: var(--primary); }
.fp-sit__result { margin: 0 !important; color: var(--heading) !important; }
.fp-sit__result b { color: var(--primary); font-size: 1.05rem; }

@media (max-width: 860px) {
  .fp-sit__head { flex-wrap: wrap; gap: 10px 14px; }
  .fp-sit__title { flex: 1 1 calc(100% - 56px); }
  .fp-sit__figures { flex: 1 1 100%; justify-content: flex-start; gap: 26px; }
  .fp-sit__fig { align-items: flex-start; }
}

/* Sekce rizik: čtyři karty vedle sebe jsou úzké a tím vysoké.
   Menší mezera a odsazení dá textu víc šířky, drobnější písmo ubere řádky. */
#pravni-ochrana .grid-4 { gap: 16px; }
#pravni-ochrana .card { padding: 24px 20px; }
#pravni-ochrana .card h3 { font-size: 1.08rem; line-height: 1.3; margin-bottom: 10px; }
#pravni-ochrana .card p { font-size: 0.875rem; line-height: 1.55; }
#pravni-ochrana .card-icon { width: 44px; height: 44px; margin-bottom: 14px; }

/* Ceník: karty se nemají natahovat na výšku té vyšší, bonusová
   tím jinak nabírá velké prázdné místo pod textem. */
#cenik .grid-2 { align-items: start; }
#cenik .fp-bonus__head { margin-bottom: 4px; }
/* Nabídková karta: sevřenější rozestupy, ať není zbytečně vysoká */
#cenik .fp-offer li { padding: 2px 0; line-height: 1.45; }
#cenik .fp-offer ul { margin-bottom: 18px; }
#cenik .fp-offer__pill { margin: 14px 0 10px; }
#cenik .fp-offer > p { margin-bottom: 10px; }
#cenik .fp-offer h4 { margin-top: 16px; }

/* Dlaždice situací: nižší fotka a bílá karta okolo obsahu,
   aby text nelepil na okraj a fotka nebyla tak oříznutá. */
#situace .tg-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
#situace .tg-card:hover { transform: none; }
/* Karta s rozbalovacím detailem nesmí ořezávat překryv */
#situace .tg-card.fp-sit { overflow: visible; }
/* Otevřený detail musí ležet nad následujícími sekcemi — ty mají vlastní
   vrstvu (container se z-indexem), takže vytáhneme celou sekci nahoru. */
#situace:has(.tg-card.fp-sit.is-open) { position: relative; z-index: 40; }
#situace:has(.tg-card.fp-sit.is-open) > .container { position: relative; z-index: 40; }
#situace .tg-card.fp-sit .tg-media { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
#situace .tg-media {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  box-shadow: none;
}
#situace .tg-card:hover .tg-media img { transform: none; }
#situace .tg-body { padding: 20px 22px 22px; }
#situace .tg-body h3 { font-size: 1.12rem; margin-bottom: 14px; }
/* Nadpis vyhradí místo pro dva řádky, takže zelený rámeček i odkaz
   na detail začínají u všech dlaždic ve stejné výšce a pod odkazem
   nezbývá prázdné místo. */
#situace .tg-body h3 { min-height: 2.5em; }
#situace .tg-body { padding: 18px 20px 18px; }
#situace .fp-sit__save { padding: 10px 13px; margin-bottom: 12px; }
#situace .fp-sit__save b { font-size: 1.25rem; }
#situace .fp-case__more { margin-top: 0; }

/* Tři důkazy pod hlavním textem v hero: co poradce dostane, na jeden pohled. */
.fp-hero-points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.fp-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--heading);
}
.fp-hero-points .icon { width: 15px; height: 15px; color: var(--accent); }

/* ------------------------------------------------------------
   Hero microsite: dvousloupcová karta dle předlohy klienta.
   Vlevo nadpis (2 otázky + pointa), texty a tlačítka; vpravo panel
   s výhodami v dlaždicích a cenou. Jen brandové barvy: zvýrazněná
   slova modře (--primary), pointa tmavě (--heading), dlaždice na
   světle modré (--bg-light). Červená z klientova návrhu se vědomě
   nepoužívá — trčela by z brand vizuálu.
   ------------------------------------------------------------ */
/* Fotka poradce u auta je tmavší než světlý styl zbytku webu, proto ji
   překrývá bílý závoj — silnější vlevo pod kartou, k pravému okraji
   slábne, aby fotka zůstala čitelná. */
.page-hero--fp::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.16) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-hero--fp .container { position: relative; z-index: 2; }
/* Kartu zúžíme, aby vedle ní zbylo místo na postavu poradce vpravo ve
   fotce. Na širokých displejích fotka vyplňuje šířku a vodorovná pozice
   nemá vliv; na úzkých se ořezává do stran, proto ji držíme u postavy. */
.page-hero--fp { background-position: 68% center; }
.page-hero--fp .onas-hero-card { max-width: 900px; }
.fp-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-areas:
    "title title"
    "kicker side"
    "main side"
    "actions side";
  grid-template-rows: auto auto 1fr auto;
  gap: 8px 32px;
  align-items: start;
}
.fp-hero-card .fp-hero-title { grid-area: title; margin-bottom: 0; }
.fp-hero-card .fp-hero-kicker { grid-area: kicker; }
.fp-hero-main { grid-area: main; min-width: 0; }
.fp-hero-side { grid-area: side; }
.fp-hero-card .hero-actions { grid-area: actions; margin-top: 10px; }
/* Hlavní CTA je v hero širší než běžné tlačítko — výška zůstává
   sjednocená se zbytkem webu. */
.fp-hero-card .hero-actions .btn-primary { min-width: 260px; }
/* Nadpis je hlavní prvek karty: přes celou šířku, výrazně větší než text */
.fp-hero-title {
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 14px;
}
.fp-hero-title__punch { color: var(--primary); }
/* Vyšší specificita kvůli obecnému pravidlu pro odstavce hero karty,
   které by jinak podtitulu vnutilo jinou barvu a velikost. */
.page-hero--fp .onas-hero-card p.fp-hero-kicker {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-hero--fp .onas-hero-card p { margin-bottom: 14px; font-size: 0.94rem; line-height: 1.55; }
.page-hero--fp .onas-hero-card p strong { color: var(--heading); }

/* Pravý panel: výhody a cena v jedné rámované kartě. Ikony ve stejném
   stylu jako .card-icon napříč webem (zaoblený čtverec, --bg-light,
   modrý glyf), položky oddělené linkou, cena na světle modrém bloku. */
/* Panel se roztáhne na výšku levého sloupce: výhody lícují s vrškem
   titulku, cenový blok se spodní hranou tlačítek. */
.fp-hero-side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fp-hero-benefits li:first-child { padding-top: 0; }
/* Karty sekce „není bez rizika": ikony z assets mají vlastní kroužek,
   podkladový čtverec ani hover přebarvení tu nedávají smysl. */
#pravni-ochrana .card-icon { width: 56px; height: 56px; background: none; }
#pravni-ochrana .card-icon img { width: 100%; height: 100%; object-fit: contain; }
#pravni-ochrana .card:hover .card-icon { background: none; }
.fp-hero-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-hero-benefits li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--heading);
}
.fp-hero-benefits li:last-child { border-bottom: 0; }
/* Ikony lx-benefit-* mají vlastní kroužek, žádný podklad nepřidáváme */
.fp-benefit-icon {
  flex: none;
  width: 48px;
  height: 48px;
}
.fp-benefit-icon img { width: 100%; height: 100%; object-fit: contain; }
.fp-hero-pricebox {
  margin-top: 0;
  background: var(--bg-light);
  border-radius: 12px;
  padding: 14px 18px;
}
.fp-hero-pricebox .fp-price-old { margin-bottom: 6px; }
.fp-hero-pricebox .fp-price-head { margin-bottom: 0; }
.fp-hero-pricebox .fp-price-for { font-size: 0.82rem; line-height: 1.4; }

@media (max-width: 900px) {
  /* Na mobilu jeden sloupec v pořadí nadpis → text → výhody a cena → tlačítka.
     Všech pět oblastí musí být vyjmenováno, jinak se nadpis odsune jinam. */
  .fp-hero-card {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "title" "kicker" "main" "side" "actions";
  }
}
@media (max-width: 560px) {
  .fp-hero-title { font-size: 1.5rem; }
  .page-hero--fp .onas-hero-card p.fp-hero-kicker { font-size: 0.82rem; }
}

/* Na mobilu se druhý odstavec hero načte až na vyžádání — jinak je CTA
   až po třech obrazovkách scrollování. */
.fp-hero-more__btn { display: none; }
@media (max-width: 560px) {
  .fp-hero-more__btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 16px; padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
    color: var(--primary);
  }
  .fp-hero-more__btn::after {
    content: ""; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s var(--ease);
  }
  .fp-hero-more__btn[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .fp-hero-more[hidden] { display: none; }
}

/* ===== Mobil: pojistky proti oříznutí obsahu ===== */
@media (max-width: 720px) {
}
@media (max-width: 560px) {
  /* Dvousloupcové řádky formulářů (i s inline stylem) padají pod sebe */
  .form-row { grid-template-columns: 1fr !important; }
}

/* ============================================
   KONTAKT (kontakt.html) — hero s fotkou,
   cesty a formulář s kontaktními údaji
   ============================================ */

/* Hero: fotka přes celou šířku s tmavým přechodem, na ní nadpis a pod ním
   tři karty „vyberte si situaci". Spodní padding = výška bílé vlny, aby karty
   zůstaly na fotce a nepřetékaly do bílé plochy pod vlnou. */
.page-hero--kontakt {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: left;
  padding: 68px 0 200px;
  min-height: 0;
  display: block;
}
.page-hero--kontakt::after { display: none; }
/* Ztmavení fotky, aby byl bílý nadpis čitelný i na světlých místech snímku. */
.page-hero--kontakt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 77, 0.72) 0%, rgba(0, 26, 77, 0.52) 55%, rgba(0, 26, 77, 0.34) 100%);
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
.page-hero--kontakt > .container { position: relative; z-index: 2; width: 100%; }

.kontakt-hero-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.kontakt-hero-head h1 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.12;
  text-shadow: 0 4px 24px rgba(0, 20, 60, 0.4);
}
.kontakt-hero-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  text-shadow: 0 2px 14px rgba(0, 20, 60, 0.45);
}

/* Tři cesty vedle sebe pod nadpisem */
.kontakt-hero-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.kontakt-path {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(20, 45, 80, 0.16);
  text-decoration: none;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.kontakt-path:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(20, 45, 80, 0.24);
}
.kontakt-path-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
/* Ikony jsou originální piktogramy z brand manuálu (tenká modrá linka),
   proto místo plné výplně jen jemný kroužek — kresba musí zůstat modrá. */
.kontakt-path-ic {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1.5px solid rgba(0, 69, 191, 0.28);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.kontakt-path-ic img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.kontakt-path:hover .kontakt-path-ic { background: var(--bg-light); border-color: var(--primary); }
.kontakt-path strong {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--heading);
  font-size: 1.05rem;
  line-height: 1.25;
}
.kontakt-path-sub {
  display: block;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Tlačítko uvnitř karty — vizuálně tlačítko, technicky součást odkazu. */
.kontakt-path-btn {
  /* margin-top: auto → tlačítka všech tří karet drží stejnou spodní linku,
     i když je popis různě dlouhý. */
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.22s var(--ease);
}
.kontakt-path-btn .icon { width: 16px; height: 16px; }
.kontakt-path:hover .kontakt-path-btn { background: var(--primary); color: var(--white); }
.kontakt-path-btn--solid { background: var(--primary); color: var(--white); }
.kontakt-path:hover .kontakt-path-btn--solid { background: var(--primary-dark); border-color: var(--primary-dark); }
/* Naléhavá situace = jediná červená karta, aby byla na první pohled jiná. */
.kontakt-path--urgent strong { color: var(--danger); }
.kontakt-path-btn--danger { border-color: var(--danger); color: var(--danger); }
.kontakt-path--urgent:hover .kontakt-path-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--white); }

/* Formulář + kontaktní údaje vedle sebe */
.kontakt-form-section { padding: 56px 0 72px; }
/* Nadpis sekce zarovnaný vlevo — drží stejnou levou hranu jako formulář pod ním. */
.kontakt-form-section .section-header--left { max-width: 1120px; margin: 0 auto 40px; }
.kontakt-form-section .section-header--left p { max-width: 60ch; }
.kontakt-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  /* stretch → oba sloupce mají stejnou výšku, karta sídla nepřečnívá pod formulář */
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}
.kontakt-grid .contact-form-card { padding: 34px; }
.kontakt-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
/* Pravý sloupec je doplněk k formuláři → menší dlaždice, aby hlavní pozornost
   zůstala na formuláři vlevo. */
.kontakt-aside .contact-option { padding: 14px 18px; gap: 14px; }
.kontakt-aside .contact-option-icon { width: 40px; height: 40px; }
.kontakt-aside .contact-option-icon .icon { width: 18px; height: 18px; }
.kontakt-aside .contact-option-label { font-size: 0.66rem; }
.kontakt-aside .contact-option-info strong { font-size: 1rem; }
.kontakt-aside .contact-option-sub { font-size: 0.78rem; }

/* Karta sídla s fotkou budovy — obrázek rozbíjí sloupec samých textů. */
.kontakt-place {
  display: flex;
  flex-direction: column;
  /* Karta sídla dorovná zbytek výšky sloupce — fotka se natáhne nebo zkrátí,
     aby spodní hrana seděla s formulářem vlevo. */
  flex: 1 1 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.kontakt-place-body { padding: 22px 24px 24px; }
.kontakt-place-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.kontakt-place-label .icon { width: 15px; height: 15px; }
.kontakt-place-body strong {
  display: block;
  color: var(--heading);
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.kontakt-place-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.kontakt-place-meta {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem !important;
  color: var(--text-light) !important;
}

@media (max-width: 900px) {
  .kontakt-hero-paths { grid-template-columns: 1fr; gap: 14px; max-width: 620px; }
  .page-hero--kontakt { padding: 44px 0 180px; }
}
@media (max-width: 960px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 24px; }
  .kontakt-place { flex: none; }
}
@media (max-width: 600px) {
  .page-hero--kontakt { padding: 34px 0 150px; }
  .kontakt-hero-head { margin-bottom: 26px; }
  .kontakt-hero-head p { font-size: 0.95rem; }
  .kontakt-path { padding: 18px 18px 20px; }
  .kontakt-path-btn { width: 100%; justify-content: center; }
  .kontakt-form-section { padding: 40px 0 56px; }
  .kontakt-grid .contact-form-card { padding: 24px 20px; }
}

/* ============= CENÍK — FOTKY =============
   Stejné řešení jako na stránce Kontakt: fotka v hlavičce s tmavým přechodem,
   aby byl bílý nadpis čitelný, a fotka vedle výčtu „Co Lexia hradí". */
.page-hero--cenik {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 56px 0 150px;
  min-height: 0;
  display: block;
}
.page-hero--cenik::after { display: none; }
.page-hero--cenik::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 77, 0.76) 0%, rgba(0, 26, 77, 0.58) 55%, rgba(0, 26, 77, 0.42) 100%);
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
.page-hero--cenik > .container { position: relative; z-index: 2; width: 100%; }
.page-hero--cenik h1 {
  color: var(--white);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  text-shadow: 0 4px 24px rgba(0, 20, 60, 0.45);
}

/* Fotka vedle výčtu „Co Lexia hradí v každém balíčku" */
.includes-with-photo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.includes-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.38);
}
.includes-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.includes-with-photo .section-header { text-align: left; margin-bottom: 22px; }
.includes-with-photo .includes-grid {
  grid-template-columns: 1fr;
  justify-content: start;
  gap: 12px;
  margin: 0;
  max-width: none;
}
@media (max-width: 880px) {
  .includes-with-photo { grid-template-columns: 1fr; gap: 26px; }
  .includes-with-photo .section-header { text-align: center; }
}
@media (max-width: 620px) {
  /* Na mobilu je oblouk mělčí — nadpis musí zůstat nad ním, ne v jeho výřezu. */
  .page-hero--cenik { padding: 34px 0 140px; }
  .page-hero--cenik h1 { font-size: 1.55rem; line-height: 1.2; padding: 0 4px; }
}

/* ============================================
   TLAČÍTKO — DOČASNĚ NEAKTIVNÍ (.btn.is-disabled)
   Používá se na microsite pro finanční poradce a realitní zprostředkovatele
   u CTA „Sjednat pojištění". Až bude hotová on-line kalkulace, stačí
   `is-disabled` + `aria-disabled` odstranit a do `href` dát odkaz na kalkulačku.
   ============================================ */
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.35);
  box-shadow: none;
}
.btn.is-disabled:hover,
.btn.is-disabled:active,
.btn-primary.is-disabled:hover,
.btn-primary.is-disabled:active {
  transform: none;
  box-shadow: none;
}