/* =====================================================================
   PROJEKTOVNÍK – STYLY KONKRÉTNÍCH STRÁNEK
   ===================================================================== */

/* ============== HERO (homepage) ============== */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  position: relative; overflow: hidden;
}
.hero::before {
  /* jemný geometrický pattern v pozadí, ne AI placeholder */
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 80% -10%, rgba(230,168,23,.18), transparent 45%),
    radial-gradient(circle at 0% 110%, rgba(211,84,0,.12), transparent 40%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  margin-bottom: var(--s-5);
}
.hero h1 .accent { color: var(--c-primary); }
.hero h1 .underline {
  display: inline-block; position: relative;
}
.hero h1 .underline::after {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: 4px; height: 14px;
  background: var(--c-secondary-50); z-index: -1; border-radius: 2px;
  transform: skewX(-6deg);
}
.hero .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); margin-bottom: var(--s-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.hero__trust { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; color: var(--c-muted); font-size: var(--fs-200); }
.hero__trust strong { color: var(--c-ink); font-weight: 600; }

.hero__visual {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--r-4);
  background: linear-gradient(135deg, #fff 0%, var(--c-primary-50) 100%);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-3);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hero__mock-window {
  background: var(--c-surface); border-radius: var(--r-3);
  border: 1px solid var(--c-line); padding: var(--s-4);
  box-shadow: var(--sh-1);
  flex: 1;
}
.hero__mock-tabs { display: flex; gap: 6px; margin-bottom: var(--s-3); }
.hero__mock-tabs i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line); }
.hero__mock-tabs i:first-child { background: #ff5f57; }
.hero__mock-tabs i:nth-child(2) { background: #ffbd2e; }
.hero__mock-tabs i:nth-child(3) { background: #28c840; }
.hero__mock-content { display: grid; grid-template-columns: 100px 1fr; gap: var(--s-3); height: 100%; min-height: 220px; }
.hero__mock-side { background: var(--c-surface-2); border-radius: var(--r-2); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.hero__mock-side i { display: block; height: 10px; background: #d6d2c7; border-radius: 4px; }
.hero__mock-side i:nth-child(1) { background: var(--c-primary); width: 70%; }
.hero__mock-main { background: var(--c-bg); border-radius: var(--r-2); padding: var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.hero__mock-main i { display: block; height: 12px; border-radius: 4px; background: var(--c-line-soft); }
.hero__mock-main i.tall { height: 32px; background: var(--c-secondary-50); }
.hero__mock-main i.short { width: 60%; }
.hero__mock-main i.bar { background: var(--c-primary-50); }

.hero__floating {
  position: absolute; right: -16px; bottom: -16px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-3); padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-3);
  display: flex; gap: var(--s-3); align-items: center;
}
.hero__floating .dot { width: 36px; height: 36px; border-radius: 50%; background: var(--c-success-50); color: var(--c-success); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hero__floating div { font-size: var(--fs-200); }
.hero__floating strong { display: block; color: var(--c-ink); }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__visual { order: 2; }
  .hero__floating { display: none; }
}

/* ============== Logo grid (trust) ============== */
.logo-strip {
  padding: var(--s-6) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.logo-strip__title { color: var(--c-muted); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-4); }
.logo-strip__row { display: flex; flex-wrap: wrap; gap: var(--s-7); justify-content: center; align-items: center; opacity: .7; }
.logo-strip__row span { font-family: var(--font-display); font-weight: 600; color: var(--c-ink-soft); font-size: var(--fs-400); }

/* ============== Features grid ============== */
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
@media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card { padding: var(--s-6); }
.feature-card .ico {
  width: 56px; height: 56px; border-radius: var(--r-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary-50); color: var(--c-primary);
  margin-bottom: var(--s-4);
}
.feature-card .ico svg { width: 28px; height: 28px; }
.feature-card h3 { margin-bottom: var(--s-2); }
.feature-card p { color: var(--c-ink-soft); margin-bottom: 0; }

/* Alternativa pro 3 hlavní moduly s barevným akcentem */
.module-card { position: relative; overflow: hidden; }
.module-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-primary); border-radius: 2px;
  transform: scaleY(.3); transform-origin: top; transition: transform var(--t);
}
.module-card:hover::after { transform: scaleY(1); }
.module-card.m-naradi .ico  { background: var(--c-primary-50);   color: var(--c-primary); }
.module-card.m-dochazka .ico{ background: var(--c-secondary-50); color: var(--c-secondary-600); }
.module-card.m-vykresy .ico { background: #e6f0fa;               color: var(--c-info); }
.module-card.m-naradi::after  { background: var(--c-primary); }
.module-card.m-dochazka::after{ background: var(--c-secondary); }
.module-card.m-vykresy::after { background: var(--c-info); }

/* ============== CTA banner ============== */
.cta-banner {
  background: linear-gradient(135deg, var(--c-ink) 0%, #1c2733 100%);
  color: #fff;
  border-radius: var(--r-4);
  padding: var(--s-8);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(211,84,0,.25), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(230,168,23,.18), transparent 35%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: #fff; margin-bottom: var(--s-3); }
.cta-banner p { color: #cdd5dd; margin-bottom: var(--s-5); max-width: 60ch; margin-left: auto; margin-right: auto; }
.cta-banner__buttons { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ============== CENÍK ============== */
.pricing-header { text-align: center; }
.pricing-toggle-wrap { display: flex; justify-content: center; margin: var(--s-5) 0 var(--s-7); }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.plan {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-4); padding: var(--s-6);
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
}
.plan.plan--start    { background: #fff; opacity: .98; }
.plan.plan--profi    {
  border-color: var(--c-primary);
  background: linear-gradient(180deg, #fff, #fffaf3);
  box-shadow: var(--sh-3);
  transform: translateY(-12px);
  z-index: 2;
}
.plan.plan--komplet  { background: #fff; opacity: .98; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.plan.plan--profi:hover { transform: translateY(-16px); box-shadow: var(--sh-3); }

.plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-primary); color: #fff;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-100); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--sh-glow-primary);
}
.plan__name { font-family: var(--font-display); font-size: var(--fs-500); font-weight: 700; }
.plan__tagline { color: var(--c-muted); font-size: var(--fs-200); margin: 4px 0 var(--s-4); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--s-2); }
.plan__price .num { font-family: var(--font-display); font-size: var(--fs-800); font-weight: 700; color: var(--c-ink); }
.plan__price .unit { color: var(--c-muted); font-size: var(--fs-300); }
.plan__price-note { color: var(--c-muted); font-size: var(--fs-200); margin-bottom: var(--s-5); min-height: 20px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-200); }
.plan li .check {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  background: var(--c-success-50); color: var(--c-success);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.plan li.no .check { background: #f4f1ea; color: var(--c-muted-soft); }
.plan li.no { color: var(--c-muted); }
.plan li strong { color: var(--c-ink); }
.plan__cta { margin-top: auto; }

/* Compare table */
.pricing-compare {
  margin-top: var(--s-9);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-4); overflow: hidden;
}
.pricing-compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); }
.pricing-compare th, .pricing-compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-line-soft); }
.pricing-compare thead th { background: var(--c-surface-2); font-weight: 600; color: var(--c-ink); }
.pricing-compare tbody td { vertical-align: top; }
.pricing-compare th.col-profi, .pricing-compare td.col-profi { background: rgba(211,84,0,.05); color: var(--c-ink); }
.pricing-compare .row-section td {
  background: var(--c-surface-2); font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-100); letter-spacing: .08em; color: var(--c-ink-soft);
}
.pricing-compare .yes { color: var(--c-success); font-weight: 700; }
.pricing-compare .no  { color: var(--c-muted-soft); }

/* Mobiln\u00ed p\u0159ep\u00edna\u010d bal\u00ed\u010dku */
.pricing-compare-tabs { display: none !important; }

@media (max-width: 720px) {
  .pricing-compare { overflow: hidden; }
  .pricing-compare table { min-width: 0; font-size: var(--fs-200); }
  .pricing-compare th, .pricing-compare td { padding: 10px 12px; }

  .pricing-compare-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: var(--s-3);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    position: sticky; top: var(--header-h); z-index: 5;
  }
  .pricing-compare-tabs button {
    background: transparent;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-2);
    padding: 10px 6px;
    font: inherit; font-weight: 600; font-size: 13px;
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .pricing-compare-tabs button.is-active {
    background: var(--c-primary); color: #fff;
    border-color: var(--c-primary);
    box-shadow: 0 2px 8px rgba(211,84,0,.25);
  }

  /* Skr\u00fdt nesouvisej\u00edc\u00ed sloupce podle data-active */
  .pricing-compare table[data-active="start"] th:nth-child(3),
  .pricing-compare table[data-active="start"] td:nth-child(3),
  .pricing-compare table[data-active="start"] th:nth-child(4),
  .pricing-compare table[data-active="start"] td:nth-child(4) { display: none; }

  .pricing-compare table[data-active="profi"] th:nth-child(2),
  .pricing-compare table[data-active="profi"] td:nth-child(2),
  .pricing-compare table[data-active="profi"] th:nth-child(4),
  .pricing-compare table[data-active="profi"] td:nth-child(4) { display: none; }

  .pricing-compare table[data-active="komplet"] th:nth-child(2),
  .pricing-compare table[data-active="komplet"] td:nth-child(2),
  .pricing-compare table[data-active="komplet"] th:nth-child(3),
  .pricing-compare table[data-active="komplet"] td:nth-child(3) { display: none; }

  /* row-section (colspan=4) z\u016fstane viditeln\u00fd */
  .pricing-compare .row-section td { display: table-cell !important; }

  /* Hodnota ve sloupci ud\u011bl\u00e1m v\u00fdrazn\u011bj\u0161\u00ed */
  .pricing-compare tbody td:not(:first-child) {
    text-align: right;
    font-weight: 600;
    color: var(--c-primary);
  }
}

