/* ==========================================================================
   Leadomat.cz — hlavní styl
   ========================================================================== */

/* --------------------------------------------------------------------------
   Písmo Poppins — hostované na vlastním serveru (assets/fonts/, licence OFL,
   zdroj @fontsource/poppins 5.3.0). Sady latin + latin-ext (čeština: č, ř, ž…).
   Cesty jsou relativní k tomuto souboru (css/ -> ../assets/fonts/).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #05070d;
  --bg-soft: #0b0f19;
  --card: #121826;
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #f5f7fa;
  --text-muted: #a6adc0;
  --accent: #33ffb0;
  --accent-2: #7c5cff;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --max-width: 1140px;
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; color: var(--text-muted); }

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

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #05070d;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 13, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text);
}
.logo-mark {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}
.logo-text span { color: var(--accent); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--text); }
/* Aktuální stránka v menu (aria-current="page"): jasnější text + jemné podtržení
   akcentem, aby vidící uživatel poznal, kde je (QA D2, 24. 9. 2026). Netýká se CTA. */
.main-nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.nav-cta {
  background: var(--accent);
  color: #05070d !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600 !important;
}
.nav-cta:hover { opacity: 0.9; }

/* Desktop menu má 9 položek + CTA (viz docs/decisions.md 23. 9. 2026). Při výchozím
   gap 28px / 0.95rem zabírá nav ~874 px a vedle loga (~162 px) se vejde až od ~1084 px
   viewportu. V pásmu 961–1139 px proto menu zhustíme (menší gap, font a padding CTA),
   aby se vše vešlo na jeden řádek i těsně nad breakpointem 960px (naměřeno ~722 px
   nav vs. ~751 px dostupných při 961 px). Horní hranice 1139px je záměrně sladěná
   s tokenem --max-width (1140px): nad 1140px se .container přestává rozšiřovat, takže
   zhuštěný nav bezpečně "doslouží" přesně tam, kde plnohodnotný (nezhuštěný) nav získá
   od pevné šířky kontejneru trvalý odstup ~56 px od loga (ověřeno 961–1280 px, žádné
   přetečení ani zalomení). Bez tohoto sladění by mezi ~1084–1140 px vznikalo úzké okno
   s minimální rezervou (~37 px), kde by drobná odchylka v renderu fontu mohla layout
   rozbít. Text CTA se nezkracuje. nowrap je pojistka, aby se víceslovné položky
   („O nás", CTA) nikdy nezalamovaly uvnitř sebe. */
