:root {
  --bg: #f6fbf7;
  --bg-alt: #ffffff;
  --text: #132019;
  --muted: #516458;
  --line: #dceadf;
  --primary: #27a85b;
  --primary-dark: #1f8a4a;
  --primary-soft: #e7f6ed;
  --accent: #bde6ce;
  --shadow: 0 18px 55px rgba(24, 61, 36, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(39, 168, 91, 0.13), transparent 32rem),
    linear-gradient(180deg, #f8fcf9 0%, var(--bg) 34%, #fff 100%);
  line-height: 1.6;
}

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

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

.container {
  width: min(1160px, calc(100% - 2.4rem));
  margin-inline: auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1rem;
}

.brand__logo {
  width: 190px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.78rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0 14px 28px rgba(39, 168, 91, 0.22);
  transition: 0.2s ease;
}

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

.btn.is-disabled,
.btn[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}

.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: #edf8f0;
}

.btn--small {
  padding: 0.52rem 0.88rem;
}

.hero {
  padding: 4.5rem 0 3rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--primary-dark);
  font-weight: 800;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.8rem;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}

h2 {
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
}

.lead {
  max-width: 62ch;
  color: var(--muted);
}

.section-intro {
  max-width: 76ch;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.25rem 0;
}

.hero__bullets {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.hero__metrics {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.proof-strip {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.proof-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfe6d7;
  background: #f4fcf7;
  color: #1b5f36;
  border-radius: 999px;
  padding: 0.36rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0.85rem;
}

.metric strong {
  display: block;
  color: var(--primary-dark);
  font-size: 1.02rem;
}

.metric span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero__media img {
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.section {
  padding: 4rem 0;
}

.cards {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.app-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid #cfe6d7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(22, 98, 50, 0.08);
}

.app-card--wide {
  grid-column: span 2;
}

.app-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f4fcf7, #e8f6ee);
}

.app-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
}

.app-card__tag {
  width: fit-content;
  margin-bottom: 0.7rem;
  border: 1px solid #bfe0ca;
  border-radius: 999px;
  background: #f4fcf7;
  color: var(--primary-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.6rem;
  text-transform: uppercase;
}

.app-card h3 {
  margin-bottom: 0.5rem;
}

.app-card p {
  margin: 0;
  color: var(--muted);
}

.articles-section {
  background:
    linear-gradient(180deg, rgba(244, 249, 245, 0.92), rgba(255, 255, 255, 0.88)),
    var(--bg-alt);
}

.article-list {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.5rem;
}

.story-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.35fr);
  overflow: hidden;
  border: 1px solid #cfe6d7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(19, 32, 25, 0.08);
}

.story-card--featured {
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.45fr);
}

.story-card__media {
  min-height: 100%;
  background: linear-gradient(135deg, #f4fcf7, #e8f6ee);
}

.story-card__media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.story-card__content {
  padding: clamp(1.15rem, 2.4vw, 2rem);
}

.story-card__label {
  display: inline-flex;
  margin-bottom: 0.75rem;
  border: 1px solid #bfe0ca;
  border-radius: 999px;
  background: #f4fcf7;
  color: var(--primary-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  text-transform: uppercase;
}

.story-card h3 {
  margin-bottom: 0.8rem;
}

.story-card p {
  margin: 0 0 0.85rem;
  color: var(--muted);
}

.story-card__source {
  display: inline-flex;
  align-items: center;
  margin-top: 0.15rem;
  color: var(--primary-dark);
  font-weight: 800;
  text-decoration: none;
}

.story-card__source::after {
  content: "↗";
  margin-left: 0.35rem;
}

.personas {
  margin-top: 1.5rem;
}

.persona {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mini-list {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--muted);
}

.mini-list li + li {
  margin-top: 0.3rem;
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 1.1rem;
}

.checklist {
  margin: 1.1rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.checklist li + li {
  margin-top: 0.45rem;
}

.checklist--compact {
  margin-top: 0.8rem;
  font-size: 0.95rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.kpi-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9fdf9;
  padding: 0.85rem;
}

.kpi-card strong {
  display: block;
  margin-bottom: 0.35rem;
}

.kpi-card p {
  margin: 0;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  gap: 1.2rem;
}

.feature {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.feature img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.feature p {
  color: var(--muted);
}

.feature ul {
  margin: 0.9rem 0 0;
  padding-left: 1.05rem;
  color: var(--muted);
}

.feature li + li {
  margin-top: 0.35rem;
}

.comparison {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
  align-items: start;
}

.comparison img {
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.comparison__table-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: auto;
}

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

th,
td {
  padding: 0.85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #eef8f1;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
}

.step span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: #e8f8ee;
  color: var(--primary-dark);
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.step p {
  margin: 0;
  color: var(--muted);
}

.gallery {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gallery img,
.security img {
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.integration-cards {
  margin-top: 1rem;
}

.panel--accent {
  border-color: #cfe6d7;
  background: linear-gradient(180deg, #ffffff 0%, #f5fcf7 100%);
}

.roi-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.roi-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0.85rem;
}

.roi-item strong {
  display: block;
  color: var(--primary-dark);
  font-size: 1.02rem;
}

.roi-item span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.table-note {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.table-note--compact {
  margin-top: 0.9rem;
}

.timeline {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.timeline__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 1rem;
}

.timeline__item p {
  margin: 0;
  color: var(--muted);
}

.security {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1rem;
  align-items: center;
}

.security ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.section-intro--small {
  margin-top: 0.55rem;
  font-size: 0.98rem;
}

.pricing-grid {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 760px;
  margin-inline: auto;
}

.pricing-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 1.1rem;
}

.pricing-card--hidden {
  display: none;
}

.pricing-card p {
  color: var(--muted);
}

.plan-context {
  margin: 0.55rem 0 0;
  font-size: 0.94rem;
  line-height: 1.45;
}

.plan-visual {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0.75rem 0 0.8rem;
  border-radius: 12px;
  border: 1px solid #d5eadb;
  display: block;
  background: #f6fbf8;
}

.pricing-card--featured {
  border-color: #b9ddc7;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
  box-shadow: var(--shadow);
}

.plan-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.plan-price {
  margin: 0.6rem 0 0;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--text) !important;
  font-weight: 800;
}

.plan-price span {
  margin-left: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.plan-list {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.plan-list li + li {
  margin-top: 0.45rem;
}

.pricing-rail {
  margin-top: 1.35rem;
}

.format-title {
  margin: 0.9rem 0 0.5rem;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2a7f57 !important;
  font-weight: 700;
}

.format-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.format-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #d3e8da;
  background: #f6fbf8;
}

.format-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.95rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: #e5f6ec;
  color: #145b3a;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.format-chip__suffix {
  color: #176544;
  font-size: 0.78rem;
  font-weight: 700;
}

.usage-explainer {
  margin-top: 1.2rem;
}

.usage-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 1rem;
}

.usage-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.6rem;
  margin-top: 0.9rem;
}

.usage-checklist li + li {
  margin-top: 0;
}

.usage-timeline {
  margin-top: 1.4rem;
}

.payment-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 1rem;
}

.payment-strip__text {
  flex: 1 1 auto;
  max-width: 72ch;
}

.payment-strip__text h3 {
  margin-top: 0;
}

.payment-strip__stripe {
  flex: 0 0 auto;
  height: 30px;
  width: auto;
  opacity: 0.8;
}

.payment-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
}

.payment-legal {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-note {
  border: 1px solid #cfe8d7;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fffb 0%, #eefaf2 100%);
  color: var(--muted);
  padding: 0.95rem 1rem;
}

.legal-note strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--primary-dark);
}

.legal-note p {
  margin: 0;
}

.legal-note--compact {
  margin-top: 1rem;
}

.legal-note--pricing {
  margin: 1rem 0 1.2rem;
}

.pricing-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-bottom: 1rem;
}

.pricing-intro-col {
  min-width: 0;
}

.legal-note--pool {
  margin-top: 0;
}

.pricing-pool-list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.pricing-pool-list li {
  margin: 0;
}

.pricing-pool-steps {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.75rem;
}

.pricing-pool-steps article h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 1rem;
}

.pricing-pool-steps article p {
  margin: 0.2rem 0 0;
}

.faq {
  margin-top: 1.2rem;
  display: grid;
  /* minmax(0, 1fr): pás záložek se na mobilu posouvá uvnitř, místo aby roztáhl stránku do šířky */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.faq-rail {
  margin-top: 0;
}

.faq-panels {
  margin-top: 0.35rem;
}

.faq-panel {
  display: none;
  gap: 0.8rem;
}

.faq-panel.is-active {
  display: grid;
}

.faq-panel[hidden] {
  display: none;
}

.faq-panel h3 {
  margin: 0 0 0.1rem;
  color: var(--text);
  font-size: 1.05rem;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}

.faq details.is-targeted {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(10, 107, 54, 0.14);
}

.faq summary {
  font-weight: 700;
  cursor: pointer;
}

.faq p {
  color: var(--muted);
  white-space: pre-line; /* odpověď může mít více řádků „• …“ (\n ve slovníku) – FAQ 2026-10-06 */
}

.cta {
  background: linear-gradient(140deg, #eefaf2 0%, #f8fffb 100%);
}

.anchor-target {
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 96px;
}

.cta__inner {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 1.2rem;
  align-items: stretch;
  padding: 1.25rem;
  border: 1px solid #d1ead9;
  border-radius: 16px;
  background: #fff;
}

.cta__inner > img {
  align-self: center;
}

.cta__content {
  align-self: center;
}

.contact-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}

.contact-detail {
  display: grid;
  gap: 0.18rem;
  padding: 0.85rem;
  border: 1px solid #dceadf;
  border-radius: 14px;
  background: #f8fffb;
  color: var(--text);
  text-decoration: none;
}

.contact-detail__label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-map {
  min-height: 280px;
  border: 1px solid #d1ead9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--primary-soft);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

/* Mapa se načte až po kliknutí (cookies Google) – do té doby výzva s tlačítkem. */
.contact-map iframe[hidden],
.contact-map__consent[hidden] {
  display: none;
}

.contact-map__consent {
  min-height: inherit;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}

.contact-map__consent p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
}

.contact-map__link {
  color: var(--primary-dark);
  font-weight: 700;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer {
  border-top: 1px solid var(--line);
  background: #fff;
}

/* Patička B (E1, 2026-10-12, D-AIV-3): definice a profily · provozovatel (údaje podle § 435 OZ) · dokumenty;
   spodní lišta © a odkazy. Na tabletu dva sloupce (dokumenty pod provozovatelem), na mobilu jeden. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 2rem;
  padding: 2.2rem 0 1.6rem;
  color: var(--muted);
}

.footer__logo {
  display: block;
  width: 150px;
  height: auto;
}

.footer__def {
  max-width: 380px;
  margin: 0.8rem 0 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer__h {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__id {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-style: normal;
  line-height: 1.6;
}

.footer__id small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.footer__id a,
.footer__nav a {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.footer__links {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.footer__links a {
  color: var(--primary-dark);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.footer__links a:hover,
.footer__id a:hover,
.footer__nav a:hover {
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.9rem 0 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
}

.footer__bottom p {
  margin: 0;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--primary-dark);
  background: #fff;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.footer__social-link:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.modern-hero {
  position: relative;
  overflow: hidden;
  padding: 5.6rem 0 4.2rem;
}

.modern-hero::before {
  content: "";
  position: absolute;
  inset: 1rem clamp(1rem, 4vw, 4rem) auto auto;
  width: min(34vw, 360px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(39, 168, 91, 0.16), transparent 68%);
  pointer-events: none;
}

.modern-hero .lead {
  font-size: clamp(1.04rem, 1.6vw, 1.22rem);
}

.hero__media,
.rounded-visual {
  border: 1px solid rgba(39, 168, 91, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(231, 246, 237, 0.88)),
    var(--primary-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero__media img,
.rounded-visual {
  min-height: 320px;
  object-fit: cover;
}

.video-visual {
  margin: 0;
  border: 1px solid rgba(39, 168, 91, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(231, 246, 237, 0.88)),
    var(--primary-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.video-visual video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0c1a12;
}

.video-visual figcaption {
  padding: 0.7rem 1.1rem 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.capabilities-section {
  background:
    radial-gradient(circle at top right, rgba(39, 168, 91, 0.1), transparent 38%),
    #fff;
}

.proof-pill--security {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
}

.value-card--certified {
  border-color: var(--primary);
  background:
    linear-gradient(150deg, rgba(39, 168, 91, 0.08), transparent 55%),
    #fff;
}

.trust-banner {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-dark), #132019);
  color: #fff;
  box-shadow: var(--shadow);
}

.trust-banner__main {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.trust-banner__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.trust-banner__content {
  flex: 1 1 auto;
}

.trust-banner__content h3 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  color: #fff;
}

.trust-banner__content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.trust-banner__badges {
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.trust-badge svg {
  flex: 0 0 auto;
}

.trust-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.trust-badge__text strong {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.trust-badge__text small {
  font-weight: 600;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.trust-banner__aws {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.trust-banner__aws-logo {
  flex: 0 0 auto;
  height: 42px;
  width: auto;
}

.trust-banner__disclaimer {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 860px) {
  .trust-banner__main,
  .trust-banner__aws {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 860px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* Jednotné pozadí všech obsahových sekcí = pozadí sekce Capabilities.
   Výjimka: závěrečná CTA sekce `.cta` (Want to see DocReveal…) si drží vlastní. */
.section {
  padding: clamp(3.2rem, 7vw, 5.7rem) 0;
  background:
    radial-gradient(circle at top right, rgba(39, 168, 91, 0.1), transparent 38%),
    #fff;
}

.section.cta {
  background: linear-gradient(140deg, #eefaf2 0%, #f8fffb 100%);
}

.intro-section .split,
.pilot-section .split {
  gap: clamp(1.8rem, 4vw, 4rem);
}

.split--reverse {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.3rem;
}

.mini-list span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfe8d7;
  border-radius: 999px;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 800;
  padding: 0.48rem 0.82rem;
}

.value-cards .card,
.persona-list article {
  border-color: rgba(39, 168, 91, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px rgba(24, 61, 36, 0.07);
}

.value-card {
  position: relative;
  overflow: hidden;
}

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.8rem;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 900;
}

.persona-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.persona-list article {
  padding: 1.1rem;
}

.persona-list h3,
.persona-list p {
  margin-bottom: 0.25rem;
}

.light-app-grid .app-card {
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(24, 61, 36, 0.08);
}

.light-app-grid .app-card__media img {
  min-height: 230px;
}

.timeline--light {
  grid-template-columns: 1fr;
  margin-top: 1.3rem;
}

.timeline--light .timeline__item {
  border-left: 4px solid var(--primary);
}

.switch-rail {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.45rem;
}

.switch-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.switch-arrow:hover,
.switch-arrow:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.switch-cats {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0.35rem 0.15rem;
  scrollbar-width: none;
}

.switch-cats::-webkit-scrollbar {
  display: none;
}

.switch-cat {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 1.15rem;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}

.switch-cat:hover,
.switch-cat:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.switch-cat.is-active {
  border-color: #b9ddc7;
  color: var(--primary-dark);
  background: linear-gradient(135deg, #f7fcf9 0%, #eff8f3 100%);
  box-shadow: 0 8px 18px rgba(39, 168, 91, 0.12);
}

.fabric-panel-wrap,
.workflow-panel-wrap {
  margin-top: 1.25rem;
}

.fabric-panel,
.workflow-panel {
  animation: fadePanel 0.25s ease;
}

.fabric-grid .card {
  border-color: rgba(39, 168, 91, 0.16);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(24, 61, 36, 0.07);
}

@keyframes fadePanel {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .hero__grid,
  .comparison,
  .security,
  .split,
  .usage-grid,
  .pricing-intro-grid {
    grid-template-columns: 1fr;
  }

  .cards--3,
  .cards--4,
  .app-grid,
  .story-card,
  .story-card--featured,
  .steps,
  .gallery,
  .timeline,
  .roi-grid,
  .pricing-grid,
  .cta__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .switch-arrow {
    display: none;
  }

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

  .app-card--wide {
    grid-column: span 1;
  }

  .story-card__media img {
    min-height: 220px;
  }

  .cta__inner > img {
    display: none;
  }

  .contact-map {
    min-height: 240px;
  }

}

@media (max-width: 768px) {
  .cards--3,
  .cards--4,
  .app-grid,
  .story-card,
  .story-card--featured,
  .steps,
  .gallery,
  .timeline,
  .hero__metrics,
  .kpi-grid,
  .roi-grid,
  .pricing-grid,
  .cta__inner {
    grid-template-columns: 1fr;
  }

  .workflow-panel .split,
  .fabric-panel .split {
    grid-template-columns: 1fr;
  }

  .plan-price {
    font-size: 1.35rem;
  }

  .contact-details {
    grid-template-columns: 1fr;
  }

  .format-chip {
    width: 100%;
    justify-content: space-between;
  }

  .usage-checklist {
    grid-template-columns: 1fr;
  }

  .payment-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    padding-top: 2.5rem;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem 2rem;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}
/* === Video guides (2026-10-01, zadání Dave – varianta B z návrhu): karty jako blog === */
/* Lišta (hledání + filtry), tečky, pás i karta jsou společné s blogem (.blog-toolbar, .blog-tags,
   .blog-dots, .blog-grid, .blog-card – blok „Blog“ níže). Tady je jen to, co mají videa navíc:
   počty ve filtrech, skládaná obálka karty (tmavé brand pozadí + snímek videa v perspektivě, jako
   obálky článků), živý náhled videa při najetí a obsah přehrávače (shell = .blog-reader). */

.video-visual > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tut-tags .switch-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tut-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

.tut-tags .switch-cat.is-active .tut-count {
  background: var(--primary);
  color: #fff;
}

.tut-tags .switch-cat.is-empty {
  opacity: 0.5;
}

/* Obálka karty: snímek z videa natočený do perspektivy na tmavém brand pozadí, vlevo „číslo · modul“
   a délka videa. Žádná ruční grafika per video – stačí plakát (assets/images/tutorials/*-poster.jpg). */
.tut-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(39, 168, 91, 0.3) 0%, transparent 55%),
    radial-gradient(70% 70% at 100% 100%, rgba(39, 168, 91, 0.12) 0%, transparent 60%),
    linear-gradient(155deg, #18241d 0%, #0f1a14 58%, #0a120d 100%);
}

.tut-cover::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  background: repeating-linear-gradient(-14deg, transparent 0 26px, rgba(150, 230, 180, 0.04) 26px 27px);
}

.tut-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 16, 12, 0.92) 0%, rgba(9, 16, 12, 0.55) 34%, rgba(9, 16, 12, 0) 58%);
}

