/* ==========================================================================
   Orbiso — hlavní styly (novy-web)
   Vyžaduje tokens.css. Light-only. Shape lock: pill / 28 / 16.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Jemný noise — fixní, pointer-events none (perf) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(46, 49, 224, 0.16); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--orbiso-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--orbiso-blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--orbiso-blue-dark); }

ul { padding-left: 1.2em; }

.container {
  width: min(100% - 2.5rem, var(--max-width));
  margin-inline: auto;
}

main { display: block; }

section { padding-block: var(--section-y); }

.section-title {
  font-size: var(--text-3xl);
  max-width: 24ch;
}

.section-lead {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 58ch;
  margin-bottom: var(--space-6);
}

.section-footer-link { margin-top: var(--space-6); font-weight: 600; text-align: center; } /* velké tlačítko na střed (feedback 10. 9.) */
.section-footer-link .btn-lg { padding: 1.05rem 2.4rem; font-size: 1.1rem; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.65rem 1.1rem;
  background: var(--orbiso-blue);
  color: #fff;
  border-radius: var(--r-pill);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0.75rem; color: #fff; }

/* --------------------------------------------------------------------------
   Tlačítka — pill lock
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--orbiso-blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--orbiso-blue-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--surface);
  color: var(--orbiso-blue);
  border-color: var(--blue-100);
}
.btn-secondary:hover {
  color: var(--orbiso-blue-dark);
  border-color: var(--orbiso-blue);
  background: var(--blue-25);
}

.btn-lg { padding: 0.95rem 2rem; font-size: var(--text-lg); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent; /* nahoře průhledný — pod ním prosvítá hero gradient */
  border-bottom: 1px solid transparent;
  transition: background var(--t-med), border-color var(--t-fast), box-shadow var(--t-fast);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* zvlášť (ne v seznamu) — :has() by v prohlížeči bez podpory shodil celé pravidlo */
.site-header:has(#nav-open:checked) { background: rgba(255, 255, 255, 0.96); }
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-nav);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; }
.logo img { width: 123px; height: 36px; }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-left: auto;
}
.nav-desktop a:not(.btn) {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.3rem 0.15rem;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-desktop a:not(.btn):hover { color: var(--orbiso-blue); }
.nav-desktop a:not(.btn).is-active {
  color: var(--orbiso-blue);
  border-bottom-color: var(--orbiso-blue);
}
.nav-desktop .btn { padding: 0.55rem 1.25rem; font-size: 0.95rem; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Jazykový přepínač (dummy) */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--surface);
}
.lang-switch__opt {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch__opt.is-active { background: var(--blue-50); color: var(--orbiso-blue); }

/* Mobilní menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: inherit;
}
.menu-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-mobile { display: none; }

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--t-med);
  }
  .nav-mobile.is-open { max-height: 30rem; padding-bottom: 1rem; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-mobile a:not(.btn) {
    color: var(--ink);
    font-weight: 500;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-mobile .btn { margin-top: 0.5rem; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   Přepínač publika
   -------------------------------------------------------------------------- */
.audience-switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  padding: 4px;
  box-shadow: var(--shadow-sm);
}
.audience-switch__opt {
  padding: 0.6rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.audience-switch__opt:hover { color: var(--orbiso-blue); }
.audience-switch__opt.is-active {
  background: var(--orbiso-blue);
  color: #fff;
}
.audience-switch__opt.is-active:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Newsletter + formuláře
   -------------------------------------------------------------------------- */
.newsletter {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}
.newsletter .section-title { font-size: var(--text-2xl); }
.newsletter .section-lead { margin-bottom: 0; }

.newsletter-signup { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.newsletter-signup .form-group { flex: 1 1 14rem; margin: 0; }

.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.35rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group textarea { min-height: 6.5rem; resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #7b8290; }
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
  border-color: var(--orbiso-blue);
  box-shadow: 0 0 0 3px rgba(46, 49, 224, 0.18);
}

.contact-form { position: relative; }
.contact-form .form-thanks {
  display: none;
  text-align: left;
}
.contact-form.is-submitted .form-fields { display: none; }
.contact-form.is-submitted .form-thanks.is-visible { display: block; }

/* --------------------------------------------------------------------------
   Patička
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--blue-25);
  border-top: 1px solid var(--blue-100);
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
}
.footer-brand p { color: var(--text-muted); max-width: 34ch; margin-top: 1rem; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.footer-social a:hover { border-color: var(--orbiso-blue); }
.footer-social img { width: 16px; height: 16px; }

.footer-links h4 { font-size: 1rem; margin-bottom: 0.9rem; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--orbiso-blue); }

.footer-partners { margin-top: var(--space-7); border-top: 1px solid var(--blue-100); padding-top: var(--space-6); }
.footer-partners-label { font-weight: 600; margin-bottom: 1rem; }
.footer-partners-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
}
.footer-partners-logos img { height: 32px; width: auto; }

.footer-partners-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
  flex-wrap: wrap;
}
.footer-tacr { flex: 0 1 360px; margin-left: auto; }
.footer-tacr img { max-width: 360px; width: 100%; height: auto; display: block; }

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--blue-100);
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Telefon — věrný HTML/CSS mockup appky (dle Figma „App screens – finalizace")
   ========================================================================== */
.phone {
  width: 300px;
  border-radius: 46px;
  background: var(--ink);
  padding: 9px;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}
.phone__screen {
  position: relative;
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(120% 65% at 50% -8%, #c9d6f8 0%, transparent 60%),
    linear-gradient(180deg, var(--app-bg) 0%, #eef3fd 55%, #f6f9ff 100%);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.45;
}
.phone__status {
  display: flex;
  align-items: center;
  padding: 10px 18px 4px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
}
.phone__cam {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  margin-inline: auto;
}
.phone__status svg { display: block; }
.phone__body { flex: 1; padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.phone__homebar {
  width: 96px;
  height: 4px;
  border-radius: 4px;
  background: rgba(26, 27, 37, 0.28);
  margin: 4px auto 8px;
}

/* App UI kit */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
}
.app-topbar__logo { width: 22px; height: 22px; }
.app-topbar__menu { margin-left: auto; display: inline-flex; }

.app-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(46, 49, 224, 0.07);
}
.app-search svg { margin-left: auto; color: var(--orbiso-blue); }

.app-chips { display: flex; gap: 6px; overflow: hidden; }
.app-chip {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid rgba(46, 49, 224, 0.12);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--ink);
}
.app-chip.is-active { background: var(--orbiso-blue); border-color: var(--orbiso-blue); color: #fff; }

.app-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 6px 22px rgba(46, 49, 224, 0.10);
}
.app-cover {
  position: relative;
  border-radius: 14px;
  min-height: 96px;
  overflow: hidden;
}
.app-cover--mindfulness { background: linear-gradient(150deg, #dbe6fb 0%, #c3d4f6 45%, #a9bff0 100%); }
.app-cover__tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: var(--surface);
  color: var(--orbiso-blue);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  padding: 3px 9px;
}
/* Dekorativní stopy/kytka na coveru — čistě CSS náznak ilustrace z appky */
.app-cover__art { position: absolute; inset: 0; }
.app-cover__art i {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 60% 60%;
  background: rgba(46, 49, 224, 0.55);
  transform: rotate(var(--rot, 0deg));
}

.app-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
}
.app-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orbiso-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
}
.app-card__desc { color: var(--text-muted); font-size: 11px; margin: 6px 0 8px; }
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orbiso-blue);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 18px;
  margin-left: auto;
}
.app-card__foot { display: flex; }

.app-bottomnav {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  background: var(--orbiso-blue);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  color: #fff;
  margin-top: auto;
}
.app-bottomnav span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.75;
}
.app-bottomnav span.is-active { opacity: 1; }

.app-seg {
  display: flex;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 4px;
  box-shadow: 0 2px 10px rgba(46, 49, 224, 0.08);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
}
.app-seg span { padding: 6px 12px; border-radius: var(--r-pill); color: var(--ink); }
.app-seg span.is-active { background: var(--orbiso-blue); color: #fff; }

.app-task-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orbiso-pink);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  padding: 7px 13px;
}
.app-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orbiso-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(46, 49, 224, 0.35);
}

/* Kroky programu v telefonu (cíl hero animace, náhled ve wizardu a DnD) */
.app-steps { display: flex; flex-direction: column; gap: 7px; }
.app-step {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 3px 12px rgba(46, 49, 224, 0.08);
  font-size: 11.5px;
}
.app-step__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-step__icon--pink { background: #ffe1e9; color: var(--orbiso-pink); }
.app-step strong { display: block; font-family: var(--font-heading); font-size: 11.5px; }
.app-step small { color: var(--text-muted); font-size: 10px; }
.app-step__check { margin-left: auto; color: var(--success); display: inline-flex; }

.app-progress { margin-top: 2px; }
.app-progress__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.app-progress__track {
  height: 6px;
  border-radius: 6px;
  background: rgba(46, 49, 224, 0.12);
  overflow: hidden;
}
.app-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: var(--orbiso-blue);
  transition: width 0.7s var(--ease-out);
}

/* ==========================================================================
   Builder — okno „na počítači" (hero + wizard + DnD)
   ========================================================================== */
.builder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.builder__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--blue-25);
}
.builder__dots { display: flex; gap: 5px; }
.builder__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue-100);
}
.builder__url {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 14px;
}
.builder__canvas { padding: 18px; }
.builder__canvas-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.builder-block {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  transition: opacity var(--t-med), border-color var(--t-fast), background var(--t-fast);
}
.builder-block strong { display: block; font-family: var(--font-heading); font-size: 0.85rem; }
.builder-block small { color: var(--text-muted); font-size: 0.72rem; }
.builder-block__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.builder-block.is-sent { opacity: 0.45; background: var(--blue-25); border-style: dashed; }
.builder-block__sent {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--success);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.builder-block.is-sent .builder-block__sent { opacity: 1; }