.main-nav a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1139px) {
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 0.875rem; }
  /* Svislý padding 11px (ne 9px): s menším fontem drží CTA stejnou výšku 44 px
     jako nad 1140 px (QA D3, 24. 9. 2026); zhušťuje se jen vodorovně. */
  .nav-cta { padding: 11px 14px; }
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Hero je první věc, kterou uživatel vidí, proto zůstává o něco
     velkorysejší než běžná .section (96/64 vs. 64/64) — poměr k .section
     je ale zachovaný stejný jako u původních hodnot (140/100 → 96/64,
     shodná ~36% redukce u obou čísel), viz docs/decisions.md 23. 9. 2026. */
  padding: 96px 0 64px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 600px;
  background: radial-gradient(circle at 30% 30%, rgba(51,255,176,0.25), transparent 60%),
              radial-gradient(circle at 70% 40%, rgba(124,92,255,0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

.hero-inner { position: relative; text-align: left; max-width: 780px; }

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 18px;
}

.slogan {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: var(--text);
  margin-bottom: 24px;
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: 1.15rem;
  max-width: 600px;
  margin-bottom: 32px;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.hero-note { font-size: 0.9rem; color: var(--text-muted); }

/* .hero-stats je vycentrovaný na střed stránky nezávisle na zbytku hero
   obsahu (eyebrow/H1/lead/CTA zůstávají vlevo v rámci .hero-inner). Blok
   se necentruje "vylomením" ven z .hero-inner (max-width 780px) přes
   celou šířku viewportu — zkoušeli jsme to (position:relative; left:50%;
   transform:translateX(-50%); width:100vw) a i přes .hero { overflow:
   hidden } to vytváří skrytou scrollovatelnou oblast uvnitř .hero: jakýkoli
   scrollIntoView (klávesnicový fokus, čtečka, budoucí JS) pak celé hero
   horizontálně posune a ustřihne. Řešení je jednodušší a bezpečné: .hero-
   inner má margin: 0 auto, takže je SÁM o sobě přesně vycentrovaný na
   střed stránky — stačí tedy vycentrovat řádek se statistikami v rámci
   .hero-inner (justify-content: center + plná šířka rodiče místo
   dřívějšího max-width: 640px) a matematicky vyjde na stejný střed, bez
   rizika breakout triku. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 48px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--card-border);
  width: 100%;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.hero-stat-number {
  font-family: var(--font-heading);
  /* 2× původní 1.6rem (3.2rem) na desktopu; na malých šířkách se lineárně
     zmenšuje k 2.2rem, aby "+260 %" nepřetékalo a nerozbíjelo layout.
     tabular-nums drží pevnou šířku číslic, aby počítací animace (viz JS)
     neskákala v layoutu, když se mění počet/šířka číslic. */
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hero-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 200px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #05070d;
  box-shadow: 0 10px 30px rgba(51,255,176,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(51,255,176,0.35); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--card-border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; }
/* <button> nedědí font — bez toho se submit formuláře vykresluje systémovým
   Arialem místo jediného fontu webu (Poppins). Stejný vzor jako button.tag-chip. */
button.btn { font-family: var(--font-body); }

/* ---------- Trust strip ---------- */
.trust-strip {
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  background: var(--bg-soft);
  padding: 28px 0;
}
.trust-inner p {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
}
.trust-inner strong { color: var(--text); }

/* ---------- Sections ---------- */
/* Zmenšeno ze 100px na 64px (-36 %) na žádost majitele — mezery mezi
   sekcemi byly na desktopu zbytečně velkorysé. Poměr k mobilnímu
   breakpointu (viz @media max-width:960px níže) zůstává zachovaný. */
.section { padding: 64px 0; }
.section-alt { background: var(--bg-soft); }

.section-tag {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.section h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--text);
  max-width: 720px;
}

.section-lead {
  max-width: 640px;
  font-size: 1.05rem;
  margin-bottom: 40px;
}

/* ---------- Stat grid ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 28px;
}
.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 8px;
}
.stat-label { color: var(--text-muted); font-size: 0.95rem; }

/* Ochrana proti osiřelé kartě. auto-fit s minmax(220px) dává u 5 karet 4+1
   (desktop) a u 4 karet 3+1 (tablet 768–987 px). Počet karet se pozná přes :has(),
   markup se nemění:
   - 5 karet (/o-nas/ #fakta): od 700 px vždy 3+2 — 6sloupcový grid, první tři
     karty zabírají 2 sloupce, poslední dvě 3 sloupce (spodní řada dorovná šířku).
   - 4 karty (/o-nas/ #jak-pracujeme, /marketing-na-miru/ #proc-leadomat): mezi
     600 a 987 px 2+2; od 988 px se 4 karty vejdou do řady samy (4×220 + 3×20 = 940). */
@media (min-width: 700px) {
  .stat-grid:has(> .stat-card:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .stat-grid:has(> .stat-card:nth-child(5):last-child) > .stat-card { grid-column: span 2; }
  .stat-grid:has(> .stat-card:nth-child(5):last-child) > .stat-card:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 699px) {
  .stat-grid:has(> .stat-card:nth-child(5):last-child) { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 987px) {
  .stat-grid:has(> .stat-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reference (testimonialy) ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-glow);
}
.testimonial-quote {
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 20px;
}
.testimonial-quote::before {
  content: "“";
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  line-height: 0;
  display: inline-block;
  vertical-align: -8px;
  margin-right: 2px;
}
.testimonial-name { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.testimonial-role { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }

/* ---------- Cards (služby) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-glow);
}
.card-highlight { border-color: rgba(51,255,176,0.4); }
.card-badge {
  display: inline-block;
  background: rgba(51,255,176,0.12);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.card h3 { color: var(--text); font-size: 1.4rem; }
.card-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.card-list li {
  color: var(--text-muted);
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.card-price { color: var(--text); font-size: 1.15rem; margin: 0; }
.card-price strong { color: var(--accent); font-size: 1.3rem; }
.card-price-note { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-top: 4px; }
.card-subtitle { color: var(--text); font-weight: 600; font-size: 1.05rem; margin-bottom: 18px; }

/* ---------- Služby (dlaždice "Co vám mohu nabídnout?") ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 24px;
}
.service-tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-glow);
}
.service-tile.featured {
  grid-column: 1;
  grid-row: 1 / span 3;
  border-color: rgba(51,255,176,0.4);
}
.service-tile:not(.featured) { grid-column: 2; }
.service-eyebrow {
  display: block;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  margin-bottom: 10px;
}
.service-subbadge {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  margin: -4px 0 10px;
}
.service-tile h3 { color: var(--text); font-size: 1.3rem; margin-bottom: 12px; }
.service-tile p { flex: none; }
.service-price-tag {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 2px 0 4px;
}
/* Diagram strategie ve featured dlaždici „Marketing na míru" (#sluzby) */
/* vyplní volné místo mezi cenou a CTA, obrázek je svisle na středu a široký jako text
   (boční okraje = padding dlaždice, nahoře/dole minimálně stejná mezera) */
.service-visual {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0 36px; /* nahoře 32 + 4 px spodní margin ceny = 36 px, stejně jako padding dlaždice */
}
.service-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 18px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.service-cta:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .service-tile.featured, .service-tile:not(.featured) { grid-column: 1; grid-row: auto; }
}

/* ---------- Srovnávací tabulka (problém vs. řešení) ---------- */
.compare-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.compare-cell {
  background: var(--card);
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  border-left: 3px solid transparent;
}
.compare-cell strong { color: var(--text); }
.compare-cell.compare-old { border-left-color: rgba(255,107,107,0.55); }
.compare-cell.compare-new { border-left-color: var(--accent); color: var(--text); }
.compare-head .compare-cell {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}
.compare-head .compare-old { color: #ff8b8b; }
.compare-head .compare-new { color: var(--accent); }

.callout {
  background: var(--card);
  border: 1px solid rgba(51,255,176,0.3);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 0;
}
.callout-title {
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.callout p:last-child { margin-bottom: 0; color: var(--text); }

/* ---------- Tag list (pro koho) ---------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tag-list li {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ---------- Fotka v obsahu stránky (zaoblené rohy) ---------- */
.page-photo { margin: 0 0 40px; }
.page-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-glow);
}
/* Proces na /marketing-na-miru/: na mobilu fotka nad kroky, na desktopu až pod nimi */
.proces-body { display: flex; flex-direction: column; }
@media (min-width: 961px) {
  .proces-body .page-photo { order: 1; margin: 40px 0 0; }
}

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.step {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05070d;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: 16px;
}
.step h3 { color: var(--text); font-size: 1.2rem; }

/* ---------- Ceník ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.price-card-highlight { border-color: rgba(51,255,176,0.4); }
.price-card h3 { color: var(--text); font-size: 1.3rem; }
.price-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 14px;
}
.price-value span { font-size: 1rem; color: var(--text-muted); font-family: var(--font-body); }
.price-value-secondary { font-size: 1.3rem; margin-top: -8px; }
.price-card-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 10px;
}
.price-note {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 14px 0 0;
}
.price-note-muted { color: var(--text-muted); font-weight: 400; }
.balicky-note { color: var(--text-muted); font-size: 0.95rem; margin: 28px 0 32px; }
.balicky-note-individual { color: var(--text); }
.balicky-note-individual a { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- Jednorázové služby (podřazený vstup do Cesty B) ----------
   Záměrně plošší a menší než .card / .price-card: nesmí působit jako třetí „cesta"
   ani jako čtvrtý balíček. Bez odznaků, bez .btn-primary, menší než .card / .price-card.
   Barevnost: gradient zelená → fialová (stejný recept jako .step-number). */

/* Homepage: pruh přes celou šířku mřížky karet Cesta A/B, plný gradient, tmavý text */
.jednoraz-pruh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 130%);
  border: 0;
  border-radius: var(--radius-md);
}
.jednoraz-pruh-text { min-width: 0; }
.jednoraz-pruh-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #05070d;
  margin: 0 0 10px;
}
.jednoraz-pruh-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 36px;
}
.jednoraz-pruh-list li { color: #05070d; font-size: 0.98rem; font-weight: 500; }
.jednoraz-pruh-list strong {
  color: #05070d;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}
.jednoraz-pruh-note { color: #05070d; font-size: 0.82rem; margin: 8px 0 0; }
/* Společný základ tlačítka v pruhu a v bloku #jednorazove: menší než hlavní CTA.
   Barvy a obrys řeší kontextová pravidla níže (.jednoraz-pruh / .jednoraz). */
.jednoraz-btn {
  flex-shrink: 0;
  padding: 11px 22px;
  font-size: 0.92rem;
  white-space: nowrap;
}
/* Tlačítko v pruhu: tmavý obrys na gradientu, výplň až na hover/focus */
.jednoraz-pruh .jednoraz-btn {
  background: transparent;
  border: 1.5px solid #05070d;
  color: #05070d;
}
/* Celý pruh je klikací: odkaz tlačítka je roztažený přes pruh (::after).
   Tlačítko proto nesmí mít transform ani position — jinak by se plocha odkazu smrskla na něj. */
.jednoraz-pruh { position: relative; cursor: pointer; }
.jednoraz-pruh .jednoraz-btn { position: static; transform: none; }
.jednoraz-pruh .jednoraz-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}
.jednoraz-pruh:hover .jednoraz-btn,
.jednoraz-pruh .jednoraz-btn:hover,
.jednoraz-pruh .jednoraz-btn:focus-visible {
  background: #05070d;
  border-color: #05070d;
  color: var(--text);
  transform: none;
}
.jednoraz-pruh .jednoraz-btn:focus-visible { outline: 2px solid #05070d; outline-offset: 3px; }

/* /marketing-na-miru/#jednorazove: nadpis + dvě menší karty pod ceníkem balíčků */
.jednoraz {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--card-border);
  /* kotva z jiné stránky nesmí skončit pod sticky hlavičkou (76 px) */
  scroll-margin-top: 120px;
}
/* Gradientový text: šířka podle obsahu, aby přechod proběhl přes text, ne přes celý řádek */
.jednoraz-title {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.jednoraz-lead { font-size: 1.05rem; margin-bottom: 24px; }
.jednoraz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.jednoraz-card {
  display: flex;
  flex-direction: column;
  /* gradientový rámeček (border-box) + jemný gradientový nádech nad plnou barvou karty */
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, rgba(51,255,176,0.10), rgba(124,92,255,0.16)) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  /* záře do stran: zelená vlevo, fialová vpravo (záporný spread, nepřetéká mimo kontejner) */
  box-shadow:
    -14px 0 44px -26px rgba(51,255,176,0.55),
     14px 0 44px -26px rgba(124,92,255,0.70);
  border-radius: var(--radius-md);
  padding: 24px 26px;
}
.jednoraz-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 8px;
}
.jednoraz-card-desc { font-size: 0.95rem; margin: 0 0 16px; }
.jednoraz-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  /* šířka podle obsahu (flex sloupec), gradient přes text ceny */
  align-self: flex-start;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: auto 0 0;
}
.jednoraz-price span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.jednoraz-note { color: var(--text-muted); font-size: 0.95rem; margin: 20px 0 0; }
.jednoraz-cta { margin: 22px 0 0; }
/* Tlačítko v bloku #jednorazove: gradientový obrys, tmavá výplň, na hover/focus gradientový nádech */
.jednoraz .jednoraz-btn {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  color: var(--text);
}
.jednoraz .jednoraz-btn:hover,
.jednoraz .jednoraz-btn:focus-visible {
  background:
    linear-gradient(135deg, rgba(51,255,176,0.12), rgba(124,92,255,0.18)) padding-box,
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  color: var(--text);
}