.tut-cover__shot {
  position: absolute;
  z-index: 1;
  right: -14%;
  top: 17%;
  width: 72%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
  background: #132019;
  transform: perspective(760px) rotateY(-20deg) rotateX(7deg) rotateZ(2deg);
  transform-origin: left center;
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  filter: brightness(0.8) saturate(0.95);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.25, 1), filter 0.4s ease;
}

.tut-card:hover .tut-cover__shot {
  transform: perspective(760px) rotateY(-14deg) rotateX(5deg) rotateZ(1.2deg) translateX(-3%);
  filter: brightness(0.9) saturate(1);
}

.tut-cover__text {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 0;
  bottom: 0;
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.tut-cover__eyebrow {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5fd391;
  line-height: 1.4;
}

.tut-cover__play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #f2faf5;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.tut-cover__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(39, 168, 91, 0.2);
  border: 1px solid rgba(39, 168, 91, 0.65);
  color: #5fd391;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.tut-card:hover .tut-cover__icon {
  background: var(--primary);
  color: #06130b;
  transform: scale(1.06);
}

/* Živý náhled: plakát (hned) → video bez zvuku od snímku plakátu (jakmile hraje). */
.tut-live {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: #0d1712;
  transition: opacity 0.35s ease;
}

.tut-cover.is-live .tut-live {
  opacity: 1;
}

.tut-live img,
.tut-live video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tut-live video {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tut-cover.is-playing .tut-live video {
  opacity: 1;
}

.tut-live__muted {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(246, 251, 247, 0.3);
  background: rgba(10, 15, 12, 0.62);
  color: #f6fbf7;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tut-cover.is-live .tut-live__muted {
  opacity: 1;
}

/* --- Přehrávač (obsah overlaye .blog-reader#tutorialPlayer) --- */
.tut-watch {
  width: min(980px, calc(100% - 2.4rem));
  margin: 2.2rem auto 4.5rem;
}

.tut-watch__media {
  margin: 0 0 1.5rem;
}

.tut-watch__media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: #132019;
}

.tut-watch h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin-bottom: 0.6rem;
}

.tut-watch__desc {
  max-width: 70ch;
  margin: 0 0 2rem;
  font-size: 1.03rem;
  line-height: 1.75;
}

.tut-watch__more {
  margin: 0 0 2.2rem;
}

.tut-watch__more-title {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
}

.tut-watch__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.tut-mini {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tut-mini:hover,
.tut-mini:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(39, 168, 91, 0.4);
  box-shadow: 0 12px 26px rgba(24, 61, 36, 0.12);
}

.tut-mini:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tut-mini img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #132019;
}

.tut-mini strong {
  padding: 0 0.8rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

.tut-mini__time {
  padding: 0 0.8rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 700px) {
  .tut-watch__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tut-cover__shot,
  .tut-cover__icon,
  .tut-live,
  .tut-live video,
  .tut-live__muted,
  .tut-mini {
    transition: none;
  }
}

/* === Pricing: B2C/B2B audience toggle + B2B cards (2026-08-21) === */
.pricing-audience-lead {
  margin: 0.9rem auto 0.9rem;
  max-width: 62ch;
  text-align: center;
  color: var(--muted);
}

.pricing-audience {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.pricing-audience__btn {
  flex: 0 1 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.8rem 1.3rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}

.pricing-audience__btn:hover,
.pricing-audience__btn:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.pricing-audience__btn.is-active {
  border-color: #b9ddc7;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
  box-shadow: 0 8px 18px rgba(39, 168, 91, 0.14);
  color: var(--primary-dark);
}

.pricing-audience__title {
  font-weight: 800;
  font-size: 1.02rem;
  color: inherit;
}

.pricing-audience__sub {
  font-size: 0.85rem;
  font-weight: 500;
}

.pricing-audience-panel {
  margin-top: 1.5rem;
}

.pricing-audience-panel[hidden] {
  display: none;
}

.plan-price--tbd,
.plan-price--request {
  font-size: 1.28rem;
  color: var(--primary-dark) !important;
}

.pricing-card--b2b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --hidden musí vyhrát nad display:flex výše (stejná specificita, pozdější pravidlo) */
.pricing-card--b2b.pricing-card--hidden {
  display: none;
}

.pricing-card--b2b .plan-list {
  width: 100%;
}

.b2b-visual {
  margin: 0.75rem 0 0.15rem;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid #cfe8d7;
}

.b2b-visual svg {
  width: 24px;
  height: 24px;
}

.b2b-cta {
  margin-top: 1.1rem;
}

@media (max-width: 640px) {
  .pricing-audience__btn {
    flex-basis: 100%;
  }
}

/* === Blog (2026-08-23): dlaždice, vyhledávání, celostránková čtečka === */

.blog-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin-top: 1.4rem;
}

.blog-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
  color: var(--muted);
}

.blog-search svg {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.blog-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.62rem 1.1rem 0.62rem 2.55rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-search input::placeholder {
  color: var(--muted);
}

.blog-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(39, 168, 91, 0.12);
}

.blog-tags {
  flex: 1 1 auto;
}

/* Přetékající řada filtrů (2026-10-01, blog i Video guides): zeslabený okraj naznačí, že pilulky
   pokračují; třídy fade-l / fade-r přepíná JS (updateTagRowFade) podle pozice posuvu. */
.blog-tags.fade-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
}

.blog-tags.fade-l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px);
  mask-image: linear-gradient(90deg, transparent, #000 64px);
}

.blog-tags.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

/* Pás článků (2026-10-01): vodorovný posuv se scroll-snap, ovládání tečkami nad pásem
   (#blogDots, 1 tečka = 1 obrazovka; stejný pás má od 2026-10-01 i Video guides – #tutorialGrid).
   Na šířku 3 dlaždice, pod 1000 px 2, pod 640 px 1 s náhledem další. Vnitřní odsazení + záporný okraj = místo pro zvednutí a stín
   dlaždice při hoveru (scroll kontejner jinak ořízne). */
.blog-grid {
  --blog-gap: 1.15rem;
  display: flex;
  gap: var(--blog-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 12px 16px 46px;
  margin: 0 -16px -46px;
  scrollbar-width: none;
}

.blog-grid::-webkit-scrollbar {
  display: none;
}

.blog-grid > .blog-card {
  flex: 0 0 calc((100% - 2 * var(--blog-gap)) / 3);
  scroll-snap-align: start;
}

.blog-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.8rem;
}

.blog-dots[hidden] {
  display: none;
}

.blog-dot {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 24px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c6dccd;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease;
}

.blog-dot:hover::before {
  background: #94c3a6;
}

.blog-dot.is-active {
  width: 46px;
}

.blog-dot.is-active::before {
  width: 30px;
  background: var(--primary);
}

.blog-dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -6px;
  border-radius: 999px;
}

/* Kompaktní tečky (2026-10-01): když se na šířku nevejdou (mobil, desítky položek – Video guides),
   createDotPager() přidá .is-compact a tečky se zúží. */
.blog-dots.is-compact .blog-dot {
  width: 14px;
}

.blog-dots.is-compact .blog-dot::before {
  width: 6px;
  height: 6px;
}

.blog-dots.is-compact .blog-dot.is-active {
  width: 32px;
}

.blog-dots.is-compact .blog-dot.is-active::before {
  width: 22px;
}

@media (max-width: 1000px) {
  .blog-grid > .blog-card {
    flex-basis: calc((100% - var(--blog-gap)) / 2);
  }
}

@media (max-width: 640px) {
  .blog-grid > .blog-card {
    flex-basis: 86%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-dot,
  .blog-dot::before {
    transition: none;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.blog-card:hover,
.blog-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(39, 168, 91, 0.4);
  box-shadow: 0 18px 40px rgba(24, 61, 36, 0.13);
}

.blog-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--primary-soft);
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}

.blog-card__badge {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: rgba(19, 32, 25, 0.78);
  color: #fff;
  border-radius: 999px;
  padding: 0.26rem 0.66rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.15rem;
  gap: 0.55rem;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.blog-card__meta .dot {
  opacity: 0.55;
}

.blog-card__title {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--text);
}

.blog-card__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.blog-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.92rem;
}

.blog-card__more svg {
  transition: transform 0.2s ease;
}

.blog-card:hover .blog-card__more svg {
  transform: translateX(3px);
}

