/* ============================================================
   podstranky.css — styly navíc pro podstránky /pro-firmy a /pro-gastro.
   Linkováno POUZE z podstránek. Homepage (index.html) a sdílené CSS
   (tokens, homepage-stripe, homepage-motif, v2-extras, closing-order)
   zůstávají beze změny. Nové třídy mají prefix .pf-.
   ============================================================ */


/* ------------------------------------------------------------
   Pás důvěry pod hero — 3 čísla (kompaktní, světlá varianta).
   Vlastní sekce místo tmavého .s-numbers z homepage.
   ------------------------------------------------------------ */
.pf-trust {
  background: #fff;
  border-top: 1px solid rgba(43, 81, 163, .08);
  border-bottom: 1px solid rgba(43, 81, 163, .08);
  padding: clamp(20px, 3vw, 30px) 0;
}
.pf-trust__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px 0;
}
.pf-trust__item {
  flex: 1 1 180px;
  text-align: center;
  padding: 4px 18px;
  position: relative;
}
.pf-trust__item + .pf-trust__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(43, 81, 163, .12);
}
@media (max-width: 560px) {
  .pf-trust__item { flex-basis: 100%; }
  .pf-trust__item + .pf-trust__item::before { display: none; }
}
.pf-trust__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--blue-600);
}
.pf-trust__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}


/* ------------------------------------------------------------
   HERO — SPLIT layout (pouze /pro-firmy). Text vlevo, produktový
   screenshot v browser rámu vpravo. Odlišuje podstránku od
   centrovaného hera homepage. Aurora pozadí (.s-hero::before)
   i typografie (.s-hero__h1 / __lead / __accent) zůstávají sdílené.
   ------------------------------------------------------------ */
.s-hero--split {
  text-align: left;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.s-hero--split .pf-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
/* Zrušit centrování zděděné z homepage (max-width + auto margin)
   a zmenšit nadpis — split sloupec je užší než celý homepage hero. */
.s-hero--split .s-hero__h1 {
  max-width: none;
  margin: 14px 0 0;
  font-size: clamp(33px, 4.4vw, 52px);
  line-height: 1.05;
}
.s-hero--split .s-hero__lead {
  max-width: 54ch;
  margin: 20px 0 0;
}
.pf-hero-copy { min-width: 0; }

/* Trust chips — drobné, tlumené, modrá check ikona */
.pf-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 22px;
}
.pf-hero-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--n-600);
}
.pf-hero-trust__item svg {
  flex-shrink: 0;
  color: #2b51a3;
}

/* Cross-link na druhou audienci (Pro gastro) */
.pf-hero-switch {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}
.pf-hero-switch a {
  color: var(--mint-700);
  font-weight: 600;
  text-decoration: none;
}
.pf-hero-switch a:hover { text-decoration: underline; }
.pf-hero-switch a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }

/* Produktový vizuál vpravo */
.pf-hero-visual { min-width: 0; }
.pf-hero-visual .device-frame { margin: 0; padding-bottom: 28px; }

/* Responzivita — pod 960px jeden sloupec (text nahoře, frame dole) */
@media (max-width: 960px) {
  .s-hero--split .pf-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .s-hero--split .s-hero__cta-row { width: 100%; }
  .s-hero--split .s-hero__cta-row .s-btn { flex: 1 1 200px; justify-content: center; }
}

@media (max-width: 600px) {
  .s-hero--split .s-hero__cta-row .s-btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 48px;
    padding-block: var(--space-4);
  }
}


/* ------------------------------------------------------------
   Timeline „Zavedení" (F2) — tučný úvod každého kroku obarvíme
   značkovou modrou. Sám <strong> jen o chlup převyšoval okolní
   600, barva dá bodům jasný vstupní bod oka. Scoped do podstránek
   (homepage nenačítá podstranky.css → zůstává beze změny).
   ------------------------------------------------------------ */
.s-tl-text strong {
  color: #2b51a3;
}


/* ------------------------------------------------------------
   FUNKCE A MODULY (#moduly) — dvě karty vedle sebe.
   ------------------------------------------------------------ */
.pf-moduly__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 44px;
}
@media (min-width: 820px) {
  .pf-moduly__grid { grid-template-columns: 1fr 1fr; }
}
.pf-moduly__card {
  background: #fff;
  border: 1px solid rgba(43, 81, 163, .12);
  border-radius: 0;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 24px 48px -28px rgba(43, 81, 163, .22);
}
.pf-moduly__card--opt {
  background: var(--n-50);
}
.pf-moduly__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 16px;
}
.pf-moduly__card--opt .pf-moduly__label { color: var(--mint-700); }
.pf-moduly__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.pf-moduly__list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.pf-moduly__list li strong { color: var(--ink); font-weight: 600; }
/* Fajfka jako skutečný <svg> element (ne CSS background-image data-URI —
   ta se opakovaně kazila na zdvojený/rozbitý tvar). Barva jde přes
   currentColor, takže SVG markup je pro obě karty identický. Pozicování
   (absolute, left/top) je stejné jako mělo předchozí ::before, takže
   layout položky (i cena na vlastním řádku u „Volitelné moduly") se nemění. */