/* ==========================================================================
   Hero — „z builderu do kapsy"
   ========================================================================== */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  background:
    radial-gradient(ellipse 75% 60% at 12% 10%, rgba(86, 150, 251, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 90% 85%, rgba(46, 49, 224, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--blue-50) 0%, var(--bg) 100%);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-6);
  align-items: center;
}
.hero-copy h1 {
  font-size: var(--text-display);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 13ch;
  margin-bottom: 0.4em;
}
.hero-copy h1 .accent-dot { color: var(--orbiso-pink); } /* jediné růžové koření hera */
.hero-lead {
  font-size: var(--text-xl);
  color: var(--text-muted);
  max-width: 30ch;
  margin-bottom: var(--space-5);
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* Jeviště: builder vlevo vzadu, telefon vpravo vpředu */
.hero-stage {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-stage .builder {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: min(370px, 58%);
  z-index: 1;
}
.hero-stage .phone { position: relative; z-index: 2; }
.hero-fly-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-fly-layer .builder-block { position: absolute; margin: 0; box-shadow: var(--shadow-md); }

.hero-switch-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { min-height: 0; justify-content: center; margin-top: var(--space-5); }
  .hero-stage .builder { position: relative; top: auto; translate: none; width: min(340px, 48%); margin-right: -3rem; z-index: 1; }
  .phone { width: 260px; }
  .phone__screen { min-height: 500px; }
}
@media (max-width: 640px) {
  .hero-stage .builder { display: none; }
  .hero-stage { justify-content: center; }
}

/* ==========================================================================
   Sekce homepage
   ========================================================================== */

/* 02 Problém — bento 1+2 (rodina: asymetrický bento) */
.problem-bento {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-4);
}
.problem-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
}
.problem-card h3 { font-size: var(--text-xl); }
.problem-card p { color: var(--text-muted); margin: 0; }
.problem-card--lead {
  grid-row: 1 / 3;
  background:
    radial-gradient(90% 70% at 85% 100%, rgba(46, 49, 224, 0.12) 0%, transparent 60%),
    var(--blue-50);
  border-color: var(--blue-100);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.problem-card--lead h3 { font-size: var(--text-2xl); max-width: 16ch; }

/* 03 Teorie — plná modrá banda, 3 sloupce s hairlines (rodina: band) */
.theory-band {
  background: var(--orbiso-blue);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.theory-band .section-title { color: #fff; max-width: 30ch; }
.theory-band .section-lead { color: rgba(255, 255, 255, 0.78); }
.theory-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.theory-col { border-top: 1px solid rgba(255, 255, 255, 0.28); padding-top: var(--space-4); }
.theory-col h3 { font-size: var(--text-lg); color: #fff; }
.theory-col p { color: rgba(255, 255, 255, 0.82); margin: 0; font-size: 0.98rem; }

/* 04 Produkt — wizard demo (rodina: interaktivní split se sticky telefonem) */
.wizard-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-8);
}
.wizard-phone-col { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.wizard-phone-note { font-size: var(--text-sm); color: var(--text-muted); text-align: center; }

.wizard { min-height: 460px; }
.wizard__lead {
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.wizard-q { margin-bottom: var(--space-5); }
.wizard-q__bubble {
  background: var(--blue-25);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
  border-bottom-left-radius: 6px;
  padding: 1.15rem 1.4rem;
  max-width: 52ch;
  margin-bottom: 1.1rem;
  font-size: 1.15rem;
}
.wizard-q__bubble .ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  margin-bottom: 0.3rem;
}
.wizard-chips { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.wizard-chip {
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.wizard-chip:hover { border-color: var(--orbiso-blue); color: var(--orbiso-blue); }
.wizard-chip.is-active { background: var(--orbiso-blue); border-color: var(--orbiso-blue); color: #fff; }
.wizard-chip:active { transform: scale(0.97); }

.wizard-typing {
  display: inline-flex;
  gap: 5px;
}
.wizard-typing i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.4;
  animation: typing-blink 1s infinite;
}
.wizard-typing i:nth-child(2) { animation-delay: 0.18s; }
.wizard-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-blink { 0%, 100% { opacity: 0.35; } 45% { opacity: 1; } }

.wizard-week {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 1rem 0 0.5rem;
}
.wizard-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  margin-bottom: 0.7rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.wizard-step__row { display: flex; align-items: center; gap: 0.7rem 0.9rem; flex-wrap: wrap; }
.wizard-step__text { flex: 1 1 auto; min-width: 220px; }
.wizard-step strong { display: block; font-family: var(--font-heading); font-size: 1.02rem; text-wrap: balance; }
.wizard-step small { color: var(--text-muted); font-size: 0.88rem; }
.wizard-step__flag {
  margin-left: 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orbiso-pink);
  background: var(--pink-50);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.65rem;
  flex-shrink: 0;
}
.wizard-step__dots { margin-left: auto; }
.wizard-step__dots i { background: var(--orbiso-blue); }
.wizard-step.is-thinking .wizard-step__acts { visibility: hidden; }
.wizard-step.is-approved { border-color: var(--success-soft); background: #f4fdf8; }
.wizard-step.is-rejected { opacity: 0.4; }
.wizard-step__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.wz-act {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--r-pill);
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.wz-act:active { transform: scale(0.96); }
.wz-act--ok { background: var(--orbiso-blue); color: #fff; }
.wz-act--ok:hover { background: var(--orbiso-blue-dark); }
.wz-act--edit { background: var(--surface); color: var(--orbiso-blue); border-color: var(--blue-100); }
.wz-act--edit:hover { border-color: var(--orbiso-blue); background: var(--blue-25); }
.wz-act--no { background: var(--surface); color: var(--orbiso-pink); border-color: var(--pink-100); }
.wz-act--no:hover { border-color: var(--orbiso-pink); background: var(--pink-50); }
.wz-act[disabled] { opacity: 0.45; cursor: default; }
.wizard-step__state {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success);
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.wizard-step.is-approved .wizard-step__state { display: inline-flex; }
.wizard-step.is-approved .wizard-step__acts { display: none; }

@keyframes soft-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 122, 82, 0.35); }
  100% { box-shadow: 0 0 0 14px rgba(14, 122, 82, 0); }
}
.wizard-step.pulse { animation: soft-pulse 0.7s var(--ease-out) 1; }

.wizard-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 52ch;
}
.wizard-restart {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orbiso-blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: none;
}
.wizard-restart.is-visible { display: inline-block; }

/* Feature bento — Apple styl: dlaždice s vizuály (rodina: bento s mockupy) */
.fx-bento {
  display: grid;
  /* vyvážené: Průvodce = polovina šířky, jen jeden řádek; vedle něj Z dokumentu a Editor (feedback 10. 9.) */
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "pruvodce pruvodce pruvodce pruvodce pruvodce pruvodce dokument dokument dokument editor editor editor"
    "publikace publikace publikace publikace pripominky pripominky pripominky pripominky souhlasy souhlasy souhlasy souhlasy";
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.fx-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
/* dlaždice nejsou odkazy — žádný hover, ať nevypadají klikací (feedback 10. 9.) */
.fx-tile h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  margin-bottom: 0.4em;
}
.fx-tile__copy p { color: var(--text-muted); margin: 0; font-size: 0.98rem; }
.fx-tile__visual { margin-top: auto; }

.fx-tile--pruvodce {
  grid-area: pruvodce;
  background:
    radial-gradient(85% 70% at 100% 0%, rgba(46, 49, 224, 0.10) 0%, transparent 55%),
    var(--blue-50);
  border-color: var(--blue-100);
}
.fx-tile--dokument { grid-area: dokument; }
.fx-tile--editor { grid-area: editor; background: var(--blue-25); }
.fx-tile--publikace { grid-area: publikace; }
.fx-tile--devices {
  grid-area: devices;
  background: linear-gradient(135deg, var(--orbiso-blue) 0%, var(--orbiso-blue-dark) 100%);
  border-color: transparent;
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
}
.fx-tile--devices h3 { color: #fff; }
.fx-tile--devices .fx-tile__copy { flex: 1; }
.fx-tile--devices .fx-tile__copy p { color: rgba(255, 255, 255, 0.82); }
.fx-tile--devices .fx-tile__copy a { color: #fff; text-decoration: underline; }
.fx-tile--pripominky { grid-area: pripominky; flex-direction: row; align-items: center; gap: var(--space-6); }
.fx-tile--pripominky .fx-tile__copy { flex: 1; }
.fx-tile--pripominky .fx-tile__visual { margin-top: 0; flex: 1; }
.fx-tile--souhlasy { grid-area: souhlasy; background: var(--blue-25); }

/* Mini-mockupy */
.fxm-step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
}
.fxm-step strong { display: block; font-family: var(--font-heading); font-size: 0.88rem; }
.fxm-step small { color: var(--text-muted); font-size: 0.75rem; }
.fxm-step__actions { margin-left: auto; display: flex; gap: 0.35rem; flex-shrink: 0; }
.fxm-step__actions .wizard-step__btn { cursor: default; }

/* Průvodce */
.fx-tile--pruvodce .fx-tile__visual { margin-block: auto; padding-block: var(--space-5); }
.fxm-wizard { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; width: 100%; }
.fxm-wizard .fxm-step { padding: 0.95rem 1.15rem; font-size: 0.95rem; }
.fxm-wizard .fxm-step strong { font-size: 1rem; }
.fxm-wizard .fxm-step small { font-size: 0.82rem; }
.fxm-step.is-done { border-color: var(--success-soft); background: #f4fdf8; }
.fxm-step__done {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--success);
  flex-shrink: 0;
}
.fxm-bubble {
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
  border-bottom-left-radius: 5px;
  padding: 0.95rem 1.25rem;
  font-size: 1.02rem;
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
}
.fxm-bubble .ai-tag {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  margin-bottom: 0.2rem;
}
.fxm-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.fxm-wizard .app-chip { font-size: 0.9rem; padding: 0.55rem 1.1rem; }
.fxm-wizard .fxm-step { transition: transform 0.35s var(--ease-out); }

/* Z dokumentu */
.fxm-doc { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fxm-file {
  position: relative;
  width: 86px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 0.8rem 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out);
}
.fxm-file i { display: block; height: 5px; border-radius: 5px; background: var(--blue-100); margin-bottom: 6px; }
.fxm-file i:last-child { width: 60%; margin-bottom: 0; }
.fxm-file__badge {
  position: absolute;
  top: -9px;
  left: 10px;
  background: var(--orbiso-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 0.15rem 0.5rem;
}
.fxm-doc__arrow { color: var(--orbiso-blue); transition: transform 0.35s var(--ease-out); }
.fxm-doc .app-step { width: 100%; box-shadow: var(--shadow-sm); }

/* Editor */
.fxm-editor { display: flex; flex-direction: column; gap: 0.6rem; }
.fxm-palette { display: flex; gap: 0.5rem; }
.fxm-block {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out), border-color var(--t-fast);
}
.fxm-canvas {
  border: 2px dashed var(--blue-100);
  border-radius: var(--r-md);
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.6);
}

/* Publikace */
.fxm-pub { display: flex; flex-direction: column; gap: 0.5rem; }
.fxm-pub__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.3s var(--ease-out), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fxm-pub__opt.is-active {
  background: var(--orbiso-blue);
  border-color: var(--orbiso-blue);
  color: #fff;
}

/* Zařízení (modrá dlaždice) */
.fxm-devices {
  position: relative;
  flex: 1.2;
  min-height: 190px;
  margin-top: 0;
}
.fxm-browser {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, 72%);
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(12, 14, 60, 0.35);
  transition: transform 0.4s var(--ease-out);
}
.fxm-browser__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: var(--blue-25);
  border-bottom: 1px solid var(--border);
}
.fxm-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-100); }
.fxm-browser__bar span {
  margin-left: 6px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}
.fxm-browser__body { padding: 0.7rem; }
.fxm-browser__body .fxm-step { box-shadow: none; border-color: var(--blue-50); }
.fxm-phone {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(3deg);
  width: 128px;
  border-radius: 26px;
  background: var(--ink);
  padding: 6px;
  box-shadow: 0 18px 44px rgba(12, 14, 60, 0.4);
  transition: transform 0.4s var(--ease-out);
}
.fxm-phone__screen {
  border-radius: 20px;
  overflow: hidden;
  background: #eef3fd;
  display: flex;
  flex-direction: column;
}
.fxm-phone__screen img { width: 100%; height: 108px; object-fit: cover; }
.fxm-phone__screen .app-btn { margin: 10px auto 12px; font-size: 11px; padding: 6px 16px; }

/* Připomínky */
.fxm-notif { display: flex; flex-direction: column; gap: 0.8rem; }
.fxm-push {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s var(--ease-out);
}
.fxm-push img { width: 30px; height: 29px; }
.fxm-push strong { display: block; font-family: var(--font-heading); font-size: 0.85rem; }
.fxm-push small { color: var(--text-muted); font-size: 0.78rem; }
.fxm-snooze {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
}

/* Souhlasy */
.fxm-consent { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.fxm-consent__shield {
  position: absolute;
  right: -12px;
  bottom: -16px;
  width: 96px;
  height: 96px;
  color: var(--blue-100);
  opacity: 0.6;
}
.fxm-consent__shield svg { width: 100%; height: 100%; }
.fxm-consent__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.fxm-consent__row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  flex-shrink: 0;
}