.blog-empty {
  margin: 2rem auto 0;
  text-align: center;
  color: var(--muted);
  max-width: 46ch;
}

/* --- Čtečka článku (celostránkový overlay) --- */

html.blog-reader-open,
html.blog-reader-open body {
  overflow: hidden;
}

.blog-reader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top right, rgba(39, 168, 91, 0.08), transparent 40%),
    var(--bg);
  animation: blogReaderIn 0.24s ease;
}

.blog-reader[hidden] {
  display: none;
}

@keyframes blogReaderIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-reader__bar {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.blog-reader__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 1rem;
}

.blog-reader__logo {
  width: 150px;
}

.blog-reader__close {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blog-reader__close:hover,
.blog-reader__close:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
  box-shadow: 0 8px 18px rgba(39, 168, 91, 0.14);
}

.blog-reader__esc {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
}

.blog-reader__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-article {
  width: min(780px, calc(100% - 2.4rem));
  margin: 2.2rem auto 4.5rem;
}

.blog-article__media {
  margin: 0 0 1.6rem;
}

.blog-article__media img,
.blog-article__media video {
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: #132019;
}

.blog-article h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin-bottom: 0.6rem;
}

.blog-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
}

.blog-article__meta .dot {
  opacity: 0.55;
}

.blog-article__body {
  font-size: 1.03rem;
  line-height: 1.75;
}

.blog-article__body p {
  margin: 0 0 1.05rem;
}

.blog-article__body h2 {
  font-size: 1.45rem;
  margin: 2.1rem 0 0.7rem;
}

.blog-article__body h3 {
  font-size: 1.15rem;
  margin: 1.6rem 0 0.5rem;
}

.blog-article__body ul,
.blog-article__body ol {
  margin: 0 0 1.05rem;
  padding-left: 1.3rem;
}

.blog-article__body li {
  margin-bottom: 0.45rem;
}

.blog-article__body a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-article__body blockquote {
  margin: 1.5rem 0;
  padding: 1.05rem 1.25rem;
  background: #f4fcf7;
  border: 1px solid #cfe6d7;
  border-radius: 14px;
  color: #1b5f36;
}

.blog-article__body blockquote p {
  margin: 0;
}

.blog-article__body figure {
  margin: 1.5rem 0;
}