.pf-moduly__check {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 111, 184, .10);
  color: var(--blue-600);
}
.pf-moduly__check svg { display: block; }
/* Volitelné moduly — stejná fajfka, jen v mint tónu (var(--mint-700) —
   shodné s .pf-moduly__card--opt .pf-moduly__label) */
.pf-moduly__card--opt .pf-moduly__check {
  background: rgba(17, 126, 93, .10);
  color: var(--mint-700);
}
.pf-moduly__price {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 2px;
}


/* ------------------------------------------------------------
   CENÍK — doplňující řádek pod kartami.
   ------------------------------------------------------------ */
.pf-cenik-note {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}


/* ------------------------------------------------------------
   REFERENCE — odkaz „všechny případové studie".
   ------------------------------------------------------------ */
.pf-cases-all {
  margin-top: 36px;
  text-align: center;
}


/* ------------------------------------------------------------
   FAQ (#faq) — accordion details/summary.
   ------------------------------------------------------------ */
.pf-faq {
  max-width: 820px;
  margin: 44px auto 0;
}
.pf-faq__item {
  border: 1px solid rgba(43, 81, 163, .12);
  border-radius: 0;
  background: #fff;
  padding: 0 clamp(16px, 2.4vw, 26px);
  margin-bottom: 14px;
  overflow: hidden;
}
.pf-faq__item[open] {
  border-color: rgba(14, 111, 184, .30);
  box-shadow: 0 18px 40px -26px rgba(43, 81, 163, .28);
}
.pf-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 2.1vw, 18.5px);
  line-height: 1.35;
  color: var(--ink);
}
.pf-faq__q::-webkit-details-marker { display: none; }
.pf-faq__q::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230E6FB8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .22s ease;
}
.pf-faq__item[open] .pf-faq__q::after {
  transform: rotate(45deg);
}
.pf-faq__a {
  margin: 0;
  padding: 0 0 clamp(18px, 2.4vw, 24px);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}
.pf-faq__a a { color: var(--blue-600); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .pf-faq__q::after { transition: none; }
}


/* ------------------------------------------------------------
   Screenshoty v device-frame (browser) na podstránkách.
   Screeny mají široké světlé okraje — pozadí rámu sladíme
   s barvou okraje (~#f5f6fa), object-fit: contain (nekrop).
   ------------------------------------------------------------ */
.device-frame--browser.pf-shot {
  background: #f5f6fa;
}
.device-frame--browser.pf-shot > img {
  object-fit: contain;
}


/* ------------------------------------------------------------
   Mini-diagram integrace (prefix .ldm-) — přeneseno z homepage
   1:1. Na homepage je jako inline <style> u sekce #integrace;
   tady sdílíme přes podstranky.css.
   ------------------------------------------------------------ */