/* Mobile: vrat horizontalni scroll u porovnavaci tabulky (preplace dris pravidla) */
@media (max-width: 720px) {
  .pricing-compare { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; }
  .pricing-compare table { min-width: 560px !important; }
  .pricing-compare th, .pricing-compare td { display: table-cell !important; text-align: center; }
  .pricing-compare tbody td:first-child { text-align: left; }
  .pricing-compare tbody td:not(:first-child) { color: inherit; font-weight: inherit; }
}

/* Calculator */
.calc {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-6);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-4); padding: var(--s-7);
  margin-top: var(--s-6);
  min-width: 0;
}
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } }
@media (max-width: 600px) {
  .calc { padding: var(--s-4); gap: var(--s-4); }
  .calc__controls { gap: var(--s-3); min-width: 0; }
  .calc-row { min-width: 0; }
  .calc-row__label { flex-wrap: wrap; gap: 4px var(--s-3); min-width: 0; }
  .calc-row__label strong { font-size: 14px; min-width: 0; }
  .calc-row__label span { white-space: nowrap; }
  .calc-row input[type="range"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .calc-module { min-width: 0; }
  .calc-module__header { padding: var(--s-3) var(--s-4); gap: var(--s-2); flex-wrap: wrap; }
  .calc-module__header > div:not(.switch) { min-width: 0; flex: 1 1 0; }
  .calc-module__header .switch { flex: 0 0 auto; width: 44px; height: 24px; }
  .calc-module__header .switch-track::after { width: 18px; height: 18px; top: 3px; left: 3px; }
  .calc-module__header .switch input:checked + .switch-track::after { transform: translateX(20px); }
  .calc-module__header strong { font-size: var(--fs-300); }
  .calc-module__header small { font-size: 12px; }
  .calc-module.is-on .calc-module__body { padding: 0 var(--s-4) var(--s-4); }
  .calc-module__body .choice { font-size: 13px; min-width: 0; }
  .calc-module__body .choice span:last-child { min-width: 0; flex: 1 1 0; }
  .calc__summary { padding: var(--s-5); min-width: 0; }
  .calc__summary h3 { font-size: var(--fs-300); }
  .calc__price { flex-wrap: wrap; }
  .calc__price .num { font-size: var(--fs-700); }
  #calcSubmitBtn { font-size: 14px; padding: 12px 14px; white-space: normal; line-height: 1.2; }
  .calc__price .unit { font-size: var(--fs-200); }
  .calc__breakdown { font-size: 13px; }
  .calc__breakdown div { gap: var(--s-2); flex-wrap: wrap; }
}

.calc__controls { display: flex; flex-direction: column; gap: var(--s-4); }

.calc-row { display: flex; flex-direction: column; gap: 6px; }
.calc-row__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.calc-row__label strong { color: var(--c-ink); }
.calc-row__label span { color: var(--c-primary); font-weight: 700; font-family: var(--font-display); }
.calc-row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--c-primary) 0%, var(--c-primary) var(--p, 50%), var(--c-line) var(--p, 50%), var(--c-line) 100%);
  cursor: pointer; outline: none;
}
.calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(211,84,0,.3); cursor: grab;
  transition: transform var(--t-fast);
}
.calc-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-row input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(211,84,0,.3); cursor: grab;
}