@media (max-width: 1020px) {
  .fx-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pruvodce pruvodce"
      "dokument editor"
      "publikace souhlasy"
      "pripominky pripominky";
  }
}
@media (max-width: 680px) {
  .fx-bento { grid-template-columns: 1fr; grid-template-areas: none; }
  .fx-bento .fx-tile { grid-area: auto; }
  .fx-tile--devices, .fx-tile--pripominky { flex-direction: column; align-items: stretch; }
  .fxm-devices { width: 100%; min-height: 210px; }
}

/* DnD skladačka (rodina: interaktivní playground) */
.dnd-section { background: var(--surface); border-block: 1px solid var(--border); }
.dnd-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.dnd-board { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4); }
.dnd-palette,
.dnd-canvas-outer { min-width: 0; }
.dnd-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.dnd-block {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.55rem;
  cursor: grab;
  touch-action: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.dnd-block:hover { border-color: var(--orbiso-blue); box-shadow: var(--shadow-sm); }
.dnd-block:active { cursor: grabbing; }
.dnd-block.is-dragging { opacity: 0.35; }
.dnd-block.is-used { opacity: 0.35; cursor: default; border-style: dashed; }
.dnd-block strong { display: block; font-family: var(--font-heading); font-size: 0.9rem; }
.dnd-block small { color: var(--text-muted); font-size: 0.75rem; }
.dnd-block__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dnd-ghost {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  width: 240px;
  box-shadow: var(--shadow-lg);
  border-color: var(--orbiso-blue);
  margin: 0;
}

.dnd-canvas {
  min-height: 260px;
  border: 2px dashed var(--blue-100);
  border-radius: var(--r-md);
  padding: 0.9rem;
  background: var(--blue-25);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dnd-canvas.is-over { border-color: var(--orbiso-blue); background: var(--blue-50); }
.dnd-canvas__hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2.2rem 1rem;
  margin: 0;
}
.dnd-canvas .builder-block { background: var(--surface); }
.dnd-canvas .builder-block .dnd-remove {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: var(--r-pill);
  display: inline-flex;
}
.dnd-canvas .builder-block .dnd-remove:hover { color: var(--orbiso-pink); }
.dnd-reset {
  margin-top: 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orbiso-blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.dnd-phone-col { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

/* Pro koho — ikonová řada (rodina: icon row, bez karet) */
.audience-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.audience-item { border-top: 2px solid var(--blue-100); padding-top: var(--space-4); }
.audience-item h3 { font-size: 1.05rem; }
.audience-item p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }
.audience-item .card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.audience-item .card-icon svg { width: 22px; height: 22px; }

/* Proč Orbiso — chat s odborníky (rodina: konverzace, velká + na střed) */
#proc-orbiso .section-title,
#proc-orbiso .section-lead {
  margin-inline: auto;
  text-align: center;
}
.chat-thread {
  max-width: 1020px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: var(--space-7) auto 0;
}
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 1.15rem;
  max-width: 88%;
  transition: opacity 0.45s var(--ease-out), translate 0.45s var(--ease-out);
}
.chat-msg.chat-hidden { opacity: 0; translate: 0 16px; }
.chat-msg--q { align-self: flex-start; }
.chat-msg--a { align-self: flex-end; }
.chat-avatar {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-avatar--topic {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: none;
}
.chat-avatar--topic svg { width: 32px; height: 32px; }
.chat-avatar--initials {
  background: var(--orbiso-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
}
.chat-bubble {
  padding: 1.45rem 1.85rem;
  border-radius: 28px;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.4rem);
  line-height: 1.5;
}
.chat-bubble p { margin: 0; }
.chat-bubble--q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 8px;
  color: var(--text-muted);
  transform-origin: 0% 100%;
}
.chat-bubble--q strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.chat-bubble--a {
  background: linear-gradient(135deg, var(--orbiso-blue) 0%, var(--orbiso-blue-dark) 100%);
  color: #fff;
  border-bottom-right-radius: 8px;
  box-shadow: 0 10px 28px rgba(46, 49, 224, 0.24);
  transform-origin: 100% 100%;
}
.chat-meta {
  font-size: 1rem;
  color: var(--text-muted);
  text-align: right;
  margin: 0.45rem 0.2rem 0;
}
.chat-meta strong { color: var(--ink); font-weight: 600; }

/* Průchod: otázka naběhne, odpověď nejdřív „píše" (kompaktní bublina
   se třemi tečkami) a pak text vyskočí */
.chat-msg--q.is-in .chat-bubble--q { animation: bubble-in 0.5s var(--ease-out) both; }
.chat-msg--a.is-in .chat-bubble--a { animation: bubble-pop 0.45s var(--ease-out) both; }
.chat-msg--a.is-in.is-typing .chat-bubble--a { animation: bubble-in 0.4s var(--ease-out) both; }

.chat-dots { display: none; gap: 7px; padding: 0.4rem 0.2rem; }
.chat-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0.4;
  animation: typing-blink 1s infinite;
}
.chat-dots i:nth-child(2) { animation-delay: 0.18s; }
.chat-dots i:nth-child(3) { animation-delay: 0.36s; }
.chat-msg.is-typing .chat-dots { display: inline-flex; }
.chat-msg.is-typing .chat-bubble--a { width: max-content; }
.chat-msg.is-typing .chat-bubble--a p { display: none; }
.chat-msg.is-typing .chat-meta { visibility: hidden; }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes bubble-pop {
  0% { transform: scale(0.82); opacity: 0.5; }
  62% { transform: scale(1.035); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 640px) {
  .chat-msg { max-width: 100%; gap: 0.75rem; }
  .chat-avatar { width: 50px; height: 50px; }
  .chat-bubble { padding: 1.05rem 1.3rem; }
}

/* Programy — karty s gradient covery (rodina: media karty) */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.program-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.program-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--blue-100);
  color: inherit;
}
.program-cover {
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: #fff;
  text-shadow: 0 1px 8px rgba(26, 27, 37, 0.18);
}
.program-cover--mindcare { background: linear-gradient(135deg, #2e31e0 0%, #5a7cf0 60%, #9db8f7 100%); }
.program-cover--oncosafe { background: linear-gradient(135deg, #005ce3 0%, #3f8cf0 55%, #a9d0f9 100%); }
.program-cover--rozhovor { background: linear-gradient(135deg, #23268f 0%, #2e31e0 55%, #7a92f2 100%); }
.program-cover--digiwell { background: linear-gradient(135deg, #1b7ec2 0%, #46a5e0 55%, #b3ddf6 100%); }
.program-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.program-body h3 { font-size: var(--text-lg); }
.program-meta { font-size: 0.85rem; font-weight: 600; color: var(--orbiso-blue); margin-bottom: 0.5rem; }
.program-body > p:not(.program-meta) { color: var(--text-muted); font-size: 0.95rem; flex: 1; }
.program-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.tag {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.75rem;
}

/* Ceník */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
}
.pricing-card--featured {
  border-color: var(--orbiso-blue);
  box-shadow: var(--shadow-md);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(46, 49, 224, 0.07) 0%, transparent 60%),
    var(--surface);
}
.pricing-card h3 { font-size: var(--text-xl); margin-bottom: 0.3rem; }
.pricing-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.8rem;
  margin-bottom: 0.6rem;
}
.pricing-audience { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 1.9rem; } /* bez cen a badge (feedback 10. 9.) */
.pricing-amount {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0 0 0.2rem;
}
.pricing-amount small { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-5);
  flex: 1;
}
.pricing-features li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232e31e0' stroke-width='3' stroke-linecap='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.pricing-ai-note {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 72ch;
}

/* Kontakt / CTA */
.cta-section { background: var(--blue-25); border-top: 1px solid var(--blue-100); }
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: start;
}
.promise-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.promise-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.6rem;
}
.promise-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230e7a52' stroke-width='3' stroke-linecap='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.cta-note { color: var(--text-muted); font-size: 0.95rem; }
.contact-form.card-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1020px) {
  .wizard-wrap, .dnd-wrap { grid-template-columns: 1fr; }
  .wizard-phone-col, .dnd-phone-col { position: static; }
  .audience-row { grid-template-columns: repeat(2, 1fr); }
  .programs-grid, .pricing-grid, .feature-bento { grid-template-columns: repeat(2, 1fr); }
  .feature-card--lead { grid-column: 1 / 3; }
  .theory-cols { grid-template-columns: 1fr; gap: var(--space-4); }
  .cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .problem-bento { grid-template-columns: 1fr; }
  .problem-card--lead { grid-row: auto; }
  .compare-grid { grid-template-columns: 1fr; }
  .programs-grid, .pricing-grid, .feature-bento { grid-template-columns: 1fr; }
  .feature-card--lead { grid-column: auto; }
  .audience-row { grid-template-columns: 1fr; }
  .dnd-board { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pro vás (uživatelé)
   ========================================================================== */
.steps-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  counter-reset: step;
  margin-top: var(--space-6);
}
.step-item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  counter-increment: step;
}
.step-item::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--orbiso-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.step-item h3 { font-size: var(--text-lg); }
.step-item p { color: var(--text-muted); margin: 0; font-size: 0.97rem; }

.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: var(--space-5); }
@media (max-width: 900px) { .steps-flow { grid-template-columns: 1fr; } }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-heading);
  line-height: 1.15;
}
.store-badge small { display: block; font-size: 0.65rem; font-weight: 500; opacity: 0.8; }
.store-badge strong { font-size: 0.95rem; }

/* FAQ akordeon */
.faq-list { max-width: 760px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232e31e0' stroke-width='2.5' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-fast);
}
.faq-item[open] summary { color: var(--orbiso-blue); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 1.25rem 1.1rem; color: var(--text-muted); }
.faq-item .faq-body p { margin: 0; }

/* ==========================================================================
   Podstránky — hlavičky, katalog, detail
   ========================================================================== */
.page-head {
  padding-block: var(--space-7) var(--space-6);
  background:
    radial-gradient(70% 80% at 90% 0%, rgba(86, 150, 251, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, var(--blue-50) 0%, var(--bg) 100%);
}
.page-head h1 { font-size: var(--text-3xl); max-width: 22ch; }
.page-head .section-lead { margin-bottom: 0; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 680px) { .catalog-grid { grid-template-columns: 1fr; } }

/* Detail programu */
.program-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: center; }
.program-hero .program-cover {
  min-height: 300px;
  border-radius: var(--r-xl);
  font-size: var(--text-2xl);
}
.program-facts { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.program-facts li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.97rem; }
.program-facts .fact-label { font-weight: 600; min-width: 7.5rem; }
.program-detail-body { max-width: 68ch; }
.program-detail-body h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
.program-cta-box {
  background: var(--blue-25);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-7);
}
.program-cta-box h2 { margin: 0; font-size: var(--text-xl); }
.program-cta-box p { margin: 0.3rem 0 0; color: var(--text-muted); }
@media (max-width: 900px) { .program-hero { grid-template-columns: 1fr; } }

/* ==========================================================================
   O nás
   ========================================================================== */
