/* ==========================================================================
   Krčka — vývoj softwaru na předplatné
   Layout & visual language mirrored from designjoy.co, copy in Czech.
   ========================================================================== */

:root {
  --bg: #ece6e8;
  --line: #ddced3;
  --line-dark: #2c2c2c;
  --ink: #000000;
  --ink-2: #2c2c2c;
  --muted: #6f6369;
  /* Na mauve pozadí vychází --muted-2 jen na 3,1:1 — pro drobný text pod normou.
     Používat výhradně na dekoraci a velký text; na čtený text patří --muted. */
  --muted-2: #8b7f85;
  --card: #ffffff;
  --glass: rgba(255, 255, 255, 0.49);
  --glass-2: rgba(255, 255, 255, 0.4);
  --accent: #ff5a00;
  --plum: #1b000e;

  --r-card: 19px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 1280px;

  --container: 1139px;
  --inner: 1059px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
/* Vlastní `display` přebíjí UA pravidlo pro [hidden] — bez tohohle by prvky
   schované atributem hidden zůstaly vidět (.gate, .chosen, .booker__status …). */
[hidden] { display: none !important; }


html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- Signature italic accent ------------------------------------------- */
.it {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* --- Mono eyebrow ------------------------------------------------------- */
.eyebrow {
  font-family: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

/* --- Section shell with the vertical grid lines -------------------------- */
.section { position: relative; }

.container {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 60px 20px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.container::before { left: 0; }
.container::after { right: 0; }

.section--dark .container::before,
.section--dark .container::after { background: var(--line-dark); }

.inner {
  width: 100%;
  max-width: var(--inner);
  margin: 0 auto;
}

.p-b-0 { padding-bottom: 0; }
.p-t-0 { padding-top: 0; }

/* --- Typography scale ---------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 500; }

.h-display {
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.037em;
  font-weight: 500;
}

.h-section {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.033em;
  font-weight: 500;
}

.h-card {
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.small { font-size: 14px; color: var(--muted); margin: 0; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  min-height: 44px;
  min-width: 0;
}
.btn:active { transform: scale(0.96); }

.btn--ghost { background: var(--card); color: var(--ink); }
.btn--ghost:hover { background: #f7f2f4; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #f2ecee; }

.btn--lg { padding: 15px 28px; font-size: 15px; min-height: 52px; }

.btn--block { display: flex; width: 100%; justify-content: center; }

.btn--lang {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================================
   NAV + HERO
   ========================================================================== */

.hero .container { padding-top: 34px; padding-bottom: 60px; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 425px;
  gap: 40px;
  align-items: start;
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.045em;
  margin-right: auto;
}
.brand__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
  margin-bottom: 9px;
}

.nav__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.hero__title { margin-bottom: 20px; }
.hero__sub { font-size: 14px; color: var(--muted); margin: 0; }

/* --- Hero gradient card -------------------------------------------------- */
.jcard {
  position: relative;
  border-radius: var(--r-card);
  padding: 20px;
  overflow: hidden;
  min-height: 476px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  box-shadow: 0 24px 60px -30px rgba(27, 0, 14, 0.45);
}

.jcard__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 8%, #ff6fd8 0%, rgba(255, 111, 216, 0) 55%),
    radial-gradient(100% 80% at 92% 4%, #ff2d9b 0%, rgba(255, 45, 155, 0) 52%),
    radial-gradient(140% 110% at 78% 96%, #3b1bff 0%, rgba(59, 27, 255, 0) 60%),
    radial-gradient(90% 70% at 20% 78%, #8f2bff 0%, rgba(143, 43, 255, 0) 58%),
    linear-gradient(168deg, #c04cff 0%, #6b21ff 46%, #2f0ad6 100%);
}
.jcard__bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  width: 46%; height: 40%;
  left: 30%; top: 34%;
  filter: blur(6px);
}

.jcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
}
.pill-badge i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
}

.faces {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  gap: 5px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.faces span {
  width: 40px; height: 40px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.jcard__body { margin-top: auto; color: #fff; }
.jcard__title {
  font-size: 44px;
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0 0 10px;
}
.jcard__note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 18px;
  max-width: 30ch;
}

.jcard__cta { margin-bottom: 12px; }

.jcard__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  border-radius: 15px;
  padding: 10px 12px;
  color: var(--ink);
  transition: background 0.2s var(--ease);
}
.jcard__foot:hover { background: rgba(255, 255, 255, 0.66); }
.jcard__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: 0 0 38px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #ffb35c, #ff5a00);
}
.jcard__foot-text { line-height: 1.25; }
.jcard__foot-text strong { display: block; font-size: 14px; font-weight: 600; }
.jcard__foot-text span { font-size: 13px; color: var(--muted); }
.jcard__arrow {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 34px;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.hiw__header { max-width: 670px; margin: 0 auto 60px; text-align: center; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.step__visual {
  height: 186px;
  border-radius: var(--r-card);
  background: var(--card);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}

.step h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* Step 1 visual — the queue board */
.board { width: 82%; display: grid; gap: 7px; }
.board__row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.board__row i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px;
}
.board__row.is-done { color: var(--muted); }
.board__row.is-done i { background: #b9adb2; }
.board__row span { margin-left: auto; font-family: "Space Mono", monospace; font-size: 10.5px; color: var(--muted); font-weight: 400; }

/* Step 2 visual — marquee tags */
.marquee { width: 100%; display: grid; gap: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__row { display: flex; width: max-content; gap: 8px; animation: slide 34s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 42s; }
.marquee__row--slow { animation-duration: 52s; }
.marquee__row:hover { animation-play-state: paused; }
.tag {
  background: var(--bg);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Step 3 visual — delivery ticket */
.ticket {
  width: 78%;
  background: var(--bg);
  border-radius: 13px;
  padding: 16px;
}
.ticket__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ticket__dot { width: 22px; height: 22px; border-radius: 50%; background: #16a34a; display: grid; place-items: center; flex: 0 0 22px; }
.ticket__top strong { font-size: 13px; font-weight: 600; }
.ticket__meta { font-family: "Space Mono", monospace; font-size: 10.5px; color: var(--muted); }
.ticket__bar { height: 7px; border-radius: 4px; background: #d9ccd1; overflow: hidden; margin-bottom: 8px; }
.ticket__bar b { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #8f2bff, #ff2d9b); }

/* ==========================================================================
   ABOUT + PROOF
   ========================================================================== */

.about { max-width: 760px; margin: 0 auto; text-align: center; }
.about p { font-size: 19px; line-height: 1.5; letter-spacing: -0.015em; color: var(--ink-2); margin: 0; }
.about p + p { margin-top: 18px; }

.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 56px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.proof__item { text-align: center; }
.proof__num {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 6px;
}
.proof__label { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.35; }

/* ==========================================================================
   BENEFITS
   ========================================================================== */

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.bcard {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px 24px 28px;
}
.bcard__icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--bg);
  display: grid; place-items: center;
  margin-bottom: 40px;
}
.bcard h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.022em; margin: 0 0 6px; }
.bcard p { font-size: 14px; color: var(--muted); margin: 0; }

/* ==========================================================================
   QUOTES / STATEMENTS
   ========================================================================== */

.quotes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.quote {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote p {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0;
}
.quote footer {
  margin-top: auto;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Chips row (what runs in production) --------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }

/* ==========================================================================
   WORK / CAPABILITIES
   ========================================================================== */

.work__header { max-width: 720px; margin: 0 auto 44px; text-align: center; }

.cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; margin: 0 auto; }
.cloud .tag { background: var(--card); padding: 10px 18px; font-size: 14px; }
.cloud .tag--more { background: transparent; border: 1px dashed var(--line); color: var(--muted); }

.work__foot { text-align: center; margin-top: 52px; }
.work__foot h3 { font-size: 28px; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 6px; }
.work__foot p { font-size: 15px; color: var(--muted); margin: 0; }

/* ==========================================================================
   PRICING
   ========================================================================== */

.pricing__header { max-width: 670px; margin: 0 auto 50px; text-align: center; }

.pricing__flex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.plan {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.plan__name { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.plan__tag {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--bg);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  color: var(--muted);
  white-space: nowrap;
}

.plan__promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);          /* oranžová na bílé je jen 3,1:1 — akcent nese puntík */
  margin-bottom: 8px;
}
.plan__promo i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.plan__price b { font-size: 46px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.plan__price span { font-size: 15px; color: var(--muted); }
.plan__price del { font-size: 17px; color: var(--muted); }
.plan__note { font-size: 13px; color: var(--muted); margin: 0 0 26px; }

.plan__list { display: grid; gap: 11px; margin-bottom: 26px; }
.plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; letter-spacing: -0.012em; }
.plan__list svg { flex: 0 0 16px; margin-top: 3px; }

.plan__cta { margin-top: auto; }
.plan__foot { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }

.plan__included {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.guarantees { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.gcard {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 24px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.gcard__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; flex: 0 0 38px; }
.gcard h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.gcard p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__header { text-align: center; margin-bottom: 46px; }

.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 22px 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  min-height: 44px;
}
.faq__q:hover { color: var(--ink-2); }
.faq__icon {
  margin-left: auto;
  flex: 0 0 26px;
  width: 26px; height: 26px;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.faq__icon::before { width: 14px; height: 1.6px; }
.faq__icon::after { width: 1.6px; height: 14px; }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.32s var(--ease);
}
.faq__a p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  padding: 0 60px 24px 4px;
  max-width: 68ch;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.section--dark { background: var(--ink); color: #fff; }
.section--dark .container { padding-top: 92px; padding-bottom: 40px; }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-bottom: 80px;
}

.foot__title {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0 0 16px;
}
.foot__sub { font-size: 15px; color: rgba(255, 255, 255, 0.62); margin: 0 0 26px; max-width: 46ch; }
.foot__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot__mail { font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.foot__mail a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.foot__card {
  background: #111;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-card);
  padding: 26px;
}
.foot__card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.022em; margin: 0 0 18px; }
.slots { display: grid; gap: 9px; margin-bottom: 18px; }
.slot {
  display: flex; align-items: center; gap: 12px;
  background: #191919;
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14px;
  transition: background 0.18s var(--ease);
}
.slot:hover { background: #232323; }
.slot i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: 0 0 7px; }
.slot span { margin-left: auto; font-family: "Space Mono", monospace; font-size: 11px; color: rgba(255, 255, 255, 0.5); }

.foot__bar {
  border-top: 1px solid var(--line-dark);
  padding-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.52);
}
.foot__bar nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.foot__bar a:hover { color: #fff; }

.watermark {
  font-size: clamp(70px, 17vw, 230px);
  line-height: 0.8;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-dark);
  margin: 56px 0 48px;
  user-select: none;
}

/* ==========================================================================
   REZERVAČNÍ WIDGET
   ========================================================================== */

.booker {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.booker[data-state="done"] { grid-template-columns: minmax(0, 1fr); }

.booker__pick,
.booker__form {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px 26px 28px;
}

.booker__label {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.booker__label span { color: var(--ink-2); }

.booker__step + .booker__step { margin-top: 26px; }

.booker__status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  padding: 14px 0;
}
.booker__status a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  animation: spin 0.7s linear infinite;
  flex: 0 0 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- pruh dnů ------------------------------------------------------------- */
.daystrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.daystrip::-webkit-scrollbar { height: 5px; }
.daystrip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 74px;
  padding: 11px 12px 12px;
  border-radius: 13px;
  background: var(--bg);
  text-align: center;
  line-height: 1.2;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.day:hover { background: #e2d9dd; }
.day b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.day i { display: block; font-style: normal; font-size: 11px; color: var(--muted); text-transform: lowercase; }
.day u {
  display: block;
  text-decoration: none;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 5px;
}
.day[aria-selected="true"] { background: var(--ink); color: #fff; }
.day[aria-selected="true"] i,
.day[aria-selected="true"] u { color: rgba(255, 255, 255, 0.65); }

/* --- mřížka časů ---------------------------------------------------------- */
.slotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  max-height: 268px;
  overflow-y: auto;
  padding-right: 4px;
}
.slotgrid::-webkit-scrollbar { width: 5px; }
.slotgrid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.slot-btn {
  padding: 11px 8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  min-height: 44px;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.slot-btn:hover { background: #e2d9dd; }
.slot-btn:active { transform: scale(0.96); }
.slot-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* --- formulář ------------------------------------------------------------- */
.chosen {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.chosen svg { flex: 0 0 16px; }
.chosen__clear {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chosen__clear:hover { color: var(--ink); }

/* --- textové pole s plovoucím popiskem ------------------------------------
   Popisek sedí uvnitř pole a při psaní vyjede nahoru. Nezabírá tak řádek nad
   polem a formulář drží pohromadě i na mobilu.

   Popisek je v DOM AŽ ZA polem, jinak by nešlo zachytit jeho stav sourozeneckým
   selektorem. `placeholder=" "` (mezera) je nutný — bez něj `:placeholder-shown`
   nefunguje a popisek by zůstal dole i u vyplněného pole. */
.field {
  position: relative;
  display: block;
  margin-bottom: 12px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 16px;                 /* pod 16 px zoomuje iOS při fokusu */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 24px 14px 8px;          /* nahoře místo pro vyjetý popisek */
  min-height: 58px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
  resize: vertical;
}
.field textarea { padding-top: 28px; min-height: 104px; line-height: 1.5; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #c2410c; }

.field > span {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  pointer-events: none;            /* klik projde na pole pod popiskem */
  transition: top 0.16s var(--ease), transform 0.16s var(--ease),
              font-size 0.16s var(--ease), letter-spacing 0.16s var(--ease),
              color 0.16s var(--ease);
}
/* u víceřádkového pole je střed jinde než u jednořádkového */
.field textarea ~ span { top: 26px; transform: none; }

.field input:focus ~ span,
.field input:not(:placeholder-shown) ~ span,
.field textarea:focus ~ span,
.field textarea:not(:placeholder-shown) ~ span,
.field select ~ span {
  top: 9px;
  transform: none;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field > span em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input:focus ~ span em,
.field input:not(:placeholder-shown) ~ span em,
.field textarea:focus ~ span em,
.field textarea:not(:placeholder-shown) ~ span em { color: var(--muted); }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.booker__error {
  background: #fdeee7;
  color: #9a3412;
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin: 0 0 13px;
}

.booker__form .btn[disabled] { opacity: 0.42; pointer-events: none; }
.booker__form .btn.is-busy { opacity: 0.6; pointer-events: none; }

/* --- potvrzení ------------------------------------------------------------ */
.booker__done {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 46px 32px 44px;
  text-align: center;
}
.booker__check {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #16a34a;
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.booker__done h3 { font-size: 28px; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 8px; }
.booker__done p { font-size: 16px; color: var(--ink-2); margin: 0 0 4px; }
.booker__done-note { font-size: 14px !important; color: var(--muted) !important; margin: 10px 0 22px !important; }

@media (max-width: 860px) {
  .booker { grid-template-columns: minmax(0, 1fr); }
  .slotgrid { max-height: 220px; }
}
@media (max-width: 640px) {
  .booker__pick, .booker__form { padding: 22px 18px 24px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .booker__done { padding: 36px 20px 34px; }
}

/* ==========================================================================
   REZERVAČNÍ WIDGET V TMAVÉ PATIČCE
   ========================================================================== */

.foot__booking-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.foot__booking-head .eyebrow { color: rgba(255, 255, 255, 0.45); }
.foot__booking-head .foot__title { margin-bottom: 14px; }
.foot__booking-head .foot__sub { margin: 0 auto; }

.section--dark .booker__pick,
.section--dark .booker__form,
.section--dark .booker__done {
  background: #111;
  border: 1px solid var(--line-dark);
}

.section--dark .booker__label { color: rgba(255, 255, 255, 0.45); }
.section--dark .booker__label span { color: rgba(255, 255, 255, 0.8); }

.section--dark .booker__status { color: rgba(255, 255, 255, 0.6); }
.section--dark .booker__status a { color: #fff; }
.section--dark .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; }

/* Tmavá karta, ale ovládací prvky světlé s černým textem — tmavé na tmavém
   se špatně čte. Vybraná dlaždice se invertuje na černou a drží ji bílý
   prstenec, jinak by na tmavém podkladu zanikla. */
.section--dark .day,
.section--dark .slot-btn,
.section--dark .chosen,
.section--dark .field input,
.section--dark .field textarea { background: var(--bg); color: var(--ink); }

.section--dark .day:hover,
.section--dark .slot-btn:hover { background: #fff; }

/* na světlé dlaždici by --muted vyšel jen na 4,65:1 při 9,5 px */
.section--dark .day i,
.section--dark .day u { color: var(--ink-2); }

.section--dark .day[aria-selected="true"],
.section--dark .slot-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
.section--dark .day[aria-selected="true"] i,
.section--dark .day[aria-selected="true"] u { color: rgba(255, 255, 255, 0.7); }

.section--dark .chosen__clear { color: var(--ink-2); }
.section--dark .chosen__clear:hover { color: var(--ink); }

.section--dark .field > span { color: var(--muted); }
.section--dark .field input:focus ~ span,
.section--dark .field input:not(:placeholder-shown) ~ span,
.section--dark .field textarea:focus ~ span,
.section--dark .field textarea:not(:placeholder-shown) ~ span { color: var(--ink-2); }
.section--dark .field input:focus,
.section--dark .field textarea:focus { background: #fff; border-color: #fff; }
.section--dark .field input::placeholder,
.section--dark .field textarea::placeholder { color: var(--muted-2); }

.section--dark .plan__foot { color: rgba(255, 255, 255, 0.45); }
.section--dark .booker__error { background: #3a1a12; color: #fca5a5; }

.section--dark .booker__done h3,
.section--dark .booker__done p { color: #fff; }
.section--dark .booker__done-note { color: rgba(255, 255, 255, 0.55) !important; }

.section--dark .daystrip::-webkit-scrollbar-thumb,
.section--dark .slotgrid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

.foot__contact { color: rgba(255, 255, 255, 0.52); }
.foot__contact a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 3px; }
.foot__contact a:hover { color: #fff; }

/* ==========================================================================
   REVEAL
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .nav { margin-bottom: 40px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .benefits { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proof { gap: 30px 18px; }
  .pricing__flex { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-bottom: 56px; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .container { padding: 44px 18px; }

  /* Na dotyk je 15px vysoký odkaz v patičce k nezasažení — roztáhnout plochu. */
  .foot__bar a,
  .foot__contact a { display: inline-block; padding: 9px 0; }
  .foot__bar nav { gap: 10px 20px; }
  .brand { padding: 7px 0; }
  .benefits { grid-template-columns: minmax(0, 1fr); }
  .guarantees { grid-template-columns: minmax(0, 1fr); }
  .brand { width: 100%; margin-right: 0; margin-bottom: 4px; }
  .nav__actions { width: 100%; }
  .nav__actions .btn { flex: 1 1 auto; justify-content: center; }
  .plan__head { flex-wrap: wrap; }
  .plan__tag { white-space: normal; }
  .plan__price b { font-size: 36px; }
  .jcard { min-height: 0; }
  .jcard__title { font-size: 36px; }
  .faces { grid-template-columns: repeat(3, 32px); }
  .faces span { width: 32px; height: 32px; }
  .faq__q { font-size: 16px; gap: 12px; }
  .faq__a p { padding-right: 20px; }
  .quote p { font-size: 20px; }
  .about p { font-size: 17px; }
  .section--dark .container { padding-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__row { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   ?static=1 — screenshot mode (no animation, reveals forced visible)
   ========================================================================== */

.static .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.static .marquee__row { animation: none !important; }
.static *, .static *::before, .static *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* ==========================================================================
   OBSAHOVÉ STRÁNKY (software na míru, ceny, integrace…)
   ========================================================================== */

.page-hero { padding-top: 30px; }
.page-hero .nav { margin-bottom: 52px; }

.page-hero__lead {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 22px 0 0;
}

.crumbs {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.crumbs a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }

/* --- rychlá odpověď hned pod nadpisem ------------------------------------- */
.answer {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px 28px;
  margin: 34px 0 0;
  max-width: 74ch;
}
.answer p { margin: 0; font-size: 17.5px; line-height: 1.55; letter-spacing: -0.012em; }
.answer p + p { margin-top: 12px; }
.answer strong { font-weight: 700; }

/* --- vlastní text --------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 56px 0 16px;
}
.prose h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 32px 0 10px;
}
.prose p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 15px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--muted); }

.prose ul { display: grid; gap: 10px; margin: 0 0 18px; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
}

.prose ol { counter-reset: step; display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.prose ol li {
  counter-increment: step;
  position: relative;
  padding-left: 38px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.prose ol li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  display: grid; place-items: center;
}

/* --- tabulka -------------------------------------------------------------- */
.tablewrap { overflow-x: auto; margin: 0 0 20px; border-radius: var(--r-card); }
.prose table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  font-size: 15.5px;
}
.prose th, .prose td { padding: 13px 18px; text-align: left; vertical-align: top; }
.prose th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.prose tbody tr + tr td { border-top: 1px solid var(--bg); }
.prose td strong { white-space: nowrap; }

/* --- zvýrazněná poznámka -------------------------------------------------- */
.note {
  border-left: 2px solid var(--ink);
  padding: 4px 0 4px 20px;
  margin: 0 0 20px;
}
.note p { margin: 0; font-size: 16.5px; line-height: 1.6; }

/* --- rozcestník na další stránky ------------------------------------------ */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 20px; }
.related a {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 20px 22px;
  transition: transform 0.16s var(--ease);
}
.related a:hover { transform: translateY(-2px); }
.related strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.related span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* --- výzva na konci ------------------------------------------------------- */
.page-cta {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card);
  padding: 40px 38px;
  margin-top: 56px;
  max-width: 74ch;
}
.page-cta h2 { font-size: 28px; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 10px; color: #fff; }
.page-cta p { font-size: 16px; color: rgba(255, 255, 255, 0.66); margin: 0 0 22px; max-width: 46ch; }
.page-cta .btn { background: #fff; color: var(--ink); }
.page-cta .btn:hover { background: #e8e2e4; }

@media (max-width: 640px) {
  .page-hero__lead { font-size: 17.5px; }
  .answer { padding: 20px 20px; }
  .answer p { font-size: 16px; }
  .page-cta { padding: 28px 22px; }
}

/* --- rozcestník témat v patičce ------------------------------------------- */
.foot__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.foot__topics a {
  background: #191919;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.foot__topics a:hover { background: #fff; color: var(--ink); }

/* --- hlavička na telefonu -------------------------------------------------- */

/* Na malé obrazovce se tlačítka v hlavičce lámala do druhého řádku a zabírala
   půlku prvního okna. Zůstává značka vlevo a přepínač jazyka vpravo; k „Jak to
   funguje" i k rezervaci se návštěvník dostane odrolováním, plovoucí lištou
   dole (chat.css) a odkazy v patičce. */
@media (max-width: 640px) {
  .nav { flex-wrap: nowrap; margin-bottom: 40px; }
  /* Ruší se tím starší mobilní rozložení o kus výš (řádek ~1091), které
     roztahovalo značku i tlačítka na celou šířku, aby se vešla do dvou řádků.
     Bez těch tří resetů by zbylý přepínač zdědil `flex: 1` a `width: 100%`,
     natáhl se přes celou hlavičku a vystrčil ji o 56 px mimo obrazovku. */
  .brand { width: auto; margin-right: auto; margin-bottom: 0; }
  .nav__actions { width: auto; flex-wrap: nowrap; flex: none; }
  .nav__actions .btn:not(.btn--lang) { display: none; }
  .nav__actions .btn--lang { flex: none; }
}

/* --- výběr termínu: nativní na telefonu, mřížka na počítači --------------- */

/* Na počítači zůstává pás dnů a mřížka časů — myš zvládne přehled na jeden
   pohled. Na telefonu se místo nich ukážou dva selecty, které iOS vykreslí
   jako rolující kolečko vyjíždějící zdola. Palec pak nemíří do mřížky
   patnáctiminutových tlačítek, ale roluje jako v Kalendáři. */
.booker__native { display: none; }

@media (max-width: 640px) {
  .booker__native { display: block; }
  .booker__native .field { margin-bottom: 10px; }
  .booker__native .field:last-child { margin-bottom: 0; }
  .booker__step[data-role="days-step"],
  .booker__step[data-role="slots-step"] { display: none !important; }
}