.calc-module {
  border: 1px solid var(--c-line); border-radius: var(--r-3);
  background: var(--c-bg); overflow: hidden;
  transition: border-color var(--t), background var(--t);
}
.calc-module.is-on { border-color: var(--c-primary); background: var(--c-surface); }
.calc-module__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); cursor: pointer;
  gap: var(--s-3);
}
.calc-module__header strong { font-family: var(--font-display); font-size: var(--fs-400); }
.calc-module__header small { color: var(--c-muted); font-size: var(--fs-200); display: block; }
.calc-module__body {
  padding: 0 var(--s-5);
  max-height: 0; overflow: hidden; transition: max-height var(--t-slow), padding var(--t);
}
.calc-module.is-on .calc-module__body { padding: 0 var(--s-5) var(--s-5); max-height: 800px; }

.calc__summary {
  background: var(--c-ink); color: #fff;
  border-radius: var(--r-3); padding: var(--s-6);
  position: sticky; top: calc(var(--header-h) + 16px);
  align-self: flex-start;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.calc__summary h3 { color: #fff; margin: 0; font-size: var(--fs-400); }
.calc__price { display: flex; align-items: baseline; gap: 8px; }
.calc__price .num { font-family: var(--font-display); font-size: var(--fs-800); font-weight: 700; }
.calc__price .unit { color: #cdd5dd; font-size: var(--fs-300); }
.calc__breakdown { font-size: var(--fs-200); color: #cdd5dd; display: flex; flex-direction: column; gap: 6px; }
.calc__breakdown div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.calc__breakdown div:last-child { border-bottom: 0; font-weight: 700; color: #fff; padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.15); border-bottom: 0; }

/* ============== O MNĚ ============== */
.bio-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-7); align-items: start; min-width: 0; }
@media (max-width: 880px) { .bio-grid { grid-template-columns: minmax(0, 1fr); } }
.bio-text, .bio-photo { min-width: 0; }
.bio-photo {
  aspect-ratio: 4/5; border-radius: var(--r-4);
  background: linear-gradient(135deg, var(--c-primary-50), var(--c-secondary-50));
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-display); font-size: 6rem; font-weight: 700; color: var(--c-primary);
  position: relative; overflow: hidden;
  border: 1px solid var(--c-line);
}
.bio-photo small {
  position: absolute; bottom: var(--s-4); left: 0; right: 0; text-align: center;
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: 500; color: var(--c-muted);
}
.bio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; margin: var(--s-5) 0 0;
  width: 100%;
  justify-content: flex-end;
}
.bio-meta__track { display: contents; }
.bio-meta__item {
  background: var(--c-surface); border: 1px solid var(--c-line);
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13px; display: inline-flex; flex-direction: row; align-items: center;
  line-height: 1.2; gap: 6px;
  white-space: nowrap;
}
.bio-meta__item strong { color: var(--c-primary); font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) {
  .bio-meta {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: var(--s-4);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .bio-meta__track {
    display: inline-flex;
    gap: 8px;
    width: max-content;
    animation: bio-meta-scroll 22s linear infinite;
    will-change: transform;
  }
  .bio-meta__item { flex-shrink: 0; }
}
@keyframes bio-meta-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bio-meta__track { animation: none; }
}

/* ============== KONTAKT ============== */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-6);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-card { padding: var(--s-5); }
.contact-card h3 { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: var(--fs-400); }
.contact-card .row { display: flex; gap: var(--s-3); align-items: flex-start; padding: 8px 0; }
.contact-card .row .ic {
  width: 36px; height: 36px; border-radius: var(--r-2); flex-shrink: 0;
  background: var(--c-primary-50); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
}
.contact-card small { color: var(--c-muted); font-size: var(--fs-200); }