.ldm-wrap {
  --ld-blue: #2b51a3; --ld-mint: #4fd6b2; --ld-peri: #9ab8ff; --ld-peri-line: #7d9df0;
  --ld-ink: #141d33; --ld-text: #1a2740; --ld-muted: #5a6b8c; --ld-card-border: #e3e9f4;
  position: relative; display: block; text-decoration: none; color: var(--ld-text);
}
.ldm-wrap:focus-visible { outline: 3px solid var(--ld-peri-line); outline-offset: 6px; }
.ldm-badge { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--ld-card-border); box-shadow: 0 8px 24px rgba(20,29,51,.08); padding: 8px 12px; margin-bottom: 14px; }
.ldm-badge i { font-size: 18px; color: var(--ld-blue); }
.ldm-badge strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ld-ink); line-height: 1.2; }
.ldm-badge span { font-size: 10.5px; color: var(--ld-muted); }
.ldm-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ldm-chip { border: 1px solid var(--ld-card-border); background: #fff; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; min-height: 98px; }
.ldm-chip-head { display: flex; gap: 7px; align-items: center; }
.ldm-chip-head i { font-size: 16px; flex-shrink: 0; }
.ldm-chip-head span { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--ld-ink); }
.ldm-chip-sub { font-size: 10.5px; color: var(--ld-muted); line-height: 1.3; }
.ldm-chip--data { border-left: 3px solid var(--ld-blue); }
.ldm-chip--data .ldm-chip-head i { color: var(--ld-blue); }
.ldm-chip--platby { border-left: 3px solid var(--ld-mint); }
.ldm-chip--platby .ldm-chip-head i { color: #1d9e75; }
.ldm-chip--vydej { border-left: 3px solid var(--ld-peri); }
.ldm-chip--vydej .ldm-chip-head i { color: #534ab7; }
.ldm-loga { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.ldm-loga img { height: 20px; width: auto; max-width: 90px; object-fit: contain; filter: grayscale(100%); opacity: .72; }
.ldm-flow { height: 26px; position: relative; }
.ldm-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ldm-fl { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 8; animation: ldmFlow 1.1s linear infinite; }
@keyframes ldmFlow { to { stroke-dashoffset: -10; } }
.ldm-hub { background: var(--ld-ink); padding: 18px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ldm-hub-brand { display: flex; align-items: center; gap: 9px; }
.ldm-hub-brand img { height: 26px; width: auto; display: block; }
.ldm-hub-brand span { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.ldm-hub p { font-size: 11px; color: var(--ld-peri); margin: 0; line-height: 1.35; }
.ldm-hub-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 4px; }
.ldm-mod { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); padding: 8px 6px; font-size: 10.5px; font-weight: 600; color: #dbe4fb; text-align: center; }
.ldm-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.ldm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ldm-legend i { width: 16px; height: 0; border-top: 2px solid currentColor; display: inline-block; }
.ldm-legend b { font-size: 10.5px; font-weight: 600; color: var(--ld-muted); }
.ldm-lg--data { color: var(--ld-blue); }
.ldm-lg--platby { color: #1d9e75; }
.ldm-lg--vydej { color: #534ab7; }
.ldm-caption { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--ld-blue); }
.ldm-caption i { font-size: 15px; transition: transform .15s ease; }
.ldm-wrap:hover .ldm-caption i { transform: translateX(3px); }
.ldm-badge i, .ldm-chip-head i, .ldm-caption i { display: inline-flex; align-items: center; justify-content: center; }
.ldm-badge i svg, .ldm-chip-head i svg, .ldm-caption i svg { width: 1em; height: 1em; display: block; stroke: currentColor; fill: none; }
@media (prefers-reduced-motion: reduce) {
  .ldm-caption i { transition: none; }
  .ldm-wrap:hover .ldm-caption i { transform: none; }
  .ldm-fl { animation: none; }
}
@media (max-width: 380px) {
  .ldm-tier { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   Mobilní rendering nových nadpisů (dlouhá česká slova, 360 px).
   Jemné doladění clamp() pouze pro podstránky.
   ------------------------------------------------------------ */
@media (max-width: 400px) {
  .s-hero__h1 { font-size: clamp(32px, 9vw, 44px); }
  .s-exp__h2  { font-size: clamp(25px, 7.4vw, 34px); overflow-wrap: break-word; }
  .pf-faq__q  { font-size: 16px; }
}


/* ============================================================
   PŘÍPADOVÉ STUDIE  (/reference/*.html) — prefix .cs-
   Linkováno z detailů studií i přehledové stránky /reference/.
   Reuse z homepage: s-nav, s-eyebrow, s-numbers__grid, s-number-item,
   s-exp__features, s-cases, s-case-card, s-btn, s-gradient-moment, footer.
   Nové bloky (breadcrumb, hero případovky, V kostce světlá, výsledky,
   quote / „Co ocenil", odkaz na blog, další reference) mají prefix .cs-.
   ============================================================ */

/* ---------- Breadcrumb „← Všechny reference" ---------- */
.cs-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
}
.cs-breadcrumb:hover { color: var(--blue-700); }
.cs-breadcrumb:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }

/* ---------- Hero případovky — čistě typografický (logo + text) ---------- */
.cs-hero {
  position: relative;
  overflow: hidden;
  background: var(--n-50);
  border-bottom: 1px solid var(--line);
  padding: clamp(34px, 5vw, 56px) 0 clamp(30px, 4.2vw, 48px);
}
.cs-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}
.cs-hero__tag {
  display: inline-block;
  margin-top: 20px;
}
.cs-hero__logo {
  display: block;
  height: clamp(46px, 6.5vw, 62px);
  width: auto;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
  margin: 22px 0 0;
}
.cs-hero__logos--dual {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 22px 0 0;
}
.cs-hero__logos--dual .cs-hero__logo { margin: 0; }
.cs-hero__h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 18px 0 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cs-hero__lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 62ch;
}

/* ---------- „V kostce" — světlý kompaktní pás (reuse s-numbers grid) ---------- */
.cs-facts {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: clamp(26px, 3.6vw, 38px) 0;
}
.cs-facts .s-numbers__grid { gap: 26px 22px; }
@media (min-width: 720px) { .cs-facts .s-numbers__grid { gap: 0; } }
/* světlá varianta — přebarvit číslo i dělící linku (původ je pro tmavý pás) */
.cs-facts .s-number-item + .s-number-item::before { background: rgba(14, 111, 184, .14); }
.cs-facts .s-number-item__num {
  color: var(--blue-600);
  font-size: clamp(24px, 3.2vw, 34px);
}
.cs-facts .s-number-item__label {
  color: var(--muted);
  max-width: 20ch;
}

/* ---------- Tělo studie — úzký čtecí sloupec ---------- */
.cs-article {
  background: #fff;
  padding: clamp(48px, 7vw, 82px) 0;
}
.cs-article--tail { padding-top: clamp(40px, 5.5vw, 62px); }
.cs-col { max-width: 780px; }
.cs-block + .cs-block { margin-top: clamp(32px, 4.5vw, 50px); }
.cs-sec__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.7vw, 29px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.cs-prose {
  font-size: clamp(16px, 1.9vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 68ch;
}
.cs-prose + .cs-prose { margin-top: 14px; }
/* odrážky Řešení — reuse s-exp__features, jen širší čtecí míra */
.cs-block .s-exp__features { max-width: 68ch; }

/* ---------- Výsledky — číselné karty (tmavý pás, reuse s-numbers) ---------- */
.cs-results {
  background: var(--ink);
  padding: clamp(48px, 7vw, 82px) 0;
}
.cs-results__head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 40px); }
.cs-results__eyebrow { color: var(--blue-300); }
.cs-results__eyebrow::before { background: var(--blue-300); }
.cs-results__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.7vw, 30px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}
.cs-results__grid--3 { gap: 40px 28px; }
@media (min-width: 720px) {
  .cs-results__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Citace / „Co FARMTEC ocenil" ---------- */
.cs-quote,
.cs-appraisal {
  margin: 0;
  padding: clamp(26px, 4vw, 40px) clamp(24px, 4vw, 44px);
  background: var(--n-50);
  border-left: 3px solid var(--blue-600);
  border-radius: 0 12px 12px 0;
}
.cs-appraisal { border-left-color: var(--mint-500); }
.cs-quote__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.5vw, 25px);
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.cs-quote__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
}
.cs-quote__name { font-weight: 700; font-size: 15px; color: var(--ink); }
.cs-quote__role { font-size: 14px; color: var(--muted); }
.cs-appraisal__h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ink);
  margin: 0 0 16px;
}
.cs-appraisal .s-exp__features li::before {
  background-color: rgba(34, 185, 138, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23117E5D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- Odkaz na blog ---------- */
.cs-bloglink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(26px, 4vw, 38px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--blue-600);
  text-decoration: none;
  transition: gap .2s var(--ease, ease);
}
.cs-bloglink:hover { color: var(--blue-700); gap: 12px; }
.cs-bloglink:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }

/* ---------- Další reference / přehled ---------- */
.cs-more {
  background: var(--n-50);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 92px) 0;
}
.cs-more__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 40px); }
.cs-more__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.cs-more__lead {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

/* ---------- Carousel „Další reference" (listování) ---------- */
.cs-more__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.cs-carousel__nav {
  display: flex;
  gap: 10px;
  flex: none;
}
.cs-carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--blue-600);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.cs-carousel__btn:hover { border-color: var(--blue-300); background: var(--blue-50); color: var(--blue-700); }
.cs-carousel__btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.cs-carousel__btn:disabled { opacity: .35; cursor: default; background: #fff; border-color: var(--line); color: var(--muted); }

.cs-carousel__track {
  display: flex;
  gap: 18px;
  margin-top: clamp(24px, 3.5vw, 34px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-300) transparent;
}
.cs-carousel__track::-webkit-scrollbar { height: 8px; }
.cs-carousel__track::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 40px; }
.cs-carousel__track::-webkit-scrollbar-track { background: rgba(14, 111, 184, .08); border-radius: 40px; }
.cs-carousel__track .s-case-card {
  flex: 0 0 clamp(260px, 80%, 340px);
  scroll-snap-align: start;
}
@media (min-width: 980px) {
  .cs-carousel__track .s-case-card { flex-basis: 340px; }
}
.cs-more__all { margin-top: 22px; }
.cs-morelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue-600);
  text-decoration: none;
  transition: gap .2s var(--ease, ease);
}
.cs-morelink:hover { color: var(--blue-700); gap: 12px; }
.cs-morelink:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }
/* na malých displejích ovládá swipe — šipky skryté */
@media (max-width: 640px) {
  .cs-carousel__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-carousel__track { scroll-behavior: auto; }
}

/* ---------- Mobilní doladění dlouhých H1 (360 px) ---------- */
@media (max-width: 400px) {
  .cs-hero__h1 { font-size: clamp(27px, 8.4vw, 40px); }
}


/* ============================================================
   /pro-gastro — MINT SCOPE (.page-gastro)
   Zrcadlo /pro-firmy v mintové rodině. Přebarvuje akcentové prvky
   sdíleného s-* systému a nese komponenty migrované ze starých
   (odstraněných) souborů homepage-b(2).css / pro-firmy.css / pro-gastro.css.
   Vše je scoped pod .page-gastro → nulový dopad na /pro-firmy.
   Mint paleta:  světlá #dff6ee · střední #4fd6b2 · text #0f6e56 · tlačítko #0f9d78
   ============================================================ */

