/* ============================================================
   LunchDrive V2 — doplňkové styly nad stripe/motif/tokens
   (CookieYes tisk, coming-soon stránky, drobnosti formuláře)
   Builds on: tokens.css + homepage-stripe.css
   ============================================================ */

/* ---------- Hero — plovoucí mizející ikonky (jako na původní homepage) ---------- */
.s-hero { position: relative; }
.s-hero__inner { position: relative; z-index: 1; }
.s-hero__floats {
  /* vystředěný box podle šířky obsahu — ikonky lemují text, ne okraje stránky */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
@keyframes hfa {
  0%, 100% { opacity: 0;   transform: scale(.96) translateY(4px); }
  15%, 50% { opacity: .18; transform: scale(1)   translateY(0); }
  65%      { opacity: 0;   transform: scale(.96) translateY(-4px); }
}
.s-hero__float {
  position: absolute;
  width: 52px; height: 52px;
  object-fit: contain;
  animation: hfa 12s ease-in-out both infinite;
}
.s-hero__float--a { top: 34%; left: 0%;  animation-delay: 0s; }    /* control-system — vlevo */
.s-hero__float--b { top: 8%;  right: 2%; animation-delay: 2.4s; }  /* cutlery — vpravo nahoře */
.s-hero__float--c { top: 40%; right: 4%; animation-delay: 4.8s; }  /* menu — vpravo */
.s-hero__float--d { top: 5%;  left: 9%;  animation-delay: 7.2s; }  /* miska se salátem — vlevo nahoře */
.s-hero__float--e { display: none; }
@media (max-width: 767px) {
  .s-hero__float { width: 32px; height: 32px; }
  .s-hero__float--a { top: 32%; left: 2%; }
  .s-hero__float--b { top: 6%;  right: 4%; }
  .s-hero__float--c { top: 42%; right: 4%; }
  .s-hero__float--d { top: 4%;  left: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero__float { animation: none; opacity: .1; }
}

/* ---------- Hero — vyvážená typografická hierarchie (delší texty) ---------- */
.s-hero__h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.07;
  letter-spacing: -0.022em;
  max-width: 20ch;
  text-wrap: balance;
}
/* podnadpis „Personalista se stará o lidi…" — zvětšen, ať drží hierarchii */
.s-hero__lead {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  max-width: 56ch;
}
/* mobil — menší nadpis (ať se vejde a hezky centruje) + stejně velká tlačítka */
@media (max-width: 600px) {
  .s-hero__h1 {
    max-width: none;
    text-align: center;
    margin-inline: auto;
    text-wrap: wrap; /* vypnout balance → klasické centrované zalomení */
  }
  /* obě hero tlačítka stejně dlouhá a velká — pod sebou na celou šířku */
  .s-hero__cta-row {
    flex-direction: column;
    align-items: center;
  }
  .s-hero__cta-row .s-btn {
    width: 100%;
    max-width: 380px;
  }
}

/* ---------- Hero — doplňující (méně výrazný) text pod hlavním leadem ---------- */
.s-hero__sub {
  max-width: 56ch;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted, #79828c);
}

/* ---------- Rozcestníkové karty — tlumená tlačítka, plná barva až na hover ---------- */
.s-hero__route--firmy .s-btn--primary {
  background: var(--blue-50);
  color: var(--blue-700);
  box-shadow: none;
  border: 1px solid var(--blue-200);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.s-hero__route--firmy:hover .s-btn--primary,
.s-hero__route--firmy .s-btn--primary:hover,
.s-hero__route--firmy .s-btn--primary:focus-visible {
  background: var(--blue-600);
  color: #fff;
  border-color: var(--blue-600);
  box-shadow: 0 1px 2px rgba(14,111,184,.35), 0 4px 12px rgba(14,111,184,.18);
}
.s-hero__route--gastro .s-btn--mint {
  background: var(--mint-50);
  color: var(--mint-700);
  box-shadow: none;
  border: 1px solid var(--mint-200);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.s-hero__route--gastro:hover .s-btn--mint,
.s-hero__route--gastro .s-btn--mint:hover,
.s-hero__route--gastro .s-btn--mint:focus-visible {
  background: var(--mint-500);
  color: #fff;
  border-color: var(--mint-500);
  box-shadow: 0 1px 2px rgba(34,185,138,.30);
}

/* mobil (karty pod sebou, bez hoveru) — tlačítka rovnou plně barevná */
@media (max-width: 679px) {
  .s-hero__route--firmy .s-btn--primary {
    background: var(--blue-600);
    color: #fff;
    border-color: var(--blue-600);
    box-shadow: 0 1px 2px rgba(14,111,184,.35), 0 4px 12px rgba(14,111,184,.18);
  }
  .s-hero__route--gastro .s-btn--mint {
    background: var(--mint-500);
    color: #fff;
    border-color: var(--mint-500);
    box-shadow: 0 1px 2px rgba(34,185,138,.30);
  }
}

/* ---------- Hero pozadí — výraznější tekoucí barevné valéry (dropship-like) ---------- */
/* zesílení pohybu stávající vrstvy orbů */
@keyframes heroAmbient {
  0%   { transform: scale(1)    translate(0%, 0%)  rotate(0deg);  }
  30%  { transform: scale(1.10) translate(4%, 3%)  rotate(3deg);  }
  60%  { transform: scale(1.06) translate(-4%, 4%) rotate(-3deg); }
  100% { transform: scale(1.11) translate(3%, -3%) rotate(2deg);  }
}
.s-hero::before { animation-duration: 22s; }

/* barvy silné nahoře, dolů se vytratí do čista (rozcestník zůstane čistý) */
.s-hero::before,
.s-hero::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0) 64%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0) 64%);
}