.expert-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-6); }
.expert-tab {
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.expert-tab:hover { border-color: var(--orbiso-blue); color: var(--orbiso-blue); }
.expert-tab.is-active { background: var(--orbiso-blue); border-color: var(--orbiso-blue); color: #fff; }

.expert-group { display: none; }
.expert-group.is-active { display: grid; }
.expert-group {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.expert-card {
  display: flex;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-5);
}
.expert-card img {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--blue-50);
}
.expert-card h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.expert-role { font-size: 0.85rem; font-weight: 600; color: var(--orbiso-blue); margin-bottom: 0.4rem; }
.expert-card p:not(.expert-role) { color: var(--text-muted); font-size: 0.92rem; margin: 0; }
@media (max-width: 900px) { .expert-group { grid-template-columns: 1fr; } }

.institutions-band { background: var(--surface); border-block: 1px solid var(--border); }
.institutions-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.institution-item { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.institution-item img { height: 44px; width: auto; flex-shrink: 0; }
.institution-item h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.institution-item p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }
@media (max-width: 900px) { .institutions-cols { grid-template-columns: 1fr; } }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.team-card { text-align: left; }
.team-card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--blue-50);
  margin-bottom: 0.8rem;
}
.team-card h3 { font-size: 1.02rem; margin-bottom: 0.1rem; }
.team-card .expert-role { margin-bottom: 0.35rem; }
.team-card p:not(.expert-role) { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.blog-card:hover { box-shadow: var(--shadow-md); color: inherit; }
.blog-card__cover { min-height: 170px; }
.blog-card__cover img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.blog-card__cover--gradient { background: radial-gradient(90% 120% at 85% -10%, rgba(46, 49, 224, 0.18) 0%, transparent 55%), linear-gradient(135deg, var(--blue-100) 0%, var(--blue-50) 70%, #f2f7ff 100%); }
.blog-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.blog-card__body h2, .blog-card__body h3 { font-size: var(--text-lg); }
.blog-card__body p { color: var(--text-muted); font-size: 0.95rem; flex: 1; }
.blog-meta { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; }
@media (max-width: 680px) { .blog-grid { grid-template-columns: 1fr; } }

.article { max-width: 720px; margin-inline: auto; }
.article h1 { font-size: var(--text-3xl); }
.article h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
.article img { border-radius: var(--r-md); margin-block: var(--space-5); }
.article .blog-meta { margin-bottom: var(--space-5); display: block; }
.article p, .article li { color: #3a3f4c; }
.article blockquote {
  margin: var(--space-5) 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 3px solid var(--orbiso-blue);
  color: var(--text-muted);
  font-style: italic;
}

/* Právní stránky */
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
.legal-body p, .legal-body li { color: #3a3f4c; }
.legal-body table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.legal-body th, .legal-body td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   Scroll reveal + reduced motion
   ========================================================================== */
.reveal { opacity: 0; translate: 0 22px; transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
.reveal.is-visible { opacity: 1; translate: 0 0; }
.reveal-delay-1 { transition-delay: 0.07s; }
.reveal-delay-2 { transition-delay: 0.14s; }
.reveal-delay-3 { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; translate: 0 0; }
}

/* Shell-podmíněné prvky (detail programu: CTA dle publika) */
body[data-shell="odbornici"] .only-ucastnici { display: none !important; }
body[data-shell="ucastnici"] .only-tvurce { display: none !important; }

/* Hero/wizard/DnD — stavové detaily telefonu */
.app-step.is-waiting { opacity: 0; transform: translateY(8px) scale(0.96); }
.app-step.is-landed { opacity: 1; transform: none; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.phone__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
}
.phone__empty {
  color: var(--text-muted);
  font-size: 11.5px;
  text-align: center;
  padding: 20px 12px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .app-step.is-waiting { opacity: 1; transform: none; }
}

/* Hero — uživatelská varianta (jen telefon, vycentrovaný) */
.hero-stage--user { justify-content: center; }
.hero-stage--user .phone { width: 310px; }

/* Katalog a detail programu — obrázkové covery */
.program-cover--img,
.program-detail__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
.program-cover--img { min-height: 0; padding: 0; }
.program-detail__cover { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.programs-grid--catalog { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { .programs-grid--catalog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .programs-grid--catalog { grid-template-columns: 1fr; } }

/* O nás — avatary a partnerské karty */
.expert-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  border: 3px solid var(--blue-50);
}
.expert-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.experts-note { color: var(--text-muted); font-size: 0.95rem; margin-top: var(--space-5); }
.partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-6); }
.partner-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-5) var(--space-6);
}
.partner-card img { height: 40px; width: auto; margin-bottom: 0.9rem; }
.partner-name { font-family: var(--font-heading); font-weight: 700; margin-bottom: 0.35rem; }
.partner-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
@media (max-width: 680px) { .partners-grid { grid-template-columns: 1fr; } }

/* Blog — článkové komponenty */
.btn-ghost {
  background: transparent;
  color: var(--orbiso-blue);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--blue-ghost); color: var(--orbiso-blue-dark); }

.article-hero .article-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.article-hero__visual img { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .article-hero .article-hero__grid { grid-template-columns: 1fr; } }

.article-figure { margin: var(--space-6) 0; }
.article-figure img { border-radius: var(--r-md); width: 100%; height: auto; margin: 0; }

.article-examples { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0; }
.article-example {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-5);
}
.article-example--flip .article-example__visual { order: 2; }
.article-example__visual img { border-radius: var(--r-md); margin: 0; }
.article-example__copy h3, .article-example__copy h4 { margin: 0 0 0.2rem; font-size: var(--text-lg); }
.article-example__by { font-size: 0.85rem; font-weight: 600; color: var(--orbiso-blue); margin-bottom: 0.5rem; }
.article-example__copy p:last-child { margin: 0; }
@media (max-width: 720px) {
  .article-example { grid-template-columns: 1fr; }
  .article-example--flip .article-example__visual { order: 0; }
}

.wizard-path { list-style: none; padding: 0; margin: var(--space-6) 0; }
.wizard-path__step {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.wizard-path__step::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.4rem;
  bottom: 0;
  width: 2px;
  background: var(--blue-100);
}
.wizard-path__step--last::before { display: none; }
.wizard-path__num {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--orbiso-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}
.wizard-path__body h3 { font-size: var(--text-lg); margin-bottom: 0.3rem; margin-top: 0.15rem; }
.wizard-path__body p { margin: 0; color: #3a3f4c; }

.method-cascade { list-style: none; padding: 0; margin: var(--space-6) 0; counter-reset: layer; }
.method-cascade__layer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-5);
  margin-bottom: 0.7rem;
}
.method-cascade__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  margin-bottom: 0.25rem;
}
.method-cascade__layer h3 { font-size: var(--text-lg); margin-bottom: 0.3rem; }
.method-cascade__layer p:last-child { margin: 0; color: #3a3f4c; }

.article-callout {
  background: var(--blue-25);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.article-callout h3 { font-size: var(--text-lg); }
.article-callout p:last-child { margin: 0; }
.article-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: var(--space-6); }

/* Cover appky s obrázkem (ilustrace z Figmy) */
.app-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-cover--hero { min-height: 110px; border-radius: 16px; }
.wizard-typing[hidden], [hidden] { display: none !important; }

/* ==========================================================================
   Hero intro — logo → claim → obří přepínač publika
   ========================================================================== */
.hero-intro {
  min-height: calc(100dvh - var(--header-h) - 2 * var(--space-7));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-5);
}
.hero-intro__logo {
  width: 128px;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(46, 49, 224, 0.30));
}
.hero-intro h1 {
  max-width: 16ch;
  margin: 0;
  font-size: var(--text-display);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.hero-intro .hero-lead {
  max-width: 44ch;
  margin: 0 auto;
  font-size: var(--text-xl);
  color: var(--text-muted);
}

@keyframes intro-pop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes intro-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-intro] .hero-intro__logo { animation: intro-pop 0.8s var(--ease-out) both; }
  body[data-intro] .hero-intro h1 { animation: intro-up 0.6s 0.3s var(--ease-out) both; }
  body[data-intro] .hero-intro .hero-lead { animation: intro-up 0.6s 0.45s var(--ease-out) both; }
  body[data-intro] .mega-toggle { animation: intro-up 0.6s 0.6s var(--ease-out) both; }
}

/* Odchod intra: prvky ustoupí, sekce se složí a obsah „vyjede" nahoru */
.hero-intro.is-leaving .hero-intro__logo,
.hero-intro.is-leaving h1,
.hero-intro.is-leaving .hero-lead,
.hero-intro.is-leaving .mega-toggle {
  animation: none;
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.hero-intro.is-collapsing {
  transition: height 0.55s var(--ease-out);
  overflow: hidden;
  min-height: 0;
}

/* Během intra je vidět jen hero */
body[data-intro] main > :not(.hero) { display: none !important; }

/* Obsah hera po rozjetí */
.hero-main.is-hidden { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-main.is-entering .hero-copy > * {
    animation: enter-left 0.65s var(--ease-out) both;
  }
  .hero-main.is-entering .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-main.is-entering .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-main.is-entering .hero-stage,
  .hero-main.is-entering .hero-switch-row {
    animation: intro-up 0.7s 0.15s var(--ease-out) both;
  }
}
@keyframes enter-left {
  from { opacity: 0; transform: translateX(56px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   Mega toggle — hlavní rozcestník (iOS styl, s piktogramy, drag i klik)
   ========================================================================== */
.mega-toggle {
  position: relative;
  display: flex;
  width: min(760px, 100%);
  background: linear-gradient(180deg, #e6edfb 0%, var(--blue-25) 100%);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  padding: 12px;
  box-shadow: var(--shadow-md), inset 0 3px 10px rgba(46, 49, 224, 0.10);
  user-select: none;
  -webkit-user-select: none;
}
.mega-toggle__rail {
  position: absolute;
  inset: 12px;
  pointer-events: none;
}
.mega-toggle__ball {
  position: absolute;
  top: 50%;
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 50%;
  /* glass efekt */
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 45%),
    rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  backdrop-filter: blur(9px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 8px 22px rgba(46, 49, 224, 0.22);
  transition: left 0.4s var(--ease-out), background 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .mega-toggle__ball {
    animation: hint-shoot 4.2s 1.2s ease-in-out infinite;
  }
}
/* Hover na položce: kulička se zastaví, přitáhne pod ni a přibarví */
.mega-toggle__ball.is-preview {
  animation: none;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.06) 45%),
    rgba(46, 49, 224, 0.20);
  border-color: rgba(46, 49, 224, 0.38);
}
.mega-toggle.is-chosen .mega-toggle__ball { animation: none; opacity: 0; }
/* Start na středu, vystřelení doprava, zpět, vystřelení doleva, zpět */
@keyframes hint-shoot {
  0%, 12% { left: calc(50% - 32px); }
  24% { left: calc(100% - 64px); animation-timing-function: cubic-bezier(0.34, 1.2, 0.5, 1); }
  30% { left: calc(100% - 64px); }
  46%, 62% { left: calc(50% - 32px); }
  74% { left: 0px; animation-timing-function: cubic-bezier(0.34, 1.2, 0.5, 1); }
  80% { left: 0px; }
  96%, 100% { left: calc(50% - 32px); }
}

.mega-toggle__thumb {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: calc(50% - 12px);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--orbiso-blue) 0%, var(--orbiso-blue-dark) 100%);
  box-shadow: 0 12px 30px rgba(46, 49, 224, 0.35);
  opacity: 0;
  transform: translateX(50%) scaleX(0.4);
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-out);
  will-change: transform;
}
.mega-toggle[data-side="tvurce"] .mega-toggle__thumb { opacity: 1; transform: translateX(0); }
.mega-toggle[data-side="uzivatele"] .mega-toggle__thumb { opacity: 1; transform: translateX(100%); }