.hours { font-size: var(--fs-200); display: flex; flex-direction: column; gap: 4px; }
.hours div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 4px 0; border-bottom: 1px dashed var(--c-line); }
.hours .important { color: var(--c-primary); font-weight: 600; }

.legal-info {
  background: var(--c-surface-2); border-radius: var(--r-3);
  padding: var(--s-4); font-size: var(--fs-200); color: var(--c-ink-soft);
}
.legal-info strong { color: var(--c-ink); display: block; margin-bottom: 4px; }

/* form section */
.contact-form { padding: var(--s-7); }
@media (max-width: 600px) { .contact-form { padding: var(--s-5); } }
.form-section {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5); margin-top: var(--s-5);
}
.form-section h4 {
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted);
  margin-bottom: var(--s-4);
}
.plan-pick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2);
}
@media (max-width: 600px) { .plan-pick { grid-template-columns: repeat(2, 1fr); } }
.plan-pick label {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s-3); border: 1.5px solid var(--c-line); border-radius: var(--r-2);
  cursor: pointer; transition: all var(--t-fast);
  text-align: center; background: var(--c-surface);
}
.plan-pick label:hover { border-color: var(--c-primary); }
.plan-pick input[type="radio"], .plan-pick input[type="checkbox"] { display: none; }
.plan-pick input:checked + .plan-pick__inner,
.plan-pick label:has(input:checked) {
  border-color: var(--c-primary); background: var(--c-primary-50); color: var(--c-primary);
}
.plan-pick label strong { font-family: var(--font-display); font-size: var(--fs-300); }
.plan-pick label small { color: var(--c-muted); font-size: 11px; }