/* druhá nezávislá vrstva — jiná rychlost i směr = bohatší „mesh" */
.s-hero::after {
  content: '';
  position: absolute;
  inset: -30% -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 76% 28%, rgba(107,93,231,.20) 0%, transparent 55%),
    radial-gradient(ellipse 48% 46% at 22% 72%, rgba(34,185,138,.16) 0%, transparent 55%),
    radial-gradient(ellipse 46% 44% at 50% 16%, rgba(56,189,248,.18) 0%, transparent 52%);
  filter: blur(34px);
  animation: heroAmbient2 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroAmbient2 {
  0%   { transform: translate(0%, 0%)   scale(1.05) rotate(0deg);  }
  50%  { transform: translate(-5%, -4%) scale(1.14) rotate(-5deg); }
  100% { transform: translate(5%, 4%)   scale(1.09) rotate(4deg);  }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero::after { animation: none; }
}

/* ---------- Sekce „Jeden systém" — timeline 3 kroků ---------- */
.s-timeline {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
/* LINKA mezi kolečky — dokresluje se na scroll (desktop) */
.s-timeline::before {
  content: '';
  position: absolute;
  top: 46px; /* svislý střed kolečka (92/2) */
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2b51a3, #9ab8ff, #4fd6b2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s linear;
  z-index: 0;
}
.s-timeline.is-in::before { transform: scaleX(1); }

/* ZÁBLESK — jemný pomalý glow putuje po lince (ne výrazná kulička) */
.s-timeline::after {
  content: '';
  position: absolute;
  top: 46px;
  left: 16.66%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(5px);
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(154,184,255,.45) 32%, transparent 70%);
}
.s-timeline.is-in::after { animation: tlFlash 1.8s linear forwards; }
@keyframes tlFlash {
  0%   { left: 16.66%; opacity: .9; }
  88%  { opacity: .9; }
  100% { left: 83.33%; opacity: 0; }
}