@media (max-width: 699px) {
  .jednoraz-pruh { flex-direction: column; align-items: flex-start; padding: 20px; }
  .jednoraz-pruh-list { flex-direction: column; gap: 10px; }
  .jednoraz-grid { grid-template-columns: 1fr; }
  .jednoraz-title { font-size: 1.35rem; }
  .jednoraz-btn { white-space: normal; text-align: center; }
}

/* Režim vynucených barev (Windows High Contrast): gradientový text by zmizel */
@media (forced-colors: active) {
  .jednoraz-title, .jednoraz-price { background: none; color: CanvasText; }
}

/* Úvod ceníku na /marketing-na-miru/: „Kolik stojí kompletní marketingový tým?" */
.balicky-intro {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.team-formula {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* sloupcovou mezeru 30 px nahrazuje levý okraj položek (viz „+" níže) */
  gap: 12px 0;
}
.team-formula li {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(51,255,176,0.3);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
}
/* znaménko „+" mezi položkami — jen vizuální, čtečky dostanou čistý seznam.
   Stojí PŘED položkou (ne za ní), aby při zalomení nevisel na konci řádku (QA N2);
   vykresluje se do levého okraje položky, takže i na začátku řádku zůstane
   uvnitř kontejneru. Pravá hrana „+" je 9 px před čipem = 21 px za předchozím
   čipem, stejně jako v původním řešení (::after, right: -21px) → desktop beze změny. */
.team-formula li:not(:first-child) { margin-left: 30px; }
.team-formula li:not(:first-child)::before {
  content: "+";
  position: absolute;
  right: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
}
.team-claim {
  text-align: center;
  margin: 8px auto 48px;
  max-width: 760px;
}
.team-claim-title {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}
.team-claim-sub { color: var(--text-muted); font-size: 1.05rem; margin: 0; }

/* ---------- Odkaz "zjistit víc" u karet (cesty, ceník) ---------- */
.card-link {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 8px;
}
.card-link:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 14px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--accent);
  font-size: 1.3rem;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: 14px; margin-bottom: 0; }