.captcha-box {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--c-surface-2); border-radius: var(--r-2);
}
.captcha-box .question { font-family: var(--font-display); font-weight: 600; flex: 1; }
.captcha-box input { width: 100px; }
.captcha-box .reload { color: var(--c-muted); font-size: var(--fs-200); }
@media (max-width: 600px) {
  .captcha-box {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .captcha-box .question {
    text-align: center;
    white-space: nowrap;
    font-size: var(--fs-400);
  }
  .captcha-box input { width: 100%; text-align: center; }
  .captcha-box .reload { align-self: center; }
}

/* reCAPTCHA v3 badge (zobrazí se místo math boxu když je k dispozici) */
.captcha-recaptcha {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--c-surface-2); border-radius: var(--r-2);
  font-size: var(--fs-200); color: var(--c-ink);
}
.captcha-recaptcha__check {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-success); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.captcha-recaptcha__hint {
  width: 100%; font-size: 11px; color: var(--c-muted); line-height: 1.5;
}
.captcha-recaptcha__hint a { color: inherit; text-decoration: underline; }
/* Schovat plovoucí Google badge – máme vlastní disclaimer */
.grecaptcha-badge { visibility: hidden !important; }

/* ============== GDPR / 404 ============== */
.legal-page h2 { margin-top: var(--s-7); }
.legal-page h3 { margin-top: var(--s-5); }
.legal-page ul { margin-bottom: var(--s-4); }

.error-404 {
  text-align: center; padding: var(--s-9) var(--s-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  min-height: 60vh; justify-content: center;
}
.error-404 .num {
  font-family: var(--font-display); font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}



/* ============== INFO TOOLTIP ============== */
.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-line); color: var(--c-ink-soft);
  font-size: 10px; font-weight: 700; font-style: normal;
  cursor: help; position: relative;
  margin-left: 4px; vertical-align: middle;
  transition: background var(--t-fast), color var(--t-fast);
}
.info-tip::before { content: 'i'; font-family: var(--font-display); }
.info-tip:hover { background: var(--c-primary); color: #fff; }
.info-tip:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--c-ink); color: #fff;
  padding: 8px 12px; border-radius: var(--r-2);
  font-size: 12px; font-weight: 500; font-style: normal;
  white-space: normal; width: max-content; max-width: 260px;
  text-align: left; line-height: 1.45;
  box-shadow: var(--sh-3); z-index: 50;
  pointer-events: none;
}
.info-tip:hover::before { content: 'i'; }

/* ============== CALC: vertikalni checkboxy ============== */
.calc-module__body .choice {
  display: flex !important;
  margin: 10px 0;
  padding: 8px 10px; border-radius: var(--r-2);
  transition: background var(--t-fast);
}
.calc-module__body .choice:hover { background: rgba(211,84,0,.04); }
.calc-module__body .choices-stack {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--s-3);
}

/* ============== CTA-BANNER: fix neviditelny hover na .btn-ghost ============== */
.cta-banner .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.4);
  background: transparent;
}
.cta-banner .btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
}