/* kudy záblesk projde, tam kolečko zůstane zářit (rozsvítí se po sobě) */
.s-tl-badge--1 { --tl-glow: #2b51a3; }
.s-tl-badge--2 { --tl-glow: #15a87f; }
.s-tl-badge--3 { --tl-glow: #6b5de7; }
.s-timeline.is-in .s-tl-step:nth-child(1) .s-tl-badge { animation: tlBadgeGlow .55s 0s ease-out forwards; }
.s-timeline.is-in .s-tl-step:nth-child(2) .s-tl-badge { animation: tlBadgeGlow .55s 0.9s ease-out forwards; }
.s-timeline.is-in .s-tl-step:nth-child(3) .s-tl-badge { animation: tlBadgeGlow .55s 1.8s ease-out forwards; }
@keyframes tlBadgeGlow {
  from { box-shadow: 0 0 0 0 transparent; }
  to   { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--tl-glow) 36%, transparent); }
}

.s-tl-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.s-tl-badge {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.s-tl-badge img {
  width: 54px;
  height: 54px;
  mix-blend-mode: multiply;
}
.s-tl-badge--1 { background: linear-gradient(135deg, #c3def9 0%, #dccff2 100%); }
.s-tl-badge--2 { background: linear-gradient(135deg, #bdeed6 0%, #cae2f8 100%); }
.s-tl-badge--3 { background: linear-gradient(135deg, #d2cbf4 0%, #c8def8 100%); }
.s-tl-text {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  max-width: 22ch;
  margin: 0;
}

/* uzavírací řádek pod timeline */
.s-tl-outcome {
  margin: 40px auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 600;
  color: #6b5de7;
}

/* mobil — timeline shora dolů */
@media (max-width: 720px) {
  .s-timeline {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  /* linka svisle — dokresluje se shora dolů */
  .s-timeline::before {
    top: 46px;
    bottom: 46px;
    left: 46px; /* vodorovný střed kolečka (92/2) */
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, #2b51a3, #9ab8ff, #4fd6b2);
    transform: scaleY(0);
    transform-origin: top center;
  }
  .s-timeline.is-in::before { transform: scaleY(1); }

  /* záblesk jede shora dolů */
  .s-timeline::after {
    top: 46px;
    left: 46px;
  }
  .s-timeline.is-in::after { animation: tlFlashV 1.8s linear forwards; }
  @keyframes tlFlashV {
    0%   { top: 46px; opacity: .9; }
    88%  { opacity: .9; }
    100% { top: calc(100% - 46px); opacity: 0; }
  }

  .s-tl-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
  }
  .s-tl-text { max-width: none; }
}

/* REDUCED MOTION — plně vykreslená linka (vodorovná i svislá), bez pulzu */
@media (prefers-reduced-motion: reduce) {
  .s-timeline::before { transform: none !important; transition: none !important; }
  .s-timeline::after  { display: none !important; }
  .s-timeline .s-tl-badge { animation: none !important; }
}

/* ---------- Rozcestníkové karty — ikona na kulatém barevném pozadí ---------- */
.s-hero__route-icon {
  border-radius: 50%;
  width: 52px;
  height: 52px;
}
.s-hero__route-icon img {
  width: 32px;
  height: 32px;
}

/* ---------- Nadpis „Žádný problém." — fialový gradient se sweepem (jako hero) ---------- */
.s-op-accent {
  background: linear-gradient(
    90deg,
    var(--blue-600) 0%,
    #7B61FF 22%,
    #38BDF8 44%,
    var(--blue-600) 66%,
    #7B61FF 88%,
    var(--blue-500) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
/* sweep se spustí, jakmile sekce nascrolluje (využívá .s-reveal.in) */
.s-reveal.in .s-op-accent {
  animation: accentSweep 1.6s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .s-op-accent { animation: none; background-position: 0% 0%; }
}

/* ---------- Obsah ať se nedotýká svislých vodicích linek (na všech šířkách) ---------- */
/* linky jsou na --gutter (5vw); container měl stejných 5vw → obsah seděl na lince.
   Přidáme konstantní odskok ~14px, aby text vždy začínal kousek za linkou. */
.s-container {
  padding-left: calc(clamp(20px, 5vw, 60px) + 14px);
  padding-right: calc(clamp(20px, 5vw, 60px) + 14px);
}

/* ---------- Kontaktní formulář — karta s ostrými rohy, vpravo až k lince ---------- */
.s-demo__card {
  border-radius: 0;
  /* Jemně problikávající zář kolem karty (jako původně) — glow se občas nenásilně zjeví a zase zmizí.
     Lokalizované ke kartě (box-shadow kolem jejích okrajů), ne přes celý blok. */
  animation: formGlow 14s ease-in-out infinite;
}
/* Paleta jako fialový text v hero + blankytná; vrchol v 9 %, jinak nula → decentní „nádech" glow */
@keyframes formGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(14,111,184,.07), 0 24px 60px rgba(14,111,184,.09), 0 6px 16px rgba(27,33,38,.06),
                0 0 0 0 rgba(123,97,255,0), 0 0 0 0 rgba(56,189,248,0);
  }
  9% {
    box-shadow: 0 0 0 1px rgba(14,111,184,.07), 0 24px 60px rgba(14,111,184,.09), 0 6px 16px rgba(27,33,38,.06),
                0 0 64px 8px rgba(123,97,255,.30), 0 0 100px 22px rgba(56,189,248,.16);
  }
  22% {
    box-shadow: 0 0 0 1px rgba(14,111,184,.07), 0 24px 60px rgba(14,111,184,.09), 0 6px 16px rgba(27,33,38,.06),
                0 0 0 0 rgba(123,97,255,0), 0 0 0 0 rgba(56,189,248,0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-demo__card { animation: none; }
}
@media (min-width: 860px) {
  /* pravá hrana karty přesně na pravé vodicí lince
     = poloha linky  −  (poloha pravého okraje obsahu containeru), vše od pravého okraje viewportu */
  .s-demo__card {
    margin-right: calc(
      max(var(--gutter, 64px), (100vw - var(--container, 1120px)) / 2)
      - max((100vw - 1140px) / 2, 0px)
      - (clamp(20px, 5vw, 60px) + 14px)
    );
  }
}

/* ---------- Závěrečné CTA — KOMPAKTNÍ pás před formulářem (ne druhý hero) ---------- */
.s-gm-h2 {
  font-size: clamp(26px, 3.6vw, 40px);   /* menší echo hlavního hera nahoře → hierarchie */
  text-wrap: balance;                    /* vyváženější zalomení dlouhých čes. slov na mobilu */
}
.s-gradient-moment {
  padding: clamp(46px, 6vw, 76px) 0;     /* ~2,4× nižší → pás, ne celoobrazovkový hero */
}
.s-gm-inner {
  gap: 16px;
}
.s-gm-inner .s-gm-h2 {
  margin: 2px 0;
}
/* obě tlačítka stejně velká, zarovnaná; „Vyzkoušet zdarma" bílý text */
.s-gm-inner .s-gm-cta { margin-top: 0; }
.s-gm-inner .s-btn--lg {
  min-width: 230px;
  justify-content: center;
}
.s-gm-inner .s-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
}
.s-gm-inner .s-btn--ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
}

/* ---------- Marquee klientů — reálná loga ---------- */
/* vyšší pruh → loga na výšku/čtverec mají víc prostoru; široká drží max-width */
.s-logos__track .s-logo-slot {
  background: transparent;
  border: 0;
  height: 72px;
  width: 160px;
}
.s-logo {
  height: auto; /* přebije inline height="34", ať se řídí max-* */
  max-height: 48px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .25s ease, opacity .25s ease;
}
.s-logo:hover {
  filter: grayscale(0);
  opacity: 1;
}
/* RONAL + Sportisimo — zapečené tmavé pozadí → chip (zaoblené, o něco menší) */
.s-logo--chip {
  max-height: 36px;
  border-radius: 6px;
}

/* ---------- #integrace — decentní řádek log ---------- */
.s-integrace-logos {
  margin-top: 24px;
}
.s-integrace-logos__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 14px;
}
.s-integrace-logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.s-integrace-logos__row img {
  height: 18px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
}

/* ---------- Platební loga nad patičkou — bez rámečků, 28px, roztažená do šířky ---------- */
.s-pay-logo {
  width: auto;
  display: block;
  object-fit: contain;
}
/* zrušit bílé boxy kolem log — loga leží přímo na pozadí lišty */
.s-pay-badge {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  opacity: .85; /* jemné sjednocení, barevná zůstávají */
  transition: opacity .2s ease;
}
.s-pay-badge:hover { opacity: 1; }
/* jednotná 28px výšková linka */
.s-pay-badge > svg,
.s-pay-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}
/* textové sub-badge (SecureCode / Electron / Verified) — menší značka vedle popisku */
.s-pay-badge--text > svg { height: 18px; }
.s-pay-badge__gopay { font-size: 15px; }
/* řada roztažená do celé šíře content sloupce patičky */
.s-footer__pay-row {
  justify-content: space-between;
  gap: 12px 24px;
}
@media (max-width: 720px) {
  .s-footer__pay-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 28px;
  }
  /* na mobilu se nezmenšovat pod čitelnost */
  .s-pay-badge > svg,
  .s-pay-logo { min-height: 22px; }
}

/* ============================================================
   Device frames — screenshoty v rámech (telefon / prohlížeč)
   ============================================================ */
.device-frame {
  position: relative;          /* bez z-index → aurora ::before jde za rám */
  margin: 0 auto;
}
/* aurora glow za rámem */
.device-frame::before {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(43,81,163,.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.device-frame--mint::before {
  background: radial-gradient(closest-side, rgba(79,214,178,.22), transparent 70%);
}

/* ---- Telefon ---- */
.device-frame--phone {
  background: #1a1d24;
  border-radius: 44px;
  padding: 12px;
  max-width: 320px;
  box-shadow: 0 40px 80px -20px rgba(43,81,163,.25);
}
.device-frame--phone.device-frame--mint {
  box-shadow: 0 40px 80px -20px rgba(79,214,178,.25);
}
.device-frame--phone > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
}
/* pokud má telefon brand lištu, screenshot zaobli jen dole */
.device-frame--phone:has(.device-frame__brand--phone) > img {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ---- Telefon se scroll-on-hover dlouhým screenshotem ----
   Okno (.device-frame__viewport) drží stejnou výšku jako běžný screen (poměr 720/1465)
   a přebytek dlouhého screenshotu ořezává (overflow:hidden). Obrázek je full-bleed
   (ŽÁDNÝ object-fit: contain — dlouhý screen nemá dýchací okraje, to je záměr).
   Sroluje ho JS na hover přes translateY; contain pravidlo platí dál pro ostatní frame instance. */
.device-frame--scroll .device-frame__viewport {
  overflow: hidden;
  aspect-ratio: 720 / 1465;      /* = současná výška okna běžného telefonního screenu */
  border-radius: 0 0 32px 32px;  /* dole zaoblit jako ostatní phone screeny (nahoře je brand lišta) */
  background: #fff;
}
/* Stopa nese obrázek + highlight → posouvají se jako jeden celek (translateY řídí JS) */
.device-frame--scroll .device-frame__scroll-track {
  position: relative;
  transform: translateY(0);
  will-change: transform;
}
.device-frame--scroll .device-frame__scroll-img {
  display: block;
  width: 100%;
  height: auto;                  /* dlouhý obrázek přeteče, okno ho ořízne */
}
/* „Vybraný" řádek — jemně zmodrá po dojetí scrollu. Poloha laděná na páteční řádek;
   snadno posunutelná přes --pick-top / --pick-height (v % výšky obrázku). Barva z appky (#4d7ea8). */
.device-frame__pick {
  position: absolute;
  left: 4%;
  right: 4%;
  top: var(--pick-top, 87.2%);
  height: var(--pick-height, 3.6%);
  border-radius: 8px;
  background: rgba(77,126,168,.18);
  box-shadow: inset 0 0 0 2px rgba(77,126,168,.65);
  opacity: 0;
  transform: scale(.99);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.device-frame--scroll.is-picked .device-frame__pick {
  opacity: 1;
  transform: scale(1);
}
/* jemné naznačení interaktivity */
.device-frame--scroll { cursor: ns-resize; }
@media (prefers-reduced-motion: reduce) {
  .device-frame--scroll .device-frame__scroll-track { transition: none !important; transform: translateY(0) !important; }
  .device-frame__pick { transition: none !important; }
}

/* ---- Výdejní terminál — vícevrstvý hover mikropříběh (overlay nad podkladem) ----
   Overlay prvky pozicované v % vůči obrázku; velikost fontu v cqw (= % šířky rámečku),
   aby text škáloval s rámečkem. Řídí JS v index.html. */
.df-term {
  position: relative;
  container-type: inline-size;   /* 1cqw = 1 % šířky rámečku */
  line-height: 1;
  transition: transform .45s ease;   /* přejezd scén doleva/zprava */
  will-change: transform;
}
.df-term picture { display: block; }
.df-term img { display: block; width: 100%; height: auto; }
.df-term__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #1c1c1e;
}
.df-term__overlay > span { position: absolute; display: flex; }
/* JMÉNO — vlevo, svisle na střed boxu, bold */
.df-term__name {
  align-items: center; justify-content: flex-start;
  white-space: nowrap;
  font-size: 2.17cqw; font-weight: 700;
  opacity: 0;
}
.df-term__name.is-on { opacity: 1; }
.df-term__name.typing::after {
  content: ''; display: inline-block;
  width: .08em; height: 1.05em; margin-left: .06em;
  background: #1c1c1e;
  animation: dfCaret .8s step-end infinite;
}
@keyframes dfCaret { 50% { opacity: 0; } }
/* ČÍSLO jídla — centr, fade + scale */
.df-term__num {
  align-items: center; justify-content: center;
  font-size: 4.77cqw; font-weight: 700;
  opacity: 0; transform: scale(.85);
  transition: opacity .25s ease, transform .25s ease;
}
.df-term__num.is-on { opacity: 1; transform: scale(1); }
/* TABULKA — číslice centrované, NE bold, průhledné pozadí */
.df-term__cell {
  align-items: center; justify-content: center;
  font-size: 1.24cqw; font-weight: 400;
  opacity: 0; transition: opacity .2s ease;
}
.df-term__cell.is-on { opacity: 1; }
/* Zvýraznění tlačítka DOOBJEDNAT — sytější oranžová (potvrzení výdeje), NE ztmavení */
.df-term__btn {
  background: rgba(237, 122, 22, .60);
  border-radius: 5px;
  opacity: 0; transition: opacity .2s ease;
}
.df-term__btn.is-on { opacity: 1; }
/* Postupné rozezelenění řádků v pravém sloupci — tón dle prvního (vzorového) řádku, jméno + číslo */
.df-term__green {
  align-items: center; gap: 4px; padding: 0 .45em;
  background: rgba(120, 196, 150, .40);
  overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.df-term__green.is-on { opacity: 1; }
/* Pravý sloupec — horní řádek se jménem + číslem aktuální osoby (zelený jako vzorový) */
.df-term__row {
  align-items: center; gap: 4px; padding: 0 .45em;
  background: rgba(120, 196, 150, .40);
  overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.df-term__row.is-on { opacity: 1; }
.df-term__row-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1.3cqw; font-weight: 600; color: #1c1c1e;
}
.df-term__row-num { flex: none; font-size: 1.3cqw; font-weight: 700; color: #1c1c1e; }
/* Řádek s vybraným jídlem — píše se do prázdného podkladu (průhledné pozadí) */
.df-term__meal {
  align-items: center; gap: .5em;
  background: transparent; overflow: hidden; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease;
}
.df-term__meal.is-on { opacity: 1; }
.df-term__meal b { flex: none; font-weight: 700; font-size: 2.1cqw; color: #1c1c1e; }
.df-term__meal .df-term__meal-name {
  font-weight: 400; font-size: 1.7cqw; color: #1c1c1e;
  overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .df-term { transition: none; }
  .df-term__name, .df-term__num, .df-term__cell,
  .df-term__btn, .df-term__green, .df-term__meal, .df-term__row { transition: none; }
  .df-term__num { transform: none; }
  .df-term__name.typing::after { display: none; animation: none; }
}

/* ---- Živá obrazovka „Přehled" (hodnocení jídel) vsazená do telefonního rámu ----
   Vnitřek z prehled-interaktivni-obrazovka.html; vnější .p-phone/.p-top/.p-head vynechány
   (rám i brand lišta s logem jsou z webu). Akcent sjednocen na brand modrou. Řídí JS v index.html. */
.p-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 1467;        /* stejná výška jako původní screenshot → rám 1:1 */
  overflow: hidden;
  background: #eef2f7;
  border-radius: 0 0 32px 32px;    /* dole zaoblit jako u ostatních phone screenů */
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  color: #141d33;
}
.p-body { padding: 12px; height: calc(100% - 44px); overflow: hidden; display: flex; flex-direction: column; }
.p-question { font-size: 15px; font-weight: 700; color: #141d33; margin: 4px 2px 2px; }
.p-sub { font-size: 11px; color: #7a8496; margin: 0 2px 12px; }
/* karta vyplní zbytek výšky rámu (rám 1:1) — řádky se rovnoměrně rozprostřou */
.p-card { background: #fff; border-radius: 12px; padding: 6px 12px; box-shadow: 0 1px 2px rgba(20,29,51,.05);
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.p-date { font-size: 10px; font-weight: 700; color: #aab2c0; text-transform: uppercase; letter-spacing: .03em; padding: 12px 0 6px; }
.p-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f2f4f8; }
.p-item:first-of-type { border-top: none; }
.p-jidlo { flex: 1; font-size: 11px; line-height: 1.35; color: #2a3346; }
.p-acts { display: flex; gap: 9px; flex-shrink: 0; }
.p-thumb { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.p-thumb svg { width: 18px; height: 18px; }
.p-down svg { fill: #f0b6b6; stroke: #e08a8a; }
.p-up svg { fill: #bfe3c4; stroke: #8cc794; }
.p-chat svg { fill: none; stroke: var(--blue-600); }
.p-chat.act svg { fill: #dceaf7; stroke: var(--blue-600); }
.p-thumb.pick-down svg { fill: #e2504a; stroke: #c53a34; }
.p-thumb.pick-up svg { fill: #3fae5a; stroke: #2f9247; }
.p-thumb.pop { animation: p-pop .4s; }
@keyframes p-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
.p-nav { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eceff4; display: flex; justify-content: space-around; padding: 8px 0; }
.p-nav div { font-size: 9px; color: #9aa5b5; text-align: center; }
.p-nav div.act { color: var(--blue-600); }
.p-nav svg { display: block; width: 15px; height: 15px; margin: 0 auto 2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Komentářový box — vyjede zdola nad navigací, text se do něj vepíše */
.p-comment {
  position: absolute; left: 8px; right: 8px; bottom: 48px; z-index: 3;
  background: #fff; border: 1px solid #eceff4; border-radius: 14px;
  box-shadow: 0 -6px 24px rgba(20,29,51,.12);
  padding: 11px 12px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.p-comment.is-on { opacity: 1; transform: translateY(0); }
.p-comment-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #aab2c0; margin-bottom: 7px; }
.p-comment-input {
  min-height: 34px; display: flex; align-items: center;
  border: 1.5px solid #dfe4ec; border-radius: 8px; padding: 7px 10px;
  font-size: 12px; line-height: 1.3; color: #2a3346; background: #fbfcfe;
}
.p-comment.typing .p-comment-text::after {
  content: ''; display: inline-block; width: 1px; height: 1.05em;
  background: #141d33; margin-left: 1px; vertical-align: -2px;
  animation: p-caret .8s step-end infinite;
}
@keyframes p-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .p-thumb { transition: none; }
  .p-thumb.pop { animation: none; }
  .p-comment { transition: none; }
  .p-comment.typing .p-comment-text::after { animation: none; }
}

/* ---- Prohlížeč ---- */
.device-frame--browser {
  max-width: 860px;
  border-radius: 14px;
  border: 1px solid rgba(43,81,163,.12);
  overflow: hidden;
  background: #f5f7fb; /* barva světlých okrajů screenu → splyne s dýchacím prostorem */
  box-shadow: 0 40px 80px -20px rgba(43,81,163,.25);
}
.device-frame--browser.device-frame--mint {
  box-shadow: 0 40px 80px -20px rgba(79,214,178,.25);
}
.device-frame__bar {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
/* URL pill uprostřed chrome lišty */
.device-frame__url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.04);
  border-radius: 8px;
  padding: 3px 14px;
  font-size: 12px;
  color: rgba(0,0,0,.45);
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-frame__dots { display: flex; gap: 7px; }
.device-frame__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: .8;
}
.device-frame__dots span:nth-child(1) { background: #ff5f57; }
.device-frame__dots span:nth-child(2) { background: #febc2e; }
.device-frame__dots span:nth-child(3) { background: #28c840; }
.device-frame--browser > img,
.device-frame--browser > video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* celý screenshot včetně světlých okrajů, nic se neořezává */
}

/* brand lišta s logem (mezi chrome a screenshotem) */
.device-frame__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
/* logo v brand liště — natvrdo omezené (jinak by ho přebilo pravidlo pro screenshot) */
.device-frame__brand img {
  height: 26px;
  width: auto;
  display: block;
}
/* brand lišta v telefonu — nad screenshotem, respektuje vnitřní zaoblení, menší logo, bez avataru */
.device-frame__brand--phone {
  padding: 8px 14px;
  border-radius: 32px 32px 0 0;
}
.device-frame__brand--phone img {
  height: 18px;
}
.device-frame__avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2fa;
  color: #2b51a3;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* u screenů, kde už logo je ve screenshotu → brand lištu skryj */
.device-frame--no-brand .device-frame__brand { display: none; }

/* ---- Naklonění + spodní fade ---- */
.tilt-left  { transform: rotate(-2.5deg); }
.tilt-right { transform: rotate(2.5deg); }
.device-frame--fade {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

@media (max-width: 720px) {
  .device-frame--phone { max-width: 260px; }
  .tilt-left, .tilt-right { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt-left, .tilt-right { transform: none; }
}

/* ---- Kompozice na homepage (prohlížeč + telefon) ---- */
.s-device-combo {
  position: relative;
  max-width: 960px;
  margin: 56px auto 0;
}
.s-device-combo .device-frame--browser { max-width: 100%; }
.s-device-combo__phone {
  position: absolute;
  right: 2%;
  bottom: -9%;
  width: 30%;
  max-width: 240px;
}
@media (max-width: 720px) {
  .s-device-combo {
    display: flex;
    flex-direction: column-reverse; /* telefon první (nahoře) */
    align-items: center;
    gap: 22px;
  }
  .s-device-combo__phone {
    position: relative;
    width: auto;
    max-width: 240px;
  }
}

/* ---- Dvousloupcový layout screen + text (substránky) ---- */
.s-shot-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin: clamp(28px, 4vw, 48px) 0;
}
@media (min-width: 760px) {
  .s-shot-row { grid-template-columns: 1fr 1fr; }
  .s-shot-row--rev .s-shot-row__media { order: -1; }
}
.s-shot-row__media { display: flex; justify-content: center; }

/* samostatný centrovaný screen v sekci */
.s-shot-single {
  display: flex;
  justify-content: center;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

/* ============================================================
   Živá obrazovka „Objednat" v telefonu (sekce PRO STRÁVNÍKY)
   Nahrazuje statický screenshot uvnitř existujícího phone rámu — rám, brand
   lišta, stín i aurora glow zůstávají beze změny. Stejná stopa (aspect-ratio
   720/1468) jako původní screenshot → výška rámu 1:1. Akcent sladěn s app/brand
   modrou webu; press stav výrazně tmavší. Font Plus Jakarta Sans (jako web).
   ============================================================ */
.ld-screen {
  --ld-accent: #3a6491;         /* on-brand app modrá — tlačítka, odznaky, aktivní nav */
  --ld-accent-press: #16293d;   /* výrazně tmavší press stav */
  --ld-fab: #4d7ea8;            /* app modrá — plovoucí košík, avatar */
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 1468;     /* shodná stopa se screenshotem → rám beze změny výšky */
  overflow: hidden;
  background: #eef2f7;
  border-radius: 0 0 32px 32px; /* dole zaobleno jako screenshot; nahoře kryje brand lišta */
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  display: flex;
  flex-direction: column;
}
.ld-head { background: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eceff4; flex: none; }
.ld-head b { font-size: 16px; font-weight: 700; color: #141d33; }
.ld-av { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ld-fab); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #141d33; }
.ld-track { display: flex; width: 200%; flex: 1 1 auto; align-items: flex-start; transition: transform .7s cubic-bezier(.5,0,.2,1); }
.ld-week { width: 50%; padding: 12px; }
.ld-label { font-size: 13px; font-weight: 700; color: #141d33; margin: 2px 2px 8px; }
.ld-cardx { background: #fff; border-radius: 12px; padding: 8px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(20,29,51,.05); }
.ld-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #f2f4f8; }
.ld-row:last-child { border-bottom: none; }
.ld-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #e9edf2; color: #8a94a3; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ld-num.on { background: var(--ld-accent); color: #fff; }
.ld-badge { position: absolute; top: -5px; right: -5px; background: #fff; color: var(--ld-accent); border: 1px solid var(--ld-accent); border-radius: 9px; font-size: 9px; font-weight: 700; padding: 0 4px; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .25s; }
.ld-badge.show { opacity: 1; transform: scale(1); }
.ld-jidlo { flex: 1; font-size: 11px; line-height: 1.3; color: #2a3346; }
.ld-cena { font-size: 11px; font-weight: 700; color: #141d33; white-space: nowrap; }
.ld-pm { display: flex; flex-direction: column; flex-shrink: 0; }
.ld-plus { width: 30px; height: 24px; background: var(--ld-accent); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 5px 5px 0 0; transition: transform .12s, background .12s; }
.ld-plus.press { transform: scale(.82); background: var(--ld-accent-press); }
.ld-minus { width: 30px; height: 20px; background: #e9edf2; color: #3a3f47; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 5px 5px; }
.ld-next { position: relative; overflow: hidden; background: var(--ld-accent); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: 11px 54px 11px 14px; border-radius: 9px; margin: 4px 0 6px; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.ld-next.press { transform: scale(.94); background: var(--ld-accent-press); box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }
.ld-ripple { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); transform: translate(-50%,-50%) scale(0); pointer-events: none; }
.ld-ripple.go { animation: ld-drip .5s ease-out; }
@keyframes ld-drip { from { transform: translate(-50%,-50%) scale(0); opacity: .6; } to { transform: translate(-50%,-50%) scale(26); opacity: 0; } }
.ld-prev { text-align: center; font-size: 11px; font-weight: 600; color: var(--ld-accent); }
.ld-fab { position: absolute; right: 14px; bottom: 56px; width: 42px; height: 42px; border-radius: 50%; background: var(--ld-fab); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(77,126,168,.4); }
.ld-cart { position: absolute; top: -4px; right: -4px; width: 19px; height: 19px; border-radius: 50%; background: #fff; color: #141d33; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ld-cart.bump { animation: ld-bump .3s; }
@keyframes ld-bump { 50% { transform: scale(1.4); } }
.ld-nav { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eceff4; display: flex; justify-content: space-around; padding: 8px 0; }
.ld-nav div { font-size: 9px; color: #9aa5b5; text-align: center; }
.ld-nav div.act { color: var(--ld-accent); }
.ld-nav svg { display: block; width: 16px; height: 16px; margin: 0 auto 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .ld-track, .ld-next, .ld-plus, .ld-badge, .ld-cart { transition: none !important; animation: none !important; }
}

/* CookieYes is injected by GTM; consent controls should not be printed. */
@media print {
  .cky-consent-container { display: none !important; }
}

/* ---------- Coming-soon / case-study stub ---------- */
.ld-soon {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(80px, 14vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.ld-soon__inner { max-width: 620px; }
.ld-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--blue-600, #0e6fb8);
  background: var(--blue-50, #eef6fc);
  border-radius: 40px;
  padding: 7px 16px;
  margin-bottom: 22px;
}
.ld-soon__company {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #79828c);
  margin: 0 0 10px;
}
.ld-soon__h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink, #0f172a);
  margin: 0 0 18px;
}
.ld-soon__lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft, #475467);
  margin: 0 auto 32px;
  max-width: 48ch;
}
.ld-soon__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Form: toggle „Zajímá mě" + GDPR ---------- */
.s-form__toggle {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.s-form__toggle label {
  flex: 1 1 140px;
  position: relative;
  cursor: pointer;
  margin: 0;
}
.s-form__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.s-form__toggle-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--n-200, #e4e7ec);
  border-radius: var(--s-radius-sm, 6px);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft, #475467);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
/* defaultně každé tlačítko ve své barvě (text + jemný rámeček) */
.s-form__toggle input[value="firma"] + .s-form__toggle-chip {
  color: var(--blue-700, #0a5a96);
  border-color: color-mix(in srgb, var(--blue-600, #0e6fb8) 32%, #fff);
}
.s-form__toggle input[value="gastro"] + .s-form__toggle-chip {
  color: var(--mint-700, #0f7a59);
  border-color: color-mix(in srgb, var(--mint-600, #149e73) 32%, #fff);
}
/* při výběru = zvýrazněný rámeček (silnější, plná barva), pozadí bílé */
.s-form__toggle input[value="firma"]:checked + .s-form__toggle-chip {
  border-color: var(--blue-600, #0e6fb8);
  box-shadow: inset 0 0 0 1px var(--blue-600, #0e6fb8);
  background: #fff;
}
.s-form__toggle input[value="gastro"]:checked + .s-form__toggle-chip {
  border-color: var(--mint-600, #149e73);
  box-shadow: inset 0 0 0 1px var(--mint-600, #149e73);
  background: #fff;
}
.s-form__toggle input[value="firma"]:focus-visible + .s-form__toggle-chip {
  outline: 2px solid var(--blue-600, #0e6fb8);
  outline-offset: 2px;
}
.s-form__toggle input[value="gastro"]:focus-visible + .s-form__toggle-chip {
  outline: 2px solid var(--mint-600, #149e73);
  outline-offset: 2px;
}
.s-form__gdpr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft, #475467);
}
.s-form__gdpr input { margin-top: 3px; flex: 0 0 auto; }
.s-form__error {
  color: #c0392b;
  font-size: 13px;
  margin: 4px 0 0;
}
.s-form__success {
  color: var(--mint-700, #0b7354);
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 0;
}
.s-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.s-form__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.s-form__legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--ink, #0f172a);
  font-size: 14px;
  font-weight: 600;
}
.s-form [aria-invalid="true"] {
  border-color: #c0392b !important;
}
.s-form__submit:disabled {
  cursor: wait;
  opacity: .7;
}
.s-form__field input:invalid:not(:placeholder-shown) {
  border-color: #e7a6a0;
}

/* ---------- Mini-proof inline u sekcí ---------- */
.s-exp__proof {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--blue-50, #eef6fc);
  border-left: 3px solid var(--blue-600, #0e6fb8);
  border-radius: 0 var(--s-radius-sm, 6px) var(--s-radius-sm, 6px) 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft, #475467);
}
.s-exp__proof strong { color: var(--ink, #0f172a); }
.s-exp__proof a {
  display: inline-block;
  margin-top: 6px;
  color: var(--blue-600, #0e6fb8);
  font-weight: 600;
  text-decoration: none;
}
.s-exp__proof a:hover { text-decoration: underline; }
.s-exp--alt .s-exp__proof {
  background: var(--mint-50, #eafaf3);
  border-left-color: var(--mint-600, #149e73);
}
.s-exp--alt .s-exp__proof a { color: var(--mint-700, #0f7a59); }

/* ---------- Reference karty (sekce 13) ---------- */
/* samostatné boxy s ostrými rohy a mezerou mezi nimi */
.s-cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) { .s-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .s-cases { grid-template-columns: 1fr 1fr 1fr; } }
.s-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--line-soft, #e4e7ec);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
/* top accent linka na hover — stejně jako karty v hero */
.s-case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue-600, #0e6fb8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease, ease);
}
.s-case-card:hover { background: var(--n-50, #f7f8fa); }
.s-case-card:hover::before { transform: scaleX(1); }
.s-case-card__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-700, #0a5a96);
  background: var(--blue-50, #eef6fc);
  border-radius: 40px;
  padding: 5px 12px;
}
/* loga firem v kartách případových studií — hlavní vizuální prvek, 44px linka, grayscale → barva na hover */
.s-case-card__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin: 14px 0;
}
.s-case-card__logo {
  max-height: 44px;
  max-width: min(180px, 60%); /* na úzkém viewportu max 60 % šířky karty */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .3s ease, opacity .3s ease;
}
/* hover na CELOU kartu → loga plně barevná */
.s-case-card:hover .s-case-card__logo {
  filter: none;
  opacity: 1;
}
/* dotyková zařízení (bez hoveru) → loga rovnou barevně, ať nezůstanou šedá napořád */
@media (hover: none) {
  .s-case-card__logo {
    filter: none;
    opacity: .9;
  }
}
/* dvojkarta mlékáren — obě loga na společné 44px lince, ať se vejdou vedle sebe */
.s-case-card__logos--dual .s-case-card__logo {
  max-width: calc(50% - 8px);
}
/* název firmy = sekundární podtitulek pod logem */
.s-case-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ink-soft, #475467);
  margin: 0;
}
.s-case-card__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft, #475467);
  margin: 0;
  flex: 1;
}
.s-case-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-600, #0e6fb8);
}

/* ---------- Logo wall placeholdery (sekce 4) ---------- */
.s-trust-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 36px;
}
@media (min-width: 600px) { .s-trust-wall { grid-template-columns: repeat(4, 1fr); } }
.s-trust-tile {
  display: grid;
  place-items: center;
  height: 72px;
  background: #fff;
  border: 1px dashed var(--n-200, #e4e7ec);
  border-radius: var(--s-radius-md, 8px);
  color: var(--muted, #79828c);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------- Rendering performance ----------
   Large blurred hero layers look virtually identical when static, but an
   infinite transform forces the browser to keep compositing the whole hero.
   Smaller motion remains enabled on every viewport, including mobile, and is
   resumed only while its section is visible. */
.s-hero::before {
  animation: heroAmbient 48s steps(24, end) infinite alternate;
  animation-play-state: paused;
}
.s-hero::after {
  animation: none;
  transform: scale(1.05);
  will-change: auto;
}

.s-hero__float {
  animation: hfa 12s ease-in-out both infinite;
  animation-play-state: paused;
}
.s-hero__float--a { animation-delay: 0s; }
.s-hero__float--b { animation-delay: 2.4s; }
.s-hero__float--c { animation-delay: 4.8s; }
.s-hero__float--d { animation-delay: 7.2s; }

.s-nav {
  background: rgba(251, 250, 247, .97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.s-hero__float,
.s-logos__track,
.s-gm-orb,
.ldm-wrap .ldm-fl,
.page-gastro .client-logos-track {
  animation-play-state: paused;
}

.s-hero.is-motion-active::before,
.s-hero.is-motion-active .s-hero__float,
.s-logos.is-motion-active .s-logos__track,
.s-gradient-moment.is-motion-active .s-gm-orb,
.ldm-wrap.is-motion-active .ldm-fl,
.page-gastro .client-logos.is-motion-active .client-logos-track {
  animation-play-state: running;
}

.s-demo__card {
  animation: none;
}

.s-logos.is-motion-active .s-logos__outer:hover .s-logos__track,
.page-gastro .client-logos.is-motion-active .client-logos-outer:hover .client-logos-track {
  animation-play-state: paused;
}

/* Keep the original blurred-orb rendering. Only the timing is slowed down and
   kept continuous; stepped timing was visible as judder while scrolling. */
.s-gm-orb {
  animation-timing-function: ease-in-out;
}
.s-gm-orb--azure {
  animation-duration: 42s;
}
.s-gm-orb--violet {
  animation-duration: 36s;
}
.s-gm-orb--pink {
  animation-duration: 48s;
}

.device-frame--scroll .device-frame__scroll-track {
  will-change: auto;
}
.device-frame--scroll.is-motion-active .device-frame__scroll-track {
  will-change: transform;
}

/* During an actual page scroll the movement of the page has priority. The
   decorative motion resumes shortly after scrolling stops, which is visually
   imperceptible but avoids competing compositor updates. */
html.is-scrolling .s-hero::before,
html.is-scrolling .s-hero__float,
html.is-scrolling .s-logos__track,
html.is-scrolling .s-gm-orb,
html.is-scrolling .ldm-wrap .ldm-fl,
html.is-scrolling .page-gastro .client-logos-track {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .s-hero::before,
  .s-hero__float,
  .s-gm-orb,
  .s-logos__track,
  .ldm-wrap .ldm-fl,
  .page-gastro .client-logos-track {
    animation: none !important;
  }
}