/* ---------- O zakladateli ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
}
.founder-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-glow);
}
.founder-quote { color: var(--text); font-weight: 600; }
/* /o-nas/: blok zakladatele v hero — hero-inner bez omezení 780px, aby se vešla fotka + text */
/* Pozn.: max-width: none by zrušil i max-width z .container (1140px) a hero by na
   širokých displejích přesahovalo zarovnání zbytku stránky (naměřeno: text hero až
   do 1232 px šířky při 1280 px viewportu vs. 1092 px u ostatních sekcí). Vracíme
   proto šířku kontejneru — omezení 780px z .hero-inner tím zůstává zrušené. */
.hero-about .hero-inner { max-width: var(--max-width); }
/* /o-nas/: fotka zakladatele v plné velikosti — širší sloupec, bez ořezu do 3:4 */
.hero-about .founder-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: start; }
.founder-photo-full img { aspect-ratio: auto; height: auto; }
/* H1 v hero /o-nas/ sedí ve 2sloupcovém layoutu vedle fotky, textový sloupec je
   ~524 px (vs. ~732 px u H1 ostatních podstránek). Plná velikost 4.2rem by tu dala
   4–5 řádků, proto na desktopu stejná spodní mez clamp, jen se stropem 3.2rem
   (~51 px) = max. 3 řádky v celém rozsahu 961–1440+ px. Na mobilu/tabletu
   (1 sloupec) platí standardní .hero h1. */
@media (min-width: 961px) {
  .hero-about h1 { font-size: clamp(2.4rem, 4vw, 3.2rem); }
}
/* 961–1180 px: pevných 520 px fotky by textu nechalo jen ~400 px — sloupce se
   dělí v poměru 5:6 (fotka ~400–480 px, bez ořezu, jen úměrně menší). */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero-about .founder-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
}
@media (max-width: 960px) {
  .hero-about .founder-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-about .founder-photo-full { max-width: 520px; }
  /* Na mobilu/tabletu jde text (štítek, H1, CTA, telefon) nad fotku, aby H1 a CTA
     byly v prvním viewportu. Jen vizuální přeřazení — v HTML zůstává fotka první,
     neobsahuje nic fokusovatelného, takže Tab pořadí se nemění. */
  .hero-about .founder-text { order: -1; }
}

/* /o-nas/ #pribeh: pokračování textu zakladatele. Úvodní odstavce jako čitelný
   sloupec, pak 3 krátké karty v řadě (desktop) a delší „Proč Leadomat.cz" přes
   celou šířku. Pod 961 px vše v 1 sloupci. Nadpisy karet jsou H2 (struktura
   dodaného textu), vizuálně ale ve velikosti .card h3. */
.pribeh-text { max-width: 720px; margin-bottom: 40px; }
.pribeh-text p { font-size: 1.05rem; }
.pribeh-grid { grid-template-columns: 1fr; }
.section .pribeh-grid h2 { font-size: 1.4rem; margin-bottom: 12px; }
.pribeh-grid .card p:last-child { margin-bottom: 0; }
.pribeh-grid strong { color: var(--text); }
@media (min-width: 961px) {
  .pribeh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pribeh-card-wide { grid-column: 1 / -1; }
}
.pribeh-claim {
  margin: 48px 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.3;
}
.pribeh-claim strong { color: var(--accent); font-weight: 700; }