/* ============== HERO SLIDESHOW ============== */
.hero__slides {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--r-3); overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
}
.hero__slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-6);
  opacity: 0; transform: scale(.96);
  transition: opacity .8s ease, transform .8s ease;
  text-align: center;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); z-index: 2; }
.hero__slide .icon {
  width: 96px; height: 96px; border-radius: var(--r-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-50); color: var(--c-primary);
  margin-bottom: var(--s-2);
  box-shadow: var(--sh-2);
}
.hero__slide .icon svg { width: 48px; height: 48px; }
.hero__slide[data-mod="naradi"] .icon   { background: var(--c-primary-50);   color: var(--c-primary); }
.hero__slide[data-mod="dochazka"] .icon { background: var(--c-secondary-50); color: var(--c-secondary-600); }
.hero__slide[data-mod="vykresy"] .icon  { background: #e6f0fa;               color: var(--c-info); }
.hero__slide h3 { font-family: var(--font-display); font-size: var(--fs-600); margin: 0; }
.hero__slide p  { color: var(--c-ink-soft); font-size: var(--fs-300); margin: 0; max-width: 32ch; }

.hero__notif {
  position: absolute; right: 16px; bottom: 16px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-3); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--sh-3);
  font-size: var(--fs-200);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 5; max-width: calc(100% - 32px);
}
.hero__notif.is-visible { opacity: 1; transform: translateY(0); }
.hero__notif .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-success-50); color: var(--c-success);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.hero__notif strong { display: block; color: var(--c-ink); font-size: var(--fs-200); }
.hero__notif small { color: var(--c-muted); font-size: 11px; }

.hero__dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 6;
}
.hero__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(44,60,75,.25); transition: background var(--t-fast), width var(--t-fast);
}
.hero__dots span.is-active { background: var(--c-primary); width: 18px; border-radius: 999px; }

/* ============== KONTAKT: sticky sidebar ============== */
@media (min-width: 900px) {
  .contact-info {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    align-self: flex-start;
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
  }
  .contact-info::-webkit-scrollbar { width: 6px; }
  .contact-info::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }
}

/* ============== PLAN PICK: period toggle uvnitr ============== */
.plan-pick-wrap {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.plan-pick-period {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  align-self: flex-start;
  font-size: var(--fs-100);
  margin-bottom: var(--s-4);
}
.plan-pick-period button {
  padding: 5px 14px; border-radius: var(--r-pill);
  color: var(--c-ink-soft); font-weight: 600; font-size: 12px;
  transition: background var(--t-fast), color var(--t-fast);
}
.plan-pick-period button.active {
  background: var(--c-primary); color: #fff;
}

.plan-pick-config {
  background: var(--c-surface-2); border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4); font-size: var(--fs-200);
  color: var(--c-ink-soft); margin-top: var(--s-2);
  border: 1px dashed var(--c-line);
}
.plan-pick-config strong { color: var(--c-ink); }

/* ============== INSTAGRAM brand link (o-mne) ============== */
.ig-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff !important; font-weight: 600;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}
.ig-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(220,39,67,.35); color: #fff; }
.ig-link svg { width: 20px; height: 20px; }

/* ============== HERO h1 lepsi flow ============== */
.hero h1 { line-height: 1.08; letter-spacing: -0.02em; }
.hero h1 .underline::after { bottom: 2px; height: 12px; }
/* ============== HERO HOME (2-col s plovoucími kostkami vpravo) ============== */
.hero--home {
  padding: var(--s-7) 0 var(--s-6);
  min-height: calc(100vh - var(--header-h) - 160px);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.hero--home::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 85% 20%, rgba(211, 84, 0, .08), transparent 70%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(230, 168, 23, .10), transparent 70%);
  pointer-events: none;
}
.hero--home .container { position: relative; z-index: 1; width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.hero--home .hero__text { text-align: left; max-width: 620px; }
.hero--home h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.05; letter-spacing: -.02em;
  margin-bottom: var(--s-5);
}
.hero--home .lead {
  max-width: 56ch; margin: 0 0 var(--s-6);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
}
.hero--home .hero__cta {
  margin-bottom: 0;
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}