/* ---- Akcenty: eyebrow, gradientové nadpisy ---- */
.page-gastro .s-eyebrow { color: #0f6e56; }
.page-gastro .s-eyebrow::before { background: #0f6e56; }

.page-gastro .s-hero__accent,
.page-gastro .s-op-accent {
  background: linear-gradient(90deg,
    #0f9d78 0%, #22B98A 30%, #4fd6b2 55%, #0f9d78 80%, #117E5D 100%);
  background-size: 300% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Tlačítka: primární i mint → sytější mint kvůli kontrastu s bílým textem ---- */
.page-gastro .s-btn--primary,
.page-gastro .s-btn--mint {
  background: #0f9d78;
  box-shadow: 0 1px 2px rgba(15,157,120,.30), 0 4px 12px rgba(15,157,120,.18);
}
.page-gastro .s-btn--primary:hover,
.page-gastro .s-btn--mint:hover {
  background: #0d8768;
  box-shadow: 0 2px 4px rgba(15,157,120,.38), 0 8px 20px rgba(15,157,120,.22);
}
/* ghost jen na světlém podkladu (hero) — na tmavém closing bandu drží bílou (řídí .s-gm-inner) */
.page-gastro .s-hero .s-btn--ghost {
  border-color: color-mix(in srgb, #0f9d78 34%, #fff);
  color: #0f6e56;
}
.page-gastro .s-hero .s-btn--ghost:hover {
  border-color: #0f9d78;
  background: #dff6ee;
  color: #0f6e56;
}

/* ---- Hero delty (sjednocené .pf-hero-* třídy) + ostré rohy sdíleného FAQ ---- */
.page-gastro .pf-hero-trust__item svg { color: #0f9d78; }
.page-gastro .pf-hero-switch a { color: #2b51a3; }
.page-gastro .pf-faq__item { border-radius: 0; }

/* ---- Trust pás (G2) — čísla + dělič mint ---- */
.page-gastro .pf-trust__num { color: #0f9d78; }
.page-gastro .pf-trust__item + .pf-trust__item::before { background: rgba(17,126,93,.14); }
.page-gastro .pf-trust {
  border-top-color: rgba(17,126,93,.10);
  border-bottom-color: rgba(17,126,93,.10);
}

/* ---- Timeline (G6) — linka, badge glow i pozadí do mintu ---- */
.page-gastro .s-timeline::before {
  background: linear-gradient(90deg, #0f9d78, #4fd6b2, #a7ecd8);
}
.page-gastro .s-tl-badge--1 { background: linear-gradient(135deg, #bdeed6 0%, #d7f5ea 100%); --tl-glow: #0f9d78; }
.page-gastro .s-tl-badge--2 { background: linear-gradient(135deg, #c9f0df 0%, #bfe9de 100%); --tl-glow: #149E73; }
.page-gastro .s-tl-badge--3 { background: linear-gradient(135deg, #d2f3e6 0%, #b3e5d3 100%); --tl-glow: #22B98A; }
.page-gastro .s-tl-outcome { color: #0f6e56; }
@media (max-width: 720px) {
  .page-gastro .s-timeline::before {
    background: linear-gradient(180deg, #0f9d78, #4fd6b2, #a7ecd8);
  }
}

/* ---- Pricing (G7) — pás pozadí, enterprise odkaz, „try" hover ---- */
.page-gastro .s-pricing::before {
  background:
    radial-gradient(ellipse 50% 60% at 10% 30%, rgba(34,185,138,.16) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 90% 70%, rgba(15,157,120,.12) 0%, transparent 55%);
}
.page-gastro .s-pricing__enterprise a { color: #0f6e56; }
.page-gastro .s-pricing-card__try:hover { color: #0f9d78; }

/* ---- Závěrečný gradient band (G10) — orby do mintu ---- */
.page-gastro .s-gm-orb--azure  { background: rgba(15,157,120,.55); }
.page-gastro .s-gm-orb--violet { background: rgba(34,185,138,.60); }
.page-gastro .s-gm-orb--pink   { background: rgba(79,214,178,.45); }


/* ------------------------------------------------------------
   G1 — SPLIT HERO — sjednoceno na sdílené .pf-hero-* třídy (definice výše).
   Zde zůstává jen gastro-specifický eyebrow s popiskem; přebarvení
   (mint ikony trust chips, modrý cross-link) řeší .page-gastro scope.
   ------------------------------------------------------------ */

/* eyebrow badge + doplňkový popisek */
.pg-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 6px;
}
.pg-hero-eyebrow .s-eyebrow { margin-bottom: 0; }
.pg-hero-eyebrow__sub { font-size: 13.5px; color: var(--muted); }



/* ------------------------------------------------------------
   Hlavičky sekcí na /pro-gastro
   ------------------------------------------------------------ */
.page-gastro .pg-sec-head { max-width: 760px; margin: 0 auto; text-align: center; }
.page-gastro .pg-sec-lead {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 14px auto 0;
  max-width: 60ch;
}


/* ------------------------------------------------------------
   G3 — PROBLÉM → ŘEŠENÍ  (migrace, prefix pg-)
   ------------------------------------------------------------ */
.page-gastro .pg-ps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 720px) {
  .page-gastro .pg-ps-grid { grid-template-columns: 1fr 1fr; }
}
.page-gastro .pg-ps-pair {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.page-gastro .pg-problem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  flex: 1;
}
.page-gastro .pg-problem-icon { font-size: 18px; flex: none; }
.page-gastro .pg-ps-arrow { color: #0f9d78; flex: none; display: flex; }
.page-gastro .pg-solution {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  flex: 1.2;
}
.page-gastro .pg-solution svg { color: #0f9d78; flex: none; margin-top: 2px; }

.page-gastro .pg-solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 44px;
  margin-top: 40px;
}
@media (min-width: 720px) {
  .page-gastro .pg-solutions-grid { grid-template-columns: 1fr 1fr; }
}
.page-gastro .pg-solution-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-gastro .pg-solution-item__head svg { color: #0f9d78; flex: none; }
.page-gastro .pg-solution-item__head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink);
  margin: 0;
}
.page-gastro .pg-solution-item p {
  margin: 8px 0 0 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* ------------------------------------------------------------
   G4 — VÝHODY / FEATURE KARTY (styl „Moduly", mint akcent)
   ------------------------------------------------------------ */
.page-gastro .pg-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}
@media (min-width: 600px) { .page-gastro .pg-features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .page-gastro .pg-features-grid { grid-template-columns: 1fr 1fr 1fr; } }
.page-gastro .pg-feat-card {
  background: #fff;
  border: 1px solid rgba(17,126,93,.14);
  border-top: 3px solid #0f9d78;
  border-radius: 0;
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 48px -30px rgba(17,126,93,.30);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.page-gastro .pg-feat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 56px -28px rgba(17,126,93,.36);
}
.page-gastro .pg-feat-icon {
  width: 60px;
  height: 60px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #dff6ee;
  flex: none;
}
.page-gastro .pg-feat-icon img { object-fit: contain; }
.page-gastro .pg-feat-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}
.page-gastro .pg-feat-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}


/* ------------------------------------------------------------
   G5 — ROLE KARTY (migrace, mint)
   ------------------------------------------------------------ */
.page-gastro .pg-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}
@media (min-width: 860px) { .page-gastro .pg-roles-grid { grid-template-columns: repeat(4, 1fr); } }
.page-gastro .pg-role-card {
  background: #fff;
  border-radius: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #cdefe1;
}
.page-gastro .pg-role-icon {
  width: 56px;
  height: 56px;
  background: #dff6ee;
  border-radius: 0;
  display: grid;
  place-items: center;
  flex: none;
}
.page-gastro .pg-role-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: #0f6e56;
  margin: 0;
}
.page-gastro .pg-role-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}


/* ------------------------------------------------------------
   G7 — CENÍK: 3 pilíře, kalkulačka, pricing karta (migrace, mint)
   ------------------------------------------------------------ */
.page-gastro .pg-model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  max-width: 640px;
  margin: 40px auto 32px;
}
@media (max-width: 600px) { .page-gastro .pg-model-grid { grid-template-columns: 1fr; } }
.page-gastro .pg-model-card {
  background: #fff;
  border: 1px solid #9fe0c7;
  border-radius: 0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.page-gastro .pg-model-card--accent { border-color: #0f9d78; border-width: 2px; background: #dff6ee; }
.page-gastro .pg-model-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  color: #0f9d78;
  letter-spacing: -.02em;
  line-height: 1;
}
.page-gastro .pg-model-label { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* kalkulačka */
.page-gastro .pg-calc { margin: 40px 0 32px; display: flex; justify-content: center; }
.page-gastro .pg-calc-inner {
  background: #fff;
  border: 1.5px solid #9fe0c7;
  border-radius: 0;
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(34,185,138,.08);
}
.page-gastro .pg-calc-label { display: block; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.page-gastro .pf-calc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.page-gastro .pg-calc-inputs { display: flex; gap: 12px; flex: 1; flex-wrap: wrap; }
.page-gastro .pg-calc-field-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.page-gastro .pg-calc-sublabel { font-size: 12px; color: var(--muted); font-weight: 500; }
.page-gastro .pf-calc-field {
  flex: 1;
  min-width: 140px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 0;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px;
  color: var(--ink);
  background: var(--n-50);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.page-gastro .pf-calc-field:focus {
  border-color: #0f9d78;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34,185,138,.14);
}
.page-gastro .pf-calc-out {
  flex: 1;
  min-width: 180px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--muted);
  text-align: right;
}
.page-gastro .pf-calc-out--active { color: #0f9d78; }
.page-gastro .pf-calc-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }

/* pricing karta (samostatná, mint) */
.page-gastro .pg-pricing-single { max-width: 560px; margin: 8px auto 0; }
.page-gastro .pg-pricing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid #0f9d78;
  border-radius: 0;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-md);
}


/* ------------------------------------------------------------
   G8 — REFERENCE: testimonial karty + logo zeď + case study (migrace)
   ------------------------------------------------------------ */
.page-gastro .refs-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 44px; }
@media (min-width: 640px) { .page-gastro .refs-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .page-gastro .refs-grid { grid-template-columns: repeat(3, 1fr); } }
.page-gastro .ref-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.page-gastro .ref-stars { display: flex; gap: 3px; color: #E5A93C; margin-bottom: 12px; }
.page-gastro .ref-card blockquote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  flex: 1;
  font-style: italic;
}
.page-gastro .ref-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.page-gastro .ref-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.page-gastro .ref-who b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; display: block; }
.page-gastro .ref-who span { font-size: 13px; color: var(--muted); }

/* logo zeď (marquee) */
.page-gastro .client-logos { margin-top: 44px; padding-top: 16px; }
.page-gastro .client-logos-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted-soft);
  text-align: center;
  margin: 0 0 16px;
}
.page-gastro .client-logos-outer {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.page-gastro .client-logos-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: pgLogoMarquee 40s linear infinite;
}
.page-gastro .client-logos-outer:hover .client-logos-track { animation-play-state: paused; }
.page-gastro .client-logo-slot {
  width: 148px;
  height: 60px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  transition: border-color var(--dur-base);
  flex: none;
}
.page-gastro .client-logo-slot:hover { border-color: #9fe0c7; }
.page-gastro .client-logo-ph {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -.01em;
  white-space: nowrap;
}
@keyframes pgLogoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-gastro .client-logos-track { animation: none; }
}

/* case study (placeholder) */
.page-gastro .pg-case-study {
  margin-top: 48px;
  background: #0f9d78;
  border-radius: 0;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  color: #fff;
}
.page-gastro .pf-cs-badge {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 0;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: none;
}
.page-gastro .pf-cs-body { flex: 1; min-width: 240px; }
.page-gastro .pf-cs-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2vw, 20px); margin: 0 0 8px; }
.page-gastro .pf-cs-body p { font-size: 14px; opacity: .85; line-height: 1.55; margin: 0 0 12px; }
.page-gastro .pf-cs-link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.page-gastro .pf-cs-link:hover { text-decoration: underline; }
.page-gastro .pf-cs-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.page-gastro .pf-cs-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; }
.page-gastro .pf-cs-label { font-size: 12px; opacity: .8; text-align: center; max-width: 120px; }

/* ---- Reference gastro (G8) — vodorovný karusel ---- */
.pg-refs{position:relative;margin-top:40px}
.pg-refs-head{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px}
.pg-refs-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--n-200);border-radius:0;color:var(--n-700);
  cursor:pointer;transition:border-color .18s,color .18s,opacity .18s}
.pg-refs-btn:hover{border-color:var(--mint-500);color:var(--mint-700)}
.pg-refs-btn:focus-visible{outline:2px solid var(--mint-500);outline-offset:2px}
.pg-refs-btn[disabled]{opacity:.35;cursor:default}
.pg-refs-btn[disabled]:hover{border-color:var(--n-200);color:var(--n-700)}

.pg-refs-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.pg-refs-track::-webkit-scrollbar{display:none}
.pg-refs-track:focus-visible{outline:2px solid var(--mint-500);outline-offset:4px}
.pg-refs-track > .ref-card{flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start;margin:0}

.pg-refs-dots{display:flex;gap:6px;justify-content:center;margin-top:24px}
.pg-refs-dot{width:7px;height:7px;border-radius:50%;background:var(--n-300);
  transition:background .2s,width .2s}
.pg-refs-dot.is-active{background:var(--mint-600);width:20px;border-radius:0}

@media (max-width:900px){
  .pg-refs-track > .ref-card{flex:0 0 calc((100% - 24px) / 2)}
}
@media (max-width:620px){
  .pg-refs-track{gap:16px}
  .pg-refs-track > .ref-card{flex:0 0 88%}
  .pg-refs-head{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pg-refs-track{scroll-behavior:auto}
}

/* ---- Slot pro logo provozu v ref-card (nahrazuje iniciálový avatar, až bude logo k dispozici) ---- */
.ref-logo{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.ref-logo img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
.ref-logo img[hidden]{display:none}
.ref-logo__fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--n-100);color:var(--mint-700);font-size:11px;
  font-weight:800;letter-spacing:.02em}
.ref-logo__fallback[hidden]{display:none}
.ref-logo .ref-avatar{width:48px;height:48px;flex:0 0 48px}
.ref-logo--dark{background:#0c0c0c;border-radius:50%;padding:8px;box-sizing:border-box}
.ref-logo--dark .ref-logo__fallback{background:transparent;color:#fff}


/* ============================================================
   KDO JSME  (/kdo-jsme.html) — sekce Milníky
   ============================================================ */

/* ---- .s-timeline--vertical — jednosloupcová varianta pro delší obsah
   (rok + nadpis + text u každého kroku), kroky pod sebou, zarovnané doleva.
   Rozšiřuje .s-timeline / .s-tl-step / .s-tl-badge z v2-extras.css o svislé
   zobrazení na VŠECH šířkách, ne jen pod 720px jako výchozí mobilní chování
   — v2-extras.css se přitom nemění. Barvy, typografie a .s-tl-badge se dědí
   beze změny z původní komponenty.

   Gradient linky (::before) přebírá STEJNÉ hex hodnoty, jaké komponenta
   dnes používá ve svém vlastním mobilním (<720px) stavu ve v2-extras.css —
   nejde o nové barvy, jen o rozšíření existující hodnoty mimo media query.

   Putující záblesk (::after) v mobilním stavu používá @keyframes tlFlashV,
   které jsou ve v2-extras.css zapsané UVNITŘ @media(max-width:720px), a mimo
   něj tedy nejsou k dispozici. Radši ho v této variantě vypínáme, než abychom
   keyframes duplikovali v souboru, který nesmíme editovat.

   prefers-reduced-motion: ověřeno — stávající pravidlo ve v2-extras.css
   (transform:none / display:none / animation:none, vše s !important) je
   napsané nezávisle na ose (funguje pro scaleX i scaleY) a pro tento
   modifikátor platí beze změny. Nic se nedoplňuje.
   ------------------------------------------------------------ */
.s-timeline--vertical {
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.s-timeline--vertical::before {
  top: 46px;
  bottom: 46px;
  left: 46px;
  right: auto;
  width: 2px;
  height: auto;
  background: linear-gradient(180deg, #2b51a3, #9ab8ff, #4fd6b2);
  transform: scaleY(0);
  transform-origin: top center;
}
.s-timeline--vertical.is-in::before { transform: scaleY(1); }
.s-timeline--vertical::after { display: none; }

.s-timeline--vertical .s-tl-step {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-5);
}
.s-timeline--vertical .s-tl-text {
  max-width: 56ch;
}

/* ---- Rok / nadpis / text uvnitř kroku (nové — .s-tl-text nese jen
   jeden <p> ve zdrojové komponentě, tady je to obal na tři prvky) ---- */
.s-tl-year {
  display: block;
  font-size: var(--t-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--space-1);
}
.s-tl-h3 {
  font-size: var(--t-h4);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.s-tl-text p {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Badge varianty pro kroky 4–6 (v2-extras.css definuje jen --1 až --3) ---- */
#milniky .s-tl-badge--4 { background: linear-gradient(135deg, var(--blue-100) 0%, var(--mint-100) 100%); --tl-glow: var(--blue-600); }
#milniky .s-tl-badge--5 { background: linear-gradient(135deg, var(--mint-100) 0%, var(--blue-100) 100%); --tl-glow: var(--mint-600); }
#milniky .s-tl-badge--6 { background: linear-gradient(135deg, var(--blue-200) 0%, var(--mint-200) 100%); --tl-glow: var(--blue-700); }
/* stejný glow-trigger, jaký má v2-extras.css pro kroky 1–3, pokračuje pro 4–6.
   @keyframes tlBadgeGlow jsou ve v2-extras.css zapsané MIMO media query,
   tedy globálně dostupné — jen na ně tady navazujeme dalšími zpožděními. */
#milniky .s-timeline.is-in .s-tl-step:nth-child(4) .s-tl-badge { animation: tlBadgeGlow .55s 2.7s ease-out forwards; }
#milniky .s-timeline.is-in .s-tl-step:nth-child(5) .s-tl-badge { animation: tlBadgeGlow .55s 3.6s ease-out forwards; }
#milniky .s-timeline.is-in .s-tl-step:nth-child(6) .s-tl-badge { animation: tlBadgeGlow .55s 4.5s ease-out forwards; }

/* ---- Rozšíření stupnice .s-reveal--d* (homepage-stripe.css definuje jen d1–d4) ---- */
.s-reveal-ready .s-reveal--d5 { transition-delay: .40s; }
.s-reveal-ready .s-reveal--d6 { transition-delay: .48s; }


/* ---- YouTube lazy facade — náhledový obrázek + tlačítko přehrání.
   Iframe se vytvoří (a cookies YouTube se načtou) až po prvním kliknutí. --- */
.s-yt-facade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-4);
  padding: 0;
  border: none;
  background-color: var(--n-200);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.s-yt-facade:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.s-yt-facade__play {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.s-yt-facade:hover .s-yt-facade__play,
.s-yt-facade:focus-visible .s-yt-facade__play {
  background: var(--blue-600);
  transform: scale(1.08);
}
.s-yt-facade__notice {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.s-yt-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-4);
  border: none;
}


/* ---- Tým — .kj-team-* karta s fotkou. Komponenta v projektu zatím
   neexistovala; typografie a barvy odvozené z .pg-feat-card
   (page-gastro), jen bez mint scope — akcent je primární modrá.
   Fotky (obrazky/tym/*.png) jsou reálné fotografie s různorodým,
   neprůhledným pozadím (studio, exteriér, ilustrace) — žádná z nich
   nemá průhledné pozadí, takže plocha fotky dostává neutrální teplý
   token (--n-100), který nekontrastuje s žádnou z nich. Fotky jsou
   navíc čtvercové (300×300), takže se contain vykreslí bez mezer. ---- */
.kj-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-10);
}
@media (min-width: 600px) { .kj-team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .kj-team-grid { grid-template-columns: 1fr 1fr 1fr; } }

.kj-team-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--blue-600) 14%, transparent);
  border-top: 3px solid var(--blue-600);
  border-radius: 0;
  padding: clamp(var(--space-6), 2.6vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.kj-team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.kj-team-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--n-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kj-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.kj-team-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-body); /* 17 px — stejná velikost jako u .pg-feat-card h3, jen dostupná coby token */
  color: var(--ink);
  margin: 0;
}
.kj-team-role {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--n-600); /* var(--muted) dávalo jen 3.9:1 na bílé a 3.53:1 na --blue-50 (hiring karta) — nesplňovalo WCAG AA 4.5:1 */
}
.kj-team-bio {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.kj-team-bio a { color: var(--blue-600); font-weight: var(--fw-semibold); }
.kj-team-bio a:hover { color: var(--blue-700); }

/* ---- Hiring karta — stejná struktura, odlišený rámeček + podklad v primární modré ---- */
.kj-team-card--hiring {
  background: var(--blue-50);
  border: 2px solid var(--blue-600);
}


/* ============================================================
   HIRING  (/hiring.html)
   ============================================================ */

/* ---- Hero — .cs-hero sama o sobě je jen H1 + lead (viz kdo-jsme.html);
   hiring.html navíc potřebuje H2 podnadpis a ilustraci, pro obojí tu
   nic existujícího nesedělo. ---- */
.hr-hero-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h4);
  color: var(--blue-600);
  margin: var(--space-2) 0 0;
}
.hr-hero-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
  margin: var(--space-8) auto 0;
}