/* ---------- Kontakt ---------- */
/* Zmenšeno ze 120px na 80px (-33 %) souběžně s redukcí .section — kontakt
   je poslední sekce před patičkou, proto si drží o něco větší odstup než
   běžný .section bottom padding, ale úměrně menší než dřív. */
.kontakt-section { padding-bottom: 80px; }
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.kontakt-direct { color: var(--text); font-weight: 500; }
address.kontakt-direct { font-style: normal; }

.kontakt-form {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 0.9rem; color: var(--text-muted); }
.form-row input, .form-row textarea, .form-row select {
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.98rem;
  resize: vertical;
}
/* select s dlouhými volbami nesmí roztáhnout grid kontaktní sekce na mobilu */
.form-row select { color-scheme: dark; cursor: pointer; width: 100%; min-width: 0; }
.kontakt-form { min-width: 0; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.4em;
  font-size: 0.9rem;
  margin: 0;
}
.form-status.success { color: var(--accent); }
.form-status.error { color: #ff6b6b; }
/* Chyba konkrétního pole — hláška pod polem + červený rámeček */
.form-row [aria-invalid="true"] { border-color: #ff6b6b; }
.field-error {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #ff6b6b;
}
/* Informační věta o zpracování osobních údajů pod tlačítkem odeslání (bez checkboxu —
   informační povinnost, ne souhlas). --text-muted na --card = 7.90:1. */
.form-privacy-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.form-privacy-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--card-border);
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-inner p { margin: 0; font-size: 0.9rem; }
.footer-legal { display: flex; flex-direction: column; gap: 4px; }
.footer-legal-line { font-size: 0.78rem !important; color: var(--text-muted); }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.footer-inner nav a { color: var(--text-muted); font-size: 0.9rem; }
.footer-inner nav a:hover { color: var(--accent); }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Blog: hlavička a filtr ---------- */
/* Zmenšeno ze 40px na 24px souběžně s redukcí .section, se kterým se tato
   třída kombinuje (viz blog/index.php) — .blog-hero jen přebíjí spodní
   padding, aby úvod blogu nebyl zbytečně daleko od mřížky článků. */
.blog-hero { padding-bottom: 24px; }

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.tag-chip {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
button.tag-chip { font-family: var(--font-body); }
.tag-chip.is-active,
.tag-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
span.tag-chip { cursor: default; }

/* ---------- Blog: mřížka článků ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.blog-card {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.blog-card:hover { border-color: rgba(51,255,176,0.4); transform: translateY(-3px); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; padding: 20px; color: inherit; }
.blog-card-date { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
/* Dvojitá třída přebíjí obecné .section h2 (jinak by nadpis karty měl velikost nadpisu sekce);
   overflow-wrap zalomí i extrémně dlouhé slovo, aby text nikdy nepřetekl kartu. */
.blog-card .blog-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  max-width: none;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.blog-card-excerpt {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 12px;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-more { margin-top: auto; color: var(--accent); font-weight: 600; font-size: 0.85rem; }
.blog-card.is-hidden { display: none; }

/* ---------- Blog: marketingové tipy na úvodní stránce ---------- */
.blog-tip-more { text-align: center; margin-top: 24px; }
.blog-tip-more a { color: var(--accent); font-weight: 600; }

/* ---------- Blog: detail článku ---------- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span[aria-current] { color: var(--text); }

.article-container { max-width: 760px; }
.article-date { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 10px; }
.article-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--text);
  margin-bottom: 18px;
}
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }

.article-content { font-size: 1.05rem; }
.article-content h2 {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 1.4rem;
  margin: 40px 0 16px;
}
.article-content h3 {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 1.15rem;
  margin: 28px 0 12px;
}
.article-content p { margin-bottom: 18px; }
.article-content ul { margin: 0 0 18px; padding-left: 22px; color: var(--text-muted); }
.article-content li { margin-bottom: 8px; }
.article-content strong { color: var(--text); }
.article-content a { text-decoration: underline; text-underline-offset: 3px; }
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.article-content th,
.article-content td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.95rem;
}
.article-content th {
  font-family: var(--font-heading);
  color: var(--accent);
  font-weight: 700;
  background: rgba(51,255,176,0.06);
}
.article-content td { color: var(--text-muted); }
.article-content tr:last-child td { border-bottom: none; }
.article-content ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-muted); }
.article-content ol li { margin-bottom: 8px; }
/* Záhlaví řádků (<th scope="row">) v těle tabulky vypadají jako běžná buňka — sémantika bez vizuální změny */
.article-content tbody th {
  font-family: inherit;
  color: var(--text-muted);
  font-weight: 400;
  background: none;
}
.article-content tbody tr:last-child th { border-bottom: none; }
/* Posuvný obal tabulky (vkládá ho blog/post.php kolem každé <table>): široká tabulka
   se na mobilu posouvá vodorovně uvnitř obalu, stránka nepřetéká. Tabulka sama zůstává
   display:table; width:100 %, její vnější odsazení přebírá obal. */
.article-content .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 24px;
  border-radius: var(--radius-md);
}
.article-content .table-scroll > table { margin: 0; }
.article-content .table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 699px) {
  .article-content th,
  .article-content td { padding: 10px 12px; font-size: 0.9rem; }
}

/* Časté otázky na konci článku (pole 'faq' v posts/*.php); karty přebírají .faq-list / .faq-item z FAQ úvodní stránky */
.article-faq { margin-top: 48px; }
.article-faq h2 {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 1.4rem;
  margin: 0 0 20px;
}

.article-cta {
  background: var(--card);
  border: 1px solid rgba(51,255,176,0.3);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin: 56px 0 48px;
  text-align: center;
}
.article-cta h2 { margin: 0 0 12px; font-size: 1.4rem; color: var(--text); }
.article-cta p { max-width: 520px; margin: 0 auto 24px; }

.article-related h2 { font-size: 1.2rem; color: var(--text); margin-bottom: 16px; }
.article-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.article-related-list a { color: var(--text); font-weight: 500; }
.article-related-list a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .kontakt-grid { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo { max-width: 320px; margin: 0 auto; }
  /* Na mobilu chceme dva ucelené bloky (Starý způsob / Nový způsob) místo
     prokládaných řádků — řádek se "rozpustí" (display: contents) a buňky
     se seřadí podle order, takže nejdřív jdou všechny "staré" buňky a pak
     všechny "nové", v původním pořadí uvnitř každé skupiny. */
  .compare-table { display: flex; flex-direction: column; gap: 2px; }
  .compare-row { display: contents; }
  .compare-cell { order: 1; }
  .compare-cell.compare-new { order: 2; }
  .compare-cell.compare-old { border-left-color: rgba(255,107,107,0.35); }
  .compare-head .compare-new { margin-top: 10px; }
}

@media (max-width: 960px) {
  .main-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--card-border);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    transform: translateY(-120%);
    opacity: 0;
    /* Zavřené menu je visibility: hidden — odkazy nejsou v Tab pořadí ani ve stromu
       přístupnosti (QA D1, 24. 9. 2026). Visibility se při zavírání přepne až po
       doběhnutí animace (zpoždění 0.25s), při otevírání hned (viz .is-open), takže
       animace zůstává stejná. Pravidlo žije jen v této media query, takže desktop
       (a přechod mobil <-> desktop při resize) se ho netýká bez jakéhokoli JS. */
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
    /* 9 položek + CTA se na nízkých displejích (812×375 landscape) nevejde —
       menu má max. výšku viewportu minus hlavička (76px) a vlastní scroll, aby
       CTA na konci bylo vždy dosažitelné. 100vh je fallback pro starší prohlížeče.
       Scroll záměrně neblokuje řetězení na stránku (bez overscroll-behavior:
       contain) — když je nad hlavičkou promo banner, dojetím na konec menu se
       odroluje i banner a hlavička se přilepí nahoru. */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0s;
  }
  .menu-toggle { display: flex; }
  /* Stejná ~35% redukce jako u desktopových hodnot výše, poměr hero/section
     zachovaný (72/44 vs. původních 110/70). Breakpoint 960px needitovat —
     posunutý nedávno kvůli jinému bugu, viz docs/decisions.md. */
  .hero { padding: 72px 0 44px; }
  .section { padding: 44px 0; }
}
/* Nízký landscape displej (telefon naležato): hustší rozestupy v otevřeném menu,
   aby se do výšky vešlo co nejvíc položek a scroll byl co nejkratší. */