/* === Plovoucí kostky vpravo === */
.hero__cubes {
  position: relative;
  width: 100%; height: 480px;
  user-select: none;
}
.hero__cube {
  position: absolute;
  display: block;
  cursor: pointer;
  transition: filter .25s ease, transform .25s ease;
  filter: drop-shadow(0 12px 30px rgba(40, 30, 20, .18));
  will-change: transform;
}
.hero__cube img { width: 100%; height: auto; display: block; pointer-events: none; }
.hero__cube:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 14px 35px rgba(40, 30, 20, .22)) brightness(1.04);
}
/* Pozice + různé animace, aby se nepřekrývaly */
.hero__cube--naradi   { top: 4%;   right: 32%; width: 38%; animation: floatA 7.5s ease-in-out infinite; }
.hero__cube--dochazka { top: 38%;  right: 56%; width: 32%; animation: floatB 6.8s ease-in-out infinite; }
.hero__cube--vykresy  { top: 30%;  right: 0%;  width: 44%; animation: floatC 8.4s ease-in-out infinite; }

@keyframes floatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-8px, -14px, 0) rotate(-1.5deg); }
}
@keyframes floatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(10px, -10px, 0) rotate(2deg); }
}
@keyframes floatC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-6px, 12px, 0) rotate(-1.8deg); }
}

@media (max-width: 900px) {
  .hero--home { min-height: auto; padding: var(--s-7) 0 var(--s-6); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero--home .hero__text { text-align: center; max-width: 100%; margin: 0 auto; }
  .hero--home .lead { margin-left: auto; margin-right: auto; }
  .hero--home .hero__cta { justify-content: center; }
  .hero__cubes { height: 320px; max-width: 460px; margin: var(--s-5) auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cube { animation: none !important; }
}

/* ============== TRUST STRIP (3 karticky misto loga-strip) ============== */
.trust-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.trust-strip__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
}
.trust-strip__item .ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r-3);
  background: var(--c-primary-50); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.trust-strip__item .ico svg { width: 22px; height: 22px; }
.trust-strip__item strong { display: block; font-family: var(--font-display); font-size: var(--fs-400); color: var(--c-ink); }
.trust-strip__item small { color: var(--c-muted); font-size: var(--fs-200); }
@media (max-width: 880px) {
  .trust-strip { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }
}

/* ============== MODULE CARD ICON (kostka obrázek místo SVG) ============== */
.module-card.m-naradi .ico,
.module-card.m-dochazka .ico,
.module-card.m-vykresy .ico { background: transparent !important; }
.module-card .ico {
  width: 96px; height: 96px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
  background: transparent;
  transition: transform .55s cubic-bezier(.34, 1.15, .5, 1);
}
.module-card .ico img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 16px rgba(40, 30, 20, .15)); transition: filter .55s ease; }
.module-card:hover .ico { transform: translateY(-3px) scale(1.07) rotate(3deg); }
.module-card:hover .ico img { filter: drop-shadow(0 10px 22px rgba(40, 30, 20, .22)); }
/* Highlight bounce když uživatel klikne na hero kostku */
@keyframes moduleBounce {
  0%, 100% { transform: translateY(0); box-shadow: var(--shadow-2); }
  20% { transform: translateY(-14px); box-shadow: 0 18px 40px rgba(211, 84, 0, .25); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-7px); }
  80% { transform: translateY(0); }
}
.module-card.bouncing {
  animation: moduleBounce 1.1s ease;
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
  border-radius: var(--r-3);
}

/* ============== TOGGLE: kratsi "Rocne" label v plan-picku ============== */
.plan-pick-period button { white-space: nowrap; }

/* ============== KALKULACKA: zarovnani vysky levy/pravy sloupec ============== */
@media (min-width: 901px) {
  .calc { align-items: stretch; }
  .calc__controls { align-self: stretch; }
  .calc__summary { position: sticky; top: calc(var(--header-h) + 16px); height: fit-content; max-height: calc(100vh - var(--header-h) - 32px); }
}
/* hustsi rozestup mezi checkboxy v calc moduly */
.calc-module__body .choices-stack { gap: 0; }
.calc-module__body .choice { margin: 2px 0; }
/* vetsi mezera mezi po sobe jdoucimi slidery v calc-module */
.calc-module__body .calc-row + .calc-row { margin-top: var(--s-4); }
.calc-module__body .calc-row + .choices-stack { margin-top: var(--s-3); }

/* ============== INFO-TIP: posun u poslednich radku tabulky (offline atd.) ============== */
.pricing-compare tr:nth-last-child(-n+3) .info-tip:hover::after {
  bottom: auto; top: calc(100% + 8px);
}