.blog-article__body figure img {
  width: 100%;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.blog-article__body figcaption {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.blog-article__footer {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.blog-article__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.blog-article__share > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.blog-article__share > a:hover,
.blog-article__share > a:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

/* Hláška u Instagramu (odkaz zkopírován / zkopírujte ho ručně, 2026-10-07) – celý řádek pod ikonami. Prázdná
   zůstává ve stromu přístupnosti (role="status" ohlásí novou zprávu), jen je vizuálně skrytá. */
.blog-article__share-note {
  flex: 1 0 100%;
  color: var(--primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.blog-article__share-note:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.blog-article__share-url {
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Tlačítka v návodu u Instagramu (2026-10-08): Otevřít Instagram, Stáhnout obrázek */
.blog-article__share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.blog-article__share-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-dark);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.blog-article__share-actions a:hover,
.blog-article__share-actions a:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.blog-article__cta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 12px 28px rgba(24, 61, 36, 0.07);
}

.blog-article__cta h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}

.blog-article__cta p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.blog-article__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

@media (max-width: 860px) {
  .blog-toolbar {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .blog-search {
    flex: 0 0 auto;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .blog-reader__logo {
    width: 124px;
  }

  .blog-reader__esc {
    display: none;
  }

  .blog-article {
    margin-top: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-reader {
    animation: none;
  }

  .blog-card,
  .blog-card__media img,
  .blog-card__more svg {
    transition: none;
  }
}

/* === Pricing: B2B kalkulačka „Ceník pro firmy“ (2026-09-22) ===
   Obsah vykresluje pricing.js do #b2bPricing (data pricing-data.js). Tokeny a vzhled podle webu:
   zelená --primary, pilulky jako .switch-cat, karty bílé s --line rámečkem, zaoblení 14–16 px. */

.b2bp {
  margin-top: 1.4rem;
}

.b2bp-disclaimer {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid #cfe8d7;
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fffb 0%, #eefaf2 100%);
  padding: 0.9rem 1.05rem;
  color: var(--muted);
}

.b2bp-disclaimer__icon {
  flex: 0 0 auto;
  color: var(--primary-dark);
  margin-top: 0.1rem;
}

.b2bp-disclaimer strong {
  display: block;
  color: var(--primary-dark);
  margin-bottom: 0.2rem;
}

.b2bp-disclaimer p {
  margin: 0;
  font-size: 0.95rem;
}

.b2bp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  margin-top: 1.1rem;
}

.b2bp-toolbar__cur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.b2bp-toolbar__label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
}

.b2bp-curs {
  display: inline-flex;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.b2bp-cur {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.38rem 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.b2bp-cur:hover,
.b2bp-cur:focus-visible {
  color: var(--primary-dark);
}

.b2bp-cur.is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 8px 18px rgba(39, 168, 91, 0.22);
}

.b2bp-toolbar__rate {
  flex: 1 1 360px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.b2bp-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfe6d7;
  background: #f4fcf7;
  color: #1b5f36;
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.b2bp-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-top: 1rem;
}

.b2bp-presets__label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
}

.b2bp-presets__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.b2bp-preset {
  font-size: 0.86rem;
  padding: 0.38rem 0.9rem;
}

.b2bp-textbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: none;
  padding: 0.2rem 0;
  color: var(--primary-dark);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(31, 138, 74, 0.35);
  text-underline-offset: 3px;
}

.b2bp-textbtn:hover,
.b2bp-textbtn:focus-visible {
  text-decoration-color: currentColor;
}

.b2bp-presets .b2bp-textbtn {
  margin-left: auto;
}

.b2bp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: 1.4rem;
  align-items: start;
  margin-top: 1rem;
}

.b2bp-config {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.b2bp-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Akordeon sekcí */
.b2bp-acc {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.b2bp-acc.is-open {
  border-color: #b9ddc7;
  box-shadow: 0 12px 28px rgba(24, 61, 36, 0.07);
}

.b2bp-acc__heading {
  margin: 0;
  font-size: inherit;
}

.b2bp-acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  border: 0;
  background: transparent;
  padding: 0.95rem 1.05rem;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
}

.b2bp-acc__head:hover .b2bp-acc__title,
.b2bp-acc__head:focus-visible .b2bp-acc__title {
  color: var(--primary-dark);
}

.b2bp-acc__head:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.b2bp-acc__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  background: var(--primary-soft);
  border: 1px solid #cfe8d7;
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.b2bp-acc.is-open .b2bp-acc__num {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  color: #fff;
}

.b2bp-acc__titles {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.b2bp-acc__title {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.b2bp-acc__sub {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
}

.b2bp-acc__price {
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 0.95rem;
  text-align: right;
  white-space: nowrap;
}

.b2bp-acc__chev {
  display: inline-flex;
  color: var(--muted);
  transition: transform 0.25s ease, color 0.2s ease;
}

.b2bp-acc.is-open .b2bp-acc__chev {
  transform: rotate(180deg);
  color: var(--primary-dark);
}

.b2bp-acc__body {
  padding: 0.2rem 1.05rem 1.1rem;
  border-top: 1px solid var(--line);
  animation: fadePanel 0.25s ease;
}

.b2bp-acc__body[hidden] {
  display: none;
}

.b2bp-lead {
  margin: 0.9rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.b2bp-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.b2bp-note--box {
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #f6fbf8;
  border: 1px solid var(--line);
}

/* Položka s cenou (základ, údržba, pořízení) */
.b2bp-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}

.b2bp-item:last-of-type {
  border-bottom: 0;
}

.b2bp-item__main h4,
.b2bp-urow__main h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.b2bp-item__main p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.b2bp-item__side {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  text-align: right;
}

.b2bp-item__price {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.b2bp-item__unit {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.b2bp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid #cfe8d7;
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.b2bp-core-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.b2bp-core-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfefc;
  padding: 0.8rem 0.95rem;
}

.b2bp-core-group h5 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.b2bp-core-group ul {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--muted);
  font-size: 0.9rem;
  display: grid;
  gap: 0.3rem;
}

.b2bp-core-group:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.b2bp-env {
  margin-top: 0.85rem;
}

.b2bp-env p {
  font-size: 0.9rem;
}

/* Moduly */
.b2bp-mods {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.b2bp-mod {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.b2bp-mod.is-on {
  border-color: #9fd3b3;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
  box-shadow: 0 10px 24px rgba(39, 168, 91, 0.1);
}

.b2bp-mod__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}

/* Ikona modulu = ikona z menu aplikace (app_react .app-right-menu-icon): stejné SVG i kolečko
   se stínem, na kartě jen o něco větší (menu 2,75rem → 3rem). */
.b2bp-mod__icon {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4fbf7;
  border: 1px solid #cfe8d7;
}

.b2bp-mod__icon img {
  position: absolute;
  inset: 0.36rem;
  width: calc(100% - 0.72rem);
  height: calc(100% - 0.72rem);
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(11, 49, 24, 0.18));
}

.b2bp-mod.is-on .b2bp-mod__icon {
  border-color: #9fd3b3;
  box-shadow: 0 8px 16px rgba(39, 168, 91, 0.16);
}

.b2bp-mod__titles h4 {
  margin: 0;
  font-size: 1.02rem;
}

.b2bp-mod__tech {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.b2bp-mod__benefit {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.b2bp-mod__benefit strong {
  color: var(--text);
}

.b2bp-mod__users {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin-top: 0.7rem;
}

.b2bp-mod__users[hidden] {
  display: none;
}

.b2bp-mod__foot {
  margin-top: 0.75rem;
}

.b2bp-more {
  margin-top: 0.45rem;
}

.b2bp-more summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 0.86rem;
  font-weight: 700;
}

.b2bp-more p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Přepínač (checkbox) */
.b2bp-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  margin-top: 0.55rem;
}

.b2bp-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.b2bp-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d6e3da;
  transition: background 0.2s ease;
}

.b2bp-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(19, 32, 25, 0.25);
  transition: transform 0.2s ease;
}

.b2bp-switch input:checked + .b2bp-switch__track {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.b2bp-switch input:checked + .b2bp-switch__track::after {
  transform: translateX(18px);
}

.b2bp-switch input:focus-visible + .b2bp-switch__track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.b2bp-switch__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

/* Číselné vstupy s −/+ */
.b2bp-field {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.b2bp-field__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.b2bp-stepper {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.b2bp-stepper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(39, 168, 91, 0.14);
}

.b2bp-stepper__btn {
  width: 38px;
  border: 0;
  background: #f4faf6;
  color: var(--primary-dark);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}

.b2bp-stepper__btn:hover,
.b2bp-stepper__btn:focus-visible {
  background: var(--primary-soft);
}

.b2bp-stepper__input {
  width: 7.5rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.b2bp-stepper__input:focus {
  outline: none;
}

.b2bp-stepper__input::-webkit-outer-spin-button,
.b2bp-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Řádky spotřeby */
.b2bp-urows {
  display: grid;
  margin-top: 0.4rem;
}

.b2bp-urow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  gap: 0.6rem 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}

.b2bp-urow:last-child {
  border-bottom: 0;
}

.b2bp-urow__side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.1rem;
  text-align: right;
}

.b2bp-urow__side .b2bp-field {
  justify-items: end;
}

.b2bp-urow__price {
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.b2bp-urow__sum {
  color: var(--primary-dark);
  font-size: 0.88rem;
  font-weight: 800;
  min-height: 1.2em;
}

.b2bp-urow__side .b2bp-switch {
  justify-content: flex-end;
}

/* Balíčky podpory */
.b2bp-pkgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.b2bp-pkg {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.b2bp-pkg:hover {
  border-color: var(--primary);
}

.b2bp-pkg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.b2bp-pkg:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.b2bp-pkg.is-on {
  border-color: #9fd3b3;
  background: linear-gradient(180deg, #ffffff 0%, #f1faf4 100%);
  box-shadow: 0 10px 22px rgba(39, 168, 91, 0.12);
}

.b2bp-pkg__title {
  font-weight: 800;
  color: var(--text);
  padding-right: 1.6rem;
}

.b2bp-pkg.is-on .b2bp-pkg__title::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.b2bp-pkg__detail {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.b2bp-pkg__price {
  margin-top: 0.25rem;
  color: var(--primary-dark);
  font-weight: 800;
}

/* Souhrn */
.b2bp-summary {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.b2bp-summary__card {
  border: 1px solid #b9ddc7;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.15rem 1rem;
}

.b2bp-summary__card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.12rem;
}

.b2bp-sum__rows {
  display: grid;
}

.b2bp-sum__row,
.b2bp-sum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed #d5e7da;
}

.b2bp-sum__row span {
  color: var(--muted);
  font-size: 0.9rem;
}

.b2bp-sum__row strong {
  font-size: 0.98rem;
  text-align: right;
}

.b2bp-sum__row--sub span,
.b2bp-sum__row--sub strong {
  font-size: 0.86rem;
}

.b2bp-sum__total {
  margin: 0.35rem 0;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 12px 24px rgba(39, 168, 91, 0.22);
}

.b2bp-sum__total span {
  font-weight: 700;
  font-size: 0.92rem;
}

.b2bp-sum__total strong {
  font-size: 1.28rem;
  font-weight: 800;
  text-align: right;
}

.b2bp-sum__note,
.b2bp-sum__fine {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.b2bp-bd__toggle {
  margin-top: 0.45rem;
  font-size: 0.85rem;
}

.b2bp-bd {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.6rem;
}

.b2bp-bd[hidden] {
  display: none;
}

.b2bp-bd__title {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.b2bp-bd ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.b2bp-bd li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.84rem;
  color: var(--muted);
}

.b2bp-bd li strong {
  color: var(--text);
  white-space: nowrap;
}

.b2bp-bd li strong.is-muted {
  color: var(--muted);
  font-weight: 600;
}

.b2bp-sum__excluded {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.b2bp-sum__excluded strong {
  color: var(--text);
}

.b2bp-sum__excluded ul {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
}

.b2bp-summary__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.b2bp-summary__actions .btn {
  gap: 0.4rem;
  padding-inline: 0.8rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.b2bp-summary__actions .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.b2bp-summary__link {
  margin-top: 0.65rem;
}

.b2bp-summary__fail {
  margin: 0.55rem 0 0;
  color: #9a3412;
  font-size: 0.84rem;
}

/* Jak dojdeme k přesné ceně */
.b2bp-steps {
  margin-top: 2rem;
}

.b2bp-steps h3 {
  margin: 0 0 0.8rem;
}

.b2bp-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.b2bp-step {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 1rem 1.05rem;
}

.b2bp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.b2bp-step h4 {
  margin: 0.6rem 0 0.3rem;
  font-size: 1rem;
}

.b2bp-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Mobilní lišta se součtem (jen úzké obrazovky) */
.b2bp-mobilebar {
  display: none;
}

/* Dialog „Mám zájem“ */
.b2bp-dialog {
  width: min(640px, calc(100% - 1.6rem));
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 1px solid #b9ddc7;
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(19, 32, 25, 0.28);
  overflow: auto;
}

.b2bp-dialog::backdrop {
  background: rgba(19, 32, 25, 0.45);
  backdrop-filter: blur(3px);
}

.b2bp-dialog[open]:not(:modal) {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 90;
}

html.b2bp-dialog-open {
  overflow: hidden;
}

.b2bp-form {
  padding: 1.15rem 1.25rem 1.2rem;
}

.b2bp-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.b2bp-dialog__head h3 {
  margin: 0;
  font-size: 1.3rem;
}

.b2bp-dialog__x {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.b2bp-dialog__x:hover,
.b2bp-dialog__x:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.b2bp-dialog__step[hidden] {
  display: none;
}

.b2bp-dialog__lead {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.b2bp-dialog__mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: #f4fbf6;
  border: 1px solid #cfe8d7;
  font-size: 0.85rem;
  color: var(--muted);
}

.b2bp-dialog__mini strong {
  flex-basis: 100%;
  color: var(--primary-dark);
}

.b2bp-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.9rem;
  margin-top: 0.95rem;
}

.b2bp-form__field {
  display: grid;
  gap: 0.28rem;
  align-content: start;
}

.b2bp-form__field--full {
  grid-column: 1 / -1;
}

.b2bp-form__field label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.b2bp-req {
  color: var(--primary-dark);
}

.b2bp-form__field input,
.b2bp-form__field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.b2bp-form__field textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.b2bp-form__field input:focus,
.b2bp-form__field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(39, 168, 91, 0.14);
}

.b2bp-form__field input[aria-invalid="true"] {
  border-color: #c2410c;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12);
}

.b2bp-form__error {
  color: #9a3412;
  font-size: 0.8rem;
}

.b2bp-form__error[hidden] {
  display: none;
}

.b2bp-form__privacy {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.b2bp-form__privacy a {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.b2bp-form__fail {
  color: #9a3412;
  font-size: 0.86rem;
}

.b2bp-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

.b2bp-dialog__actions .btn {
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.b2bp-dialog__actions .btn[hidden] {
  display: none;
}

.b2bp-dialog__actions .btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

.b2bp-done {
  text-align: center;
  padding-top: 0.6rem;
}

.b2bp-done__icon {
  display: inline-flex;
  color: var(--primary);
}

.b2bp-done h4 {
  margin: 0.4rem 0 0.4rem;
  font-size: 1.2rem;
}

.b2bp-done p {
  margin: 0.3rem auto 0;
  max-width: 48ch;
  color: var(--muted);
}

.b2bp-done .b2bp-dialog__actions {
  justify-content: center;
}

@media (max-width: 1024px) {
  .b2bp-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2bp-summary {
    position: static;
    scroll-margin-top: 96px;
  }

  .b2bp-mobilebar {
    position: sticky;
    bottom: 0.6rem;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 0.6rem 0.7rem 0.6rem 0.95rem;
    border: 1px solid #b9ddc7;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px rgba(19, 32, 25, 0.16);
  }

  .b2bp-mobilebar div {
    display: grid;
    min-width: 0;
  }

  .b2bp-mobilebar span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
  }

  .b2bp-mobilebar strong {
    font-size: 0.98rem;
    white-space: nowrap;
  }

  .b2bp-mobilebar .btn {
    margin-left: auto;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
  }

  .b2bp-steps__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .b2bp-acc__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.85rem 0.8rem;
    gap: 0.65rem;
  }

  .b2bp-acc__price {
    grid-column: 2 / 3;
    grid-row: 2;
    text-align: left;
    white-space: normal;
    font-size: 0.9rem;
  }

  .b2bp-acc__chev {
    grid-column: 3;
    grid-row: 1;
  }

  .b2bp-acc__body {
    padding: 0.2rem 0.8rem 1rem;
  }

  .b2bp-core-grid,
  .b2bp-pkgs,
  .b2bp-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2bp-item,
  .b2bp-urow {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2bp-item__side,
  .b2bp-urow__side,
  .b2bp-urow__side .b2bp-field {
    justify-items: start;
    text-align: left;
  }

  .b2bp-mod__head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .b2bp-mod__price {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }

  .b2bp-presets .b2bp-textbtn {
    margin-left: 0;
  }

  /* štítek platnosti ceníku se na telefonu smí zalomit (en/de by jinak přetékal o 23–30 px, 2026-10-07) */
  .b2bp-toolbar__rate .b2bp-chip {
    white-space: normal;
    border-radius: 12px;
  }

  .b2bp-summary__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2bp-mobilebar {
    gap: 0.7rem;
  }

  .b2bp-mobilebar strong {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b2bp-acc__body,
  .b2bp-acc__chev,
  .b2bp-switch__track,
  .b2bp-switch__track::after {
    animation: none;
    transition: none;
  }
}

/* === Team (2026-09-30): sekce #team – představení týmu, portrétní karty se jménem přes fotku === */

/* === Hlavička: seskupená navigace (2026-10-01, zadání Dave – varianta A z návrhu) ===
   Product ▾ · Pricing · Resources ▾ · Company ▾ + jazyk (pilulka s kódem → mřížka 24 jazyků) + Book demo.
   Rozbalovací karty s ikonou a popisem (nav.desc.*). Pod 900 px – nebo když se lišta v daném jazyce
   nevejde (JS přidá .topbar.is-compact) – hamburger otevře panel s akordeonem skupin. Logika v script.js
   (blok „Hlavička: seskupená navigace“). Starý jednořádkový .nav se 13 odkazy zmizel. */
.brand,
.site-nav,
.topbar__actions {
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav__group {
  position: relative;
}

.site-nav__trigger,
.site-nav__link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__trigger:hover,
.site-nav__link:hover,
.site-nav__trigger[aria-expanded="true"] {
  color: var(--text);
  background: #f1f8f3;
}

.site-nav__trigger:focus-visible,
.site-nav__link:focus-visible,
.lang-menu__button:focus-visible,
.nav-toggle:focus-visible,
.nav-drawer__toggle:focus-visible,
.nav-drawer__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.site-nav__chev {
  transition: transform 0.2s ease;
}

.site-nav__trigger[aria-expanded="true"] .site-nav__chev,
.lang-menu__button[aria-expanded="true"] .site-nav__chev {
  transform: rotate(180deg);
}

/* Průhledné horní odsazení panelu = „most“, aby myš cestou z tlačítka do karty neopustila skupinu. */
.site-nav__panel {
  position: absolute;
  top: 100%;
  left: -0.4rem;
  z-index: 40;
  padding-top: 12px;
}

.site-nav__panel[hidden] {
  display: none;
}

.site-nav__card {
  display: grid;
  gap: 0.1rem;
  width: 360px;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(24, 61, 36, 0.14);
  animation: navPanelIn 0.18s ease;
}

.site-nav__panel--wide .site-nav__card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 640px;
}

@keyframes navPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nav-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.68rem 0.8rem;
  border-radius: 12px;
  color: var(--text);
  transition: background-color 0.15s ease;
}

.nav-entry:hover,
.nav-entry:focus-visible {
  background: #f2f9f4;
}

.nav-entry:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.nav-entry__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.nav-entry__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-entry__text strong {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.nav-entry__text small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.4;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.lang-menu {
  position: relative;
}

.lang-menu__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lang-menu__button:hover,
.lang-menu__button[aria-expanded="true"] {
  border-color: var(--primary);
  background: #f3faf6;
}

.lang-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.1rem;
  width: 440px;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(24, 61, 36, 0.14);
  animation: navPanelIn 0.18s ease;
}

.lang-menu__panel[hidden] {
  display: none;
}

.lang-menu__option {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0.42rem 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.lang-menu__option b {
  flex: 0 0 auto;
  width: 1.6rem;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.lang-menu__option:hover {
  background: #f2f9f4;
}

.lang-menu__option[aria-current="true"] {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
}

.lang-menu__option[aria-current="true"] b {
  color: var(--primary-dark);
}

.lang-menu__option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.topbar__cta {
  min-height: 40px;
  padding: 0.58rem 1.05rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Mobilní panel: absolutně pod hlavičkou (fixed by uvnitř backdrop-filter hlavičky nefungoval),
   výška do spodku viewportu, při otevření je stránka zamčená (html.nav-drawer-open). */
.nav-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: calc(100vh - 77px);
  height: calc(100dvh - 77px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  background: #fff;
  animation: navPanelIn 0.2s ease;
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0.4rem 0 1.4rem;
}

.nav-drawer__group {
  border-bottom: 1px solid var(--line);
}

.nav-drawer__toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-drawer__toggle svg,
.nav-drawer__link svg {
  color: var(--muted);
}

.nav-drawer__toggle svg {
  transition: transform 0.2s ease;
}

.nav-drawer__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-drawer__items {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.7rem;
}

.nav-drawer__items[hidden] {
  display: none;
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.nav-drawer__foot {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.2rem;
}

.language-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
}

.language-switch label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.language-switch select {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.nav-drawer__cta {
  width: 100%;
  min-height: 50px;
}

html.nav-drawer-open,
html.nav-drawer-open body {
  overflow: hidden;
}

.topbar.is-compact .site-nav,
.topbar.is-compact .lang-menu,
.topbar.is-compact .topbar__cta {
  display: none;
}

.topbar.is-compact .nav-toggle {
  display: grid;
}

@media (max-width: 900px) {
  .site-nav,
  .lang-menu,
  .topbar__cta {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .topbar__inner {
    min-height: 64px;
  }

  .brand__logo {
    width: 160px;
  }

  .nav-drawer {
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__card,
  .lang-menu__panel,
  .nav-drawer {
    animation: none;
  }

  .site-nav__chev,
  .nav-drawer__toggle svg {
    transition: none;
  }
}

/* Sekce #team
   Karta = fotka (výřez celé šířky portrétu, logo DocReveal na zdi zůstává vidět) + tělo s mottem,
   medailonkem, oblastmi zaměření a kontakty (e-mail + LinkedIn). Všechny karty mají stejnou výšku.
   2026-10-01: třetí členka (Katherine Reyes) → nad 1024 px 3 sloupce, 641–1024 px 2 sloupce a lichá
   poslední karta na středu ve stejné šířce, pod 641 px 1 sloupec (beze změny).
   Tmavší zelená #1b5f36 (jako .proof-pill) drží u malých zelených textů kontrast AA. */
.team-grid {
  --team-gap: clamp(1rem, 2.4vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--team-gap);
  margin-top: 1.75rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(39, 168, 91, 0.16);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(24, 61, 36, 0.07);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Výřez jen na výšku (celá šířka fotky) – obličej i logo na zdi zůstanou vždy v záběru. */
.team-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--primary-soft);
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  transition: transform 0.6s ease;
}

/* Karta není odkaz – na hover jen jemná odezva (bez „zvednutí“), a jen na zařízeních s myší. */
@media (hover: hover) {
  .team-card:hover {
    border-color: rgba(39, 168, 91, 0.32);
    box-shadow: 0 24px 56px rgba(24, 61, 36, 0.11);
  }

  .team-card:hover .team-card__media img {
    transform: scale(1.02);
  }
}

/* Tmavý přechod ve spodní části fotky kvůli čitelnosti jména a role (část textu padá na bílou košili). */
.team-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(19, 32, 25, 0) 0%, rgba(19, 32, 25, 0.62) 45%, rgba(19, 32, 25, 0.9) 100%);
  pointer-events: none;
}

/* V DOM je jméno (h3) před rolí kvůli navigaci po nadpisech; vizuálně je role nad jménem. */
.team-card__identity {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  display: flex;
  flex-direction: column-reverse;
  padding: 1.1rem 1.4rem 1.15rem;
  color: #fff;
}

.team-card__role {
  margin: 0 0 0.3rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.team-card__name {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.team-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.35rem 1.4rem 1.4rem;
}

.team-card__tagline {
  margin: 0;
  color: #1b5f36;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.team-card__bio {
  margin: 0;
  color: var(--muted);
}

/* Oblasti zaměření + kontakty drží u spodního okraje karty – u kratšího medailonku jde volné místo
   pod text, takže čipy i kontakty obou karet leží ve stejné výšce. */
.team-card__focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.team-card__focus li {
  border: 1px solid #cfe8d7;
  border-radius: 999px;
  background: #f4fcf7;
  color: #1b5f36;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.32rem 0.72rem;
}

.team-card__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.team-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 42px;
  max-width: 100%;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fffb;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.team-contact svg {
  flex: 0 0 auto;
  color: var(--primary-dark);
  transition: color 0.18s ease;
}

.team-contact:hover,
.team-contact:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: #1b5f36;
}

.team-contact:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* LinkedIn = externí odkaz (nová záložka) → šipka ↗ jako u .story-card__source (čtečkám se nečte). */
.team-contact--linkedin::after {
  content: "↗";
  content: "↗" / "";
  font-size: 0.85em;
  opacity: 0.7;
}

.team-contact--linkedin:hover,
.team-contact--linkedin:focus-visible {
  border-color: #1b5f36;
  background: #1b5f36;
  color: #fff;
}

.team-contact--linkedin:hover svg,
.team-contact--linkedin:focus-visible svg {
  color: #fff;
}

/* Tablet (641–1024 px): dva sloupce, třetí karta sama na řádku uprostřed – stejně široká jako ostatní. */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .team-grid > .team-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--team-gap)) / 2);
  }
}

/* Dva sloupce až do 641 px (pod tím by karta na šířku tabletu měla obří fotku), čtverec jen na telefonech. */
@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .team-card__media {
    aspect-ratio: 1 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-card__media img {
    transition: none;
  }

  .team-card:hover .team-card__media img {
    transform: none;
  }
}

/* ==========================================================================
   Horní část webu nad #pricing (2026-10-06) – úvod „Jedna platforma místo čtyř“,
   #why (co se změní + srovnání, proč DocReveal a od 2026-10-09 šest pilířů – kotva #platform), #use-cases (pro
   koho; od 2026-10-09 před #in-practice), #in-practice (příběh uzávěrky), #start (jak začít + důvěra). Prefix .hm-*,
   texty home.* (home-data.js), ceny a částky doplňuje home.js. Návrh: .docClaude/readme-web-hero-redesign.md
   ========================================================================== */
.hm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hm-eyebrow {
  margin: 0 0 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}

.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  background: var(--primary-soft);
  color: var(--primary-dark);
  white-space: nowrap;
}

/* Delší štítky (kroky příběhu, karty pilířů) se v dlouhých jazycích na telefonu zalomí místo přetečení. */
.hm-step__text .hm-chip,
.hm-pcard__top .hm-chip {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}

.hm-pcard__top .hm-chip {
  min-width: 0;
  text-align: right;
}

.hm-chip--addon {
  background: #fff;
  color: #2f5a41;
  border: 1px dashed #9fcfb2;
}

.hm-chip--fail {
  background: #fdeeec;
  color: #b3392a;
  border: 1px solid #f3c8c1;
}

.hm-chip--ok {
  border: 1px solid #bfe3cd;
}

.hm-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.34rem;
  font-size: 0.9rem;
  line-height: 1.42;
}

.hm-checks li {
  position: relative;
  padding-left: 1.45rem;
}

.hm-checks li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.3rem;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2.4px solid var(--primary);
  border-bottom: 2.4px solid var(--primary);
  transform: rotate(-45deg);
}

.hm-checks--light {
  color: #d9ebe0;
}

.hm-checks--light li::before {
  border-color: #7fd6a2;
}

/* --- Úvod --- */
.hm-hero {
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.8rem, 6vw, 5rem);
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(39, 168, 91, 0.12), transparent 70%),
    linear-gradient(180deg, #f8fcf9 0%, #f1f8f3 100%);
}

.hm-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: end;
}

.hm-hero__text {
  min-width: 0;
}

.hm-h1 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  font-weight: 850;
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.hm-h1__accent {
  display: block;
  margin-top: 0.12em;
  color: var(--primary-dark);
}

.hm-lead {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.35vw, 1.17rem);
  line-height: 1.55;
}

.hm-price {
  display: grid;
  gap: 0.75rem;
  padding: 1.2rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 61, 36, 0.08);
}

.hm-price p {
  margin: 0;
}

.hm-price__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.hm-price__body {
  display: grid;
  gap: 0.6rem;
}

.hm-price__big {
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.hm-price__per {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

.hm-price__more {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.hm-price__actions {
  display: grid;
  gap: 0.5rem;
}

.hm-price__actions .btn {
  width: 100%;
  text-align: center;
}

/* --- Úvod, finální varianta (2026-10-12, rozhodnutí Dave 2026-10-11): oddělení s jejich doklady, srovnání
   s dalším člověkem v ceníku a pás šesti čísel. Šest stejných dlaždic je na desktopu v jednom řádku, na tabletu
   3 + 3, na mobilu 2 + 2 + 2. Dřívější plátno „Obvyklé řešení / S DocRevealem“ (.hm-canvas) úvod nemá; příběh
   „jedna platforma místo čtyř“ nese #why. Návrh: .docClaude/vision/web-uvod-podvarianty/. --- */
.hm-sub {
  margin: 1.5rem 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.hm-depts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.hm-depts li {
  min-width: 0;
  padding: 0.65rem 0.8rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.42;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.hm-depts strong {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--text);
  font-size: 0.92rem;
}

.hm-price__compare {
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: #f1f7f3;
  color: #3d5146;
  font-size: 0.8rem;
  line-height: 1.45;
}

.hm-band {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.hm-band > .hm-sub {
  margin-top: 0;
}

.hm-nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.6rem;
}

.hm-nums li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 8.2rem;
  padding: 1.05rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.hm-nums b {
  display: block;
  color: var(--text);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hm-nums span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ikona nástroje ve 2. pohledu #why („Why DocReveal“, .hm-tools__tool) – do 2026-10-12 i v plátně úvodu */
.hm-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef2ef;
  color: #7a8c81;
}

/* --- #why: co se změní + srovnání kategorií --- */
.hm-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.hm-card3 {
  padding: 1.2rem 1.2rem 1.3rem;
  border-top: 3px solid var(--primary);
  border-radius: 4px 4px 16px 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 61, 36, 0.08);
}

.hm-card3 h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.hm-card3 p {
  margin: 0;
  color: var(--muted);
}

.hm-compare {
  margin-top: clamp(2.2rem, 4vw, 3rem);
}

.hm-compare h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.hm-scroll {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.hm-table {
  width: 100%;
  min-width: 860px; /* 5 kategorií + DocReveal (2026-10-12); užší okno tabulku posouvá (.hm-scroll) */
  border-collapse: collapse;
  font-size: 0.93rem;
}

/* první sloupec (schopnost) zůstává při vodorovném posunu tabulky na místě */
.hm-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  background: #fff;
}

.hm-table th,
.hm-table td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #edf3ef;
  background: transparent;
  text-align: center;
  vertical-align: middle;
}

.hm-table thead th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.3;
  vertical-align: bottom;
}

.hm-table tbody th {
  text-align: left;
  font-weight: 600;
}

.hm-table tr:last-child th,
.hm-table tr:last-child td {
  border-bottom: 0;
}

.hm-table .is-dr {
  background: var(--primary-soft);
}

.hm-table thead .is-dr {
  color: var(--primary-dark);
  font-size: 0.86rem;
}

.hm-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  vertical-align: middle;
}

.hm-dot--2 {
  background: var(--primary);
}

.hm-dot--1 {
  background: linear-gradient(90deg, var(--primary) 50%, #fff 50%);
}

.hm-dot--0 {
  border-color: #c4d3ca;
  background: #fff;
}

/* schopnost existuje, ale jako samostatné produkty spojené projektem (velké podnikové platformy, 2026-10-12) */
.hm-dot--3 {
  background: conic-gradient(var(--primary) 0 28%, #fff 28% 36%, var(--primary) 36% 61%, #fff 61% 69%, var(--primary) 69% 94%, #fff 94%);
}

.hm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.hm-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hm-legend em {
  margin-left: auto;
  font-style: normal;
}

/* --- 2. pohled #why: nástroje, které možná znáte (2026-10-12, D-AIV-6) – pět kategorií s příklady jmen a karta
   DocRevealu ve stylu .hm-tools__dr; na tabletu dva sloupce, na telefonu jeden --- */
.hm-vs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.hm-vs__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.hm-vs__card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.hm-vs__ex {
  margin: 0.3rem 0 0;
  color: var(--primary-dark);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.hm-vs__dl {
  display: grid;
  gap: 0.15rem;
  margin: 0.85rem 0 0;
}

.hm-vs__dl dt {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hm-vs__dl dt:first-child {
  margin-top: 0;
}

.hm-vs__dl dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.48;
}

.hm-vs__card--dr {
  gap: 0.85rem;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(127, 214, 162, 0.22), transparent 60%),
    linear-gradient(140deg, var(--primary-dark) 0%, #10291b 62%, #0b1510 100%);
  color: #e9f4ed;
  box-shadow: var(--shadow);
}

.hm-vs__lead {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

.hm-vs__price {
  margin: 0;
  color: #cfe5d8;
  font-size: 0.9rem;
}

.hm-vs__card--dr .btn {
  align-self: flex-start;
  margin-top: auto;
}

.hm-vs__foot {
  max-width: 90ch;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 960px) {
  .hm-vs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hm-vs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- #in-practice: příběh jedné uzávěrky --- */
.hm-steps {
  position: relative;
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.6rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.hm-steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--primary) 50%, var(--accent));
}

.hm-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1rem, 2.6vw, 2.4rem);
  align-items: center;
}

.hm-step__n {
  display: grid;
  place-items: center;
  align-self: start;
  width: 40px;
  height: 40px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 850;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--accent);
}

.hm-step__text {
  min-width: 0;
}

.hm-step__k {
  margin: 0;
  color: var(--primary-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hm-step h3 {
  margin: 0.35rem 0 0.6rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hm-step__text > p:not(.hm-step__k) {
  margin: 0 0 0.9rem;
  max-width: 46ch;
  color: var(--muted);
}

.hm-shot {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #1f3328;
  border-radius: 16px;
  background: #0d1a13;
  box-shadow: var(--shadow);
}

.hm-shot img {
  width: 100%;
  height: auto;
}

.hm-card {
  min-width: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 61, 36, 0.08);
}

.hm-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  font-size: 0.92rem;
  font-weight: 800;
}

.hm-card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hm-card__title img {
  width: 26px;
  height: 26px;
}

.hm-find {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 0.8rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid #edf3ef;
  border-radius: 12px;
}

.hm-find + .hm-find {
  margin-top: 0.5rem;
}

.hm-find__doc {
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.hm-find__rule {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.hm-find__val {
  grid-column: 1 / -1;
  color: #b3392a;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; /* dlouhá slova (sv, fi) v úzké ukázce s náhledem */
}

.hm-chat {
  display: grid;
  gap: 0.6rem;
}

.hm-q {
  justify-self: end;
  max-width: 92%;
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-radius: 14px 14px 4px 14px;
  background: #eaf4ee;
  font-size: 0.9rem;
  font-weight: 600;
}

.hm-a {
  max-width: 96%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #d5e8dc;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  font-size: 0.9rem;
  line-height: 1.45;
}

.hm-a p {
  margin: 0;
}

.hm-cite {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
}

.hm-src {
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: #f6fbf8;
  color: #34473b;
  font-size: 0.84rem;
}

.hm-src small {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hm-src mark {
  padding: 0 3px;
  border-radius: 4px;
  background: #d8f1e2;
  color: var(--primary-dark);
  font-weight: 700;
}

.hm-flow {
  display: grid;
  gap: 0.5rem;
}

.hm-flow__node {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e3ece6;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 650;
}

/* text uzlu se v úzké ukázce s náhledem zalomí i uvnitř dlouhého slova (de „Eingangsrechnung“) */
.hm-flow__node > span {
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.hm-flow__node b {
  flex: none;
  min-width: 4.4rem;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hm-flow__line {
  width: 2px;
  height: 16px;
  margin-left: 1.6rem;
  background: var(--accent);
}

.hm-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.hm-kpi {
  padding: 0.7rem 0.8rem;
  border: 1px solid #e3ece6;
  border-radius: 12px;
  background: #f6fbf8;
}

.hm-kpi strong {
  display: block;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.hm-kpi span {
  color: var(--muted);
  font-size: 0.78rem;
}

.hm-kpi--warn strong {
  color: #b3392a;
}

.hm-outro {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-left: 64px;
}

.hm-outro p {
  margin: 0;
}

.hm-outro__claim {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hm-outro__note {
  color: var(--muted);
  font-size: 0.84rem;
}

/* --- #in-practice: další ukázky (2026-10-07) – spedice, závazky, smlouvy, IT staffing ---
   Sekce má pět pohledů s tečkami (.hm-views jako úvod a #why). Karty používají stejné prvky jako příběh
   Keldmoor (.hm-card, .hm-find, .hm-chat, .hm-kpis); navíc trasy zásilek, sloupce marže, názvy projektu
   z životopisů a snímek z business videa, který otevře přehrávač Video guides. */
.hm-route {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #edf3ef;
  border-radius: 12px;
}

.hm-route + .hm-route {
  margin-top: 0.5rem;
}

.hm-route__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
}

.hm-route__id {
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.hm-route__path {
  margin: 0.3rem 0 0;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.hm-route__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.hm-bars {
  display: grid;
  gap: 1rem;
}

.hm-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.8rem;
  align-items: baseline;
}

.hm-bar__label {
  font-size: 0.88rem;
  font-weight: 700;
}

.hm-bar__pct {
  color: var(--primary-dark);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.hm-bar__track {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3ef;
}

.hm-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

/* 8,5 % proti 16,4 % u námořní zásilky */
.hm-bar--air .hm-bar__fill {
  width: 52%;
}

.hm-bar--air .hm-bar__pct {
  color: var(--text);
}

.hm-bar__meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.hm-card__note {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
  color: #34473b;
  font-size: 0.86rem;
}

.hm-kpis--top {
  margin-top: 0;
}

.hm-card__list {
  margin-top: 0.85rem;
  font-size: 0.86rem;
}

.hm-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.hm-names span {
  padding: 0.28rem 0.6rem;
  border: 1px dashed #b9ddc7;
  border-radius: 10px;
  background: #f6fbf8;
  color: #34473b;
  font-size: 0.8rem;
  font-style: italic;
}

.hm-names__eq {
  margin: 0.75rem 0 0;
  color: var(--primary-dark);
  font-size: 0.95rem;
  font-weight: 800;
}

/* snímek z business videa = odkaz do přehrávače Video guides (home.js ho otevře na místě) */
.hm-shot--video {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
}

.hm-shot--video img {
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.hm-shot--video:hover img,
.hm-shot--video:focus-visible img {
  opacity: 0.82;
  transform: scale(1.03);
}

.hm-shot--video:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.hm-play {
  position: absolute;
  left: 50%;
  top: 44%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 88%;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: rgba(13, 26, 19, 0.84);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hm-play svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 9px 8px 9px 10px;
  border-radius: 50%;
  background: var(--primary);
}

.hm-shot--video:hover .hm-play,
.hm-shot--video:focus-visible .hm-play {
  background: var(--primary-dark);
  transform: translate(-50%, -50%) scale(1.04);
}

.hm-shot__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.8rem 0.95rem 0.65rem;
  background: linear-gradient(180deg, transparent, rgba(13, 26, 19, 0.92));
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 640px) {
  /* na telefonu jen tlačítko přehrát – text zůstává pro čtečky obrazovky */
  .hm-play {
    top: 42%;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .hm-play > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hm-play svg {
    width: 48px;
    height: 48px;
    padding: 14px 12px 14px 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  }

  .hm-shot--video:hover .hm-play,
  .hm-shot--video:focus-visible .hm-play {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-shot--video img,
  .hm-play {
    transition: none;
  }

  .hm-shot--video:hover img,
  .hm-shot--video:focus-visible img {
    transform: none;
  }
}

/* --- šest pilířů: 3. pohled #why s kotvou #platform (do 2026-10-09 samostatná sekce se zeleným pozadím) --- */
.hm-pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.hm-pcard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.2rem 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.hm-pcard--addon {
  border-style: dashed;
  border-color: #b9dcc7;
  background: linear-gradient(180deg, #fbfdfc, #f5faf7);
}

.hm-pcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.hm-pcard__top img {
  width: 46px;
  height: 46px;
}

.hm-pcard h3 {
  margin: 0;
  font-size: 1.15rem;
}

.hm-pcard__no {
  display: block;
  margin-bottom: 0.2rem;
  color: #93a99b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hm-pcard > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.hm-pcard .hm-checks {
  margin-top: 0.15rem;
}

.hm-pcard > .hm-pcard__price {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.hm-punder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  margin-top: 1.1rem;
}

.hm-mcp {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: #34473b;
  font-size: 0.92rem;
}

.hm-mcp svg {
  flex: 0 0 auto;
  color: var(--primary);
}

.hm-coreline {
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.86rem;
  font-weight: 700;
}

/* --- #use-cases: pro koho --- */
.hm-tgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.hm-tcard {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.hm-tcard h3 {
  margin: 0;
  font-size: 1.1rem;
}

.hm-tcard p {
  margin: 0;
}

.hm-tcard__docs {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.hm-ask {
  padding: 0.6rem 0.75rem;
  border-radius: 14px 14px 14px 4px;
  background: #eaf4ee;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.hm-ask small {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--primary-dark);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hm-tcard__out {
  position: relative;
  margin-top: auto !important;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.hm-tcard__out::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 800;
}

/* --- #start: jak začít + důvěra --- */
.hm-start {
  background: linear-gradient(180deg, #f2f9f4 0%, #fafdfb 100%);
}

.hm-ssteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.hm-sstep {
  position: relative;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.hm-sstep__n {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 850;
}

.hm-sstep:first-child .hm-sstep__n {
  background: var(--primary);
  color: #fff;
}

.hm-sstep__free {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
}

.hm-sstep h3 {
  margin: 0 0 0.35rem;
}

.hm-sstep p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.hm-sstep .hm-sstep__price {
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line);
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.hm-scta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1.4rem;
}

.hm-trust {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 1.3rem 2rem;
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  border-radius: 22px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(127, 214, 162, 0.16), transparent 60%),
    linear-gradient(135deg, var(--primary-dark), #132019 70%);
  color: #fff;
  box-shadow: var(--shadow);
}

.hm-trust h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 1.35rem;
}

.hm-trust .hm-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.2rem;
  font-size: 0.93rem;
}

.hm-trust__badges {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.hm-badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.hm-badge strong {
  display: block;
  font-size: 0.95rem;
}

.hm-badge small {
  color: #b9d5c4;
  font-size: 0.78rem;
}

.hm-trust__legal {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #a9c6b4;
  font-size: 0.78rem;
  line-height: 1.5;
}

.hm-trust__legal p {
  margin: 0;
}

.hm-trust__legal strong {
  color: #d9ebe0;
}

.hm-trust__aws {
  width: auto;
  height: 28px;
}

/* --- responzivita --- */
@media (max-width: 1080px) {
  .hm-tgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .hm-hero__top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .hm-price {
    max-width: 520px;
  }

  .hm-nums {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hm-nums li {
    min-height: 7.2rem;
  }

  .hm-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-step {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .hm-step > .hm-shot,
  .hm-step > .hm-card {
    grid-column: 2;
  }

  .hm-pgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-trust {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  /* dlouhá složená slova (de „Unternehmensgedächtnis“, da „Virksomhedshukommelse“) se musí vejít do 360 px */
  .hm-h1 {
    font-size: clamp(1.65rem, 7.6vw, 2rem);
  }

  .hm-steps::before {
    left: 15px;
  }

  .hm-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.9rem;
  }

  .hm-step__n {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .hm-outro {
    padding-left: 0;
  }

  .hm-kpis,
  .hm-pgrid,
  .hm-tgrid,
  .hm-ssteps,
  .hm-trust .hm-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-legend em {
    margin-left: 0;
  }

  .hm-scta .btn {
    flex: 1 1 100%;
  }
}

/* patička B na telefonu: jeden sloupec */
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* úvod (finální varianta, 2026-10-12): oddělení 3 → 2 → 1 sloupec, pás čísel 6 → 3 (do 960 px) → 2 sloupce */
@media (max-width: 700px) {
  .hm-depts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .hm-nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .hm-depts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Pohledy s tečkami (2026-10-06): úvod má dva pohledy a #why od 2026-10-12 čtyři, mezi kterými se přepíná
   tečkami nad sekcí – stejný pás a stejné tečky jako Video guides (.blog-dots / .blog-dot,
   createDotPager() ze script.js). Pás .hm-views se posouvá vodorovně se scroll-snap (klik na
   tečku, tažení prstem, touchpad); výšku pásu podle aktivního pohledu nastavuje home.js.
   Úvod: 1 = finální varianta „Ať roste obrat, ne administrativa.“ (2026-10-12, do té doby „Jedna platforma
   místo čtyř“), 2 = varianta A „Přečte. Zapamatuje si. Odpoví. Zařídí.“
   #why: 1 = „Co se změní“ + srovnání kategorií, 2 = „Nástroje, které možná znáte“ – příklady jmen po kategoriích
   (2026-10-12, D-AIV-6), 3 = „Proč DocReveal“ (varianta A), 4 = „Co je uvnitř“ – šest pilířů
   (2026-10-09, dřív samostatná sekce; kotva #platform = data-view-anchor, otevírá ji home.js).
   ========================================================================== */
.hm-hero {
  padding-top: clamp(1rem, 2.4vw, 1.9rem);
}

/* pás přesahuje kontejner kvůli stínům karet (jinak by je ořízl) – sekce přesah ořízne, stránka se nerozšíří */
.hm-hero,
.hm-has-views {
  overflow-x: hidden;
  overflow-x: clip;
}

.hm-dots {
  margin: 0 0 0.35rem;
}

.hm-views {
  --hm-views-pad: 56px;
  display: flex;
  align-items: flex-start;
  gap: 120px; /* > přesah + rozostření stínu: stín sousedního pohledu nezasahuje do viditelného */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hm-views-pad);
  padding: 8px var(--hm-views-pad) 76px;
  margin: -8px calc(-1 * var(--hm-views-pad)) -76px;
  scrollbar-width: none;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-views::-webkit-scrollbar {
  display: none;
}

.hm-view {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* tabulka srovnání v 1. pohledu #why se na telefonu posouvá sama – posun nesmí přeskočit na další pohled */
.hm-views .hm-scroll {
  overscroll-behavior-x: contain;
}

/* --- Náhled dalšího obsahu u pásů s tečkami (varianta C, 2026-10-08): úvod, #reveal, #why, #in-practice, Blog,
   Video guides ---
   Aktivní pohled / stránka dlaždic je o --hm-peek-space užší než kontejner, takže vpravo vykukuje začátek dalšího
   obsahu. Maska pásu ho zesvětlí (u pohledů vlevo skryje i konec předchozího – mezera 48 px je menší než přesah
   pásu 56 px). Nad náhledem je kulaté tlačítko s popiskem „Další“ + štítek dalšího obsahu (u poslední tečky
   „Znovu“ + první); při posunu stránky drží uprostřed obrazovky (sticky). Pás a náhled sdílí jednu buňku mřížky,
   takže náhled má vždy výšku pásu. Obsah tlačítka, popisek, aria-label a klik doplňuje home.js (initPeek).
   Pruh vpravo má i s viditelným přesahem pásu vždy 160 px, aby se do popisku vešla i dlouhá slova
   (de „Personaldienstleistung“). Pohledy (úvod, #reveal, #why, #in-practice): .hm-peek-host / .hm-views--peek;
   Blog + Video guides:
   .blog-peek-wrap / .blog-grid--peek (Dave 2026-10-08). */
.hm-peek-host,
.blog-peek-wrap {
  --hm-peek-space: calc(160px - var(--hm-peek-bleed)); /* pruh vpravo od aktivního obsahu: mezera + začátek dalšího */
  --hm-peek-fade: 0.7; /* krytí začátku vykukujícího obsahu (doprava slábne do ztracena) */
  display: grid;
}

/* pohledy (úvod, #reveal, #why, #in-practice): tečky, pás s náhledem a závěr (#in-practice) v mřížce kontejneru */
.hm-peek-host {
  /* kolik pásu je vidět za pravým okrajem kontejneru: okraj stránky (kontejner = min(1160px, 100% - 2.4rem)), nejvýš přesah pásu */
  --hm-peek-bleed: clamp(1.2rem, (100vw - 1160px) / 2, 56px);
  --hm-peek-gap: 48px;
  grid-template: "dots" auto "views" auto "outro" auto / minmax(0, 1fr);
}

.hm-peek-host > .hm-dots {
  grid-area: dots;
}

.hm-peek-host > .hm-views,
.hm-peek-host > .hm-peek {
  grid-area: views;
}

.hm-peek-host > .hm-outro {
  grid-area: outro;
}

/* Blog a Video guides: obal pásu dlaždic (pás přesahuje kontejner o 16 px – místo pro stín dlaždice při najetí) */
.blog-peek-wrap {
  --hm-peek-bleed: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.blog-peek-wrap > * {
  grid-area: 1 / 1;
}

.hm-views--peek {
  gap: var(--hm-peek-gap);
  padding-right: calc(var(--hm-views-pad) + var(--hm-peek-space));
  /* fokus v dalším pohledu ho posune celý do obrazu, ne jen do náhledu */
  scroll-padding-right: calc(var(--hm-views-pad) + var(--hm-peek-space));
  -webkit-mask-image: linear-gradient(90deg, transparent 36px, #000 52px, #000 calc(100% - var(--hm-views-pad) - var(--hm-peek-space)), rgba(0, 0, 0, var(--hm-peek-fade)) calc(100% - var(--hm-views-pad) - var(--hm-peek-space) + var(--hm-peek-gap)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 36px, #000 52px, #000 calc(100% - var(--hm-views-pad) - var(--hm-peek-space)), rgba(0, 0, 0, var(--hm-peek-fade)) calc(100% - var(--hm-views-pad) - var(--hm-peek-space) + var(--hm-peek-gap)), transparent 100%);
}

.blog-grid--peek {
  padding-right: calc(16px + var(--hm-peek-space));
  scroll-padding-right: calc(16px + var(--hm-peek-space));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px - var(--hm-peek-space)), rgba(0, 0, 0, var(--hm-peek-fade)) calc(100% - 16px - var(--hm-peek-space) + var(--blog-gap)), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 16px - var(--hm-peek-space)), rgba(0, 0, 0, var(--hm-peek-fade)) calc(100% - 16px - var(--hm-peek-space) + var(--blog-gap)), transparent 100%);
}

.hm-views--peek > .hm-view.is-next {
  cursor: pointer;
}

.hm-peek {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: calc(var(--hm-peek-space) + var(--hm-peek-bleed));
  margin-right: calc(-1 * var(--hm-peek-bleed));
  pointer-events: none;
}

.hm-peek[hidden] {
  display: none;
}

.hm-peek__hold {
  position: sticky;
  top: calc(50vh - 26px);
  display: flex;
  justify-content: center;
  margin-top: clamp(140px, 22vh, 210px);
}

.hm-peek__btn {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.hm-peek__circle {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary-dark);
  /* bílý lem jako u čísel kroků: tlačítko se čistě odliší od vykukujícího obsahu, který pod ním projíždí */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92), 0 10px 28px rgba(24, 61, 36, 0.16);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.hm-peek__btn:focus-visible {
  outline: none;
}

.hm-peek__btn:focus-visible .hm-peek__circle {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.hm-peek__icon--again,
.hm-peek.is-again .hm-peek__icon--next {
  display: none;
}

.hm-peek.is-again .hm-peek__icon--again {
  display: block;
}

/* popisek čitelný i nad vykukujícím textem dalšího obsahu */
.hm-peek__cap {
  display: grid;
  gap: 0.1rem;
  max-width: 100%;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.hm-peek__kicker {
  color: var(--primary-dark);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* štítek: název ukázky / pohledu, u Blogu a Video guides nadpis první dlaždice další stránky (nejvýš 3 řádky) */
.hm-peek__tag {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #34473b;
  font-size: 0.76rem;
  font-weight: 650;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

/* slovo delší než popisek (de „Unternehmensgedächtnis“, da „virksomhedshukommelsen“): home.js změří štítek bez
   zalomení uvnitř slova a bez zkrácení na 3 řádky (.is-measure) a když se nevejde ani s dělením slov, zmenší
   písmo (.is-long) */
.hm-peek__tag.is-measure {
  display: block;
  overflow-wrap: normal;
  -webkit-line-clamp: none;
}

.hm-peek__tag.is-long {
  font-size: 0.66rem;
}

/* najetí myší jen na zařízeních s myší (na dotyku by zůstalo „viset“), posun a otočení jen bez prefers-reduced-motion */
@media (hover: hover) {
  .hm-peek__btn:hover .hm-peek__circle {
    border-color: var(--primary);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hm-peek__btn:hover .hm-peek__circle {
    transform: translateX(3px);
  }

  .hm-peek.is-again .hm-peek__btn:hover .hm-peek__circle {
    transform: rotate(-24deg);
  }
}

@media (max-width: 640px) {
  /* telefon: užší náhled a menší tlačítko bez popisku (název dalšího obsahu nese aria-label) */
  .hm-peek-host,
  .blog-peek-wrap {
    --hm-peek-space: 28px;
    --hm-peek-fade: 0.5;
  }

  .hm-peek-host {
    --hm-peek-gap: 20px;
  }

  /* dlaždice na celou šířku pásu – další vykukuje v pruhu náhledu (bez náhledu měla 86 % šířky) */
  .blog-grid--peek > .blog-card {
    flex-basis: 100%;
  }

  .hm-peek__hold {
    top: calc(50vh - 20px);
    margin-top: 150px;
  }

  .hm-peek__circle {
    width: 40px;
    height: 40px;
  }

  .hm-peek__icon {
    width: 18px;
    height: 18px;
  }

  .hm-peek__cap {
    display: none;
  }
}

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

/* --- 2. pohled úvodu: Přečte. Zapamatuje si. Odpoví. Zařídí. (varianta A) --- */
.hm-verbs {
  --hm-cycle: 3.6s;
}

.hm-verbs__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2rem, 4.2vw, 4.2rem);
  align-items: center;
}

.hm-verbs__text {
  min-width: 0;
}

.hm-verbs__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
  row-gap: 0.06em;
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 850;
}

.hm-verbs__verb {
  position: relative;
  appearance: none;
  margin: 0;
  padding: 0 0 0.08em;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s ease;
}

.hm-verbs__verb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.12em;
  bottom: 0;
  height: 0.075em;
  border-radius: 99px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

.hm-verbs__verb:hover,
.hm-verbs__verb.is-active {
  color: var(--primary-dark);
}

.hm-verbs__verb.is-active::after {
  background: var(--primary);
  animation: hm-verbs-progress var(--hm-cycle) linear forwards;
}

.hm-verbs.is-still .hm-verbs__verb.is-active::after {
  animation: none;
  transform: scaleX(1);
}

.hm-verbs.is-paused .hm-verbs__verb.is-active::after {
  animation-play-state: paused;
}

@keyframes hm-verbs-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.hm-verbs .hm-lead {
  margin-top: 1.25rem;
  max-width: 54ch;
}

.hm-verbs__rows {
  list-style: none;
  margin: 1.5rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.hm-verbs__row {
  padding: 0.6rem 0.8rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.42;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.hm-verbs__row strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.1rem;
  color: var(--text);
  font-size: 0.9rem;
}

.hm-verbs__row b {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.7rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.hm-verbs__row.is-active {
  border-color: #9fd3b4;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 61, 36, 0.08);
}

.hm-verbs__row.is-active b {
  background: var(--primary);
  color: #fff;
}

.hm-verbs__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

.hm-verbs__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.2rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.hm-verbs__vis {
  margin: 0;
  min-width: 0;
}

.hm-verbs__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow: var(--shadow);
}

.hm-verbs__cap {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.hm-verbs__zone {
  position: relative;
  min-width: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.hm-verbs__zone.is-lit {
  border-color: #a9dbbd;
  background: #fbfefc;
  box-shadow: 0 0 0 5px rgba(39, 168, 91, 0.08);
}

.hm-verbs__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hm-verbs__badge i {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #eef3f0;
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  transition: background 0.3s ease, color 0.3s ease;
}

.hm-verbs__zone.is-lit .hm-verbs__badge {
  color: var(--primary-dark);
}

.hm-verbs__zone.is-lit .hm-verbs__badge i {
  background: var(--primary);
  color: #fff;
}

.hm-verbs__docs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
  border-radius: 12px;
}

.hm-verbs__doc {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e3ece6;
  border-radius: 12px;
  background: #fff;
}

.hm-verbs__paper {
  width: 22px;
  height: 28px;
  border: 1px solid #d3e3d9;
  border-radius: 4px;
  background:
    linear-gradient(#d8e6dd, #d8e6dd) 4px 7px / 12px 2px no-repeat,
    linear-gradient(#d8e6dd, #d8e6dd) 4px 12px / 14px 2px no-repeat,
    linear-gradient(#d8e6dd, #d8e6dd) 4px 17px / 10px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 4px 22px / 7px 2px no-repeat,
    #f6faf7;
}

.hm-verbs__docname,
.hm-verbs__docmeta {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hm-verbs__docname {
  font-size: 0.74rem;
  font-weight: 700;
}

.hm-verbs__docmeta {
  color: var(--muted);
  font-size: 0.68rem;
}

.hm-verbs__docs::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(39, 168, 91, 0.16), transparent);
  opacity: 0;
}

.hm-verbs__zone.is-lit .hm-verbs__docs::after {
  opacity: 1;
  animation: hm-verbs-scan 1.7s ease-in-out infinite;
}

@keyframes hm-verbs-scan {
  from {
    left: -35%;
  }

  to {
    left: 105%;
  }
}

.hm-verbs__flow {
  display: grid;
  place-items: center;
  height: 26px;
}

.hm-verbs__flow span {
  width: 2px;
  height: 100%;
  background: repeating-linear-gradient(180deg, var(--primary) 0 4px, transparent 4px 9px);
  opacity: 0.55;
  animation: hm-verbs-dots 0.9s linear infinite;
}

@keyframes hm-verbs-dots {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 9px;
  }
}

.hm-verbs__lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
}

.hm-verbs__lane {
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid #e3ece6;
  border-radius: 12px;
  background: #fff;
}

.hm-verbs__lane p {
  margin: 0;
  color: #34473b;
  font-size: 0.76rem;
  line-height: 1.45;
}

.hm-verbs__lane .hm-verbs__lanet {
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hm-verbs__lane mark {
  padding: 0 3px;
  border-radius: 4px;
  background: #d8f1e2;
  color: var(--primary-dark);
  font-weight: 700;
}

.hm-verbs__graph {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin-inline: auto;
}

.hm-verbs__graph line {
  stroke: #b9d9c6;
  stroke-width: 1.4;
}

.hm-verbs__graph circle {
  fill: var(--primary);
}

.hm-verbs__graph .hub {
  fill: var(--primary-dark);
}

.hm-verbs__graph text {
  fill: #34473b;
  font-size: 9.5px;
  font-weight: 600;
}

.hm-verbs__kv {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: 0.74rem;
}

.hm-verbs__kv div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px dashed #e3ece6;
}

.hm-verbs__kv div:last-child {
  border-bottom: 0;
}

.hm-verbs__kv dt {
  color: var(--muted);
}

.hm-verbs__kv dd {
  margin: 0 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hm-verbs__kv .is-warn {
  color: #c2412d;
}

.hm-verbs__out {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.hm-verbs__chat {
  display: grid;
  gap: 7px;
}

.hm-verbs__q {
  justify-self: end;
  max-width: 92%;
  margin: 0;
  padding: 7px 11px;
  border-radius: 14px 14px 4px 14px;
  background: #eaf4ee;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.hm-verbs__a {
  max-width: 96%;
  padding: 8px 11px;
  border: 1px solid #d5e8dc;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  font-size: 0.8rem;
  line-height: 1.45;
}

.hm-verbs__a p {
  margin: 0;
}

.hm-verbs__cite {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  margin-top: 6px;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
}

.hm-verbs__acts {
  display: grid;
  align-content: start;
  gap: 8px;
}

.hm-verbs__agent {
  padding: 9px 10px;
  border: 1px solid #e3ece6;
  border-radius: 14px;
  background: #fff;
}

.hm-verbs__agent p {
  margin: 0.25rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.hm-verbs__agent .hm-verbs__agenthead {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
}

.hm-verbs__agenthead img {
  width: 24px;
  height: 24px;
}

.hm-verbs__agent .hm-verbs__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.hm-verbs__btns span {
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
}

.hm-verbs__btns span:first-child {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.hm-verbs__erp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #e3ece6;
  border-radius: 14px;
  background: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.hm-verbs__ok {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

/* --- 2. pohled #why: Proč DocReveal (varianta A) --- */
.hm-tools__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 56px minmax(0, 0.95fr);
  gap: 1.2rem;
  align-items: stretch;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.hm-tools__tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.hm-tools__tool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.hm-tools__tool .hm-ico {
  margin-bottom: 0.7rem;
}

.hm-tools__tool h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.hm-tools__tool p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hm-tools__stop {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.hm-tools__stop i {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0 55%, #e1e9e4 55%);
}

.hm-tools__stop b {
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: #c2412d;
}

.hm-tools__arrow {
  display: grid;
  place-items: center;
  color: var(--primary);
}

.hm-tools__dr {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: 22px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(127, 214, 162, 0.22), transparent 60%),
    linear-gradient(140deg, var(--primary-dark) 0%, #10291b 62%, #0b1510 100%);
  color: #e9f4ed;
  box-shadow: var(--shadow);
}

.hm-tools__logo {
  align-self: flex-start;
  width: auto;
  height: 28px;
}

.hm-tools__lead {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
}

.hm-tools__dr .hm-checks {
  gap: 0.5rem;
  font-size: 0.95rem;
}

.hm-tools__mods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 × 2: názvy modulů jsou v některých jazycích dlouhá složená slova */
  gap: 0.5rem;
  margin-top: auto;
}

.hm-tools__mod {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.55rem 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #cfe5d8;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.hm-tools__mod img {
  width: 30px;
  height: 30px;
}

.hm-tools__cap {
  max-width: 80ch;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* pod 1080 px by obrázek vedle textu neměl místo (sloupce dat v paměti) – text nad obrázkem */
@media (max-width: 1080px) {
  .hm-verbs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .hm-tools__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-tools__arrow {
    height: 40px;
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .hm-verbs__title {
    font-size: clamp(2rem, 9.4vw, 2.5rem);
  }

  .hm-verbs__rows,
  .hm-verbs__facts,
  .hm-verbs__lanes,
  .hm-verbs__out,
  .hm-tools__tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-verbs__cta .btn {
    flex: 1 1 100%;
  }

  .hm-verbs__cap {
    text-align: left;
  }
}

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

  .hm-verbs__verb.is-active::after {
    animation: none;
    transform: scaleX(1);
  }

  .hm-verbs__flow span,
  .hm-verbs__zone.is-lit .hm-verbs__docs::after {
    animation: none;
  }

  .hm-verbs__zone.is-lit .hm-verbs__docs::after {
    opacity: 0;
  }
}

/* ==========================================================================
   Inkoustové efekty horní části webu (2026-10-06) – kreslí ink-art.js. Návrh a as-built: .docClaude/readme-web-ink-art.md
   Úvod: průsvitný zelený inkoust za oběma pohledy („Kaňka v úvodu“). #reveal pod úvodem: dva pohledy s tečkami –
   „Vyvolání“ (doklady Keldmoor, pod inkoustem data, která v nich DocReveal čte) a „Vazby“ (znalostní graf tuší).
   #why: „Jedna struktura“ – slova z faktur v pozadí všech tří pohledů; od 2026-10-09 totéž pozadí i v #use-cases
   a #in-practice. Plátno (.ink-layer) leží ve vrstvě 0 sekce a od 2026-10-09 jen ve sloupci obsahu, obsah (.container)
   nad ním; karty mají vlastní neprůhledné pozadí.
   ========================================================================== */
.hm-hero,
#why,
#use-cases,
#in-practice {
  position: relative;
  isolation: isolate;
}

.hm-hero > .container,
#why > .container,
#use-cases > .container,
#in-practice > .container {
  position: relative;
  z-index: 1;
}

/* Plátno jen ve sloupci obsahu (2026-10-09, zadání Dave), stejně jako plátna #reveal – ne přes celou šířku okna.
   Okraje = okraje .container: šířka min(1160px, 100% - 2.4rem), sekce s plátnem nemají vodorovný padding (shodu
   hlídá test_app_web_home_i18n.py). Po stranách inkoust plynule mizí (40 px, na úzkém displeji 8 % šířky sloupce),
   ať tah nekončí ostrou svislou hranou. Myš mimo sloupec nekreslí – ArtHost bere ukazatel vůči plátnu (ink-art.js). */
.ink-layer {
  --ink-fade: min(40px, 8%);
  position: absolute;
  inset: 0 max(1.2rem, calc((100% - 1160px) / 2));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ink-fade), #000 calc(100% - var(--ink-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--ink-fade), #000 calc(100% - var(--ink-fade)), transparent);
}

.ink-layer canvas,
.ink-reveal__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tlačítko „Pozastavit animace“ (WCAG 2.2.2): jeden společný stav pro všechny tři efekty (localStorage).
   Ukáže se jen u sekce, kde efekt opravdu běží (.is-ink-on nastavuje ink-art.js); popisek se vysune při najetí
   myší nebo fokusu, čtečky obrazovky ho čtou vždy. */
.ink-pause {
  position: absolute;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: 0.7rem;
  z-index: 2;
  display: none;
  align-items: center;
  min-height: 30px;
  padding: 0 0.62rem;
  border: 1px solid rgba(39, 168, 91, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(24, 61, 36, 0.08);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.is-ink-on > .ink-pause {
  display: inline-flex;
}

.ink-pause:hover,
.ink-pause:focus-visible {
  background: #fff;
  border-color: rgba(39, 168, 91, 0.5);
}

.ink-pause:focus-visible {
  outline: 3px solid rgba(39, 168, 91, 0.45);
  outline-offset: 2px;
}

.ink-pause__icon {
  flex: none;
}

.ink-pause__icon--play,
.ink-pause.is-paused .ink-pause__icon--pause {
  display: none;
}

.ink-pause.is-paused .ink-pause__icon--play {
  display: block;
}

.ink-pause__text {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.25s ease, margin 0.25s ease, opacity 0.2s ease;
}

.ink-pause__text[hidden] {
  display: none;
}

.ink-pause:hover .ink-pause__text,
.ink-pause:focus-visible .ink-pause__text {
  max-width: 18em;
  margin-left: 0.4rem;
  opacity: 1;
}

/* --- #reveal: dva pohledy s tečkami nad sekcí jako úvod a #why (2026-10-07) – 1 = „Vyvolání“, 2 = „Vazby“.
   Od 2026-10-08 je pás v kontejneru jako u ostatních sekcí (dřív přes celou šířku okna – obraz se rozléval mimo
   sloupec obsahu) a má náhled 2. pohledu (varianta C, blok „Náhled dalšího obsahu“). Každý pohled má vlastní plátno
   přes celou plochu pohledu a text vlevo; telefon a tablet na výšku: text nahoře, obraz pod ním. --- */
.ink-reveal {
  position: relative;
  isolation: isolate;
  /* jen vodorovně (clip, ne hidden) – tlačítko náhledu drží při posunu stránky (sticky) */
  overflow-x: hidden;
  overflow-x: clip;
  padding-top: clamp(1rem, 2.4vw, 1.9rem);
  background: linear-gradient(180deg, #f1f8f3 0%, var(--bg) 100%);
  -webkit-tap-highlight-color: transparent;
}

.ink-view {
  position: relative;
  height: clamp(560px, 84vh, 820px);
}

.ink-reveal__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  touch-action: pan-y;
}

.ink-view--links .ink-reveal__stage {
  cursor: crosshair;
}

.ink-reveal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  pointer-events: none;
}

.ink-reveal__copy {
  display: grid;
  gap: 1rem;
  max-width: 27rem;
  pointer-events: auto;
}

.ink-reveal__copy .hm-eyebrow {
  margin: 0 0 -0.25rem;
}

.ink-reveal__title {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.95rem);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.ink-reveal__lead {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.58;
}

.ink-reveal__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin: 0.2rem 0 0;
  color: var(--primary-dark);
  font-size: 0.86rem;
  font-weight: 650;
}

.ink-reveal__hint svg {
  flex: none;
}

.ink-reveal__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.ink-hint--touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .ink-hint--mouse {
    display: none;
  }

  .ink-hint--touch {
    display: inline;
  }
}

/* telefon a tablet na výšku: text nahoře, obraz pod ním přes celou šířku (zlom jako u úvodu); výšku pásu podle
   aktivního pohledu nastavuje home.js */
@media (max-width: 900px) {
  .ink-view {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .ink-reveal__inner {
    order: 0;
    display: block;
    height: auto;
    padding: 1.4rem 0;
  }

  .ink-reveal__stage {
    order: 1;
    position: relative;
    inset: auto;
    height: min(118vw, 560px);
  }

  .ink-view--links .ink-reveal__stage {
    height: min(170vw, 700px);
  }

  .ink-reveal__copy {
    max-width: none;
  }

  .ink-reveal__lead {
    max-width: none;
  }
}

/* Bez automatického pohybu není co pozastavovat – obraz se mění jen pod rukou návštěvníka */
@media (prefers-reduced-motion: reduce) {
  .ink-pause {
    display: none !important;
  }

  .ink-pause__text {
    transition: none;
  }
}

/* --- #reveal: 3. pohled „Na co se DocReveal napojí“ (2026-10-09) – nekonečný pás log aplikací (katalog Integration
   Manageru) a bank (registr bank). Řádky log vypisuje infrastructure/scripts/sync_app_web_logos.py do index.html,
   rozjíždí je home.js (initLogoWall): každý řádek zdvojí (kopie aria-hidden) a posouvá stopu o polovinu stálou
   rychlostí, sousední řádky proti sobě. Jede jen aktivní pohled ve viditelné části okna (.is-running), najetí myší
   na řádek ho zastaví, tlačítko „Pozastavit animace“ sekce zastaví všechny (html.ink-paused z ink-art.js). Bez JS
   a při prefers-reduced-motion stojí a řádky jde posouvat ručně. Desktop: text vlevo, pás vpravo; do 900 px pás pod
   textem. Logo banky má v kartičce stejnou plochu jako ostatní (ořez prázdného okraje: --w/--h obsah, --x/--y/--iw/--ih
   celý obrázek, čísla v px násobená --lm-u). Návrh a as-built: .docClaude/readme-web-ink-art.md §9.4c --- */
.ink-view--connect {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4.4vw, 4.25rem);
}

.ink-view--connect .ink-reveal__copy {
  max-width: none;
}

.lm-wall {
  --lm-u: 1px;
  --lm-gap: 12px;
  --lm-fade: 56px;
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.8rem);
  min-width: 0;
}

.lm-group {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.lm-group__cap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.2rem;
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.lm-group__cap svg {
  flex: none;
}

.lm-row {
  position: relative;
  isolation: isolate;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--lm-fade), #000 calc(100% - var(--lm-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--lm-fade), #000 calc(100% - var(--lm-fade)), transparent 100%);
}

.lm-row::-webkit-scrollbar {
  display: none;
}

/* tečkovaná kolej za kartičkami: po ní logo „jede“ */
.lm-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 3px);
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(39, 168, 91, 0.34) 0 4px, transparent 4px 10px);
}

.lm-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
}

.lm-list {
  display: flex;
  gap: var(--lm-gap);
  margin: 0;
  padding: 0 var(--lm-gap) 0 0;
  list-style: none;
}

/* bez JS a při prefers-reduced-motion stojí: první kartička nezačíná pod přechodem okraje */
.lm-wall:not(.is-anim) .lm-list {
  padding-left: var(--lm-fade);
}

.lm-item {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--lm-u));
  height: calc(48 * var(--lm-u));
  padding: 0 calc(16 * var(--lm-u)) 0 calc(10 * var(--lm-u));
  border: 1px solid var(--line);
  border-radius: calc(14 * var(--lm-u));
  background: #fff;
  box-shadow: 0 6px 16px rgba(24, 61, 36, 0.07);
  color: #34473b;
  font-size: calc(14 * var(--lm-u));
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lm-item--app img {
  flex: none;
  width: calc(28 * var(--lm-u));
  height: calc(28 * var(--lm-u));
  border-radius: calc(7 * var(--lm-u));
}

.lm-item--bank {
  gap: calc(9 * var(--lm-u));
  padding: 0 calc(14 * var(--lm-u));
}

.lm-logo {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  width: calc(var(--w) * var(--lm-u));
  height: calc(var(--h) * var(--lm-u));
}

.lm-logo img {
  position: absolute;
  left: calc(var(--x) * var(--lm-u));
  top: calc(var(--y) * var(--lm-u));
  width: calc(var(--iw) * var(--lm-u));
  height: calc(var(--ih) * var(--lm-u));
  max-width: none;
}

.lm-cc {
  color: var(--muted);
  font-size: calc(10.5 * var(--lm-u));
  font-weight: 750;
  letter-spacing: 0.06em;
}

@media (hover: hover) {
  .lm-item:hover {
    border-color: rgba(39, 168, 91, 0.42);
    box-shadow: 0 10px 24px rgba(24, 61, 36, 0.12);
  }
}

/* pás jede (home.js): stopa = seznam + kopie, posun o polovinu = o jeden seznam */
.lm-wall.is-anim .lm-row {
  overflow: hidden;
}

.lm-wall.is-anim .lm-track {
  animation: lm-scroll var(--lm-duration, 90s) linear infinite;
  animation-play-state: paused;
}

.lm-wall.is-anim .lm-row--rev .lm-track {
  animation-direction: reverse;
}

.lm-wall.is-anim.is-running .lm-track {
  animation-play-state: running;
}

.lm-wall.is-anim.is-running .lm-row:hover .lm-track,
.ink-paused .lm-wall.is-anim .lm-track {
  animation-play-state: paused;
}

@keyframes lm-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* tlačítko pauzy sekce i ve 3. pohledu (pás jede, i když inkoust ostatních pohledů ještě nezačal) */
.ink-reveal:has(.ink-view--connect.is-active) > .ink-pause {
  display: inline-flex;
}

@media (max-width: 900px) {
  .ink-view--connect {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    height: auto;
    /* dole místo pro tlačítko pauzy sekce (vpravo dole), ať nepřekrývá poslední řádek */
    padding: 1.4rem 0 2.9rem;
  }
}

@media (max-width: 640px) {
  .lm-wall {
    --lm-u: 0.86px;
    --lm-gap: 10px;
    --lm-fade: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-wall.is-anim .lm-track {
    animation: none;
  }

  .lm-item {
    transition: none;
  }
}

/* === Samostatné stránky z buildu (E2–E4 viditelnosti, 2026-10-12): články blogu, videonávody, rozcestníky ===
   Kostra: lepicí hlavička .topbar.page-bar (logo, Blog, Video guides, přepínač jazykových verzí článku, Book demo),
   obsah .blog-article (článek, video) nebo .page-main (rozcestník) a patička B z titulní stránky v jazyce stránky.
   Stránky skládá infrastructure/scripts/app_web_pages.py, styly odkazují /styles.css (cesta od kořene webu). */
.page-bar__nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

.page-bar__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 1.1rem;
}

.page-bar__links > a:not(.btn) {
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.page-bar__links > a:not(.btn):hover {
  color: var(--primary-dark);
}

.page-lang {
  position: relative;
}

.page-lang summary {
  cursor: pointer;
  list-style: none;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 650;
}

.page-lang summary::-webkit-details-marker {
  display: none;
}

.page-lang ul {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: 0.1rem 0.6rem;
  margin: 0;
  padding: 0.6rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.page-lang a {
  display: block;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}

.page-lang a:hover,
.page-lang a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.page-main {
  padding: 2.4rem 0 4rem;
}

.page-main h1 {
  margin: 0.3rem 0 1.4rem;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}

.page-main h2 {
  margin: 2rem 0 0.8rem;
  font-size: 1.25rem;
}

.page-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-list__item {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
}

.page-list__item a {
  color: var(--text);
  font-size: 1.05rem;
  text-decoration: none;
}

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

.page-list__meta {
  font-size: 0.85rem;
  font-weight: 600;
}

.tut-page__lead {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.tut-page__transcript h3 {
  margin: 1.2rem 0 0.3rem;
  font-size: 1.02rem;
}

@media (max-width: 640px) {
  .page-bar .brand__logo {
    width: 150px;
  }

  .page-bar__links {
    gap: 0.3rem 0.8rem;
    font-size: 0.92rem;
  }

  .page-bar__links .btn {
    display: none;
  }

  .page-lang ul {
    grid-template-columns: minmax(8rem, 1fr);
    max-height: 60vh;
    overflow: auto;
  }
}