.mega-toggle__opt {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.7rem 1rem 1.5rem;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.55rem);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s var(--ease-out), transform var(--t-fast);
}
.mega-toggle__opt svg { width: 42px; height: 42px; transition: transform 0.3s var(--ease-out); }
.mega-toggle__opt:hover { color: var(--orbiso-blue); }
.mega-toggle__opt:hover svg { transform: translateY(-2px) scale(1.08); }
.mega-toggle__opt:active { transform: scale(0.97); }
.mega-toggle[data-side="tvurce"] .mega-toggle__opt[data-side="tvurce"],
.mega-toggle[data-side="uzivatele"] .mega-toggle__opt[data-side="uzivatele"] { color: #fff; }
.mega-toggle[data-side="tvurce"] .mega-toggle__opt[data-side="tvurce"]:hover,
.mega-toggle[data-side="uzivatele"] .mega-toggle__opt[data-side="uzivatele"]:hover { color: #fff; }

@media (max-width: 560px) {
  .mega-toggle__opt { padding: 1rem 0.5rem 0.9rem; }
  .mega-toggle__opt svg { width: 28px; height: 28px; }
}

/* Kompaktní přepínač pod herem — větší a s ikonami i po rozjetí */
.audience-switch__opt { display: inline-flex; align-items: center; gap: 0.5rem; }
.audience-switch__opt svg { width: 19px; height: 19px; }

/* ==========================================================================
   Ikonové dlaždice v sekcích
   ========================================================================== */
.card-icon--tile {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}
.card-icon--tile svg { width: 22px; height: 22px; }
.problem-card--lead .card-icon--tile { background: var(--surface); }
.theory-col .card-icon--tile {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.pricing-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
}
.pricing-card__icon svg { width: 20px; height: 20px; }
body[data-intro] .site-footer { display: none; }

/* ==========================================================================
   AI sekce — „Vy rozhodujete, AI navrhuje" (hlavní AI akcent)
   ========================================================================== */
.ai-section {
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(46, 49, 224, 0.07) 0%, transparent 60%),
    var(--surface);
  border-block: 1px solid var(--border);
}
.ai-section__head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.ai-section__head .section-title {
  max-width: none;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  margin-inline: auto;
}
.ai-section__head .section-lead { margin-inline: auto; margin-bottom: 0; }
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ai-badge svg { color: var(--orbiso-pink); }
.ai-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  padding: 0.45rem 1.1rem;
  margin-bottom: var(--space-4);
}
.ai-grad {
  background: linear-gradient(100deg, var(--orbiso-blue) 15%, var(--orbiso-blue-dark) 50%, var(--orbiso-pink) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Wizard — stejný „typing" jazyk jako chat */
.wizard-typing {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--orbiso-blue) 0%, var(--orbiso-blue-dark) 100%);
  border-radius: var(--r-md);
  border-bottom-left-radius: 6px;
  box-shadow: 0 8px 22px rgba(46, 49, 224, 0.22);
  padding: 0.8rem 1.05rem;
}
.wizard-typing i { background: rgba(255, 255, 255, 0.9); }
.wizard-step {
  opacity: 0;
  transform: scale(0.92);
  transform-origin: 0% 100%;
}
.wizard-step.is-in {
  opacity: 1;
  transform: none;
  animation: bubble-pop 0.45s var(--ease-out) both;
}

/* ==========================================================================
   Pro vás — cesta 1-2-3: telefon ožívá při scrollu
   ========================================================================== */
.pv-journey {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-6);
}
.pv-steps { display: flex; flex-direction: column; }
.pv-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  min-height: min(46vh, 440px);
  padding-block: var(--space-6);
  opacity: 0.38;
  transition: opacity 0.45s var(--ease-out);
}
.pv-step:first-child { padding-top: var(--space-4); }
.pv-step:last-child { min-height: min(32vh, 300px); }
.pv-step.is-active { opacity: 1; }
.pv-step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue-100);
  color: var(--orbiso-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.pv-step.is-active .pv-step__num {
  background: var(--orbiso-blue);
  border-color: var(--orbiso-blue);
  color: #fff;
  transform: scale(1.08);
}
.pv-step h3 { font-size: var(--text-xl); margin-bottom: 0.35em; }
.pv-step p { color: var(--text-muted); margin: 0; max-width: 40ch; }

.pv-phone-col {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: flex;
  justify-content: center;
}
.pv-journey .phone__screen { position: relative; }
.pv-screens { position: relative; flex: 1; display: flex; }
.pv-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.pv-screen.is-active { opacity: 1; transform: none; }
.pv-screen .phone__body { flex: 1; }
.pv-install {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.pv-install strong { font-family: var(--font-heading); font-size: 1.3rem; }
.pv-install .app-btn { font-size: 13px; padding: 8px 24px; }

@media (max-width: 900px) {
  .pv-journey { grid-template-columns: 1fr; gap: var(--space-4); }
  .pv-phone-col { display: none; }
  .pv-step { min-height: 0; opacity: 1; padding-block: var(--space-4); }
  .pv-step.is-active .pv-step__num { transform: none; }
}

/* ==========================================================================
   Tablet (builder odborníka) + sync beam do telefonu
   ========================================================================== */
.tablet {
  background: var(--ink);
  border-radius: 30px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
}
.tablet__screen {
  background: var(--bg);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tablet .builder__chrome { border-radius: 0; }
/* Výška ladí s telefonem vedle (phone: 9px rám + 560px obrazovka) */
.tablet__screen { height: 550px; }
.wz-app { display: flex; flex: 1; min-height: 0; }
.wz-sidebar {
  flex: 0 0 190px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.wz-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.9rem;
}
.wz-sidebar__label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.wz-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wz-nav__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.wz-nav__item span {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--blue-25);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.wz-nav__item.is-active { background: var(--blue-25); color: var(--ink); }
.wz-nav__item.is-active span { background: var(--orbiso-blue); border-color: var(--orbiso-blue); color: #fff; }
.wz-nav__item.is-done { color: var(--success); }
.wz-nav__item.is-done span { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.wz-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.4rem 1.5rem 1.6rem;
  scrollbar-width: thin;
}

.wizard-wrap { position: relative; }

/* Naváděcí kurzor „Vyzkoušejte si" */
.try-cursor {
  position: absolute;
  right: -6px;
  bottom: -46px;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  pointer-events: none;
  z-index: 3;
  animation: cursor-in 0.5s var(--ease-out) both, cursor-bob 1.6s 0.5s ease-in-out infinite;
}
.try-cursor.is-leaving { animation: none; opacity: 0; transition: opacity 0.35s; }
.try-cursor__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: var(--orbiso-pink);
  border-radius: var(--r-pill);
  border-top-left-radius: 4px;
  padding: 0.35rem 0.85rem;
  box-shadow: 0 8px 20px rgba(255, 69, 117, 0.35);
  white-space: nowrap;
}
@keyframes cursor-in {
  from { opacity: 0; transform: translate(26px, 26px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes cursor-bob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-7px, -7px); }
}
.wizard-chip.is-attn {
  border-color: var(--orbiso-pink);
  animation: attn-ring 1.6s var(--ease-out) infinite;
}
@keyframes attn-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 69, 117, 0.38); }
  70% { box-shadow: 0 0 0 14px rgba(255, 69, 117, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 69, 117, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .try-cursor, .wizard-chip.is-attn { animation: none; }
}

/* ==========================================================================
   Partneři — marquee slider s chat-tooltip bublinami
   ========================================================================== */
.partners-strip {
  padding-block: var(--space-6) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.partners-marquee { overflow: hidden; }
.partners-marquee__track {
  display: flex;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .partners-marquee__track { animation: marquee 36s linear infinite; }
  .partners-marquee:hover .partners-marquee__track,
  .partners-marquee:focus-within .partners-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .partners-marquee { overflow-x: auto; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partners-marquee__set {
  display: flex;
  align-items: center;
  gap: 5.5rem;
  padding-inline: 2.75rem;
  padding-bottom: 84px;
}
.partner-item {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.partner-item img {
  height: 58px;
  width: auto;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.partner-item--sigma img { height: 66px; }
.partner-item:hover img,
.partner-item:focus-visible img { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 10px 18px rgba(46, 49, 224, 0.18)); }

/* Chat bublina jako tooltip: kdo je za co zodpovědný */
.partner-tip {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.92);
  transform-origin: 50% 0%;
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
  border-top-left-radius: 5px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.partner-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-left: 1px solid var(--blue-100);
  border-top: 1px solid var(--blue-100);
  transform: rotate(45deg);
}
.partner-item:hover .partner-tip,
.partner-item:focus-visible .partner-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.partner-item--sigma .partner-tip { white-space: normal; width: 240px; }

/* ==========================================================================
   Bento — scénky se přehrají při naskrolování (fx-prep → is-live)
   ========================================================================== */
.fx-tile.fx-prep .fxm-wizard .fxm-step.is-done,
.fx-tile.fx-prep .fxm-doc .app-step,
.fx-tile.fx-prep .fxm-canvas .fxm-step { opacity: 0; }
.fx-tile.is-live .fxm-wizard .fxm-step.is-done { animation: bubble-pop 0.5s 0.55s var(--ease-out) backwards; }
.fx-tile.is-live .fxm-doc .app-step { animation: bubble-pop 0.5s 0.6s var(--ease-out) backwards; }
.fx-tile.is-live .fxm-doc__arrow { animation: arrow-drop 0.7s 0.15s ease-in-out 2 backwards; }
.fx-tile.is-live .fxm-canvas .fxm-step { animation: bubble-pop 0.5s 0.55s var(--ease-out) backwards; }
.fx-tile.is-live .fxm-palette .fxm-block:nth-child(3) { animation: block-hop 0.55s 0.2s var(--ease-out) backwards; }

.fx-tile.fx-prep .fxm-pub__opt { opacity: 0; }
.fx-tile.is-live .fxm-pub__opt { animation: slide-in-l 0.45s var(--ease-out) backwards; }
.fx-tile.is-live .fxm-pub__opt:nth-child(2) { animation-delay: 0.12s; }
.fx-tile.is-live .fxm-pub__opt:nth-child(3) { animation-delay: 0.24s; }

.fx-tile.fx-prep .fxm-phone { transform: translateY(-50%) rotate(10deg) translateX(18px); }
.fx-tile.is-live .fxm-phone { animation: phone-settle 0.8s 0.2s var(--ease-out) backwards; }
.fx-tile.fx-prep .fxm-browser { opacity: 0; transform: translateY(-50%) translateX(-14px); }
.fx-tile.is-live .fxm-browser { animation: browser-in 0.6s 0.1s var(--ease-out) backwards; }

.fx-tile.fx-prep .fxm-push { opacity: 0; }
.fx-tile.is-live .fxm-push { animation: push-in 0.55s 0.2s var(--ease-out) backwards; }
.fx-tile.fx-prep .fxm-notif .app-progress__fill { transform: scaleX(0); transform-origin: 0 50%; }
.fx-tile.is-live .fxm-notif .app-progress__fill {
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: transform 1.1s 0.6s var(--ease-out);
}
.fx-tile.fx-prep .fxm-consent__row { opacity: 0; }
.fx-tile.is-live .fxm-consent__row { animation: slide-in-l 0.45s var(--ease-out) backwards; }
.fx-tile.is-live .fxm-consent__row:nth-of-type(2) { animation-delay: 0.15s; }

@keyframes arrow-drop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@keyframes block-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-9px); }
}
@keyframes slide-in-l {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes phone-settle {
  from { transform: translateY(-50%) rotate(10deg) translateX(18px); }
  to { transform: translateY(-50%) rotate(3deg); }
}
@keyframes browser-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-14px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes push-in {
  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Podstránky — drobné oživení ve stejném duchu */
.program-card { overflow: hidden; }
.blog-card__cover { overflow: hidden; }
.expert-card { transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.expert-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.tag { transition: background var(--t-fast), color var(--t-fast); }
.program-card:hover .tag { background: var(--pink-50); color: var(--orbiso-pink); }

/* ==========================================================================
   Motion v3 — moderní vrstva (View Transitions, browser surfaces, mikro)
   ========================================================================== */

/* Cross-page View Transitions (progresivní — bez podpory beze změny) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.16s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.34s var(--ease-out) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Browser surfaces patří k designu */
html { caret-color: var(--orbiso-blue); }
* { scrollbar-width: thin; scrollbar-color: var(--blue-100) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--blue-100); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--orbiso-blue); }
::-webkit-scrollbar-track { background: transparent; }
.article a, .legal-body a, .faq-body a { text-underline-offset: 3px; text-decoration: underline; text-decoration-color: var(--blue-100); }
.article a:hover, .legal-body a:hover, .faq-body a:hover { text-decoration-color: var(--orbiso-blue); }
.pricing-amount, .app-progress__label, .blog-meta time { font-variant-numeric: tabular-nums; }

/* Titulky sekcí — blur+rise odhalení (odlišné od fade-up karet) */
@media (prefers-reduced-motion: no-preference) {
  .title-reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(7px);
  }
  .title-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out),
      filter 0.6s var(--ease-out);
  }
}