@media (max-width: 960px) and (max-height: 500px) {
  .main-nav { padding: 14px 24px 20px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ---------- Promo banner (akce "web zdarma") ---------- */
.promo-banner {
  background: var(--accent);
  padding: 18px 0;
  border-bottom: 1px solid rgba(5, 7, 13, 0.15);
}
.promo-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  text-align: center;
}
.promo-banner-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}
.promo-banner-hook {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #05070d;
}
.promo-banner-condition {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: #05070d;
}
.promo-banner-cta {
  background: var(--bg);
  color: var(--text);
  padding: 10px 22px;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.promo-banner-cta:hover { background: var(--card); }

@media (max-width: 640px) {
  .promo-banner-inner { flex-direction: column; gap: 10px; }
}

/* ---------- Kontaktní formulář — nepovinný checkbox "web zdarma" ---------- */
.form-row-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.form-row-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.form-row-checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.form-row-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #05070d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-row-checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 255, 176, 0.25);
}
.form-row-checkbox label {
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
}

/* ---------- Mobilní floating CTA (sticky lišta nad spodním okrajem) ---------- */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: rgba(5, 7, 13, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--card-border);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(120%);
  transition: transform 0.3s ease;
}
.floating-cta.is-visible { transform: translateY(0); }
.floating-cta-inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.floating-cta-inner .btn { flex: 1; white-space: nowrap; }

@media (min-width: 640px) {
  .floating-cta-inner { max-width: 420px; }
}
/* Úzké telefony: tlačítko s nowrap textem přetékalo přes pravý okraj (naměřeno
   při 320 px: /marketing-na-miru/ o 19 px, /web-zdarma/ o 8 px). Lišta má vlastní
   boční padding 20 px, vnitřní padding .container je tu navíc — rušíme ho
   a zužujeme vodorovný padding tlačítka. */
