/* Landing pro podnikatele (/platby-a2a), přestavba 18. 9. 2026.
   Doplňuje css/site.css, nic v něm nepřepisuje. Barvy z tokens.css,
   merchantský akcent #2AD590 jen na CTA a odrážkách. */

:root {
  --m-green: var(--aud-merchant, #2AD590);   /* jediný akcent stránky */
  --m-mint: #C3F2DF;
  /* dva odstíny vzorkované z hero podkladu, drží stránku pohromadě */
  --hero-modra: #0D4172;
  --hero-modra-tmava: #06233F;
  --hero-zelena: #81D8CA;
}

/* ---------- kickery na světlém podkladu ----------
   Zelená #2AD590 má na světlém 1,9:1, proto štítky sekcí drží tmavě modrou (7:1 při 11,5 px).
   Zelená zůstává tlačítkům, odrážkám a ikonám. Na tmavých sekcích (split, závěr) zůstává světlá. */
.hero--podnikatele .kicker, .stmt .kicker, .papir .kicker, #jak .kicker, #produkty .kicker, #faq .kicker {
  color: rgba(24, 38, 68, .78);
}

/* ---------- hero: Patrikův gradient v zelené, tmavý text na světlé části ---------- */
.hero--podnikatele {
  background: #C3F2DF url('../assets/merchant/hero-podnikatele.jpg') center center / cover no-repeat;
  color: var(--ink);
  min-height: min(92svh, 860px);
}
.hero--podnikatele::after {
  /* světlý závoj vlevo pod textem, vpravo nechává gradient dýchat */
  background: linear-gradient(100deg, rgba(246, 252, 249, .72) 0%, rgba(246, 252, 249, .55) 42%, rgba(246, 252, 249, 0) 70%);
}
.hero--podnikatele h1 { color: var(--ink); max-width: 15ch; }
.hero--podnikatele .t-lead { color: rgba(24, 38, 68, .74); }
.hero--podnikatele .hero-fact .num { color: var(--ink); }
.hero--podnikatele .hero-fact small { color: rgba(24, 38, 68, .72); }
.hero--podnikatele .btn-ghost { border-color: rgba(24, 38, 68, .34); color: var(--ink); }
.hero--podnikatele .btn-ghost:hover { border-color: var(--ink); }
@media (max-width: 760px) {
  .hero--podnikatele {
    background-image: url('../assets/merchant/hero-podnikatele-mobil.jpg');
    background-position: center top;
  }
  .hero--podnikatele::after {
    background: linear-gradient(180deg, rgba(246, 252, 249, .78) 0%, rgba(246, 252, 249, .55) 55%, rgba(246, 252, 249, 0) 100%);
  }
}

/* ---------- statement 25 miliard: světlý podklad, barevné číslo ---------- */
.stmt {
  text-align: center;
  background: linear-gradient(176deg, #F2FAF8 0%, #E7F4F2 46%, #EDF3FA 100%);
  border-top: 1px solid rgba(24, 38, 68, .06);
}
.stmt-num {
  font-weight: 300; letter-spacing: -.045em; line-height: 1.02;
  font-size: clamp(3rem, 9vw, 7rem); margin-top: 12px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #06233F 0%, var(--hero-modra) 28%, #12867F 62%, #2AD590 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #182644;
}
.stmt-num small { font-size: .38em; letter-spacing: -.02em; }
.stmt p { max-width: 54ch; margin: 24px auto 0; color: var(--ink-mut); font-size: 1.08rem; line-height: 1.65; }
.stmt-src { margin-top: 26px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-mut); }

/* ---------- pruh důvěry ---------- */
.trust-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff; padding: 22px 0;
}
.trust-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.trust-band p { margin: 0; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 12px; }
.trust-band p i { color: var(--m-green); font-size: 22px; }
.trust-band nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.trust-band nav a { color: var(--ink-mut); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; padding: 10px 0; margin: -10px 0; }
.trust-band nav a:hover { color: var(--ink); }

/* ---------- poplatky: dva papíry, horní přijede scrollem přes spodní ----------
   .papiry-draha je vysoká dráha, oba papíry jsou v ní sticky přes celou výšku okna.
   Horní papír posouvá JS podle toho, kde v dráze jsme. */