/* FAQ — plynulé otevírání (interpolate-size, Chrome 131+; jinde beze změny) */
html { interpolate-size: allow-keywords; }
.faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
}
.faq-item[open]::details-content { height: auto; }

/* Formulář — poděkování vyskočí */
.contact-form.is-submitted .form-thanks.is-visible { animation: bubble-pop 0.5s var(--ease-out) both; }

/* DnD — nový blok na plátně i v telefonu popne */
@media (prefers-reduced-motion: no-preference) {
  .dnd-canvas .builder-block:last-of-type,
  #dnd-phone-steps .app-step:last-of-type { animation: bubble-pop 0.4s var(--ease-out) both; }
}

/* Pro-vas journey — obsah příchozí obrazovky nastupuje kaskádou */
@media (prefers-reduced-motion: no-preference) {
  .pv-screen.is-active .phone__body > *,
  .pv-screen.is-active .pv-install > * {
    animation: screen-item-in 0.45s var(--ease-out) backwards;
  }
  .pv-screen.is-active .phone__body > :nth-child(2),
  .pv-screen.is-active .pv-install > :nth-child(2) { animation-delay: 0.07s; }
  .pv-screen.is-active .phone__body > :nth-child(3),
  .pv-screen.is-active .pv-install > :nth-child(3) { animation-delay: 0.14s; }
  .pv-screen.is-active .phone__body > :nth-child(4) { animation-delay: 0.21s; }
  .pv-screen.is-active .phone__body > :nth-child(5) { animation-delay: 0.28s; }
}
@keyframes screen-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Magnetické primární CTA (jen pointer: fine) */
.btn-primary { will-change: transform; }

/* Hero v3 — builder a telefon vedle sebe, beam mezi nimi */
.hero-stage {
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.hero-stage .builder {
  position: relative;
  left: auto;
  top: auto;
  translate: none;
  width: min(390px, 56%);
  z-index: 1;
}
.hero-stage .phone { margin-left: -2.25rem; }
.sync-beam--hero {
  position: absolute;
  top: 46%;
  left: calc(56% - 40px);
  width: 110px;
  height: 4px;
}
@media (max-width: 1020px) {
  .hero-stage .builder { width: min(340px, 48%); margin-right: -3rem; }
  .sync-beam--hero { display: none; }
}
@media (max-width: 640px) {
  .hero-stage .builder { display: none; }
  .hero-stage .phone { margin-left: 0; }
}

/* Replay hero animace */
.hero-replay {
  /* po přehrání sedí uprostřed builderu (ten je left:0, width min(370px, 58%)) — ikona v kruhu, text pod ní */
  position: absolute;
  left: calc(min(370px, 58%) / 2);
  top: calc(50% + 14px);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.4rem 0.85rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.hero-replay.is-visible { opacity: 1; pointer-events: auto; }
.hero-replay:hover { color: var(--orbiso-blue); }
.hero-replay__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--orbiso-blue);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s var(--ease-out), box-shadow var(--t-fast);
}
.hero-replay__icon svg { width: 24px; height: 24px; transition: transform 0.45s var(--ease-out); }
.hero-replay:hover .hero-replay__icon { box-shadow: var(--shadow-lg); }
.hero-replay:hover .hero-replay__icon svg { transform: rotate(-200deg); }

/* Letící klon — energie */
.hero-fly-layer .builder-block {
  box-shadow: 0 14px 34px rgba(46, 49, 224, 0.35);
  border-color: var(--blue-100);
}

/* ==========================================================================
   Wizard v2 — simulace reálného Průvodce (fáze, persony, tri-state, generování)
   ========================================================================== */
.wz-hidden { opacity: 0; pointer-events: none; }
.wz-pop { animation: bubble-pop 0.45s var(--ease-out) both; pointer-events: auto; }

.wz-phase { display: none; }
.wz-phase.is-active { display: block; animation: bubble-in 0.4s var(--ease-out) both; }
.wz-phase__foot { margin-top: var(--space-5); }