@media (max-width: 420px) {
  .floating-cta-inner.container { padding-left: 0; padding-right: 0; }
  .floating-cta-inner .btn { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cta { transition: none; }
}

/* ---------- Stránka /leady/: karty oborů ---------- */
/* Štítky podtypů přebírají vzhled .tag-chip z filtrování blogu, ale nejsou
   interaktivní — proto bez hover efektu a s výchozím kurzorem. */
.obor-grid .card { padding: 32px; }
.section .obor-title { font-size: 1.4rem; margin-bottom: 14px; }
.obor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.obor-tags .tag-chip,
.obor-tags .tag-chip:hover {
  cursor: default;
  border-color: rgba(51,255,176,0.35);
  color: var(--accent);
}
.price-grid:has(> .price-card:only-child) { max-width: 560px; }

/* ==========================================================================
   Landing page /web-zdarma/ — všechny třídy s prefixem wz- (web zdarma),
   jen existující tokeny. Spec: docs/cro/2026-09-24-web-zdarma-landing.md §5–6.
   Mimo /web-zdarma/ se nic z tohoto bloku neuplatní.
   ========================================================================== */

/* Odznak benefitu nad H1 — jediný plně zelený plošný prvek hero kromě CTA
   (přebírá roli promo banneru, ale bez jeho výšky). Kontrast #05070d na
   #33ffb0 ≈ 15:1. */
.wz-badge {
  display: inline-block;
  background: var(--accent);
  color: #05070d;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 8px 16px;
  border-radius: 999px;
  margin: 0 0 18px;
}

/* H1 claim: na desktopu max. 2 řádky (strop 3.6rem dle spec §5.1), hero-inner
   rozšířený na šířku kontejneru, aby se claim nelámal do 3 řádků. */
.wz-hero .hero-inner { max-width: 1000px; }
.wz-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 16px; }
.wz-hero .hero-lead { max-width: 640px; margin-bottom: 20px; }

/* Výčet pod claimem — ukotvení sloganu (mezera od H1 ≤ 16 px) */
.wz-formula { margin-bottom: 24px; }

/* Odstranění hlavní námitky: dobře viditelné, ale ne druhé tlačítko
   (stejný vzor levého proužku jako .compare-new). */
.wz-pay-highlight {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0 0 24px;
}

/* Doplněk hero pod CTA — oddělený linkou stejně jako .hero-stats */
.wz-hero-more {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--card-border);
}
.wz-hero-more-lead { color: var(--text); font-weight: 500; margin-bottom: 8px; }
.wz-hero-more-note { margin: 0; }
.wz-hero-more-note small { font-size: 0.85rem; }

/* #co-dostanete: 6 karet vždy bez osiřelé karty (3+3 / 2+2+2 / 1) */
.wz-value-grid .stat-number { font-size: 1.25rem; line-height: 1.3; }
@media (min-width: 961px) {
  .wz-value-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 600px) and (max-width: 960px) {
  .wz-value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .wz-value-grid { grid-template-columns: 1fr; }
}

/* #srovnani: role jako tlumené karty („mnoho šedých") vs. „jeden zelený" claim */
.wz-role-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.wz-role-grid li {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}
@media (max-width: 699px) {
  .wz-role-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wz-role-grid li { padding: 14px 10px; font-size: 0.92rem; }
}
.wz-or {
  text-align: center;
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 16px;
}
.wz-srovnani .team-claim { margin-bottom: 28px; }
.wz-srovnani .team-claim-sub + .team-claim-sub { margin-top: 6px; }
.wz-cta-center { display: flex; justify-content: center; }

/* #web */
.wz-web-lead { margin-bottom: 24px; }
.wz-claim-left { text-align: left; margin: 32px 0 0; }
.wz-note-tight { margin: 12px 0 0; }

/* #platba: tlumená karta s přeškrtnutou částkou vs. zvýrazněná měsíční platba */
.wz-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 820px;
}
@media (max-width: 699px) {
  .wz-pay-grid { grid-template-columns: 1fr; }
}
.wz-pay-card--no .price-value {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.wz-pay-desc { margin: 0; }
.price-card-highlight .wz-pay-desc { color: var(--text); }
#platba .hero-cta { margin-bottom: 0; }

/* #duvera */
.wz-facts { margin-bottom: 32px; }
/* 3 reference: ve 2sloupcovém pásmu poslední karta přes celou šířku (bez osiřelé) */
@media (min-width: 700px) and (max-width: 960px) {
  .wz-testimonials { grid-template-columns: repeat(2, 1fr); }
  .wz-testimonials > :nth-child(3):last-child { grid-column: 1 / -1; }
}
.wz-founder {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  max-width: 720px;
}
.wz-founder img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--card-border);
}
.wz-founder p { margin: 0; color: var(--text); font-weight: 500; }

/* #pro-koho */
.wz-fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
@media (max-width: 860px) {
  .wz-fit-grid { grid-template-columns: 1fr; }
}
.wz-fit-grid .card { padding: 32px; }
.wz-fit-grid .card-list { margin-bottom: 0; }
.wz-list-no li::before { background: rgba(255, 107, 107, 0.55); }
.wz-fit-close { color: var(--text); font-weight: 600; margin: 0; }

/* #faq — textový odkaz na formulář */
.wz-faq-more { margin: 24px 0 0; }
.wz-faq-more a { font-weight: 600; }

/* #kontakt */
.wz-form-note { margin: 0; text-align: center; }

/* Mobil ≤ 640 px: badge, H1, výčet, námitka a CTA 1 musí být nad ohybem
   na 375×667 (spec §5.1) — bez breadcrumbs, menší H1 a kompaktní čipy. */