.papiry { padding: 0; }
.papiry-draha { position: relative; height: 230vh; }
.papir {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  display: flex; align-items: center; overflow: hidden;
}
.papir-obsah { width: 100%; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 38px); }
.papir-head .t-display { margin-top: 12px; max-width: 22ch; }

.papir--karta { background: var(--paper, #FAFAF7); }
.papir--primo {
  background: #fff; transform: translate3d(0, 100%, 0);
  border-top: 1px solid rgba(24, 38, 68, .08);
  box-shadow: 0 -24px 48px rgba(24, 38, 68, .10);
  border-radius: 28px 28px 0 0;
}

/* spodní papír: karta s popisky a šipky k tomu, kdo si kolik bere.
   Plán má pevný poměr stran, takže se šipky v SVG (viewBox 1600 x 900) kreslí
   do stejné souřadnicové sítě jako prvky umístěné v procentech. */
.karta-stage { width: 100%; }
.ks-plan { position: relative; aspect-ratio: 16 / 9; max-height: 62vh; margin: 0 auto; }
.ks-karta { position: absolute; margin: 0; left: 3.75%; top: 21%; width: 52.5%; }
.ks-karta img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 24px 54px rgba(24, 38, 68, .24); }
.ks-popis {
  position: absolute; color: #fff; font-weight: 500; letter-spacing: .14em;
  font-size: clamp(9px, 1.05vw, 15px); text-transform: uppercase; white-space: nowrap;
}
.ks-popis--banka { right: 7%; top: 19%; letter-spacing: .06em; font-size: clamp(12px, 1.5vw, 22px); }
.ks-popis--schema { right: 7%; bottom: 12%; }
.ks-terminal { position: absolute; left: 1%; bottom: 2%; width: 13%; height: auto; filter: drop-shadow(0 18px 30px rgba(24, 38, 68, .28)); }

.ks-sipky { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--warn, #B45309); pointer-events: none; }
.ks-sipky path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; opacity: .85; }

.ks-text { position: absolute; left: 62.5%; width: 34%; }
.ks-text--1 { top: 18%; }
.ks-text--2 { top: 46%; }
.ks-text--3 { top: 76%; }
.ks-text b { display: block; font-weight: 500; color: var(--ink); font-size: clamp(.95rem, 1.35vw, 1.2rem); }
.ks-text em {
  display: block; font-style: normal; font-family: var(--font-mono); color: var(--warn, #B45309);
  font-size: clamp(.8rem, 1.1vw, .98rem); margin-top: 4px; letter-spacing: .02em;
}
.ks-text span { display: block; color: var(--ink-mut); font-size: clamp(.8rem, 1vw, .95rem); margin-top: 6px; }
.karta-sum b { font-weight: 500; }

@media (max-width: 900px) {
  /* na mobilu bez šipek: karta nahoře, pod ní seznam */
  .ks-plan { aspect-ratio: auto; max-height: none; display: grid; gap: 18px; }
  .ks-terminal, .ks-text { position: static; width: auto; }
  .ks-karta { position: relative; width: auto; max-width: 320px; left: auto; top: auto; }   /* popisky musí zůstat na kartě */
  .ks-terminal { width: 92px; }
  .ks-sipky { display: none; }
  .ks-text { border-left: 2px solid var(--warn, #B45309); padding-left: 14px; }
}

/* ---------- diagram propojení: telefon · PayPoint · účet obchodníka ---------- */
.propoj { position: relative; width: min(100%, 880px); aspect-ratio: 1000 / 360; color: var(--ink); }
.propoj-anim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.propoj-tel { position: absolute; left: 4%; top: -4%; width: 27%; transition: transform 1.2s var(--ease-out); transform: translate3d(-18%, 0, 0); }
.propoj:not([data-faze="0"]) .propoj-tel { transform: translate3d(0, 0, 0); }
.propoj-pp { position: absolute; left: 38%; top: 30%; width: 21%; }
.propoj-pp img { width: 100%; height: auto; display: block; }
.propoj-ucet { position: absolute; left: 76%; top: 26%; width: 16%; display: grid; justify-items: center; }
.propoj-ikona { width: 44%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-items: center; color: var(--ink); }
.propoj-ikona i { font-size: clamp(22px, 2.4vw, 34px); }
.propoj-plus { display: grid; justify-items: center; margin-top: 10px; opacity: 0; transition: opacity .5s; }
.propoj-plus em { font-style: normal; font-size: 1.35rem; font-weight: 400; letter-spacing: -.02em; color: #12805A; line-height: 1; }
.propoj-plus small { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--ink-mut); margin-top: 6px; white-space: nowrap; }
.propoj[data-let="konec"] .propoj-plus { opacity: 1; }
.propoj-popis { position: absolute; left: 0; right: 0; top: 100%; margin: 12px 0 0; text-align: center; font-size: .9rem; font-weight: 500; color: var(--ink); }
.propoj-tel .propoj-popis { top: auto; bottom: -8%; }
.propoj-ucet .propoj-popis { position: static; margin-top: 14px; }
/* animační vrstva */
.propoj-nfc path, .propoj-pozadavek, .propoj-pozadavek-p, .propoj-krivka, .propoj-cil, .propoj-cil-f, .propoj-puls, .propoj-puntik, .propoj-cas { opacity: 0; transition: opacity .35s; }
.propoj-pozadavek, .propoj-krivka { stroke-dasharray: 1; stroke-dashoffset: 1; }
.propoj[data-faze="1"] .propoj-nfc path { opacity: 1; animation: nfcPuls 1s ease-out infinite; }
.propoj[data-faze="1"] .propoj-nfc path:nth-child(2) { animation-delay: .2s; }
.propoj[data-faze="2"] .propoj-pozadavek, .propoj[data-faze="2"] .propoj-pozadavek-p { opacity: 1; }
.propoj[data-faze="3"] .propoj-pozadavek { opacity: .35; }
.propoj[data-let="bezi"] .propoj-krivka, .propoj[data-let="bezi"] .propoj-puntik, .propoj[data-let="bezi"] .propoj-cas { opacity: 1; }
.propoj[data-let="bezi"] .propoj-cil { opacity: .45; }
.propoj[data-let="konec"] .propoj-krivka { opacity: .3; }
.propoj[data-let="konec"] .propoj-cil, .propoj[data-let="konec"] .propoj-cil-f { opacity: 1; }
.propoj[data-let="konec"] .propoj-puls { animation: cilPuls .9s ease-out forwards; }
@keyframes nfcPuls { 0% { opacity: 0; transform: translateX(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes cilPuls { 0% { opacity: .9; r: 11; } 100% { opacity: 0; r: 40; } }
@media (max-width: 900px) {
  .propoj { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; align-items: start; }
  .propoj-anim { display: none; }
  .propoj-tel, .propoj-pp, .propoj-ucet { position: static; width: auto; transform: none !important; }
  .propoj-tel { grid-row: 1 / span 2; }
  .propoj-popis { position: static; }
  .propoj-plus { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .propoj-tel { transition: none; } .propoj-nfc path, .propoj-puls { animation: none !important; } }
.scena-pozn { max-width: 62ch; color: var(--ink-mut); margin: 0; }


.scena-pozn { max-width: 62ch; color: var(--ink-mut); margin: 0; }


.primo-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(10px, 2vw, 26px); max-width: 940px; }
.primo-node { text-align: center; }
.primo-node i { font-size: 34px; color: var(--m-green); display: block; margin-bottom: 10px; }
.primo-node b { display: block; font-weight: 500; color: var(--ink); }
.primo-node span { display: block; color: var(--ink-mut); font-size: .9rem; margin-top: 4px; }
.primo-arrow { display: grid; justify-items: center; gap: 6px; color: var(--ink-faint); }
.primo-arrow i { font-size: 20px; }
.primo-arrow em { font-style: normal; font-family: var(--font-mono); font-size: .78rem; color: #12805A; white-space: nowrap; }
.primo-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.primo-cena .num { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.primo-cena span:last-child { color: var(--ink-mut); max-width: 46ch; }
.primo-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .papiry-draha { height: 200vh; }
  .karta-stage { grid-template-columns: 1fr; gap: 20px; }
  .karta-foto img { max-width: 260px; }
  .primo-flow { grid-template-columns: 1fr; gap: 6px; max-width: 420px; }
  .primo-arrow { grid-auto-flow: column; }
  .primo-arrow i { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .papiry-draha { height: auto; }
  .papir { position: relative; height: auto; padding: clamp(56px, 8vw, 96px) 0; }
  .papir--primo { transform: none; }
}
/* náhledy: papíry pod sebou, ať je vidět obojí na jednom snímku */
.papiry-staticke .papiry-draha { height: auto; }
.papiry-staticke .papir { position: relative; height: auto; padding: clamp(56px, 8vw, 96px) 0; }
.papiry-staticke .papir--primo { transform: none !important; }

/* ---------- produkty ---------- */
#produkty { padding-top: clamp(72px, 9vw, 130px) !important; }
#produkty .sec-head { margin-bottom: clamp(30px, 4vw, 52px); }
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.prod + .prod { margin-top: clamp(56px, 8vw, 112px); }
.prod:nth-child(even) .prod-media { order: 2; }
.prod-media {
  background: #F2F4F1; border-radius: 24px; min-height: 320px;
  display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); position: relative; overflow: hidden;
}
.prod-media img { max-width: 100%; height: auto; display: block; }
.prod-media--duo { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 12px; }
/* terminál je ve skutečnosti o něco větší než telefon, ale render telefonu je světlejší a štíhlejší,
   takže na stránce působil větší; dáváme terminálu výrazně víc výšky */
.prod-media--duo img:first-child { max-height: 380px; width: auto; }
.prod-media--duo img:last-child { max-height: 250px; width: auto; }

.prod-body h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 400; letter-spacing: -.02em; margin-top: 12px; }
.prod-body p { margin-top: 14px; color: var(--ink-mut); max-width: 48ch; }
.prod-body ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.prod-body li { position: relative; padding-left: 22px; color: var(--ink); }
.prod-body li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--m-green); }
.prod-body .btn { margin-top: 24px; }

@media (max-width: 860px) {
  .prod { grid-template-columns: 1fr; }
  .prod:nth-child(even) .prod-media { order: 0; }
}

/* ---------- rozdělená obrazovka: klient / podnikatel ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.split-half {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  color: #fff; text-decoration: none; min-height: 420px;
}
.split-half img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transform: scale(1.02);
  transition: filter .6s var(--ease-out), transform 1.2s var(--ease-out);
}
.split-half::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 26, .05) 30%, rgba(10, 15, 26, .78) 100%);
  transition: opacity .5s;
}
.split-body { position: relative; z-index: 2; padding: clamp(28px, 4vw, 56px); max-width: 520px; }
.split-body .kicker { margin-bottom: 10px; }
.split--klient .kicker { color: var(--blue-light); }
.split--podnikatel .kicker { color: var(--m-green); }
.split-body h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; letter-spacing: -.02em; color: #fff; }
.split-body p {
  color: rgba(255, 255, 255, .82); margin-top: 12px; max-width: 40ch;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s;
}
.split-body .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 500; color: #fff; }
.split-body .more i { transition: transform .3s; }
.split--klient .more i { color: var(--blue-light); }
.split--podnikatel .more i { color: var(--m-green); }
.split-half:hover img, .split-half:focus-visible img { filter: grayscale(0); transform: scale(1.06); }
.split-half:hover .split-body p, .split-half:focus-visible .split-body p { max-height: 160px; opacity: 1; }
.split-half:hover .more i { transform: translateX(4px); }
.split--klient::before, .split--podnikatel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.split--klient::before { background: var(--blue); }
.split--podnikatel::before { background: var(--m-green); }
.split-half:hover::before { transform: scaleX(1); }
@media (hover: none), (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split-half img { filter: none; }
  .split-body p { max-height: none; opacity: 1; }
  .split-half::before { transform: scaleX(1); }
}

/* ---------- závěrečné CTA ---------- */
/* závěrečné CTA v barvách hero (vzorkované z podkladu), ne v ploché černé */
.cta-end { background: linear-gradient(152deg, var(--hero-modra-tmava) 0%, var(--hero-modra) 54%, #12867F 100%) !important; }
.cta-end .kicker { color: var(--hero-zelena); }
.cta-end .hero-ctas { justify-content: center; }
.cta-end .cta-more { margin-top: 18px; color: rgba(235, 235, 235, .8); }
.cta-end .cta-more a { color: #fff; }

/* ---------- FAQ: vlastní odsazení, jinak lepí na tmavou sekci nad sebou ---------- */
#faq { padding-top: clamp(72px, 10vw, 140px) !important; padding-bottom: clamp(72px, 10vw, 130px); }
#faq .sec-head { margin-bottom: clamp(28px, 4vw, 44px); }

/* ---------- jen pro náhledy: ?vse=1 vypne animace při scrollu, jinak jsou sekce na snímcích prázdné ---------- */
.nahled .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- fokus z klávesnice: site.css nemá vlastní kroužek, prohlížeč dává modrý auto outline ---------- */
.btn:focus-visible, .trust-band a:focus-visible, .cta-more a:focus-visible, .faq summary:focus-visible, .modal-x:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-btn, 12px);
}
.split-half:focus-visible, .cta-end .btn:focus-visible, .cta-end .cta-more a:focus-visible { outline-color: #fff; }

/* ---------- úzký displej: dvojice tlačítek pod sebou stejně široká (styl je odlišuje, ne velikost) ---------- */
@media (max-width: 480px) {
  .hero-ctas, .primo-ctas { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-ctas .btn, .primo-ctas .btn { width: 100%; }
  /* tři fakta pod sebou v jedné řádce každé; ve třech sloupcích zůstávalo „9" samo na druhém řádku */
  .hero--podnikatele .hero-facts { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero--podnikatele .hero-fact { display: flex; align-items: baseline; gap: 10px; }
}

/* ---------- podstránky pro podnikatele ---------- */
.hero--produkt { min-height: min(80svh, 720px); }
.hero-media--produkt { display: flex; align-items: center; justify-content: center; }
.hero-media--produkt img { max-width: min(100%, 520px); height: auto; }
.hero-media--duo { gap: 16px; align-items: flex-end; }
.hero-media--duo img { width: auto; max-width: 52%; }
.hero-media--duo img:first-child { max-height: 440px; }
.hero-media--duo img:last-child { max-height: 300px; }
@media (max-width: 860px) { .hero-media--produkt { margin-top: 28px; } .hero-media--duo img { max-height: 300px; } }
.sec--svetla { background: linear-gradient(176deg, #F2FAF8 0%, #E7F4F2 46%, #EDF3FA 100%); }
.fakta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.fakta-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fakta-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakta-grid .card { padding: clamp(20px, 2.4vw, 30px); }
.fakta-grid .card > i { font-size: 26px; color: var(--m-green); display: block; }
.fakta-grid .card h4 { margin-top: 14px; font-weight: 500; font-size: 1.08rem; }
.fakta-grid .card p { margin-top: 8px; color: var(--ink-mut); font-size: .95rem; }
.fakta-grid .card > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--ink); font-weight: 500; text-decoration: none; font-size: .92rem; }
.fakta-grid .card .kicker { display: block; margin-bottom: 6px; }
@media (max-width: 900px) { .fakta-grid, .fakta-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fakta-grid, .fakta-grid--2, .fakta-grid--4 { grid-template-columns: 1fr; } }
.citat { margin: clamp(36px, 5vw, 64px) auto 0; max-width: 60ch; text-align: center; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; }
.citat span { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mut); }
.kroky-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: krok; }
.kroky-3 .card { padding: clamp(20px, 2.4vw, 30px); }
.kroky-3 .step-n { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; color: var(--m-green); }
.kroky-3 h4 { margin-top: 10px; font-weight: 500; font-size: 1.08rem; }
.kroky-3 p { margin-top: 8px; color: var(--ink-mut); font-size: .95rem; }
@media (max-width: 760px) { .kroky-3 { grid-template-columns: 1fr; } }
.ucto-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.ucto-list li { position: relative; padding-left: 22px; color: var(--ink); }
.ucto-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--m-green); }
.ucto-list li b { font-weight: 500; }
.dvojice { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .dvojice { grid-template-columns: 1fr; } }
.podil-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.podil-grid .card { padding: 18px 20px; }
.podil-grid .num { display: block; font-size: 1.7rem; font-weight: 300; letter-spacing: -.02em; }
.podil-grid small { display: block; color: var(--ink-mut); margin-top: 4px; font-size: .86rem; }
@media (max-width: 560px) { .podil-grid { grid-template-columns: 1fr; } }
.prvni-platba { counter-reset: p; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.prvni-platba li { position: relative; padding-left: 34px; color: var(--ink-mut); }
.prvni-platba li::before { counter-increment: p; content: counter(p); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-family: var(--font-mono); font-size: .72rem; display: grid; place-items: center; color: var(--ink); }

/* zaměstnanci: tři telefony s obrazovkami Mo.one App (styl Core: Outfit, #006AFF) a šipky zleva doprava */
.zam-tok { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(10px, 2vw, 28px); align-items: center; margin-top: clamp(28px, 4vw, 48px); }
.zam-tok .tel3d { width: min(100%, 300px); margin: 0 auto; }
.zam-krok { text-align: center; }
.zam-krok p { margin: 14px auto 0; max-width: 30ch; color: var(--ink-mut); font-size: .92rem; }
.zam-krok p b { display: block; color: var(--ink); font-weight: 500; }
.zam-sipka { color: var(--ink-faint); font-size: 26px; }
@media (max-width: 860px) { .zam-tok { grid-template-columns: 1fr; } .zam-sipka { transform: rotate(90deg); text-align: center; } }
/* ---------- okno s poptávkou (data-lead) ---------- */
.lead-back { position: fixed; inset: 0; z-index: 90; background: rgba(24, 38, 68, .5); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .25s; }
.lead-back.is-open { opacity: 1; }
.lead-back[hidden] { display: none; }
.lead { width: min(560px, 100%); background: #fff; border-radius: 20px; padding: clamp(22px, 3vw, 34px); position: relative; }
.lead h3 { font-weight: 500; font-size: 1.35rem; letter-spacing: -.02em; }
.lead p.lead-sub { margin-top: 6px; color: var(--ink-mut); }
.lead form { display: grid; gap: 12px; margin-top: 20px; }
.lead label { display: grid; gap: 6px; font-size: .86rem; color: var(--ink-mut); }
.lead input, .lead textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); }
.lead input:focus-visible, .lead textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lead textarea { min-height: 96px; resize: vertical; }
.lead .lead-x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink); }
.lead .lead-note { font-size: .82rem; color: var(--ink-mut); margin-top: 8px; }
.lead .lead-note.is-err { color: #B91C1C; }

/* ---------- hero podstránek na stejném podkladu jako /platby-a2a ---------- */
/* tmavá varianta: stejný obrázek, tmavý závoj, bílý text (Prima ROK má bílé logo) */
.hero--podnikatele-tmavy {
  background: #06233F url('../assets/merchant/hero-podnikatele.jpg') center center / cover no-repeat;
  color: var(--paper-ink);
  min-height: min(88svh, 820px);
}
.hero--podnikatele-tmavy::after {
  background: linear-gradient(100deg, rgba(6, 35, 63, .88) 0%, rgba(6, 35, 63, .7) 46%, rgba(6, 35, 63, .3) 100%);
}
.hero--podnikatele-tmavy .kicker { color: var(--hero-zelena); }
.hero--podnikatele-tmavy h1, .hero--podnikatele-tmavy .hero-fact .num { color: #fff; }
.hero--podnikatele-tmavy .t-lead { color: rgba(235, 235, 235, .82); }
.hero--podnikatele-tmavy .hero-fact small { color: rgba(235, 235, 235, .68); }
.hero--podnikatele-tmavy .hero-how { color: #fff; }
@media (max-width: 760px) {
  .hero--podnikatele-tmavy { background-image: url('../assets/merchant/hero-podnikatele-mobil.jpg'); background-position: center top; }
  .hero--podnikatele-tmavy::after { background: linear-gradient(180deg, rgba(6, 35, 63, .85) 0%, rgba(6, 35, 63, .72) 55%, rgba(6, 35, 63, .5) 100%); }
}

/* ---------- Prima ROK: ukázky z vysílání ----------
   Dráha byla 300 vh, takže po dojetí posledního záběru zbyl dlouhý prázdný černý pás
   a následující sekce na něj lepila. Zkracujeme dráhu a dáváme oběma stranám vzduch. */
@media (min-width: 961px) {
  .prh-track { height: 200vh; }
  .prh-sticky .prg-stage, .prh-sticky.prg-stage { padding: clamp(40px, 6vh, 80px) 0 clamp(56px, 8vh, 96px); }
}
.prh-track + .sec { padding-top: clamp(64px, 8vw, 120px) !important; }