/* Záměr — zvýrazněná šablona s růžovými marky */
.wz-intent {
  margin: 0 0 var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.wz-intent p { margin: 0; font-size: 1.12rem; line-height: 1.6; }
.wz-intent mark {
  background: var(--pink-50);
  color: var(--ink);
  border-radius: 6px;
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.wz-intent footer {
  margin-top: 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.wz-start.is-attn { animation: attn-ring 1.6s var(--ease-out) infinite; }

/* Profily účastníků */
.wz-typing {
  display: inline-flex;
  gap: 5px;
  background: linear-gradient(135deg, var(--orbiso-blue) 0%, var(--orbiso-blue-dark) 100%);
  border-radius: var(--r-md);
  border-bottom-left-radius: 6px;
  padding: 0.8rem 1.05rem;
  margin-bottom: 0.8rem;
}
.wz-typing i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0.4;
  animation: typing-blink 1s infinite;
}
.wz-typing i:nth-child(2) { animation-delay: 0.18s; }
.wz-typing i:nth-child(3) { animation-delay: 0.36s; }
.wz-typing[hidden] { display: none !important; }

/* Persony pod sebou (feedback 10. 9.) — jméno vlevo, fáze změny vpravo, popis pod tím */
.wz-personas {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.wz-persona {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.9rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.wz-persona__stage {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
}
.wz-persona__stage svg { width: 13px; height: 13px; }
.wz-persona strong { grid-column: 1; grid-row: 1; font-family: var(--font-heading); font-size: 0.98rem; }
.wz-persona small { grid-column: 1; grid-row: 2; color: var(--text-muted); font-size: 0.8rem; }
.wz-persona p { grid-column: 1 / -1; grid-row: 3; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 640px) {
  .wz-persona { grid-template-columns: 1fr; }
  .wz-persona__stage { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 0.4rem; }
  .wz-persona strong { grid-row: 2; }
  .wz-persona small { grid-row: 3; }
  .wz-persona p { grid-row: 4; }
}

/* Tri-state aktivit */
.wz-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.wz-legend__x { color: var(--orbiso-pink); }
.wz-legend__y { color: var(--success); }
.wz-acts { display: flex; flex-direction: column; gap: 0.55rem; }
.wz-act-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.wz-act-row strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; }
.wz-act-row small { color: var(--text-muted); font-size: 0.8rem; }
.wz-act-row[data-state="-1"] { opacity: 0.55; }
.wz-act-row[data-state="-1"] strong { text-decoration: line-through; text-decoration-color: var(--orbiso-pink); }
.wz-act-row[data-state="1"] { border-color: var(--success-soft); background: #f4fdf8; }
.wz-tri {
  display: inline-flex;
  background: var(--blue-25);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
  flex-shrink: 0;
}
.wz-tri__opt {
  width: 38px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.wz-tri__opt:active { transform: scale(0.92); }
.wz-tri__opt[data-v="-1"].is-on { background: var(--pink-50); color: var(--orbiso-pink); }
.wz-tri__opt[data-v="0"].is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.wz-tri__opt[data-v="1"].is-on { background: var(--success-soft); color: var(--success); }

/* Generování */
.wz-gen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.wz-gen__stage {
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.wz-gen__stage.is-on { background: var(--orbiso-blue); border-color: var(--orbiso-blue); color: #fff; }
.wz-gen__sep { width: 18px; height: 2px; border-radius: 2px; background: var(--blue-100); }
.wz-gen__line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0.4rem 0 0.8rem;
}
.wz-gen__line .chat-dots i { background: var(--orbiso-blue); width: 8px; height: 8px; }

.wz-plan-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.8rem;
}
.wz-plan-head strong { font-family: var(--font-heading); font-size: 1.15rem; }
.wz-plan-head span { color: var(--text-muted); font-size: 0.85rem; }

.wz-tags { display: inline-flex; gap: 0.3rem; flex-shrink: 0; margin-left: auto; }
.wz-tag {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}
.wz-refine {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: var(--space-4);
  transition: opacity 0.3s;
}
.wz-refine .chat-dots i { background: var(--orbiso-pink); width: 8px; height: 8px; }

@media (max-width: 900px) {
  .wz-tags { display: none; }
}
.wizard-step__dots:not([hidden]) { display: inline-flex; margin-left: auto; }
.wizard-step__dots i { background: var(--orbiso-blue); }

/* Propojení tablet → telefon: velká šipka + pulzující modrý kruh v pozadí */
.wizard-wrap .tablet { position: relative; z-index: 2; }
.wizard-wrap .wizard-phone-col { z-index: 2; }
.wz-link {
  position: absolute;
  top: 42%;
  left: calc((100% - var(--space-6)) * 0.6 - 60px);
  width: 220px;
  height: 220px;
  margin-top: -110px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wz-link__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 49, 224, 0.20) 0%, rgba(46, 49, 224, 0.10) 45%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .wz-link__pulse { animation: link-pulse 2.6s ease-in-out infinite; }
  .wz-link__arrow { animation: link-nudge 2.6s ease-in-out infinite; }
}
.wz-link__arrow {
  position: relative;
  color: var(--orbiso-blue);
  filter: drop-shadow(0 6px 14px rgba(46, 49, 224, 0.25));
}
.wz-link.is-send .wz-link__pulse { animation: link-flash 0.6s var(--ease-out) 1; }
.wz-link.is-send .wz-link__arrow { animation: link-shoot 0.6s var(--ease-out) 1; }
@keyframes link-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes link-nudge {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(6px); }
}
@keyframes link-flash {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes link-shoot {
  0% { transform: translateX(-10px); opacity: 0.6; }
  55% { transform: translateX(16px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@media (max-width: 1020px) {
  .wz-link { display: none; }
  .tablet__screen { height: 600px; }
}
@media (max-width: 640px) {
  .wz-app { flex-direction: column; }
  .wz-sidebar {
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 1rem;
  }
  .wz-sidebar__label { display: none; }
  .wz-nav { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
  .wz-nav__item { font-size: 0; gap: 0; padding: 0.25rem; }
  .wz-nav__item span { font-size: 0.72rem; }
  .tablet__screen { height: 560px; }
}

/* ==========================================================================
   Iterace 6 — feedback klienta (2026-09-10)
   Banner druhého publika, fotky oborů, newsletter pop-up, větší start Průvodce
   ========================================================================== */

/* Banner druhého publika — štíhlý pruh nad herem, místo intro rozcestníku */
.audience-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.62rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--text);
}
.audience-banner__text strong { font-family: var(--font-heading); font-weight: 700; }
.audience-banner__icon,
.audience-banner__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.audience-banner__icon svg { width: 19px; height: 19px; }
.audience-banner__arrow { transition: transform 0.25s var(--ease-out); }
.audience-banner:hover .audience-banner__arrow { transform: translateX(4px); }
.audience-banner--uzivatele {
  background: linear-gradient(90deg, var(--pink-50) 0%, #fff0f5 55%, var(--pink-50) 100%);
  border-bottom: 1px solid var(--pink-100);
}
.audience-banner--uzivatele .audience-banner__icon,
.audience-banner--uzivatele .audience-banner__arrow,
.audience-banner--uzivatele .audience-banner__text strong { color: var(--orbiso-pink); }
.audience-banner--tvurci {
  background: linear-gradient(90deg, var(--blue-50) 0%, #eef2ff 55%, var(--blue-50) 100%);
  border-bottom: 1px solid var(--blue-100);
}
.audience-banner--tvurci .audience-banner__icon,
.audience-banner--tvurci .audience-banner__arrow,
.audience-banner--tvurci .audience-banner__text strong { color: var(--orbiso-blue); }
.audience-banner:hover .audience-banner__text strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .audience-banner { font-size: 0.85rem; padding-inline: 1rem; text-align: left; justify-content: flex-start; }
}

/* Obory — reálné fotky ze současného webu orbiso.cz */
.audience-item__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 0.9rem;
  aspect-ratio: 4 / 3;
  background: var(--blue-50);
}
.audience-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.audience-item__media .card-icon {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.audience-item__media .card-icon svg { width: 19px; height: 19px; }

/* Průvodce — velké startovní tlačítko první fáze */
.wz-start {
  width: 100%;
  justify-content: center;
  padding: 1.05rem 2rem;
  font-size: 1.12rem;
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.wz-start svg { width: 17px; height: 17px; }

/* Newsletter pop-up — jednou, po zavření týden pauza */
.news-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(10, 14, 42, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.news-pop[hidden] { display: none; }
.news-pop__card {
  position: relative;
  width: min(500px, 100%);
  background: var(--surface, #fff);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.1rem 2.1rem 1.9rem;
  text-align: left;
}
.news-pop__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--blue-50);
  margin-bottom: 1rem;
}
.news-pop__badge img { width: 30px; height: 30px; }
.news-pop__card h2 {
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.45rem;
}
.news-pop__card > p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}
.news-pop__form { display: flex; gap: 0.6rem; }
.news-pop__form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.78rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 0.95rem;
  background: var(--bg);
}
.news-pop__form input[type="email"]:focus-visible {
  outline: 2px solid var(--orbiso-blue);
  outline-offset: 1px;
  border-color: var(--orbiso-blue);
}
.news-pop__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.news-pop__close:hover { background: var(--pink-50); color: var(--orbiso-pink); }
.news-pop__thanks { font-weight: 600; color: var(--orbiso-blue); margin: 0; }
.news-pop__hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.8rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .news-pop { animation: news-pop-fade 0.3s var(--ease-out) both; }
  .news-pop__card { animation: news-pop-rise 0.45s var(--ease-out) both; }
}
@keyframes news-pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes news-pop-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .news-pop { align-items: flex-end; padding: 0; }
  .news-pop__card { border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; }
  .news-pop__form { flex-direction: column; }
}

/* ==========================================================================
   Iterace 6c — feedback klienta (10. 9. 2026, 2. kolo)
   Jednotná navigace, výrazný newsletter, O nás úvod s fotkami týmu
   ========================================================================== */

/* O nás — úvodní povídání + fotky týmu */
.about-intro { padding-top: 0; padding-bottom: calc(var(--section-y) * 0.45); }
.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-intro__copy h3 {
  font-size: 1.12rem;
  margin: 1.6rem 0 0.45rem;
  color: var(--orbiso-blue);
}
.about-intro__copy p { color: var(--text-muted); }
.about-intro__copy .section-lead { margin-bottom: 0.4rem; }
.about-intro__photos {
  position: relative;
  margin: 0;
  padding-bottom: 3.2rem; /* prostor pro překrývající detail */
}
.about-intro__photo-main {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  display: block;
}
.about-intro__photo-detail {
  position: absolute;
  right: -0.9rem;
  bottom: 0;
  width: min(46%, 300px);
  border-radius: var(--r-md);
  border: 5px solid var(--bg);
  box-shadow: var(--shadow-lg);
  display: block;
}
@media (max-width: 900px) {
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro__photo-detail { right: 0; }
}

/* Newsletter — z bílé karty výrazný brand pás (feedback: víc visible) */
.cta-newsletter .newsletter {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 69, 117, 0.25) 0%, transparent 55%),
    linear-gradient(135deg, var(--orbiso-blue) 0%, var(--orbiso-blue-dark) 100%);
  box-shadow: var(--shadow-lg);
}
.cta-newsletter .newsletter::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 300px;
  height: 295px;
  background: url("../assets/orbiso-symbol.svg") no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
}
.cta-newsletter .newsletter .section-title {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.cta-newsletter .newsletter .section-lead { color: rgba(255, 255, 255, 0.82); }
.cta-newsletter .newsletter__form { position: relative; }
.cta-newsletter .newsletter .form-group label { color: rgba(255, 255, 255, 0.85); }
.cta-newsletter .newsletter .form-group input {
  background: #fff;
  border-color: transparent;
}
.cta-newsletter .newsletter .btn-primary {
  background: var(--orbiso-pink);
  border-color: var(--orbiso-pink);
  padding-block: 0.72rem; /* stejná výška jako input vedle */
}
.cta-newsletter .newsletter .btn-primary:hover {
  background: #e63a67;
  border-color: #e63a67;
  box-shadow: 0 8px 22px rgba(255, 69, 117, 0.35);
}
.cta-newsletter .newsletter .form-thanks h3 { color: #fff; }
.cta-newsletter .newsletter .form-thanks p { color: rgba(255, 255, 255, 0.82); }

/* Pro koho — automatický carousel oborů (feedback 10. 9.: větší a ať to jede) */
.audience-marquee {
  overflow: hidden;
  margin-top: var(--space-6);
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed přes celou šířku okna; body má overflow-x: clip kvůli scrollbaru */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.audience-marquee__track { display: flex; width: max-content; }
.audience-marquee__set {
  display: flex;
  gap: 1.75rem;
  padding-inline: 0.875rem;
}
.audience-marquee .audience-item {
  flex: 0 0 420px;
  border-top: 0;
  padding-top: 0;
}
.audience-marquee .audience-item__media { aspect-ratio: 4 / 3; margin-bottom: 1rem; border-radius: var(--r-xl); }
.audience-marquee .audience-item h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.audience-marquee .audience-item p { font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .audience-marquee__track { animation: marquee 48s linear infinite; }
  .audience-marquee:hover .audience-marquee__track,
  .audience-marquee:focus-within .audience-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .audience-marquee .audience-item { scroll-snap-align: start; }
  .audience-marquee__set { padding-inline: max(1rem, calc(50vw - 620px)); } /* zarovnat na kontejner */
  .audience-marquee__set[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .audience-marquee .audience-item { flex-basis: 300px; }
  .audience-marquee__set { gap: 1rem; }
}

/* Full-bleed prvky (100vw) nesmí u klasického scrollbaru vyvolat vodorovný scroll */
body { overflow-x: clip; }

/* ==========================================================================
   Jednotný styl nadpisů celého webu — vzor: hlavička AI sekce
   (eyebrow pilulka → velký titulek na střed s gradientem na pointě → lead)
   ========================================================================== */
.section-head { text-align: center; margin-bottom: var(--space-6); }
.section-head .section-title,
.page-head:not(.article-hero) h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.section-head .section-lead { margin-inline: auto; margin-bottom: 0; max-width: 62ch; }
.page-head:not(.article-hero) { text-align: center; }
.page-head:not(.article-hero) .section-lead,
.page-head:not(.article-hero) .blog-meta { margin-inline: auto; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--orbiso-blue);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  padding: 0.45rem 1.1rem;
  margin-bottom: var(--space-4);
}
.section-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orbiso-pink);
}
/* Modrý pás „Jak to funguje": světlá varianta */
.theory-band .section-head .section-title { max-width: 22ch; color: #fff; }
.theory-band .section-eyebrow { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }
.theory-band .ai-grad { background-image: linear-gradient(100deg, #fff 25%, var(--pink-100) 95%); }
.cta-grid .section-eyebrow { margin-bottom: var(--space-3); }
@media (max-width: 640px) {
  .section-head .section-title,
  .page-head:not(.article-hero) h1 { font-size: clamp(1.7rem, 1.2rem + 3vw, 2.2rem); }
}

/* ==========================================================================
   Hero — animovaný WebGL2 gradient „Demilune" (js/hero-gl.js)
   Canvas leží pod obsahem; spodní třetina se rozpouští do podkladu stránky,
   aby přechod do další sekce byl plynulý gradient, ne hrana. CSS gradient
   .hero zůstává jako fallback bez WebGL2.
   ========================================================================== */
.hero-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0) 0%, rgba(247, 249, 252, 0.55) 55%, var(--bg) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* Hero se zasouvá pod průhledný header, aby gradient běžel až k hornímu okraji */
.hero {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--space-7) + var(--header-h));
}
.audience-banner { position: relative; z-index: 101; }
/* Podstránky: i page-head se zasouvá pod průhledný header (jinak by nad ním zůstal pruh podkladu) */
.page-head {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--space-7) + var(--header-h));
}

/* Blog — cover článku nad textem (ilustrace bez lidí = jiný jazyk než covery programů) */
.article-cover { margin: 0 0 var(--space-6); }
.article-cover img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); margin: 0; }
.blog-card__cover { aspect-ratio: 2 / 1; min-height: 0; } /* jednotná výška karet napříč různými poměry ilustrací */
.blog-card__cover img { min-height: 0; }

/* Problém — vizuál v hlavní kartě: instrukce z ordinace cestou domů blednou */
.pbm {
  margin-bottom: auto;
  padding-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.pbm__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; align-items: center; }
.pbm__when {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pbm__bubble {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
  border-top-left-radius: 6px;
  padding: 0.8rem 1rem 0.8rem 3.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  max-width: 34rem;
}
.pbm__avatar {
  position: absolute;
  left: 0.75rem;
  top: 0.7rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orbiso-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pbm__bubble--2 {
  padding-left: 1rem;
  color: var(--text-muted);
  opacity: 0.72;
  border-style: dashed;
  box-shadow: none;
  max-width: 26rem;
}
.pbm__bubble--3 {
  padding: 0.85rem 1rem;
  width: 5.2rem;
  border-style: dashed;
  box-shadow: none;
  opacity: 0.55;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.pbm__bubble--3 i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-100); display: block; }
@media (max-width: 640px) {
  .pbm__row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Experti — profilovka přes celou výšku textu (feedback 10. 9.): zaoblený portrét místo kolečka */
.expert-card { align-items: stretch; }
.expert-card .expert-avatar,
.expert-card .expert-avatar img,
.expert-card > img {
  width: 132px;
  height: auto;
  min-height: 132px;
  border-radius: var(--r-md);
}
.expert-card .expert-avatar { align-self: stretch; display: flex; font-size: 1.6rem; }
.expert-card .expert-avatar img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center top; border-radius: inherit; }
@media (max-width: 640px) {
  .expert-card .expert-avatar, .expert-card > img { width: 96px; min-height: 96px; }
}

/* Tvorba (fx-bento) — kompaktnější (feedback 10. 9.: sekce byla příliš velká) */
.fx-bento { gap: 0.9rem; margin-top: var(--space-5); }
.fx-tile { padding: 1.5rem 1.6rem; gap: 1.1rem; transition: none; }
.fx-tile h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem); margin-bottom: 0.3em; }
.fx-tile__copy p { font-size: 0.92rem; line-height: 1.5; }
.fx-tile--pruvodce .fx-tile__visual { padding-block: 0.6rem; }
.fxm-wizard { gap: 0.7rem; max-width: 520px; }
.fxm-wizard .fxm-step { padding: 0.7rem 0.95rem; font-size: 0.9rem; }
.fxm-wizard .fxm-step strong { font-size: 0.94rem; }
.fxm-wizard .app-chip { font-size: 0.82rem; padding: 0.42rem 0.9rem; }
.fxm-bubble { font-size: 0.92rem; }
.fx-tile--devices, .fx-tile--pripominky { gap: var(--space-5); }
.fxm-notif { gap: 0.6rem; }
.fxm-editor { gap: 0.45rem; }
.fxm-doc { gap: 0.35rem; }