@media (max-width: 640px) {
  .wz-hero { padding-top: 24px; }
  .wz-hero .breadcrumbs { display: none; }
  /* 0.8rem + menší prostrkání: badge se na 375 px vejde na 1 řádek (naměřeno
     307 px z 327 px dostupných); při spec 0.85rem se lámal na 2 řádky a CTA 1
     padalo pod ohyb (693 px). */
  .wz-badge { font-size: 0.8rem; letter-spacing: 0.02em; padding: 7px 12px; margin-bottom: 14px; }
  .wz-hero h1 { font-size: 2rem; margin-bottom: 12px; }
  .wz-formula { gap: 8px 0; margin-bottom: 16px; }
  .wz-formula li { padding: 6px 12px; font-size: 0.85rem; }
  /* dřív gap 22 px + „+" 16 px za čipem → pravá hrana „+" 6 px před dalším čipem */
  .wz-formula li:not(:first-child) { margin-left: 22px; }
  .wz-formula li:not(:first-child)::before { right: calc(100% + 6px); }
  .wz-hero .hero-lead { font-size: 1rem; margin-bottom: 14px; }
  /* 1rem: věta zůstane na 375 px na jednom řádku (1.05rem se lámala) */
  .wz-pay-highlight { font-size: 1rem; padding-left: 12px; margin-bottom: 16px; }
  .wz-hero .hero-cta { margin-bottom: 14px; }
}

/* ---------- Děkovné okno po odeslání poptávky (js/script.js → zobrazPodekovani) ---------- */
.dekujeme-otevreno { overflow: hidden; }
.dekujeme {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
  padding: 40px 36px 32px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.dekujeme[open] { animation: dekujeme-vstup 0.35s ease-out; }
.dekujeme::backdrop { background: rgba(5, 7, 13, 0.78); backdrop-filter: blur(4px); }
@keyframes dekujeme-vstup {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.dekujeme-zavrit {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.dekujeme-zavrit:hover, .dekujeme-zavrit:focus-visible { background: var(--bg-soft); color: var(--text); }
.dekujeme-ikona {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #05070d;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 56px;
  box-shadow: 0 10px 30px rgba(51, 255, 176, 0.3);
}
.dekujeme-stitek {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dekujeme h2 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  line-height: 1.25;
  color: var(--text);
}
.dekujeme-text { margin: 0 0 12px; line-height: 1.6; }
.dekujeme-text strong { color: var(--text); }
.dekujeme-text-mensi { font-size: 0.88rem; }
.dekujeme-podpis {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
  text-align: left;
}
.dekujeme-podpis img { border-radius: 50%; border: 2px solid var(--accent); }
.dekujeme-podpis strong { display: block; color: var(--text); }
.dekujeme-podpis span { display: block; color: var(--text-muted); font-size: 0.85rem; }
.dekujeme-nabidky {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}
.dekujeme-mezitim { margin: 0 0 14px; color: var(--text); font-weight: 500; font-size: 0.95rem; }
.dekujeme-karty { display: grid; gap: 12px; text-align: left; }
.dekujeme-karta {
  display: block;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.dekujeme-karta:hover, .dekujeme-karta:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.dekujeme-karta-stitek {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dekujeme-karta-nadpis { display: block; color: var(--text); font-size: 1rem; line-height: 1.35; margin-bottom: 4px; }
.dekujeme-karta-text { display: block; font-size: 0.88rem; line-height: 1.5; }
.dekujeme-karta-vice { display: block; margin-top: 8px; color: var(--accent); font-size: 0.88rem; font-weight: 600; }
@media (max-width: 520px) {
  .dekujeme { padding: 36px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dekujeme[open] { animation: none; }
  .dekujeme-karta { transition: none; }
  .dekujeme-karta:hover { transform: none; }
}

/* ---------- Cookie lišta se souhlasem (js/consent.js) ---------- */
/* Nemodální karta u spodního okraje. Je-li vidět plovoucí CTA, posune ji skript
   nad něj (inline bottom). Obě tlačítka mají záměrně stejný vzhled. */
.souhlas-lista {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 0;
  z-index: 210;
  max-width: 780px;
  margin: 0 auto calc(16px + env(safe-area-inset-bottom));
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px 24px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glow);
}
.souhlas-text { flex: 1; min-width: 0; }
.souhlas-text p { margin: 0; font-size: 0.86rem; line-height: 1.5; }
.souhlas-text .souhlas-nadpis { color: var(--text); font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
.souhlas-text .souhlas-stav { margin-top: 4px; color: var(--text); }
.souhlas-text a { text-decoration: underline; text-underline-offset: 2px; }
.souhlas-tlacitka { display: flex; gap: 10px; flex-shrink: 0; }
.souhlas-btn {
  min-width: 132px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.souhlas-btn:hover { background: var(--accent); color: #05070d; }
.souhlas-btn:focus-visible,
.souhlas-text a:focus-visible,
.footer-cookies:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .souhlas-lista {
    left: 10px;
    right: 10px;
    margin-bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .souhlas-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .souhlas-btn { transition: none; }
}
@media print {
  .souhlas-lista { display: none; }
}

/* Odkaz „Nastavení cookies“ v patičce — tlačítko ve vzhledu sousedního odkazu. */
.footer-cookies {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.footer-cookies:hover { text-decoration: underline; }

/* Kotva na nadpis v článku (např. /ochrana-osobnich-udaju/#cookies) nesmí skončit pod sticky hlavičkou. */
.article-content h2[id] { scroll-margin-top: 100px; }