/* ============== KONTAKT: vertikalni stred ikony a textu ============== */
.contact-card .row { align-items: center; }
.contact-card .row > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.contact-hours-label {
  display: block; margin-top: var(--s-4); margin-bottom: var(--s-2);
  font-size: var(--fs-200); color: var(--c-ink-soft); font-weight: 600;
}

/* ============== O MNE: bio-right zarovnání — žádný margin-top:auto, navazuje těsně ============== */
.bio-grid .bio-right {
  display: flex; flex-direction: column;
  min-height: 100%;
  gap: var(--s-5);
}
.bio-grid .bio-right > div { margin: 0; }
.bio-grid .bio-right .block-bottom { margin-top: 0; padding-top: 0; }
.bio-other {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-4); padding: var(--s-7);
  margin-top: var(--s-8);
  text-align: center;
}
.bio-other h2 { margin-bottom: var(--s-3); }
.bio-other p { color: var(--c-ink-soft); max-width: 60ch; margin: 0 auto var(--s-5); }
.bio-other__links { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ============== KONTAKT FORM: master checkbox pro objednavku ============== */
.subscribe-toggle {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--r-2); margin-bottom: var(--s-4);
  cursor: pointer;
}
.subscribe-toggle input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.subscribe-toggle:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-50); }
.subscribe-body.hidden { display: none; }

/* radio look pro plan-pick (single select) */
.plan-pick label:has(input:checked) {
  border-color: var(--c-primary) !important;
  background: var(--c-primary-50) !important;
  box-shadow: 0 0 0 2px var(--c-primary-50);
}
.plan-pick label[data-disabled="true"] { opacity: .45; cursor: not-allowed; }
.plan-pick label[data-disabled="true"]:hover { border-color: var(--c-line); }

.bio-grid { align-items: stretch; }
.bio-grid > * { min-height: 0; }

/* ============== KONTAKT MODE SWITCH (Dotaz / Objednavka) – legenda nad formularem ============== */
.contact-form { position: relative; padding-top: calc(var(--s-7) + 8px); overflow: visible; }
.mode-switch {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 5px;
  width: clamp(280px, 60%, 420px);
  box-shadow: 0 4px 18px rgba(40, 30, 20, .08);
  z-index: 3;
}
.mode-switch__btn {
  position: relative; z-index: 2;
  background: transparent; border: 0; cursor: pointer;
  padding: 12px 18px; border-radius: var(--r-pill);
  font: 600 15px/1 var(--font-sans);
  color: var(--c-muted);
  transition: color var(--t-fast);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.mode-switch__btn.active { color: #fff; }
.mode-switch__slider {
  position: absolute; z-index: 1;
  top: 5px; bottom: 5px;
  width: calc(50% - 5px);
  background: var(--c-primary);
  border-radius: var(--r-pill);
  transition: transform var(--t-base) cubic-bezier(.4,.2,.2,1);
  box-shadow: 0 4px 14px rgba(211, 84, 0, .25);
}
/* Dotaz vlevo (default slider vlevo), Objednavka vpravo */
.mode-switch__slider { left: 5px; }
.mode-switch[data-active="objednavka"] .mode-switch__slider { transform: translateX(calc(100% + 0px)); }
.mode-switch[data-active="dotaz"] .mode-switch__slider { transform: translateX(0); }

.mode-only { transition: opacity .2s; }
.mode-only.hidden { display: none !important; }

/* ============== PASSWORD CHECKLIST – schovany dokud uzivatel nezacne psat ============== */
.password-checklist {
  list-style: none; padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, margin-top .35s ease, opacity .25s ease;
  opacity: 0;
}
.password-checklist.active {
  max-height: 200px;
  margin-top: var(--s-3);
  opacity: 1;
}
.password-checklist li {
  display: flex; align-items: center; gap: 8px;
  color: #C28A0C;
  transition: opacity .25s ease, max-height .3s ease, padding .25s ease, margin .25s ease;
  max-height: 24px;
  overflow: hidden;
}
.password-checklist li.fulfilled {
  opacity: 0; max-height: 0;
  padding: 0; margin: 0;
  pointer-events: none;
}
.password-checklist li .x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(200, 48, 47, .15); color: #C8302F;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.password-checklist:empty + .password-ok,
.password-checklist.complete + .password-ok { display: block; }