/* Tvorba — 3 cihličky vedle sebe ve spodním řádku, ikonka ve čtverečku v každé (feedback 10. 9.) */
.fx-tile--pripominky { flex-direction: column; align-items: stretch; gap: 1.1rem; }
.fx-tile--pripominky .fx-tile__visual { flex: none; margin-top: auto; }
.fx-tile .card-icon--tile { margin-bottom: 0.7rem; }
.fx-tile--pruvodce .card-icon--tile,
.fx-tile--editor .card-icon--tile,
.fx-tile--souhlasy .card-icon--tile { background: var(--surface); }

/* Průvodce v jednom řádku: mockup vyplní dlaždici, kopie nahoře */
.fx-tile--pruvodce .fx-tile__visual { margin-block: auto 0; padding-block: 0.4rem 0; }
.fxm-wizard { max-width: none; }
.fx-tile--dokument .fx-tile__visual, .fx-tile--editor .fx-tile__visual { margin-top: auto; }

/* Průvodce: kopie vlevo, mockup vpravo — řádek už neroztahuje výšku (feedback 10. 9.) */
.fx-tile--pruvodce { flex-direction: row; align-items: flex-start; gap: var(--space-5); }
.fx-tile--pruvodce .fx-tile__copy { flex: 0 0 38%; }
.fx-tile--pruvodce .fx-tile__visual { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }
.fxm-wizard { gap: 0.55rem; }
.fxm-wizard .fxm-bubble { padding: 0.65rem 0.85rem; font-size: 0.88rem; }
.fxm-wizard .fxm-step { padding: 0.55rem 0.8rem; font-size: 0.86rem; }
.fxm-wizard .app-chip { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
@media (max-width: 680px) {
  .fx-tile--pruvodce { flex-direction: column; align-items: stretch; }
  .fx-tile--pruvodce .fx-tile__copy { flex: none; }
}

/* ==========================================================================
   Responzivní audit (11. 9. 2026)
   ========================================================================== */
/* pro-vas hero: jediný telefon ve stage — na střed, bez záporného odsazení z v3 layoutu */
.hero-stage--user .phone { margin-left: 0; }
@media (max-width: 1020px) {
  .hero-stage { justify-content: center; }
}
/* newsletter: na mobilu input a tlačítko pod sebe (tlačítko bylo oříznuté) */
@media (max-width: 600px) {
  .newsletter-signup { flex-direction: column; align-items: stretch; }
  .newsletter-signup .btn { width: 100%; }
  .cta-newsletter .newsletter::before { display: none; }
}
/* „V ordinaci" vizuál: v užší kartě (2sloupcové bento, tablet) popisky nad bubliny */
@media (max-width: 1100px) {
  .pbm__row { grid-template-columns: 1fr; gap: 0.3rem; }
}
/* Tvorba: 12sloupcový layout až od 1100 px, pod tím 2 sloupce (1024 bylo příliš těsné) */
@media (max-width: 1100px) {
  .fx-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pruvodce pruvodce"
      "dokument editor"
      "publikace souhlasy"
      "pripominky pripominky";
  }
}
/* newsletter mobil: form-group bez flex-basis (v koloně by se stal výškou) */
@media (max-width: 600px) {
  .newsletter-signup .form-group { flex: none; }
}
/* Průvodce: pod 1100 px tablet a telefon pod sebe — v užším sloupci se CTA tabletu dostávalo pod ohyb */
@media (max-width: 1100px) {
  .wizard-wrap { grid-template-columns: 1fr; }
  .wizard-wrap .tablet { max-width: 820px; margin-inline: auto; width: 100%; }
  .wizard-phone-col { position: static; margin-top: var(--space-5); }
  .wz-link { display: none; }
}

/* Blog — ukázky programů: vizuál nad textem v kartě, tři karty vedle sebe (feedback 11. 9.) */
.article-examples { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.article-example { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.article-example__visual { order: 0; }
.article-example--flip .article-example__visual { order: 0; }
.article-example__visual img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-md); }

/* Patička — vyvážená: brand + tři užší sloupce, právní odkazy dole u copyrightu (11. 9.) */
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-links h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orbiso-blue); margin-bottom: 1rem; }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.footer-legal a { color: var(--text-muted); }
.footer-legal a:hover { color: var(--orbiso-blue); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* Patička — loga partnerů větší a roztažená až k bloku TAČR (11. 9.) */
.footer-partners-logos { flex: 1 1 auto; justify-content: space-between; gap: 1.25rem 1.5rem; }
.footer-partners-logos img { height: 54px; }
.footer-partners-logos img[alt="Masarykova univerzita"] { height: 36px; }
.footer-partners-logos img[alt="Technologická agentura ČR"] { height: 64px; }
.footer-tacr { flex: 0 0 340px; margin-left: var(--space-5); }
@media (max-width: 900px) {
  .footer-partners-logos { justify-content: flex-start; }
  .footer-partners-logos img { height: 34px; }
  .footer-tacr { flex-basis: 100%; margin-left: 0; }
}

/* Patička — vstupy jako tlačítka s ikonou (11. 9.) */
.footer-btn-item { margin-bottom: 0.6rem; }
.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--orbiso-blue) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.footer-btn:hover { border-color: var(--orbiso-blue); background: var(--blue-25); }

/* ==========================================================================
   pro-vas — hero, kroky 1-2-3, FAQ (feedback 11. 9.)
   ========================================================================== */
/* hero: jediný telefon na střed sloupce (v3 .hero-stage má space-between), víc místa dole, kratší přechod */
.hero-stage.hero-stage--user { justify-content: center; }
.hero { padding-bottom: 4rem; }        /* obě homepage: víc místa pod scénou */
.hero::after { height: 26%; }          /* kratší přechod, ať telefon není utopený ve fade */

/* kroky: kompaktní klikací seznam vedle telefonu, bez scroll-pacingu a bez „poskoku" čísel */
.pv-journey { align-items: center; gap: var(--space-6); margin-top: var(--space-5); }
.pv-steps { gap: 0.5rem; }
.pv-step,
.pv-step:first-child,
.pv-step:last-child {
  min-height: 0;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  opacity: 1;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.pv-step h3 { transition: color var(--t-fast); }
.pv-step:not(.is-active) h3 { color: var(--text-muted); }
.pv-step.is-active { background: var(--surface); box-shadow: var(--shadow-sm); }
.pv-step.is-active .pv-step__num { transform: none; }
.pv-step:focus-visible { outline: 2px solid var(--orbiso-blue); outline-offset: 2px; }
.pv-phone-col { position: static; }
.pv-journey .phone { width: 280px; }
.pv-journey .phone__screen { min-height: 520px; }
body[data-page="pro-vas"] .store-badges { justify-content: center; margin-top: var(--space-6); }

/* FAQ pod středovým nadpisem na střed */
.faq-list { margin-inline: auto; }
.pv-install .app-btn { margin: 0; align-self: center; } /* tlačítko na instalační obrazovce na střed (bylo odskočené doprava) */
.store-badge__logo { width: 24px; height: 24px; flex-shrink: 0; } /* loga obchodů v badge (11. 9.) */
.store-badge { gap: 0.7rem; padding-inline: 1rem 1.3rem; }

/* Hero — kurzor „Vyzkoušejte si" vedle tlačítka Přehrát znovu (11. 9.) */
.try-cursor--hero {
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  z-index: 4;
  animation: none; /* polohu řídí GSAP — kurzor objíždí bloky a kliká */
}
.try-cursor--hero svg { transition: transform 0.12s ease-out; transform-origin: 6px 3px; }
.try-cursor--hero.is-press svg { transform: scale(0.82); }
@media (max-width: 640px) { .try-cursor--hero { display: none; } }

/* Header — CTA za přepínačem jazyka, s ikonou vstupu (11. 9.) */
.header-actions .header-cta { padding: 0.55rem 1.2rem 0.55rem 1rem; font-size: 0.95rem; gap: 0.5rem; }
.header-cta svg { flex-shrink: 0; }
@media (max-width: 900px) {
  .header-actions .header-cta { display: none; } /* na mobilu je CTA v rozbaleném menu */
  .nav-mobile .header-cta { justify-content: center; margin-top: 0.5rem; }
}

/* Primární CTA — šipka v bílém kolečku, hover „výstřel" (11. 9.) */
.btn-primary--arrow, .btn-secondary--arrow { padding-right: 0.5rem; }
.btn-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--orbiso-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.35rem;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out);
}
.btn-arrow svg { width: 15px; height: 15px; }
.cta-newsletter .btn-arrow { color: var(--orbiso-pink); }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary--arrow:hover .btn-arrow, .btn-secondary--arrow:hover .btn-arrow,
  .btn-primary--arrow:focus-visible .btn-arrow, .btn-secondary--arrow:focus-visible .btn-arrow { transform: scale(1.1); }
  .btn-primary--arrow:hover .btn-arrow svg, .btn-secondary--arrow:hover .btn-arrow svg,
  .btn-primary--arrow:focus-visible .btn-arrow svg, .btn-secondary--arrow:focus-visible .btn-arrow svg { animation: btn-arrow-shoot 0.5s var(--ease-out); }
}
@keyframes btn-arrow-shoot {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(16px); opacity: 0; }
  50% { transform: translateX(-16px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* Sekundární tlačítka: inverzně — modré kolečko, bílá šipka (11. 9.) */
.btn-secondary--arrow .btn-arrow { background: var(--orbiso-blue); color: #fff; }
.btn-secondary--arrow.btn-lg { padding-right: 0.6rem; }
.btn-secondary--arrow.btn-lg .btn-arrow { width: 32px; height: 32px; }
.btn-secondary--arrow.btn-lg .btn-arrow svg { width: 17px; height: 17px; }
/* Zpětné tlačítko: kolečko vlevo, šipka „vystřelí" doleva (11. 9.) */
.btn-ghost--arrow { padding-left: 0.5rem; }
.btn-ghost--arrow .btn-arrow { background: var(--orbiso-blue); color: #fff; margin: 0 0.35rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .btn-ghost--arrow:hover .btn-arrow,
  .btn-ghost--arrow:focus-visible .btn-arrow { transform: scale(1.1); }
  .btn-ghost--arrow:hover .btn-arrow svg,
  .btn-ghost--arrow:focus-visible .btn-arrow svg { animation: btn-arrow-shoot-back 0.5s var(--ease-out); }
}
@keyframes btn-arrow-shoot-back {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(-16px); opacity: 0; }
  50% { transform: translateX(16px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* Chyba odeslání formuláře (11. 9.) */
.form-error {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #b3123c;
  background: var(--pink-50);
  border: 1px solid var(--pink-100);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
}
.form-error a { color: inherit; text-decoration: underline; }
.cta-newsletter .form-error { background: rgba(255, 255, 255, 0.92); }