/*
 * Príbeh na úvodnej stránke. Scény riadi assets/js/story.js:
 *   --p       postup scény 0..1 (na .scene)
 *   --t, --tl postup prvku s data-prog (s dobehom / lineárne)
 *   .on       prvok s data-on je v rozsahu
 *   [data-step] aktuálny krok scény
 * Rozmery vo vnútri .stage sú v návrhových pixeloch, celá scéna sa zmenší naraz.
 */

/* ===== Rozloženie scén ===== */

/*
 * Scéna je sekcia s výškou okna a prehráva sa sama, keď zaberá väčšinu okna. Stránka sa
 * scrolluje voľne, bez stránkovania a bez prichytávania k scénam. Úvod je o --hold dlhší:
 * počas neho sa nadpis vytráca a okno aplikácie sa podľa scrollu dvíha do stredu.
 */

/* Odkaz na scénu (#zakaznik, #inbox...) ju zarovná k hornému okraju, priestor pre hlavičku má scéna sama. */
html {
  scroll-padding-top: 0;
}

.scene {
  --hold: 0;
  position: relative;
  height: calc((100 + var(--hold)) * 1vh);
  height: calc((100 + var(--hold)) * 1svh);
}

.sceneHero {
  --hold: 70;
}

.sceneSticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: calc(var(--header-h) + 24px) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 36px;
  overflow: hidden;
}

.sceneCopy {
  position: relative;
  z-index: 2;
}

/*
 * Ukážky aplikácie ostávajú v takej veľkosti, ako boli pri webe v mierke 90 %: návrat webu na 100 %
 * zväčšil texty a okraje, nie ukážky. Plocha pre ukážku vedľa textu je preto najviac 702 px široká.
 */
@media (min-width: 1001px) {
  .scene:not(.sceneWide) > .sceneSticky > .fit {
    justify-self: center;
    max-width: 702px;
  }
}

/* veľký text scény je odsek, nadpisom (H2) je nadpisok nad ním: v ňom sú kľúčové slová */
.sceneTitle {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.sceneLead {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.sceneSteps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line);
}

.sceneSteps li {
  position: relative;
  margin-left: -2px;
  padding: 7px 0 7px 18px;
  border-left: 2px solid transparent;
  color: var(--faint);
  font-size: 15.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: color 0.35s, border-color 0.35s;
}

.sceneSteps li:hover {
  color: var(--ink-2);
}

.sceneSteps li:focus-visible {
  outline-offset: -2px;
}

.sceneSteps li.isPast {
  color: var(--muted);
}

.sceneSteps li.isActive {
  color: var(--ink);
}

/* priebeh aktuálneho kroku: zelená čiara narastá, kým scéna prehráva krok */
.sceneSteps li.isActive::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: calc(var(--sp, 1) * 100%);
  background: var(--green);
}

/* kroky ako pásiky s textom aktuálneho kroku pod nimi (široké scény a mobil) */
.sceneWide .sceneSteps {
  display: flex;
  gap: 6px;
  max-width: 420px;
  min-height: 0;
  margin: 18px auto 0;
  padding-bottom: 3.2em;
  border: 0;
}

.sceneWide .sceneSteps li {
  flex: 1;
  height: 20px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: rgba(20, 20, 24, 0.12) content-box;
  font-size: 0;
}

.sceneWide .sceneSteps li.isPast {
  background: var(--green) content-box;
}

.sceneWide .sceneSteps li.isActive {
  background: linear-gradient(90deg, var(--green) calc(var(--sp, 0) * 100%), rgba(20, 20, 24, 0.12) 0) content-box;
}

.sceneWide .sceneSteps li.isActive::before {
  content: none;
}

.sceneWide .sceneSteps li.isActive::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  animation: stepIn 0.4s ease-out;
}

.sceneWide .sceneSteps {
  position: relative;
}

.sceneWide .sceneSteps li {
  position: static;
}

.scenePunch {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
}

.scenePunch.on {
  opacity: 1;
  transform: none;
}

.sceneNote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 22px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20, 20, 24, 0.04);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.sceneNote .i {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--green-ink);
}

.sceneNote a {
  color: var(--green-ink);
  font-weight: 600;
  white-space: nowrap;
}

.sceneNote a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.soon {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: #8a6400;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* kurzor pri písaní textu (data-type) */
.isTyping::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: caret 0.8s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .sceneLead {
    margin-bottom: 16px;
    font-size: 15.5px;
  }

  .sceneSteps li {
    padding-block: 5px;
    font-size: 14.5px;
  }

  .scenePunch {
    margin-top: 16px;
    font-size: 18px;
  }
}

@media (min-width: 1001px) and (max-height: 700px) {
  .sceneSticky > .sceneCopy .sceneLead {
    display: none;
  }
}

/* scéna cez celú šírku: text hore, ukážka pod ním */
.sceneWide .sceneSticky {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 18px;
  align-items: stretch;
}

.sceneWide .sceneCopy {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.sceneWide .sceneLead {
  margin-bottom: 0;
}

.sceneWide .sceneTitle {
  margin-bottom: 12px;
}

/* tmavá scéna (automatizácie) */
.sceneDark {
  background: var(--night);
  color: #f2f2f4;
  --line: rgba(255, 255, 255, 0.1);
}

.sceneDark .eyebrow,
.sceneDark .sceneLead {
  color: rgba(255, 255, 255, 0.62);
}

.sceneDark .eyebrow b,
.sceneDark .eyebrow[data-num]::before {
  color: var(--green);
}

.sceneDark .sceneSteps li {
  color: rgba(255, 255, 255, 0.34);
}

.sceneDark .sceneSteps li.isPast {
  color: rgba(255, 255, 255, 0.6);
}

.sceneDark .sceneSteps li.isActive {
  color: #fff;
}

.sceneDark .sceneNote {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1000px) {
  .sceneSticky {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 14px;
    align-items: stretch;
    padding: calc(var(--header-h) + 14px) var(--gutter) 20px;
  }

  .sceneTitle {
    font-size: clamp(24px, 5.6vw, 34px);
    margin-bottom: 10px;
  }

  .sceneLead,
  .sceneNote,
  .scenePunch {
    display: none;
  }

  .sceneSteps {
    position: relative;
    display: flex;
    gap: 5px;
    max-width: none;
    margin: 4px 0 0;
    padding-bottom: 3em;
    border: 0;
  }

  .sceneSteps li {
    position: static;
    flex: 1;
    height: 20px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: rgba(20, 20, 24, 0.12) content-box;
    font-size: 0;
  }

  .sceneSteps li.isPast {
    background: var(--green) content-box;
  }

  .sceneSteps li.isActive {
    background: linear-gradient(90deg, var(--green) calc(var(--sp, 0) * 100%), rgba(20, 20, 24, 0.12) 0) content-box;
  }

  .sceneSteps li.isActive::before {
    content: none;
  }

  .sceneSteps li.isActive::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    animation: stepIn 0.4s ease-out;
  }

  .sceneDark .sceneSteps li:not(.isPast):not(.isActive) {
    background-color: rgba(255, 255, 255, 0.16);
  }

  .sceneDark .sceneSteps li.isActive {
    background: linear-gradient(90deg, var(--green) calc(var(--sp, 0) * 100%), rgba(255, 255, 255, 0.16) 0) content-box;
  }

  .sceneDark .sceneSteps li.isActive::after {
    color: rgba(255, 255, 255, 0.85);
  }

  .eyebrow {
    margin-bottom: 8px;
  }

  .sceneWide .sceneLead {
    display: block;
    font-size: 15px;
  }
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* bez animácií: scény v konečnom stave pod sebou */
.rm .scene {
  height: auto;
}

.rm .sceneSticky {
  position: relative;
  height: auto;
  min-height: 100svh;
}

.rm .fit {
  height: min(78svh, 612px);
}

.rm .sceneWide .fit {
  height: min(70svh, 558px);
}

.rm *,
.rm *::before,
.rm *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

/* ===== 00 Úvod ===== */

.sceneHero .heroSticky {
  display: block;
  padding: 0;
}

.heroHead {
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + clamp(18px, 5vh, 64px));
  z-index: 3;
  width: min(1080px, calc(100% - 2 * var(--gutter)));
  text-align: center;
  opacity: calc(1 - var(--t, 0) * 1.2);
  transform: translate(-50%, calc(var(--t, 0) * -56px));
}

.heroHead:not(.on) {
  pointer-events: none;
}

@media (min-width: 1001px) {
  .heroHead {
    width: min(1000px, calc(100% - 380px));
  }
}

@media (min-width: 1001px) and (max-height: 800px) {
  .sceneHero .heroLift {
    --drop: 63vh;
  }
}

/* novinka v pilulke nad nadpisom ($siteNews v config.php) */
.heroNews {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.heroNews:hover {
  border-color: #c9c9d0;
  box-shadow: 0 4px 14px -6px rgba(20, 20, 30, 0.2);
}

.heroNewsTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: #f1ebff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 600;
}

.heroNewsTag .i {
  width: 12px;
  height: 12px;
}

.heroNews > .i {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.2s;
}

.heroNews:hover > .i {
  transform: translateX(2px);
}

/* H1 je krátky popis produktu (SEO), vizuálne ako nadpisok nad veľkým nadpisom */
.heroEyebrow {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.heroTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, min(4.7vw, 8.2vh), 72px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.heroLead {
  max-width: 620px;
  margin: 18px auto 0;
  text-wrap: balance;
}

.heroCtas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.heroLift {
  --drop: 56vh;
  position: absolute;
  inset: var(--header-h) 0 0;
  z-index: 1;
  transform: translateY(calc((1 - var(--t, 0)) * var(--drop) - var(--t, 0) * var(--rise, 0px)));
}

.heroFit {
  padding: 0 12px;
}

.heroCaption {
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 6px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.45s, transform 0.45s;
}

.heroCaption .i {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.heroCaption.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Okno rastie s obrazovkou, písmo v ňom však nebude väčšie ako v aplikácii: okno sa rozloží
   do väčšej plochy a zmenší naspäť o --zoom (data-cmax, story.js). Kartičky sa zmenšia s ním. */
.heroWindow {
  left: 130px;
  top: 40px;
  width: calc(900px / var(--zoom, 1));
  height: calc(600px / var(--zoom, 1));
  scale: var(--zoom, 1);
  transform-origin: 0 0;
}

.stHero .fragIn {
  scale: var(--zoom, 1);
}

.stHero .gwNavItem {
  opacity: 0.4;
}

.stHero .gwNavItem.isFilled,
.sceneHero[data-step="2"] .stHero .gwNavItem {
  opacity: 1;
}

.stHero .gwNavItem.isFilled .gwNavIco {
  animation: navPop 0.6s ease-out;
}

@keyframes navPop {
  40% {
    transform: scale(1.45);
  }
}

.heroTable {
  position: relative;
  overflow: hidden;
  font-size: 12px;
}

.listSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin-bottom: 8px;
  padding: 0 10px;
  border: 1px solid #e6e6e9;
  border-radius: 999px;
  color: #a1a1aa;
  font-size: 11.5px;
}

.listSearch .i {
  width: 13px;
  height: 13px;
}

.listSearch em {
  display: flex;
  gap: 10px;
  margin-left: auto;
  color: #3f3f46;
}

.heroRow {
  display: grid;
  grid-template-columns: 1.7fr 0.9fr 0.55fr 0.95fr 1.25fr 1.15fr;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px;
  border-bottom: 1px solid #f0f0f2;
  white-space: nowrap;
}

.heroRow > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.heroRowHead {
  height: 32px;
  color: var(--appText);
  font-size: 11.5px;
  font-weight: 600;
}

.heroRow[data-on] {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
}

.heroRow.on {
  opacity: 1;
  transform: none;
}

.heroRow.isHot {
  border-radius: 8px;
  background: #eef4ff;
  box-shadow: inset 3px 0 0 var(--lnk);
}

.rating {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.rVip {
  background: #fbf0d3;
  color: #9a6b00;
}

.rA {
  background: #e3f4e8;
  color: #2f7a4a;
}

.rB {
  background: #e7efff;
  color: #3563c9;
}

.rC {
  background: #f0f0f2;
  color: #71717a;
}

.heroSkeleton {
  position: absolute;
  inset: 32px 0 0;
  display: grid;
  align-content: start;
  transition: opacity 0.4s;
}

.heroSkeleton i {
  height: 38px;
  border-bottom: 1px solid #f2f2f4;
  background: linear-gradient(90deg, #f3f3f5 0 22%, transparent 22% 30%, #f6f6f8 30% 44%, transparent 44% 52%, #f6f6f8 52% 60%, transparent 60%) 8px 13px / calc(100% - 16px) 12px no-repeat;
}

.sceneHero[data-step="2"] .heroSkeleton {
  opacity: 0;
}

.frag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: var(--w);
  will-change: transform;
}

.fragIn {
  padding: 11px 13px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06), 0 14px 30px -12px rgba(20, 20, 30, 0.28), 0 0 0 0.75px rgba(20, 20, 30, 0.08);
  animation: fragFloat 5.5s ease-in-out infinite alternate;
}

.sceneHero:not(.isVisible) .fragIn,
.frag.isFlying .fragIn,
.frag.isLanded .fragIn {
  animation-play-state: paused;
}

.frag:nth-of-type(2n) .fragIn {
  animation-duration: 6.5s;
  animation-delay: -2s;
}

.frag:nth-of-type(3n) .fragIn {
  animation-duration: 7.2s;
  animation-delay: -4s;
}

@keyframes fragFloat {
  to {
    transform: translateY(-9px);
  }
}

.fragHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px !important;
  font-size: 12px;
  min-width: 0;
}

.fragHead b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fragHead time,
.fragHead .tag {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
}

.fragHead .tag {
  color: var(--blue);
}

.fragIco {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c) 13%, #fff);
  color: var(--c);
}

.fragIco .i {
  width: 13px;
  height: 13px;
}

.fragTitle {
  margin-bottom: 3px !important;
  font-size: 13px;
  font-weight: 600;
}

.fragText {
  color: var(--muted);
  font-size: 12px;
}

/* lístok je zastrčený pod kartou zmeškaného hovoru */
.stHero:not(.isCompact) .fragTask {
  z-index: 2;
}

.fragTask .fragIn {
  padding: 16px 14px 14px;
  border-radius: 3px;
  background: #fff2a8;
  box-shadow: 0 16px 26px -14px rgba(120, 90, 0, 0.45);
}

.fragTask .fragTitle {
  font-size: 14px;
  color: #4b3b00;
}

.fragTask .fragText {
  color: #7a6414;
}

/* Kým návštevník stojí na nadpise, úlomky "žijú": zvoní telefón, prichádza e-mail, termíny tlačia. */
.sceneHero[data-step="0"] .fragCall .fragIco {
  animation: ring 2.6s ease-in-out infinite;
}

@keyframes ring {
  0%,
  60%,
  100% {
    transform: none;
  }

  64%,
  72%,
  80% {
    transform: rotate(-14deg);
  }

  68%,
  76%,
  84% {
    transform: rotate(14deg);
  }
}

.sceneHero[data-step="0"] .fragMail .fragIn::after {
  content: "nový";
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-2);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  animation: badgeIn 3.4s ease-out infinite;
}

.fragIn {
  position: relative;
}

@keyframes badgeIn {
  0%,
  8% {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
  }

  16%,
  80% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

.sceneHero[data-step="0"] .fragLead .tag {
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 140, 247, 0.55);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(74, 140, 247, 0);
  }
}

.sceneHero[data-step="0"] .fragInvoice .fragTitle {
  animation: due 2.8s ease-in-out infinite;
}

@keyframes due {
  0%,
  45%,
  100% {
    color: var(--ink);
  }

  55%,
  85% {
    color: var(--red);
  }
}

.sceneHero[data-step="0"] .fragTask .fragTitle {
  animation: wiggle 3.2s ease-in-out infinite;
  transform-origin: left center;
}

@keyframes wiggle {
  0%,
  70%,
  100% {
    transform: none;
  }

  76% {
    transform: rotate(-2.5deg);
  }

  84% {
    transform: rotate(2deg);
  }

  90% {
    transform: rotate(-1deg);
  }
}

.sceneHero[data-step="0"] .fragCal .fragIco {
  animation: bounce 2.4s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  70%,
  100% {
    transform: none;
  }

  78% {
    transform: translateY(-5px);
  }

  86% {
    transform: none;
  }

  92% {
    transform: translateY(-2px);
  }
}

.sceneHero[data-step="0"] .sheetGrid span:nth-child(6),
.sceneHero[data-step="0"] .sheetGrid span:nth-child(12) {
  animation: cellBlink 2.2s ease-in-out infinite;
}

@keyframes cellBlink {
  0%,
  40%,
  100% {
    background: transparent;
  }

  55%,
  75% {
    background: var(--amber-soft);
  }
}

.sceneHero[data-step="0"] .fragDoc .fragText,
.sceneHero[data-step="0"] .fragDeal .fragText {
  animation: due 3.6s ease-in-out infinite 1.2s;
}

.sheetGrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.6fr;
  border-top: 1px solid #dfe3e8;
  border-left: 1px solid #dfe3e8;
  font-size: 11px;
}

.sheetGrid span {
  min-height: 20px;
  overflow: hidden;
  padding: 3px 6px;
  border-right: 1px solid #dfe3e8;
  border-bottom: 1px solid #dfe3e8;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheetGrid span:nth-child(-n + 3) {
  background: #f1f3f5;
  color: var(--faint);
  text-align: center;
}

/* Pri načítaní prichádzajú úlomky postupne (oneskorenie --in). Animujú sa vlastnosti translate a scale,
   lebo transform a opacity na .frag nastavuje story.js pri prelete do okna. */
.stHero .frag {
  animation: fragArrive 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--in, 0s) backwards;
}

@keyframes fragArrive {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.94;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stHero .frag {
    animation: none;
  }
}

/* Na širokej obrazovke sú úlomky menšie, aby okno aplikácie a nadpis ostali v popredí. */
.stHero:not(.isCompact) .fragIn {
  padding: 9px 11px 10px;
  border-radius: 10px;
}

.stHero:not(.isCompact) .fragHead {
  gap: 6px;
  margin-bottom: 5px !important;
  font-size: 11px;
}

.stHero:not(.isCompact) .fragHead time,
.stHero:not(.isCompact) .fragHead .tag {
  font-size: 10px;
}

.stHero:not(.isCompact) .fragIco {
  width: 19px;
  height: 19px;
  border-radius: 5px;
}

.stHero:not(.isCompact) .fragIco .i {
  width: 11px;
  height: 11px;
}

.stHero:not(.isCompact) .fragTitle {
  font-size: 12px;
}

.stHero:not(.isCompact) .fragText {
  font-size: 11px;
}

.stHero:not(.isCompact) .sheetGrid {
  font-size: 10px;
}

.stHero:not(.isCompact) .sheetGrid span {
  min-height: 17px;
  padding: 2px 5px;
}

.stHero:not(.isCompact) .fragTask .fragIn {
  padding: 12px 12px 11px;
}

.stHero:not(.isCompact) .fragTask .fragTitle {
  font-size: 12.5px;
}

.stHero.isCompact .heroWindow {
  left: 10px;
  top: 300px;
  width: calc(580px / var(--zoom, 1));
  height: calc(540px / var(--zoom, 1));
}

.stHero.isCompact .gwSide {
  width: 160px;
}

.stHero.isCompact .heroRow {
  grid-template-columns: 1.7fr 0.55fr 1.2fr;
}

.stHero.isCompact .heroRow > span:nth-child(2),
.stHero.isCompact .heroRow > span:nth-child(4),
.stHero.isCompact .heroRow > span:nth-child(5),
.stHero.isCompact .gwAiBtn,
.stHero.isCompact .listSearch em,
.stHero.isCompact .btnNew {
  display: none;
}

.stHero.isCompact .frag {
  left: var(--cx);
  top: var(--cy);
  width: 176px;
}

@media (max-width: 1000px) {
  .heroLift {
    --drop: 50svh;
  }
}

@media (max-width: 640px) {
  .heroLift {
    --drop: 62svh;
    --rise: 15svh;
  }
}

@media (max-width: 1000px) {

  .heroCaption {
    font-size: 13px;
    white-space: normal;
    width: max-content;
    max-width: calc(100% - 32px);
  }
}

@media (max-width: 560px) {
  .heroCtas .btn {
    flex: 1 1 100%;
  }
}

.heroRowSum {
  height: 34px;
  border-bottom: 0;
  color: var(--appMuted);
  font-size: 10.5px;
  font-weight: 600;
}

/* ===== 01 Zákazník ===== */

.zkRecord {
  --appText: #18181b;
  --appMuted: #71717a;
  --lnk: #2563eb;
  position: absolute;
  left: 346px;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 554px;
  height: 600px;
  padding: 16px 18px;
}

.zkRecord .recHead {
  margin-bottom: 10px;
}

.zkSum {
  display: grid;
  min-height: 52px;
  padding: 0;
}

.zkSum > * {
  grid-area: 1 / 1;
}

.zkEmpty {
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 11.5px;
  transition: opacity 0.3s;
}

.zkSum.isFilled .zkEmpty {
  opacity: 0;
}

.zkGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.zkWide {
  grid-column: 1 / -1;
}

.zkSlot {
  position: relative;
  min-width: 0;
  padding: 5px;
  border: 1.5px dashed #d8d8dd;
  border-radius: 12px;
  transition: border-color 0.4s, padding 0.4s;
}

.zkSlot.isFilled {
  border-color: transparent;
}

.zkSlot .relHead {
  height: 30px;
  font-size: 11.5px;
  opacity: 0.55;
  transition: opacity 0.4s;
}

.zkSlot.isFilled .relHead {
  opacity: 1;
}

.zkFull {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s 0.08s, transform 0.4s 0.08s;
}

.isFilled > .zkFull {
  opacity: 1;
  transform: none;
}

.zkRows p {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border-bottom: 1px solid #f0f0f2;
  font-size: 11.5px;
  white-space: nowrap;
}

.zkRows p:last-child {
  border-bottom: 0;
}

.zkRows em {
  overflow: hidden;
  color: #52525b;
  font-style: normal;
  text-overflow: ellipsis;
}

.zkRows b {
  font-weight: 600;
  text-align: right;
}

.zkNote {
  display: grid;
  gap: 3px;
  padding: 8px 8px 4px;
  font-size: 11.5px;
  line-height: 1.4;
}

.zkNote span {
  color: #52525b;
}

.zkActs p {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 80px;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 4px 8px;
  border-bottom: 1px solid #f0f0f2;
  font-size: 11.5px;
  white-space: nowrap;
}

.zkActs p:last-child {
  border-bottom: 0;
}

.zkActs .lnk {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.zkActs em {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #71717a;
  font-style: normal;
}

.zkActs em .i {
  width: 11px;
  height: 11px;
}

.zkActs time {
  color: #52525b;
  text-align: right;
}

.zkActIco {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
}

.zkActIco .i {
  width: 12px;
  height: 12px;
}

.zkHistory {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #ebf6ee;
  color: #2f7a4a;
  font-size: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s, transform 0.45s;
}

.zkHistory.on {
  opacity: 1;
  transform: none;
}

.zkDots {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.zkDots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb46f;
  opacity: 0.35;
}

.zkDots i:nth-child(3n) {
  opacity: 1;
}

.zkBit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: var(--w);
  padding: 10px 12px 11px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06), 0 14px 30px -14px rgba(20, 20, 30, 0.3), 0 0 0 0.75px rgba(20, 20, 30, 0.08);
  will-change: transform;
}

.zkSource {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px !important;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
  font-size: 10.5px;
  font-weight: 700;
}

.zkSource .i {
  width: 12px;
  height: 12px;
}

.zkBitTitle {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zkBitText {
  color: var(--muted);
  font-size: 12px;
}

.stCustomer.isCompact .zkRecord {
  left: 0;
  top: 330px;
  width: 460px;
  height: 410px;
  padding: 12px;
}

.stCustomer.isCompact .recTools,
.stCustomer.isCompact .tabs2,
.stCustomer.isCompact .zkDots,
.stCustomer.isCompact .zkSum .sumBar p:nth-child(n + 4),
.stCustomer.isCompact #zk-pon,
.stCustomer.isCompact .zkRows p:nth-child(2) {
  display: none;
}

.stCustomer.isCompact .zkRows p {
  grid-template-columns: 1fr auto;
}

.stCustomer.isCompact .zkRows em {
  display: none;
}

.stCustomer.isCompact .zkActs p {
  grid-template-columns: 24px minmax(0, 1fr) 70px;
}

.stCustomer.isCompact .zkActs em {
  display: none;
}

.stCustomer.isCompact .zkBit {
  left: var(--cx);
  top: var(--cy);
  width: 226px;
}

/* po zlúčení kúskov sa záznam posunie hore a zaberie celú plochu */
.stCustomer.isCompact .zkRecord {
  transition: top 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.scene[data-step="2"] .stCustomer.isCompact .zkRecord {
  top: 0;
  height: 690px;
}

.scene[data-step="2"] .stCustomer.isCompact .tabs2 {
  display: flex;
}

.scene[data-step="2"] .stCustomer.isCompact #zk-pon {
  display: block;
}

.scene[data-step="2"] .stCustomer.isCompact .zkRows p:nth-child(2) {
  display: grid;
}

/* ===== 02 Obchod ===== */

.stDeals {
  --appText: #18181b;
  --appMuted: #71717a;
  --lnk: #2563eb;
  --colw: 182px;
  --cardw: 158px;
  --push: 134px;
}

.obPanel {
  position: absolute;
  left: 0;
  top: 0;
  width: 940px;
  height: 600px;
  padding: 14px 16px;
  border: 1px solid #e6e6e9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 50px -30px rgba(20, 20, 30, 0.3);
  transform-origin: 0 0;
  transform: scale(calc(1 - var(--t, 0) * 0.42));
}

.obTop {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  margin-bottom: 10px;
}

.obTop .pageHead2 {
  flex: 1;
  margin: 0;
}

.obBoard {
  position: relative;
  height: 524px;
}

.obCol {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--colw) - 8px);
  padding: 0 7px;
  border-radius: 12px;
  background: #f4f4f5;
}

.obCol[data-c="1"] {
  left: var(--colw);
}

.obCol[data-c="2"] {
  left: calc(var(--colw) * 2);
}

.obCol[data-c="3"] {
  left: calc(var(--colw) * 3);
}

.obCol[data-c="4"] {
  left: calc(var(--colw) * 4);
}

.obColHead {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  font-size: 11px;
  white-space: nowrap;
}

.obColName {
  overflow: hidden;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, #fff);
  color: color-mix(in srgb, var(--c) 70%, #111);
  font-weight: 500;
  text-overflow: ellipsis;
}

.obCount {
  margin-left: auto;
  color: #52525b;
}

.obCards {
  display: grid;
  gap: 8px;
  transition: transform 0.65s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.scene[data-step="1"] .obCol[data-c="0"] .obCards,
.scene[data-step="2"] .obCol[data-c="1"] .obCards,
.scene[data-step="3"] .obCol[data-c="2"] .obCards,
.scene[data-step="4"] .obCol[data-c="3"] .obCards,
.scene[data-step="5"] .obCol[data-c="3"] .obCards {
  transform: translateY(var(--push));
}

.obCard,
.obHero {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #e6e6e9;
  border-radius: 10px;
  background: #fff;
  font-size: 11px;
}

.obCardName {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obNum {
  color: #71717a;
  font-size: 10px;
}

.obVal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px !important;
}

.obVal b {
  font-weight: 600;
}

.obClient {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obAct2 {
  margin-top: 2px !important;
}

.obHero {
  --col: 0;
  --top: 2px;
  position: absolute;
  left: calc(7px + var(--col) * var(--colw));
  top: var(--top);
  z-index: 3;
  width: var(--cardw);
  border-color: #3fb46f;
  box-shadow: 0 0 0 1.5px #3fb46f, 0 18px 36px -16px rgba(20, 60, 30, 0.45);
  transition: left 0.75s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.75s cubic-bezier(0.3, 0.7, 0.2, 1), box-shadow 0.5s, border-color 0.5s, transform 0.6s;
}

.scene[data-step="0"] .obHero {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1.5px #3b82f6, 0 22px 40px -14px rgba(36, 91, 198, 0.45);
  transform: rotate(-2deg) translateY(-6px);
}

.scene[data-step="1"] .obHero {
  --top: 38px;
}

.scene[data-step="2"] .obHero {
  --top: 38px;
  --col: 1;
}

.scene[data-step="3"] .obHero {
  --top: 38px;
  --col: 2;
}

.scene[data-step="4"] .obHero,
.scene[data-step="5"] .obHero {
  --top: 38px;
  --col: 3;
}

.obHeroTop {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
}

.scene[data-step="0"] .obIsDeal,
.scene:not([data-step="0"]) .obIsLead {
  display: none;
}

.obProb {
  display: grid;
  margin-left: auto;
  color: #2f7a4a;
  font-size: 10.5px;
  font-weight: 700;
}

.obProb i {
  grid-area: 1 / 1;
  font-style: normal;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
}

.scene[data-step="1"] .obProb i:nth-child(1),
.scene[data-step="2"] .obProb i:nth-child(2),
.scene[data-step="3"] .obProb i:nth-child(3),
.scene[data-step="4"] .obProb i:nth-child(4),
.scene[data-step="5"] .obProb i:nth-child(4) {
  opacity: 1;
  transform: none;
}

.obActs {
  position: absolute;
  top: calc(100% + 8px);
  left: -6px;
  width: 250px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(20, 20, 30, 0.05), 0 24px 48px -16px rgba(20, 20, 30, 0.35), 0 0 0 1px #e6e6e9;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}

.obActs.on {
  opacity: 1;
  transform: none;
}

.scene[data-step="4"] .obActs,
.scene[data-step="5"] .obActs {
  left: auto;
  right: -6px;
}

.obActsHead {
  margin-bottom: 4px !important;
  font-size: 11.5px;
  font-weight: 600;
}

.obAct {
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  overflow: hidden;
  max-height: 0;
  font-size: 11px;
  opacity: 0;
  transition: max-height 0.4s, opacity 0.4s, padding 0.4s;
}

.obAct.on {
  max-height: 40px;
  padding: 4px 0;
  opacity: 1;
}

.obAct span:last-child {
  overflow: hidden;
  color: #52525b;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obActIco {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
}

.obActIco .i {
  width: 11px;
  height: 11px;
}

.obNext.on {
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #ebf6ee;
}

.obManager {
  position: absolute;
  left: 562px;
  top: 0;
  width: 378px;
  height: 600px;
  padding: 16px 18px;
  border: 1px solid #e6e6e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(20, 20, 30, 0.3);
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.obManager.on {
  opacity: 1;
  transform: none;
}

.obMHead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.obMHead b {
  font-weight: 600;
}

.obMSub2 {
  margin: 2px 0 14px 28px !important;
  color: #71717a;
  font-size: 11px;
}

.obMBig {
  margin: 4px 0 4px !important;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.obMSub {
  color: var(--muted);
  font-size: 12px;
}

.obMSub b {
  color: var(--ink);
}

.obMStages {
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.obMStage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px 10px;
  font-size: 11.5px;
}

.obMStage em {
  color: var(--muted);
  font-style: normal;
}

.obMStage i {
  grid-column: 1 / -1;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--w) 100% no-repeat, #f4f4f5;
  transition: background-size 0.9s 0.2s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.obManager:not(.on) .obMStage i {
  background-size: 0 100%, auto;
}

.obTeam {
  position: absolute;
  left: 0;
  top: 370px;
  width: 546px;
  height: 230px;
  padding: 16px 18px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s, transform 0.6s;
}

.obTeam.on {
  opacity: 1;
  transform: none;
}

.obPerson {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  margin-top: 18px !important;
  font-size: 12px;
}

.obPerson > span:not(.owner) {
  height: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: #f4f4f5;
}

.obPerson i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 3px;
  background: #3b82f6;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s 0.25s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.obTeam.on .obPerson i {
  transform: none;
}

.obPerson b {
  text-align: right;
}

.stDeals.isCompact .obPanel {
  transform: scale(0.5);
}

.stDeals.isCompact .obManager {
  left: 0;
  top: 316px;
  width: 470px;
  height: 344px;
}

.stDeals.isCompact .obMStages {
  gap: 9px;
  margin-top: 12px;
}

.stDeals.isCompact .obTeam,
.stDeals.isCompact .obMSub2,
.stDeals.isCompact .obActs {
  display: none;
}

/* na mobile sa aktivity obchodu ukazujú pod kanbanom, kým nepríde prehľad vedúceho */
.obMobActs {
  display: none;
}

.stDeals.isCompact .obMobActs {
  position: absolute;
  left: 0;
  top: 316px;
  display: block;
  width: 470px;
  padding: 14px 16px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

.stDeals.isCompact .obMobActs.on {
  opacity: 1;
  transform: none;
}

.obMobActs .obAct {
  grid-template-columns: 28px auto minmax(0, 1fr);
  font-size: 13px;
}

.obMobActs .obAct.on {
  padding: 6px 0;
}

.obMobActs .obActIco {
  width: 28px;
  height: 28px;
}

/* ===== 03 Prispôsobenie ===== */

.prWindow {
  inset: 0;
}

.stCustom .gwPanel {
  gap: 0;
  padding: 14px 16px;
}

.stCustom .gwNavItem[data-on] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s, opacity 0.45s, background-color 0.6s;
}

.stCustom .gwNavItem[data-on].on {
  max-height: 27px;
  opacity: 1;
  animation: newGlow 1.6s ease-out;
}

@keyframes newGlow {
  0%,
  40% {
    background: var(--violet-soft);
  }
}

.stCustom .gwNavTitle:nth-of-type(3) {
  opacity: 0;
  transition: opacity 0.4s;
}

.scene[data-step="2"] .stCustom .gwNavTitle:nth-of-type(3),
.scene[data-step="3"] .stCustom .gwNavTitle:nth-of-type(3),
.scene[data-step="4"] .stCustom .gwNavTitle:nth-of-type(3),
.scene[data-step="5"] .stCustom .gwNavTitle:nth-of-type(3) {
  opacity: 1;
}

.prBlock {
  position: relative;
}

.stCustom .recHead {
  margin-bottom: 10px;
}

.stCustom .recName b {
  font-size: 14.5px;
}

.prStagesWrap {
  margin: 12px 0 2px;
}

.prStages .stageSeg b {
  font-size: 10px;
}

.prStages .stageSeg[data-on]:not(.on) {
  flex: 0 0 0;
  margin: 0;
  opacity: 0;
}

.prStages .stageSeg[data-on].on b {
  animation: segIn 1.2s ease-out;
}

@keyframes segIn {
  0%,
  60% {
    background: var(--violet);
  }
}

.prNote {
  position: absolute;
  right: 6px;
  top: -8px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(90, 60, 200, 0.6);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
}

.prNote.on {
  opacity: 1;
  transform: none;
}

.prLockBadge {
  top: 46px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.prTabs {
  margin: 4px 0 10px;
}

.prTabNew {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.5s, opacity 0.5s;
}

.prTabNew.on {
  max-width: 100px;
  opacity: 1;
  color: #5b3fd1 !important;
}

.prSecTitle {
  margin-bottom: 6px !important;
  font-size: 12px;
  font-weight: 600;
}

.prGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
}

.prMore {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.55s cubic-bezier(0.3, 0.7, 0.2, 1), margin 0.55s;
}

.prMore.on {
  max-height: 60px;
  margin-top: 8px;
}

.prMore.on .isNew b {
  animation: newGlow 1.8s ease-out;
}

.fld small .i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 3px;
  color: var(--violet);
  vertical-align: -2px;
}

.prLock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--violet-soft);
  color: #5b3fd1;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.prLock .i {
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
  color: #5b3fd1 !important;
}

.prLock.on {
  opacity: 1;
}

.prRelated {
  display: grid;
  grid-template-columns: 1fr 0fr;
  gap: 0;
  margin-top: 12px;
  transition: grid-template-columns 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), gap 0.6s;
}

.scene[data-step="2"] .prRelated,
.scene[data-step="3"] .prRelated,
.scene[data-step="4"] .prRelated,
.scene[data-step="5"] .prRelated {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.prRelA,
.prRelB {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.prRelB .relTools {
  display: none;
}

.prViews {
  position: absolute;
  top: 4px;
  right: 6px;
  transform-origin: right center;
  opacity: 0;
  transform: scale(0.82) translateX(8px);
  transition: opacity 0.4s, transform 0.4s;
}

.prViews.on {
  opacity: 1;
  transform: scale(0.82);
}

.prRow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px;
  border-bottom: 1px solid #f0f0f2;
  font-size: 11.5px;
  white-space: nowrap;
}

.prRow:last-child {
  border-bottom: 0;
}

.prRow .lnk {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.prRow em {
  color: #52525b;
  font-style: normal;
}

.prFlow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--night);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s;
}

.prFlow.on {
  opacity: 1;
  transform: none;
}

.prFlow b {
  margin-right: 6px;
  color: #fff;
}

.prFlow .tag {
  margin-left: auto;
}

.prFlowIco {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--amber);
  color: #1d1600;
}

.stCustom.isCompact .gwSide,
.stCustom.isCompact .gwAiBtn,
.stCustom.isCompact .recTools,
.stCustom.isCompact .sumBar p:nth-child(3),
.stCustom.isCompact .prViews {
  display: none;
}

.stCustom.isCompact .gwMain {
  padding: 0 8px 8px;
}

.stCustom.isCompact .prGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stCustom.isCompact .prMore.on {
  max-height: 120px;
}

.stCustom.isCompact .stageSeg b {
  padding: 0 4px 0 12px;
  font-size: 0;
}

.stCustom.isCompact .stageSeg b .i {
  width: 11px;
  height: 11px;
}

.stCustom.isCompact .prRelated,
.stCustom.isCompact .scene[data-step] .prRelated {
  grid-template-columns: 1fr;
}

.scene[data-step="2"] .stCustom.isCompact .prRelA,
.scene[data-step="3"] .stCustom.isCompact .prRelA,
.scene[data-step="4"] .stCustom.isCompact .prRelA,
.scene[data-step="5"] .stCustom.isCompact .prRelA,
.scene[data-step="0"] .stCustom.isCompact .prRelB,
.scene[data-step="1"] .stCustom.isCompact .prRelB {
  display: none;
}

.stCustom.isCompact .prFlow {
  font-size: 11.5px;
}

/* ===== 04 Automatizácie ===== */

/*
 * Beh postupu ako v aplikácii: dokončený krok dostane zelený rámik (kreslí sa od horného stredu
 * v smere hodinových ručičiek), nad ním vyjde štítok, spojnica k ďalšiemu kroku narastie a krúžok
 * výstupu sa rozsvieti. Farby podľa aplikácie: zelená #22c55e, čakanie oranžová #f59e0b.
 */
.stFlow {
  --run: #20b057;
  --runSoft: rgba(34, 197, 94, 0.18);
  --wire: #d4d4d8;
  --panA: -190px;
  --panB: -170px;
  --lnk: #2563eb;
  color: var(--ink);
}

.wfDesigner {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 560px;
  height: 600px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.wfBar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  flex: none;
  padding: 0 14px;
  border-bottom: 1px solid #efeff1;
  background: #fff;
  font-size: 12px;
}

.wfCrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: #71717a;
  white-space: nowrap;
}

.wfCrumb i {
  font-style: normal;
}

.wfCrumb b {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.wfActive {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e3f4e8;
  color: #2f7a4a;
  font-size: 10.5px;
  font-weight: 600;
}

.wfActive i {
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.wfToggle {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #2563eb;
}

.wfToggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
}

.wfTest {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #e6e6e9;
  border-radius: 999px;
  font-size: 11px;
}

.wfTest .i {
  width: 11px;
  height: 11px;
}

.wfCanvas {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* plátno sa posúva za behom v dvoch krokoch, bodky pozadia idú s ním */
.wfPanA {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(calc(var(--t, 0) * var(--panA)));
}

.wfPanB {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1100px;
  background: radial-gradient(circle, #d9d9de 1px, transparent 1.2px) 0 0 / 16px 16px, #fafafa;
  transform: translateY(calc(var(--t, 0) * var(--panB)));
}

.wfFlow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 460px;
  height: 900px;
  margin-left: -230px;
}

.wfWires,
.wfPorts {
  position: absolute;
  left: 0;
  top: 0;
  width: 460px;
  height: 900px;
  overflow: visible;
  pointer-events: none;
}

.wfPorts {
  z-index: 3;
}

.wfWire {
  fill: none;
  stroke: var(--wire);
  stroke-width: 1;
}

.wfRun {
  fill: none;
  stroke: var(--run);
  stroke-width: 2;
  stroke-dasharray: 1;
  /* v px: Firefox calc() bez jednotky neprijme a čiaru by nakreslil celú hneď na začiatku */
  stroke-dashoffset: calc((1 - var(--t, 0)) * 1px);
}

.wfArrow {
  fill: var(--wire);
  transition: fill 0.16s;
}

.wfArrow.on {
  fill: var(--run);
}

.wfDotRing {
  fill: #fff;
  stroke: var(--wire);
  stroke-width: 1;
  transition: stroke 0.25s;
}

.wfDotHalo {
  fill: var(--runSoft);
  opacity: 0;
  transition: opacity 0.25s;
}

.wfDot.on .wfDotRing {
  stroke: var(--run);
  stroke-width: 1.5;
}

.wfDot.on .wfDotHalo {
  opacity: 1;
}

/* štítok vetvy: vetva, ktorou beh išiel, zozelenie, druhá zosivie */
.wfLabel {
  position: absolute;
  z-index: 2;
  padding: 3px 7px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #fff;
  font-size: 10.5px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.wfLabel.on {
  border-color: rgba(34, 197, 94, 0.55);
  background: #e2f6ea;
  color: #1d954f;
}

.wfLabelOff.on {
  border-color: rgba(148, 163, 184, 0.55);
  background: #f3f5f8;
  color: #64748b;
}

/* krok: karta, pod ňou štítok behu, nad ňou rámik behu */
.wfStep {
  --runColor: var(--run);
  --badgeText: #1d954f;
  --badgeBg: #e2f6ea;
  --badgeLine: rgba(34, 197, 94, 0.58);
  position: absolute;
  z-index: 1;
  isolation: isolate;
  height: 64px;
  padding: 9px 12px 9px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.05);
}

.wfStep.isWait {
  --runColor: #da8e0e;
  --badgeText: #b57813;
  --badgeBg: #fef2df;
  --badgeLine: rgba(245, 158, 11, 0.58);
}

.wfStep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: #fff;
}

.wfHead,
.wfDesc {
  position: relative;
  z-index: 3;
}

.wfHead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wfHead b {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wfHead em {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f4f4f5;
  color: #3f3f46;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.wfHead em .i {
  width: 10px;
  height: 10px;
}

.wfIco {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
}

.wfIco .i {
  width: 12px;
  height: 12px;
}

.wfDesc {
  overflow: hidden;
  margin-top: 6px !important;
  padding-top: 4px;
  border-top: 1px dotted #e4e4e7;
  color: #71717a;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wfRing {
  position: absolute;
  inset: -1px;
  z-index: 5;
  padding: 2px;
  border-radius: 11px;
  background: conic-gradient(from 0deg, var(--runColor) calc(var(--t, 0) * 360deg), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.wfBadge {
  position: absolute;
  top: -27px;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 8px;
  border: 1px solid var(--badgeLine);
  border-radius: 999px;
  background: var(--badgeBg);
  color: var(--badgeText);
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.3s, transform 0.76s cubic-bezier(0.22, 1, 0.36, 1);
}

.wfBadge.on {
  opacity: 1;
  transform: none;
}

.wfBadge .i {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}

.wfEnd {
  position: absolute;
  left: 230px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 8px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.05);
  font-size: 12.5px;
  transform: translateX(-50%);
}

.wfSide {
  position: absolute;
  left: 580px;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 360px;
}

.wfRecord {
  padding: 16px 16px 14px;
  color: var(--ink);
}

.wfRecHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px !important;
}

.wfRecHead b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.wfRecHead small {
  color: #71717a;
  font-size: 11px;
}

.wfFields {
  display: grid;
  margin: 0;
}

.wfFields > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  height: 38px;
  border-bottom: 1px solid #f0f0f2;
  font-size: 12px;
}

.wfFields dt {
  color: #71717a;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wfFields dd {
  display: grid;
  margin: 0 0 0 -8px;
  padding: 5px 8px;
  border-radius: 8px;
}

.wfSwap > span {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  grid-area: 1 / 1;
  transition: opacity 0.35s, transform 0.35s;
}

.wfSwap > span:last-child {
  opacity: 0;
  transform: translateY(6px);
}

.wfSwap.on > span:first-child {
  opacity: 0;
  transform: translateY(-6px);
}

.wfSwap.on > span:last-child {
  opacity: 1;
  transform: none;
}

.wfSwap.on {
  animation: cellFlash 1.4s ease-out;
}

@keyframes cellFlash {
  0%,
  35% {
    background: #e3f4e8;
  }
}

.wfDash {
  color: #a1a1aa;
}

.wfOk {
  color: #2f7a4a;
  font-weight: 600;
}

.wfOk .i {
  width: 12px;
  height: 12px;
}

.wfTask {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf4d9;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
}

.wfTask.on {
  opacity: 1;
  transform: none;
}

.wfTask b {
  display: block;
  font-size: 12px;
}

.wfTask small {
  color: #8a6400;
  font-size: 10.5px;
}

.wfCheck {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid #c9a227;
  border-radius: 4px;
}

.wfToast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.45s, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.wfToast.on {
  opacity: 1;
  transform: none;
}

.wfToast b {
  display: block;
  font-size: 12.5px;
}

.wfToast small {
  color: #71717a;
  font-size: 11px;
}

.wfLog {
  padding: 14px 16px;
  border-radius: 14px;
  background: #15181d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s;
}

.wfLog.on {
  opacity: 1;
  transform: none;
}

.wfLogHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  color: #fff;
  font-weight: 600;
}

.wfLogHead span {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.wfLogRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.wfLogRow .i {
  color: var(--green);
}

.wfLogRow.isWait .i {
  color: var(--amber);
}

.stFlow.isCompact {
  --panA: -200px;
  --panB: -210px;
}

.stFlow.isCompact .wfDesigner {
  width: 470px;
  height: 540px;
}

.stFlow.isCompact .wfSide {
  left: 0;
  top: 556px;
  width: 470px;
}

.stFlow.isCompact .wfTest,
.stFlow.isCompact .wfToggle,
.stFlow.isCompact .wfToast,
.stFlow.isCompact .wfLog,
.stFlow.isCompact .wfFields > div:nth-child(2),
.stFlow.isCompact .wfFields > div:nth-child(4),
.stFlow.isCompact .wfTask {
  display: none;
}

/* ===== 05 Schvaľovanie ===== */

.apOffer {
  --appText: #18181b;
  --appMuted: #71717a;
  --lnk: #2563eb;
  position: absolute;
  left: 0;
  top: 0;
  width: 920px;
  padding: 14px 18px;
}

.apOffer .recHead {
  margin-bottom: 10px;
}

.apSumRow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.apSumRow .sumBar {
  flex: 1;
}

.apDiscount {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--amber-soft);
  color: #8a6400;
}

.apBadges {
  display: grid;
  justify-items: end;
  min-width: 210px;
}

.apBadges .tag {
  grid-area: 1 / 1;
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s, transform 0.4s;
}

.apBadges .tag.on {
  opacity: 1;
  transform: none;
}

.apRule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed #e6e6ea;
  color: #8a6400;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s, transform 0.4s;
}

.apRule.on {
  opacity: 1;
  transform: none;
}

.apChain {
  position: absolute;
  left: 0;
  top: 200px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 920px;
}

.apTrack {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 25px;
  height: 3px;
  border-radius: 2px;
  background: #e2e2e6;
}

.apTrack i {
  display: block;
  width: calc(var(--tl, 0) * 100%);
  height: 100%;
  border-radius: 2px;
  background: var(--green);
}

.apNode {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
  opacity: 0.42;
  transition: opacity 0.4s;
}

.apNode.on {
  opacity: 1;
}

.apAv {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--bg);
}

.apAv .av {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

.apNode.on .apAv::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  animation: apRing 1.4s ease-out infinite;
}

.apNode:has(.apOk.on) .apAv::after,
.apFinal.on .apAv::after {
  border-color: var(--green);
  animation: none;
}

@keyframes apRing {
  0% {
    transform: scale(0.92);
    opacity: 1;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.apOk {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 2px var(--bg);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.apOk.on {
  transform: none;
}

.apOk .i {
  width: 11px;
  height: 11px;
}

.apNode b {
  font-size: 13px;
}

.apNode small {
  color: var(--muted);
  font-size: 11.5px;
}

.apNode em {
  margin-top: 4px;
  color: var(--green-ink);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s;
}

.apNode em.on {
  opacity: 1;
}

.apFinalIco {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d9d9de;
  color: #fff;
  transition: background-color 0.4s;
}

.apFinalIco .i {
  width: 22px;
  height: 22px;
}

.apFinal.on .apFinalIco {
  background: var(--green);
  animation: nodePop 0.5s ease-out;
}

.apLog {
  position: absolute;
  left: 0;
  top: 356px;
  width: 540px;
  height: 244px;
  padding: 16px 18px;
}

.apHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  font-size: 13px;
  font-weight: 600;
}

.apLogRow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #f0f0f2;
  font-size: 12.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
}

.apLogRow.on {
  opacity: 1;
  transform: none;
}

.apLogRow time {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.apLogRow small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.apBell {
  position: absolute;
  left: 564px;
  top: 356px;
  width: 356px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(20, 20, 30, 0.04), 0 26px 50px -20px rgba(20, 20, 30, 0.35), 0 0 0 0.75px rgba(20, 20, 30, 0.08);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s, transform 0.45s;
}

.apBell.on {
  opacity: 1;
  transform: none;
}

.apBellHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px !important;
  font-size: 13px;
  font-weight: 600;
}

.apBellIco {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f1f3;
}

.apBellIco i {
  position: absolute;
  top: -3px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.apBellItem {
  display: flex;
  gap: 10px;
}

.apBellItem b {
  display: block;
  font-size: 12.5px;
}

.apBellItem small {
  color: var(--muted);
  font-size: 11.5px;
}

.apBellNote {
  margin: 12px 0 !important;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f6f8;
  color: var(--ink-2);
  font-size: 12px;
}

.apBtns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.apBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e0e0e4;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.3s, background-color 0.3s;
}

.apYes {
  border-color: transparent;
  background: var(--green);
  color: #fff;
}

.apYes.on {
  background: var(--green-ink);
  box-shadow: 0 0 0 4px rgba(71, 185, 114, 0.28);
  transform: scale(0.96);
}

.stApprove.isCompact .apOffer {
  width: 470px;
}

.stApprove.isCompact .apSumRow {
  flex-direction: column;
  align-items: stretch;
}

.stApprove.isCompact .apSumRow .sumBar p:nth-child(n + 3),
.stApprove.isCompact .recTools {
  display: none;
}

.stApprove.isCompact .apBadges {
  justify-items: start;
}

.stApprove.isCompact .apChain {
  top: 272px;
  width: 470px;
}

.stApprove.isCompact .apNode small,
.stApprove.isCompact .apBell {
  display: none;
}

.stApprove.isCompact .apNode b {
  font-size: 11.5px;
}

.stApprove.isCompact .apLog {
  top: 420px;
  width: 470px;
  height: 340px;
}

.apSent {
  position: absolute;
  left: 564px;
  top: 356px;
  width: 356px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(20, 20, 30, 0.04), 0 26px 50px -20px rgba(20, 20, 30, 0.3), 0 0 0 0.75px rgba(20, 20, 30, 0.08);
  font-size: 12px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s, transform 0.45s;
}

.apSent.on {
  opacity: 1;
  transform: none;
}

.apSentIco {
  background: var(--green-soft);
  color: var(--green-ink);
}

.apSentRow {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  padding: 6px 0;
  border-top: 1px solid #f0f0f2;
}

.apSentRow small {
  color: var(--faint);
}

.apSentFile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px !important;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f6f8;
}

.stApprove.isCompact .apSent {
  display: none;
}

/* ===== 06 Komunikácia a e-mail ===== */

/* e-mail a rozcestník ku kontaktu, klientovi a obchodu */
.ibA {
  position: absolute;
  inset: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.ibA:not(.on) {
  opacity: 0;
  transform: translateX(-24px) scale(0.98);
  pointer-events: none;
}

.ibMail {
  position: absolute;
  left: 0;
  top: 120px;
  width: 440px;
  height: 360px;
  padding: 18px 20px;
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ibMail:not(.on) {
  opacity: 0;
  transform: translateY(14px);
}

.ibMailHead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ibMailHead b {
  display: block;
  font-size: 13px;
}

.ibMailHead small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
}

.ibMailHead time {
  margin-left: auto;
  color: var(--faint);
  font-size: 11.5px;
}

.ibSubject {
  margin: 16px 0 12px !important;
  font-size: 16px;
  font-weight: 650;
}

.ibBody {
  display: grid;
  gap: 10px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.ibLinks {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f2;
}

.ibLinks small {
  margin-right: 4px;
  color: var(--faint);
  font-size: 11px;
}

.ibLinks .tag {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ibLinks .tag.on {
  opacity: 1;
  transform: none;
}

/* čiara sa kreslí spolu s kartou, na ktorú vedie */
.ibLines {
  position: absolute;
  inset: 0;
  width: 920px;
  height: 600px;
  overflow: visible;
  pointer-events: none;
}

.ibLines path {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  /* v px: Firefox calc() bez jednotky neprijme a čiaru by nakreslil celú hneď na začiatku */
  stroke-dashoffset: calc((1 - var(--tl, 0)) * 1px);
}

.ibChip {
  position: absolute;
  left: 520px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 340px;
  height: 50px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 0.75px rgba(52, 55, 66, 0.1), 0 10px 24px -14px rgba(20, 20, 30, 0.3);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s, transform 0.4s;
}

.ibChip.on {
  opacity: 1;
  transform: none;
}

.ibChip small {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
}

.ibChip b {
  font-size: 13px;
}

/* obrazovka Inbox ako v aplikácii */
.ibApp {
  inset: 0;
  opacity: 0;
  transform: translateX(24px) scale(0.98);
  transition: opacity 0.55s, transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ibApp.on {
  opacity: 1;
  transform: none;
}

.ibNum:not(.on) {
  display: none;
}

.ibPanel {
  padding: 14px 0 0;
  font-size: 11.5px;
}

.ibHead {
  margin: 0 16px 10px;
}

.ibTools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 16px 10px;
}

.ibSwitch {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: #f0f0f2;
}

.ibSwitch span {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--appMuted);
}

.ibSwitch .isOn {
  background: #fff;
  color: var(--appText);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.1);
}

.ibRound {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ibSearch {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 150px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--appLine);
  border-radius: 999px;
  color: #9a9aa3;
}

.ibSearch .i {
  width: 12px;
  height: 12px;
  color: var(--appText);
}

.ibBar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px;
  border-top: 1px solid #ececef;
  border-bottom: 1px solid #ececef;
}

.ibCheck {
  width: 13px;
  height: 13px;
  flex: none;
  border: 1px solid #d4d4d8;
  border-radius: 3.5px;
  background: #fff;
}

.ibTabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  color: var(--appMuted);
}

.ibTabs > span {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  white-space: nowrap;
}

.ibTabs .isOn {
  background: #f0f0f2;
  color: var(--appText);
  font-weight: 500;
}

.ibTabs .i {
  width: 12px;
  height: 12px;
}

.ibTabs i {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e4e4e7;
  color: var(--appText);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
}

.ibBarIco {
  display: flex;
  gap: 12px;
  margin-left: 4px;
  color: var(--appText);
}

.ibBarIco .i {
  width: 13px;
  height: 13px;
}

.ibList {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* posun zoznamu, kým je otvorená odpoveď (ako keď v aplikácii zoznam posuniete nižšie) */
.ibScroll {
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ibScroll.on {
  transform: translateY(var(--ibScroll, -84px));
}

.ibRow {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f2;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s, background-color 0.3s;
}

.ibRow.on {
  opacity: 1;
  transform: none;
}

.ibType {
  display: flex;
  color: var(--c);
}

.ibType .i {
  width: 13px;
  height: 13px;
}

.ibName {
  flex: 0 0 104px;
  overflow: hidden;
  color: var(--lnk);
  text-overflow: ellipsis;
}

.ibText {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ibText b {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.ibText > span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--appMuted);
  text-overflow: ellipsis;
}

.ibCnt {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e4e4e7;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
}

.ibRel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--lnk);
}

.ibRel .i {
  width: 11px;
  height: 11px;
}

.ibBox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 19px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f0f0f2;
  color: var(--appMuted);
  font-size: 10.5px;
}

.ibBox .i {
  width: 10px;
  height: 10px;
}

.ibRow time {
  flex: none;
  min-width: 34px;
  color: var(--appMuted);
  text-align: right;
}

.ibRow time.isLate {
  color: #e5484d;
}

.ibRow > .i:last-child {
  width: 13px;
  height: 13px;
  flex: none;
}

/* riadok e-mailu sa rozbalí na mieste a po vybavení zmizne medzi hotové */
.ibThreadRow {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.45s;
}

.ibThreadRow:not(.on) {
  grid-template-rows: 0fr;
  opacity: 0;
}

.ibThreadIn,
.ibCardIn,
.ibComposeIn,
.ibSentIn {
  min-height: 0;
  overflow: hidden;
}

.ibThreadRow:has(.ibCard.on) > .ibThreadIn > .ibRow {
  background: #f4f4f5;
}

.ibCard,
.ibCompose,
.ibSent {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ibCard.on,
.ibCompose.on,
.ibSent.on {
  grid-template-rows: 1fr;
}

.ibCardIn {
  margin: 0 8px 0 30px;
  border-bottom: 1px solid #ececef;
}

.ibCardHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #ececef;
}

.ibCardIco {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(42, 125, 225, 0.12);
  color: #2a7de1;
}

.ibCardIco .i {
  width: 13px;
  height: 13px;
}

.ibCardHead b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ibBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--appLine);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.ibBtn .i,
.ibCardHead .rBtn .i {
  width: 11px;
  height: 11px;
}

.ibDone.on {
  border-color: #2f9e5b;
  background: #2f9e5b;
  color: #fff;
}

.ibCardHead .rBtn {
  height: 24px;
  min-width: 24px;
}

.ibLinked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #ececef;
}

.ibLinked > span {
  color: var(--appMuted);
}

.ibLinked b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lnk);
  font-weight: 500;
}

.ibLinked .i {
  width: 11px;
  height: 11px;
}

.ibMsg {
  padding: 8px 12px;
  border-bottom: 1px solid #ececef;
}

.ibMsgHead {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ibMsgHead b {
  font-weight: 600;
}

.ibMsgHead small,
.ibMsgHead time {
  color: var(--appMuted);
  font-size: 10.5px;
}

.ibMsgHead time {
  margin-left: auto;
}

.ibMsg .ibMsgSnip {
  margin-top: 2px;
  overflow: hidden;
  color: var(--appMuted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ibMsgTools {
  display: flex;
  align-self: center;
  gap: 9px;
  margin-left: 6px;
}

.ibMsgTools .i {
  width: 13px;
  height: 13px;
}

.ibReplyIco {
  display: flex;
  border-radius: 5px;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.ibReplyIco.on {
  background: #e8f0fd;
  box-shadow: 0 0 0 4px #e8f0fd;
  color: var(--lnk);
}

.ibMsgBody {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  line-height: 1.45;
}

.ibMsg .ibMsgAtt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--appMuted);
  font-size: 10.5px;
}

/* odpoveď priamo vo vlákne: Od, Komu, Predmet, text, príloha, Odoslať */
.ibComposeBox {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--appLine);
  border-radius: 10px;
}

.ibFrom {
  display: flex;
  gap: 12px;
  color: var(--appMuted);
  font-size: 10.5px;
}

.ibFrom span:first-child {
  margin-right: auto;
}

.ibFrom span + span {
  color: var(--appText);
}

.ibFld {
  display: grid;
  gap: 1px;
  padding: 3px 8px 4px;
  border: 1px solid var(--appLine);
  border-radius: 7px;
}

.ibFld.isFocus {
  border-color: #8fb4f2;
  box-shadow: 0 0 0 2px rgba(42, 125, 225, 0.12);
}

.ibFld small {
  color: var(--appMuted);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ibFld small i {
  color: #e5484d;
  font-style: normal;
}

.ibTo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  height: 18px;
  padding: 0 7px;
  border: 1px solid #bcd3f5;
  border-radius: 999px;
  background: #eef4fd;
  font-size: 10.5px;
}

.ibTo .i {
  width: 9px;
  height: 9px;
}

.ibEditor {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 92px;
  padding: 8px 10px;
  border: 1px solid var(--appLine);
  border-radius: 7px;
  line-height: 1.45;
}

.ibTpl {
  opacity: 0;
  transition: opacity 0.3s;
}

.ibTpl.on {
  opacity: 1;
  animation: ibTplIn 1.2s ease-out;
}

@keyframes ibTplIn {
  from {
    background: #dbe8fb;
  }
}

.ibToggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}

.ibToggle i {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: #1f6fd6;
}

.ibToggle i::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.ibAtt {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s, opacity 0.35s;
}

.ibAtt.on {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ibAtt > span {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 0;
  overflow: hidden;
  padding: 0 8px;
  border-radius: 7px;
  background: #f4f4f5;
  font-size: 11px;
  line-height: 22px;
}

.ibAtt small {
  color: var(--appMuted);
  font-size: 10px;
}

.ibAtt .i {
  width: 10px;
  height: 10px;
}

.ibFoot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ibSendBtn {
  display: flex;
  height: 26px;
}

.ibSendBtn > span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-radius: 999px 0 0 999px;
  background: #1f6fd6;
  color: #fff;
  font-weight: 600;
}

.ibSendBtn > i {
  display: grid;
  place-items: center;
  width: 24px;
  border: 1px solid var(--appLine);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  transition: background-color 0.3s, color 0.3s;
}

.ibSendBtn .i {
  width: 11px;
  height: 11px;
}

.ibTool {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  transition: background-color 0.3s, color 0.3s;
}

.ibTool .i {
  width: 13px;
  height: 13px;
}

.ibTool.on,
.ibSendBtn > i.on {
  background: #e8f0fd;
  color: var(--lnk);
}

.ibTrash {
  margin-left: auto;
}

.ibMenu {
  position: absolute;
  bottom: 32px;
  z-index: 3;
  display: grid;
  min-width: 190px;
  padding: 5px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.08), 0 14px 30px -12px rgba(20, 20, 30, 0.35);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: 0 100%;
  transition: opacity 0.25s, transform 0.25s;
}

.ibMenu.on {
  opacity: 1;
  transform: none;
}

.ibMenu span {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background-color 0.25s;
}

.ibMenu span.on {
  background: #f0f0f2;
}

.ibMenu hr {
  margin: 4px 2px;
  border: 0;
  border-top: 1px solid #ececef;
}

.ibMenu .i {
  width: 12px;
  height: 12px;
  color: #2f9e5b;
}

.ibMenuTpl {
  left: 118px;
}

.ibMenuSend {
  left: 0;
}

/* časová os klienta a vlákno, z ktorého do nej e-maily prilietajú */
.ibC {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px) scale(0.98);
  transition: opacity 0.55s, transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
  pointer-events: none;
}

.ibC.on {
  opacity: 1;
  transform: none;
}

.ibThread {
  position: absolute;
  left: 0;
  top: 170px;
  z-index: 2;
  width: 340px;
  padding: 14px 14px 4px;
}

.ibThreadHead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
}

.ibThreadHead b {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.ibThreadHead small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: #2f9e5b;
  font-size: 11px;
  font-weight: 600;
}

.ibThreadHead small .i {
  width: 11px;
  height: 11px;
}

.ibThreadMsg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid #f0f0f2;
  background: #fff;
  font-size: 12px;
}

.ibThreadMsg > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.ibThreadMsg b {
  display: block;
  font-weight: 600;
}

.ibThreadMsg small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ibThreadIco {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(42, 125, 225, 0.12);
  color: #2a7de1;
}

.ibThreadIco.isOut {
  background: rgba(47, 158, 91, 0.12);
  color: #2f9e5b;
}

.ibThreadIco .i {
  width: 12px;
  height: 12px;
}

/* kópia správy, ktorá odletí do časovej osi (originál vo vlákne ostáva) */
.ibFlyCopy {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-top: 0;
  border-radius: 10px;
  will-change: transform;
  transition: box-shadow 0.3s;
}

.ibFlyCopy.isFlying {
  box-shadow: 0 14px 30px -12px rgba(20, 20, 30, 0.35), 0 0 0 1px rgba(20, 20, 30, 0.06);
}

.ibClient {
  --tlBg: #ffffff;
  position: absolute;
  left: 390px;
  top: 56px;
  width: 530px;
  padding: 16px 20px 6px;
}

.ibClient .tlLine {
  bottom: 34px;
}

/* miesto pre e-mail v časovej osi: otvorí sa, keď doň e-mail priletí */
.ibSlot {
  max-height: 0;
  overflow: hidden;
  border-radius: 10px;
  transition: max-height 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), background-color 1.6s;
}

.ibSlot.isFilled {
  --tlBg: var(--blue-soft);
  max-height: 64px;
  background: var(--blue-soft);
}

.ibSlot .tlItem {
  opacity: 1;
  transform: none;
}

.ibSlot.isFilled .tlDot {
  animation: nodePop 0.5s ease-out;
}

/* úzka obrazovka: všetko pod sebou, bez bočného menu Inboxu */
.stInbox.isCompact .ibMail {
  top: 0;
  width: 470px;
  height: 330px;
}

.stInbox.isCompact .ibBody p:first-child,
.stInbox.isCompact .ibLines,
.stInbox.isCompact .gwSide,
.stInbox.isCompact .ibSearch,
.stInbox.isCompact .ibAll,
.stInbox.isCompact .ibTabMore,
.stInbox.isCompact .ibBarIco,
.stInbox.isCompact .ibText > span,
.stInbox.isCompact .ibBox,
.stInbox.isCompact .ibSnooze,
.stInbox.isCompact .ibMsgHead small,
.stInbox.isCompact .tlFilters,
.stInbox.isCompact .tlSrc {
  display: none;
}

.stInbox.isCompact .ibChip {
  left: 0;
  width: 470px;
  height: 44px;
}

.stInbox.isCompact .ibChip:nth-of-type(1) {
  top: 346px !important;
}

.stInbox.isCompact .ibChip:nth-of-type(2) {
  top: 398px !important;
}

.stInbox.isCompact .ibChip:nth-of-type(3) {
  top: 450px !important;
}

.stInbox.isCompact .ibApp .gwMain {
  padding-left: 10px;
}

.stInbox.isCompact .ibName {
  flex-basis: 92px;
}

.stInbox.isCompact .ibCardIn {
  margin: 0;
}

.stInbox.isCompact .ibScroll.on {
  transform: none;
}

.stInbox.isCompact .ibThread {
  top: 0;
  width: 470px;
}

.stInbox.isCompact .ibClient {
  left: 0;
  top: 186px;
  width: 470px;
  padding: 14px 14px 6px;
}

.stInbox.isCompact .tlItem {
  grid-template-columns: 44px 44px minmax(0, 1fr);
}

.stInbox.isCompact .tlLine {
  left: 65px;
}

.stInbox.isCompact .tlGroup {
  padding-left: 50px;
}

/* ===== 07 Časová os ===== */

/*
 * Návrh časovej osi pre biele pozadie aplikácie: riadky bez kariet a tieňov, ikona v kruhu
 * s tenkým farebným obrysom a bielym "halo" (box-shadow vo farbe pozadia), ktoré prerušuje
 * zvislú čiaru. Dátum v stĺpci vľavo, typ tučne, pôvod udalosti ako sivý štítok vpravo.
 */

.tlPanel {
  --tlBg: #ffffff;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 12px;
  border: 1px solid #e6e6e9;
  border-radius: 16px;
  background: var(--tlBg);
  box-shadow: 0 24px 50px -30px rgba(20, 20, 30, 0.3);
}

.tlHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f2;
}

.tlHeadName b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.tlHeadName small {
  color: #71717a;
  font-size: 11.5px;
}

.tlFilters {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.tlFilters span {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #e6e6e9;
  color: #52525b;
  font-size: 11.5px;
}

.tlFilters .isOn {
  background: #18181b;
  box-shadow: none;
  color: #fff;
}

.tlBody {
  position: relative;
  flex: 1;
  min-height: 0;
  padding-top: 8px;
}

.tlLine {
  position: absolute;
  left: 80px;
  top: 34px;
  bottom: 44px;
  width: 2px;
  background: #e4e4e7;
}

.tlLine i {
  display: block;
  height: calc(var(--tl, 0) * 100%);
  background: #3fb46f;
}

.tlGroup {
  position: relative;
  z-index: 1;
  height: 28px;
  padding-left: 66px;
  opacity: 0;
  transition: opacity 0.4s;
}

.tlGroup.on {
  opacity: 1;
}

.tlGroup span {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f4f4f5;
  box-shadow: 0 0 0 4px var(--tlBg);
  color: #52525b;
  font-size: 11px;
  font-weight: 500;
}

.tlItem {
  position: relative;
  display: grid;
  grid-template-columns: 56px 50px minmax(0, 1fr);
  align-items: start;
  min-height: 51px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s;
}

.tlItem.on {
  opacity: 1;
  transform: none;
}

.tlItem time {
  padding-top: 7px;
  color: #71717a;
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tlDot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--tlBg);
  color: var(--c);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #fff), 0 0 0 5px var(--tlBg);
}

.tlDot .i {
  width: 13px;
  height: 13px;
}

.tlItem.on .tlDot {
  animation: nodePop 0.5s ease-out;
}

.tlText {
  min-width: 0;
  padding: 3px 0 8px 4px;
}

.tlType {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.tlType b {
  font-weight: 600;
}

.tlSrc {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f4f4f5;
  color: #52525b;
  font-size: 10.5px;
  white-space: nowrap;
}

.tlWhat {
  overflow: hidden;
  color: #27272a;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tlMeta {
  color: #a1a1aa;
  font-size: 11px;
}

.stTimeline.isCompact .tlFilters {
  display: none;
}

.stTimeline.isCompact .tlPanel {
  padding: 14px 14px 10px;
}

.stTimeline.isCompact .tlItem {
  grid-template-columns: 44px 44px minmax(0, 1fr);
  min-height: 70px;
}

.stTimeline.isCompact .tlLine {
  left: 65px;
}

.stTimeline.isCompact .tlGroup {
  padding-left: 50px;
}

.stTimeline.isCompact .tlWhat {
  white-space: normal;
}

.stTimeline.isCompact .tlSrc {
  display: none;
}

/* ===== 08 Životný cyklus ===== */

.stLife {
  --x0: 90px;
  --span: 980px;
}

.lcTrack {
  position: absolute;
  inset: 0;
}

.lcRail {
  position: absolute;
  left: var(--x0);
  top: 150px;
  width: var(--span);
  height: 4px;
  border-radius: 2px;
  background: #e2e2e6;
}

.lcRail i {
  display: block;
  width: calc(var(--tl, 0) * 100%);
  height: 100%;
  border-radius: 2px;
  background: var(--green);
}

.lcStation {
  position: absolute;
  top: 128px;
  left: calc(var(--x0) + var(--i) * var(--span) / 7);
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 140px;
  margin-left: -70px;
  text-align: center;
}

.lcDot {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--faint);
  box-shadow: 0 0 0 1.5px #e2e2e6, 0 0 0 6px var(--bg);
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}

.lcDot .i {
  width: 20px;
  height: 20px;
}

.lcStation.on .lcDot {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 1.5px var(--green), 0 0 0 6px var(--bg), 0 12px 24px -8px rgba(71, 185, 114, 0.6);
  animation: nodePop 0.5s ease-out;
}

.lcStation b {
  color: var(--faint);
  font-size: 13px;
  transition: color 0.4s;
}

.lcStation.on b {
  color: var(--ink);
}

.lcCard {
  width: 132px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 0.75px rgba(52, 55, 66, 0.09), 0 8px 18px -10px rgba(20, 20, 30, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s;
}

.lcStation.on .lcCard {
  opacity: 1;
  transform: none;
}

.lcCard p {
  font-size: 12.5px;
  font-weight: 600;
}

.lcCard small {
  color: var(--muted);
  font-size: 11.5px;
}

.lcProgress {
  display: block;
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #ededf0;
}

.lcProgress i {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--green);
}

.lcToken {
  position: absolute;
  top: 82px;
  left: calc(var(--x0) + var(--tl, 0) * var(--span));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 5px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.5);
}

.lcToken::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  border-bottom: 0;
  transform: translateX(-50%);
}

.lcToken .trackerAvatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.lcEdge {
  position: absolute;
  left: calc(var(--x0) + 3.5 * var(--span) / 7);
  top: 14px;
  height: 330px;
  border-left: 1.5px dashed #e5484d;
  opacity: 0;
  transition: opacity 0.5s;
}

.lcEdge.on {
  opacity: 1;
}

.lcEdge span {
  position: absolute;
  top: 0;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red-soft);
  color: #c0343a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.lcBr {
  position: absolute;
  top: 330px;
  height: 14px;
  padding-top: 20px;
  border: 1.5px solid #d4d4da;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.5s, color 0.5s;
}

.lcBrSale {
  left: calc(var(--x0) - 60px);
  width: calc(3 * var(--span) / 7 + 120px);
}

.lcBrAfter {
  left: calc(var(--x0) + 4 * var(--span) / 7 - 60px);
  width: calc(3 * var(--span) / 7 + 120px);
}

.lcBrAfter.on {
  border-color: var(--green);
  color: var(--green-ink);
}

.stLife.isCompact .lcRail {
  left: 38px;
  top: 30px;
  width: 4px;
  height: 700px;
}

.stLife.isCompact .lcRail i {
  width: 100%;
  height: calc(var(--tl, 0) * 100%);
}

.stLife.isCompact .lcStation {
  left: 16px;
  top: calc(30px + var(--i) * 100px - 24px);
  grid-template-columns: 48px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  width: 450px;
  margin-left: 0;
  text-align: left;
}

.stLife.isCompact .lcDot {
  grid-row: span 2;
}

.stLife.isCompact .lcCard {
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

.stLife.isCompact .lcCard p,
.stLife.isCompact .lcCard small {
  display: inline;
  margin-right: 8px;
}

.stLife.isCompact .lcToken,
.stLife.isCompact .lcEdge,
.stLife.isCompact .lcBr {
  display: none;
}

/* ===== 09 Ekonomický systém ===== */

.igProfile {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 440px;
  height: 470px;
  padding: 18px;
}

.igHead {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
}

.igTiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  flex: 1;
}

.igTile {
  padding: 12px 14px;
  border: 1.5px dashed #d8d8dd;
  border-radius: 12px;
  transition: border-color 0.4s, background-color 0.4s;
}

.igTile > :not(.igLabel) {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
}

.igTile.on {
  border-color: transparent;
  background: #f7f7f8;
  animation: cellFlash 1.4s ease-out;
}

.igTile.on > * {
  opacity: 1;
  transform: none;
}

.igLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px !important;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.igBig {
  margin-bottom: 6px !important;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.igRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px !important;
  color: var(--ink-2);
  font-size: 12px;
}

.igOut {
  opacity: 0;
  transition: opacity 0.4s;
}

.igOut.on {
  opacity: 1;
}

.igSync {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.4s;
}

.igSync.on {
  opacity: 1;
}

.igSyncDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.igPipe {
  position: absolute;
  left: 440px;
  top: 0;
  width: 260px;
  height: 470px;
}

.igLane {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(180px + var(--lane) * 110px);
  height: 2px;
  background: repeating-linear-gradient(90deg, #cdd1d8 0 6px, transparent 6px 12px);
}

.igApi {
  position: absolute;
  left: 50%;
  top: 225px;
  padding: 2px 10px;
  border: 1px solid #dcdce0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
}

.igPacket {
  position: absolute;
  top: calc(180px + var(--lane) * 110px - 14px);
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(40, 120, 70, 0.6);
  transform: translateX(-50%);
  opacity: min(1, calc(var(--tl, 0) * 10), calc((1 - var(--tl, 0)) * 10));
}

.igPacket.is-in {
  left: calc(100% - var(--tl, 0) * 100%);
}

.igPacket.is-out {
  left: calc(var(--tl, 0) * 100%);
  background: var(--blue-2);
  box-shadow: 0 8px 18px -8px rgba(36, 91, 198, 0.6);
}

.igErp {
  position: absolute;
  left: 700px;
  top: 40px;
  width: 220px;
  padding: 14px;
  border-radius: 14px;
  background: #1f2329;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11.5px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
}

.igErpHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.igErpRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.igErpRow em {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10.5px;
  font-style: normal;
}

.igErpRow em.isDue {
  color: #f5c451;
}

.igErpRow em.isNew {
  color: #7dffae;
}

.igErpNew {
  max-height: 0;
  overflow: hidden;
  padding: 0 8px;
  margin: 0 -8px;
  border-radius: 8px;
  opacity: 0;
  transition: max-height 0.45s, padding 0.45s, opacity 0.45s;
}

.igErpNew.on {
  max-height: 60px;
  padding: 7px 8px;
  background: rgba(71, 185, 114, 0.14);
  opacity: 1;
}

.stErp.isCompact .igProfile {
  width: 470px;
  height: 520px;
}

.stErp.isCompact .igPipe {
  display: none;
}

.stErp.isCompact .igErp {
  left: 0;
  top: 540px;
  width: 470px;
}

.stErp.isCompact .igErpRow:nth-child(n + 4):not(.igErpNew) {
  display: none;
}

/* ===== 10 Dokumenty ===== */

.dkDeal {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 430px;
  height: 560px;
  padding: 18px;
}

.dkDeal .prHead > span:last-child {
  display: grid;
}

.dkFields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.dkFields p {
  display: grid;
  gap: 2px;
}

.dkFields small {
  color: var(--faint);
  font-size: 11px;
}

.dkFields b {
  font-size: 13px;
}

.dkTable {
  display: grid;
  margin-top: -4px;
  font-size: 12px;
}

.dkTable p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 80px;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f2;
}

.dkTable b {
  text-align: right;
}

.dkTable span:nth-child(2) {
  color: var(--muted);
}

.dkSum {
  border-bottom: 0 !important;
  font-weight: 600;
}

.dkPrint {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 10px 0 16px !important;
  padding: 7px 12px;
  border-radius: 9px;
  background: #f1f1f3;
  font-size: 12px;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.dkPrint.on {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(20, 20, 24, 0.12);
}

.dkFiles {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #efeff1;
}

.dkFiles .igLabel {
  margin-bottom: 6px !important;
}

.dkCount {
  display: none;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ededf0;
  color: var(--ink-2);
  font-size: 10px;
  text-align: center;
  line-height: 16px;
}

.dkCount.on {
  display: inline-block;
}

.dkFile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 12px;
}

.dkFile b {
  display: block;
  font-weight: 600;
}

.dkFile small {
  color: var(--muted);
  font-size: 11px;
}

.dkImg {
  background: var(--teal);
}

.dkFileNew {
  max-height: 0;
  padding: 0 8px;
  margin: 0 -8px;
  overflow: hidden;
  border-radius: 8px;
  opacity: 0;
  transition: max-height 0.45s, padding 0.45s, opacity 0.45s;
}

.dkFileNew.isFilled {
  max-height: 60px;
  padding: 7px 8px;
  background: var(--green-soft);
  opacity: 1;
}

.dkPage {
  position: absolute;
  left: 462px;
  top: 30px;
  z-index: 3;
  width: 226px;
  height: 320px;
  will-change: transform;
}

.dkPageIn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 18px 16px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.08), 0 24px 44px -18px rgba(20, 20, 30, 0.35), 0 0 0 0.75px rgba(20, 20, 30, 0.08);
  font-size: 9px;
  line-height: 1.35;
}

.dkP {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
}

.dkP.on {
  opacity: 1;
  transform: none;
}

.dkLogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.dkLogo span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dkLogo small {
  color: var(--faint);
  font-weight: 400;
}

.dkTitle {
  display: grid;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dkTitle small {
  color: var(--muted);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
}

.dkTo small {
  display: block;
  color: var(--faint);
}

.dkRows p {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #efeff1;
}

.dkTotal {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--green-soft);
  color: var(--green-ink);
  font-size: 10px;
  font-weight: 700;
}

.dkSign {
  display: flex;
  justify-content: space-between;
  margin-top: auto !important;
  padding-top: 6px;
  border-top: 1px solid #e6e6ea;
  color: var(--muted);
}

.dkSp {
  position: absolute;
  left: 706px;
  top: 30px;
  width: 234px;
  padding: 14px;
  border: 1.5px dashed #cfd2d8;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s;
}

.dkSp.on {
  opacity: 1;
  transform: none;
}

.dkSpHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px !important;
  font-size: 13px;
  font-weight: 600;
}

.dkSpHead > .i {
  color: #0f78d4;
}

.dkTree {
  display: grid;
  gap: 2px;
  font-size: 11.5px;
}

.dkTree p {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 4px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dkTree .i {
  color: var(--amber);
}

.dkTree .d1 {
  padding-left: 12px;
}

.dkTree .d2 {
  padding-left: 24px;
}

.dkTree .d3 {
  padding-left: 36px;
  color: var(--muted);
}

.dkSpNote {
  margin-top: 12px !important;
  color: var(--muted);
  font-size: 11.5px;
}

.stDocs.isCompact .dkDeal {
  width: 470px;
  height: 500px;
}

.stDocs.isCompact .dkPage {
  left: 244px;
  top: 90px;
}

.stDocs.isCompact .dkSp {
  left: 0;
  top: 520px;
  width: 470px;
}

.stDocs.isCompact .dkTree p:nth-child(n + 5),
.stDocs.isCompact .dkFile:last-child {
  display: none;
}

/* ===== 11 Analytika ===== */

.anBoard {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 940px;
  height: 600px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 0.75px rgba(52, 55, 66, 0.09), 0 1px 2px rgba(52, 55, 66, 0.08), 0 12px 30px -18px rgba(20, 20, 30, 0.25);
  transition: width 0.75s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.75s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.anBoard.on {
  width: 560px;
  height: 340px;
}

.anTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px !important;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.anT2,
.anTotal,
.anBoard.on .anT1 {
  display: none;
}

.anBoard.on .anT2,
.anBoard.on .anTotal {
  display: inline;
}

.anTotal {
  margin-left: auto;
  font-size: 15px;
}

.anCols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.anCol {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px;
  border-radius: 10px;
  background: #f3f3f5;
  transition: background-color 0.6s, padding 0.6s;
}

.anBoard.on .anCol {
  padding: 0;
  background: transparent;
}

.anStack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 1;
  min-height: 0;
  transition: gap 0.6s;
}

.anBoard.on .anStack {
  justify-content: flex-end;
  gap: 0;
  border-bottom: 1.5px solid #e2e2e6;
}

.anCard {
  display: grid;
  align-content: space-between;
  width: 100%;
  height: 58px;
  flex: none;
  overflow: hidden;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 0.75px rgba(52, 55, 66, 0.09), 0 1px 2px rgba(52, 55, 66, 0.08);
  font-size: 12px;
  transition: height 0.75s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.75s cubic-bezier(0.3, 0.7, 0.2, 1), border-radius 0.6s, background-color 0.6s, padding 0.6s, box-shadow 0.6s, color 0.3s;
}

.anCard b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.anCard span {
  color: var(--muted);
}

.anBoard.on .anCard {
  width: 58%;
  height: calc(var(--hv) * 0.8);
  padding: 0;
  border-radius: 0;
  background: var(--c);
  box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, 0.45);
  color: transparent;
}

.anBoard.on .anCard span {
  color: transparent;
}

.anBoard.on .anCard:first-child {
  border-radius: 6px 6px 0 0;
}

.anLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  order: -1;
  gap: 6px;
  margin-bottom: 8px !important;
  font-size: 11.5px;
  white-space: nowrap;
}

.anLabel span {
  overflow: hidden;
  color: color-mix(in srgb, var(--c) 62%, #111);
  font-weight: 600;
  text-overflow: ellipsis;
}

.anLabel b {
  color: var(--muted);
  font-weight: 500;
}

.anBoard.on .anLabel {
  flex-direction: column;
  order: 1;
  gap: 1px;
  margin: 8px 0 0 !important;
  font-size: 11px;
}

.anKpis {
  position: absolute;
  left: 576px;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 364px;
  height: 340px;
}

.anKpi {
  display: grid;
  align-content: space-between;
  padding: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s, transform 0.45s;
}

.anKpi.on {
  opacity: 1;
  transform: none;
}

.anKpi small {
  color: var(--faint);
  font-size: 11px;
}

.anKpi b {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.anKpi em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.anKpi em.up {
  color: var(--green-ink);
}

.anForecast,
.anOdata {
  position: absolute;
  top: 356px;
  height: 244px;
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s;
}

.anForecast {
  left: 0;
  width: 560px;
}

.anOdata {
  left: 576px;
  width: 364px;
}

.anForecast.on,
.anOdata.on {
  opacity: 1;
  transform: none;
}

.anFHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px !important;
  font-size: 13px;
}

.anFHead span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.anFHead i {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-left: 8px;
  border-radius: 2px;
}

.lgA {
  background: var(--green);
}

.lgF {
  background: repeating-linear-gradient(90deg, var(--green) 0 3px, transparent 3px 5px);
}

.lgP {
  background: repeating-linear-gradient(90deg, #9a98a3 0 5px, transparent 5px 8px);
}

.anChart {
  width: 100%;
  height: 150px;
  overflow: visible;
}

.anGrid path {
  stroke: #efeff1;
  stroke-width: 1;
}

.anPlan {
  fill: none;
  stroke: #9a98a3;
  stroke-width: 1.8;
  stroke-dasharray: 0.02 0.014;
  opacity: var(--tl, 0);
}

.anActual {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  /* v px: Firefox calc() bez jednotky neprijme a čiaru by nakreslil celú hneď na začiatku */
  stroke-dashoffset: calc((1 - var(--tl, 0)) * 1px);
}

.anFore {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.03 0.03;
  opacity: var(--tl, 0);
}

.anNow {
  fill: #fff;
  stroke: var(--green);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.3s;
}

.anNow.on {
  opacity: 1;
}

.anMonths {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  color: var(--faint);
  font-size: 10.5px;
}

.anOdRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f2;
  font-size: 12.5px;
  font-weight: 600;
}

.anOdRow em {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f1f3;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
}

.anApp {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--c);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.anOdNote {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px !important;
  color: var(--muted);
  font-size: 11.5px;
}

.stData.isCompact .anBoard {
  width: 470px;
}

.stData.isCompact .anBoard.on {
  width: 470px;
  height: 300px;
}

.stData.isCompact .anKpis {
  left: 0;
  top: 316px;
  width: 470px;
  height: 200px;
}

.stData.isCompact .anForecast {
  top: 530px;
  width: 470px;
  height: 250px;
}

.stData.isCompact .anOdata {
  display: none;
}

.anBoard.on .anLabel,
.anBoard.on .anLabel span {
  max-width: 100%;
}


.anT2 small {
  display: block;
  color: #71717a;
  font-size: 11px;
  font-weight: 400;
}

.anFHead b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.anBoard .anCard {
  box-shadow: none;
  border: 1px solid #e6e6e9;
}

.anBoard.on .anCard {
  border: 0;
}

/* ===== 12 AI ===== */

.stAi {
  --appText: #18181b;
  --appMuted: #71717a;
  --lnk: #2563eb;
}

.aiRecord {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 536px;
  height: 600px;
  padding: 16px 18px;
}

.aiRecord .tabs2 {
  margin: 12px 0 10px;
}

.aiSources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.aiSrc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f4f5;
  transition: box-shadow 0.4s, background-color 0.4s;
}

.aiSrc b {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.aiSrc small {
  color: #52525b;
  font-size: 11px;
}

.aiSrc.on {
  background: #f5f3ff;
  box-shadow: inset 0 0 0 1.5px #a78bfa;
}

.scene[data-step="2"] .aiSrc.on,
.scene[data-step="3"] .aiSrc.on {
  box-shadow: inset 0 0 0 1px #ddd6fe;
}

.aiSwap {
  display: inline-grid;
}

.aiSwap i {
  grid-area: 1 / 1;
  font-style: normal;
  transition: opacity 0.35s;
}

.aiSwap i:last-child,
.aiSwap.on i:first-child {
  opacity: 0;
}

.aiSwap.on i:last-child {
  opacity: 1;
  color: #2f7a4a;
  font-weight: 600;
}

.aiActs {
  margin-top: 14px;
}

.aiActs .zkActs {
  margin-top: 4px;
}

.aiNewRow {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s, opacity 0.4s 0.15s;
}

.aiNewRow.on {
  max-height: 40px;
  opacity: 1;
}

.aiNewRow.on p {
  animation: newGlow 1.8s ease-out;
}

.aiNewRow em .tag {
  margin-right: 2px;
}

.aiPanel {
  position: absolute;
  left: 556px;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 384px;
  height: 600px;
  overflow: hidden;
  border: 1px solid #e6e6e9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(20, 20, 30, 0.35);
}

.aiHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f0f0f2;
  font-size: 14px;
}

.aiHead b {
  font-weight: 600;
}

.aiSpark {
  display: grid;
  place-items: center;
  color: #7c3aed;
}

.aiSpark .i {
  width: 17px;
  height: 17px;
}

.aiBeta {
  padding: 1px 6px;
  border-radius: 5px;
  background: #f0f0f2;
  color: #3f3f46;
  font-size: 10.5px;
}

.aiTools {
  display: flex;
  gap: 12px;
  margin-left: auto;
  color: #3f3f46;
}

.aiTools .i {
  width: 14px;
  height: 14px;
}

.aiChat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px;
  font-size: 12px;
}

.aiUser {
  align-self: flex-end;
  max-width: 88%;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: #f4f4f5;
  color: #18181b;
  transition: opacity 0.3s;
}

.aiUser:has(span:empty) {
  opacity: 0;
}

.aiTrace {
  display: grid;
  gap: 3px;
  color: #71717a;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.4s;
}

.aiTrace.on {
  opacity: 1;
}

.aiTrace p {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 0.3s;
}

.aiTrace p.on {
  color: #3f3f46;
  opacity: 1;
}

.aiTrace .i {
  width: 11px;
  height: 11px;
  color: #a1a1aa;
}

.aiTrace p.on .i {
  color: #3fb46f;
}

.aiAnswer {
  display: grid;
  gap: 5px;
  color: #27272a;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
}

.aiAnswer.on {
  opacity: 1;
  transform: none;
}

.aiH {
  margin-top: 2px !important;
  font-size: 13px;
  font-weight: 700;
}

.aiAnswer ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
}

.aiAnswer li b {
  font-weight: 600;
}

.aiAction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6e6e9;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s;
}

.aiAction.on {
  opacity: 1;
  transform: none;
}

.aiAction p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aiAction b {
  display: block;
  font-weight: 600;
}

.aiAction small {
  color: #71717a;
  font-size: 11px;
}

.aiDo {
  display: inline-grid;
}

.aiDo > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  grid-area: 1 / 1;
  transition: opacity 0.3s;
}

.aiDoB,
.aiDo.on .aiDoA {
  opacity: 0;
}

.aiDo.on .aiDoB {
  opacity: 1;
}

.aiDo.on {
  background: #2f7a4a;
}

.aiInput {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 14px 8px !important;
  padding: 8px 8px 8px 14px;
  border: 1px solid #e6e6e9;
  border-radius: 14px;
  color: #a1a1aa;
  font-size: 11.5px;
}

.aiInput i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c4b5fd;
  color: #fff;
  transform: rotate(-90deg);
}

.aiInput .i {
  width: 13px;
  height: 13px;
}

.aiDisc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px !important;
  color: #71717a;
  font-size: 10px;
}

.aiDisc .i {
  width: 10px;
  height: 10px;
}

.stAi.isCompact .aiRecord {
  width: 470px;
  height: 360px;
  padding: 12px;
}

.stAi.isCompact .aiPanel {
  left: 0;
  top: 372px;
  width: 470px;
  height: 408px;
}

.stAi.isCompact .tabs2,
.stAi.isCompact .sumBar,
.stAi.isCompact .recTools,
.stAi.isCompact .relTools,
.stAi.isCompact .aiTrace,
.stAi.isCompact .aiDisc,
.stAi.isCompact .aiSrc:nth-child(n + 5),
.stAi.isCompact .zkActs > p:nth-of-type(n + 3),
.stAi.isCompact .zkActs em {
  display: none;
}

.stAi.isCompact .aiSources {
  margin-top: 12px;
}

.stAi.isCompact .zkActs p {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

/* ===== 13 Mobil ===== */

.sceneWide .sceneSteps {
  min-height: 1.6em;
  margin-top: 14px;
  border: 0;
}

.sceneWide .sceneSteps li {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

.sceneWide .sceneSteps li.isActive,
.sceneWide .sceneSteps:not(:has(.isActive)) li:first-child {
  display: block;
  color: var(--ink);
  font-weight: 600;
  animation: stepIn 0.4s ease-out;
}

/* .sceneCaption: bez pásika priebehu, pod textom scény je len text aktuálneho kroku */
.sceneCaption .sceneSteps {
  margin-top: 18px;
  padding-bottom: 2.8em;
}

.sceneCaption .sceneSteps li,
.sceneCaption .sceneSteps li.isActive {
  height: 0;
  padding: 0;
  background: none;
}

.sceneCaption .sceneSteps li.isActive::after {
  top: 0;
}

/* na počítači sa text kroku zmestí na jeden riadok, viac výšky ostane pre ukážku */
@media (min-width: 1001px) {
  .sceneCaption .sceneSteps {
    max-width: 640px;
    padding-bottom: 1.6em;
  }
}

/* zariadenie: rozmery sa menia podľa kroku (počítač, tablet, telefón) */
.stMobile {
  --dw: 1000px;
  --dh: 540px;
  --dr: 18px;
  --dp: 8px;
}

.scene[data-step="1"] .stMobile {
  --dw: 640px;
  --dh: 540px;
  --dr: 30px;
  --dp: 14px;
}

.scene[data-step="2"] .stMobile,
.scene[data-step="3"] .stMobile,
.scene[data-step="4"] .stMobile,
.scene[data-step="5"] .stMobile {
  --dw: 290px;
  --dh: 560px;
  --dr: 44px;
  --dp: 10px;
}

.mbDevices {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: #e9e9ec;
  font-size: 12px;
  transform: translateX(-50%);
}

.mbDevices span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.scene[data-step="0"] .mbD1,
.scene[data-step="1"] .mbD2,
.scene[data-step="2"] .mbD3,
.scene[data-step="3"] .mbD3,
.scene[data-step="4"] .mbD3,
.scene[data-step="5"] .mbD3 {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mbDevice {
  position: absolute;
  left: 50%;
  top: 48px;
  width: var(--dw);
  height: var(--dh);
  padding: var(--dp);
  border-radius: var(--dr);
  background: #17181b;
  box-shadow: 0 40px 80px -30px rgba(20, 20, 30, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  transition: width 0.8s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.8s cubic-bezier(0.3, 0.7, 0.2, 1), border-radius 0.8s, padding 0.8s;
}

.mbScreen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--dr) - var(--dp));
  background: #f3f3f4;
  container-type: inline-size;
  transition: border-radius 0.8s;
}

/* počítač a tablet: detail obchodu ako v aplikácii */
.mbApp.gw {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  transition: opacity 0.35s;
}

.mbApp .gwPanel {
  gap: 12px;
}

.mbApp .sumBar,
.mbApp .stageBar {
  margin: 0;
}

.mbApp .tabs2 {
  margin: 0;
}

@container (max-width: 760px) {
  .mbApp .gwSide {
    display: none;
  }

  .mbApp .gwMain {
    padding-left: 10px;
  }

  .mbApp .gwAiBtn,
  .mbApp .recTools em,
  .mbApp .zkActs em {
    display: none;
  }

  .mbApp .zkActs p {
    grid-template-columns: 24px minmax(0, 1fr) 80px;
  }
}

/* telefón v príbehu: vzhľad je v ui.css (.mb*), tu je len prechod medzi zariadeniami a obrazovkami */
.stMobile .mbPhone {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.scene[data-step="2"] .mbPhone,
.scene[data-step="3"] .mbPhone,
.scene[data-step="4"] .mbPhone,
.scene[data-step="5"] .mbPhone {
  opacity: 1;
  transition-delay: 0.45s;
}

.scene[data-step="2"] .mbApp,
.scene[data-step="3"] .mbApp,
.scene[data-step="4"] .mbApp,
.scene[data-step="5"] .mbApp {
  opacity: 0;
}

.scene[data-step="2"] .mbV1,
.scene[data-step="3"] .mbV2,
.scene[data-step="4"] .mbV2,
.scene[data-step="5"] .mbV3 {
  opacity: 1;
  transform: none;
}

.scene[data-step="3"] .mbV1,
.scene[data-step="4"] .mbV1,
.scene[data-step="5"] .mbV1,
.scene[data-step="5"] .mbV2 {
  transform: translateX(-30%);
}

/* úzka obrazovka webu */
.stMobile.isCompact {
  --dw: 450px;
  --dh: 380px;
  --dr: 14px;
  --dp: 6px;
}

.scene[data-step="1"] .stMobile.isCompact {
  --dw: 400px;
  --dh: 540px;
  --dr: 26px;
  --dp: 12px;
}

.scene[data-step="2"] .stMobile.isCompact,
.scene[data-step="3"] .stMobile.isCompact,
.scene[data-step="4"] .stMobile.isCompact,
.scene[data-step="5"] .stMobile.isCompact {
  --dw: 300px;
  --dh: 580px;
  --dr: 44px;
  --dp: 10px;
}

/* ===== Záver ===== */

.finale {
  position: relative;
  z-index: 1;
  padding: 120px 0 110px;
  background: var(--bg);
}

.fnPoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0 0 96px;
  padding: 0;
  list-style: none;
}

.fnPoints li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 22px;
  border-top: 1.5px solid var(--ink);
}

.fnNum {
  color: var(--green-ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fnHead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

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

.fnLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.fnLink .i {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}

.fnLink:hover .i {
  transform: translateX(3px);
}

.fnCta {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: end;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px;
  background: var(--night);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.fnCta::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% 30%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(71, 185, 114, 0.28), transparent);
  pointer-events: none;
}

.fnCta > * {
  position: relative;
}

.fnCta .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}

.fnTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fnLead {
  max-width: 520px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 17px;
}

.fnForm {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.fnForm input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  outline: none;
}

.fnForm input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.fnForm:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--green);
}

.fnSolutions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.fnSolutions a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}

.fnSolutions a:hover {
  text-decoration-color: var(--green);
}

.fnDemo {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.fnDemo a {
  color: var(--green);
  font-weight: 600;
}

@media (max-width: 900px) {
  .fnPoints {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 64px;
  }

  .fnCta {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .finale {
    padding: 80px 0;
  }
}

@media (max-width: 480px) {
  .fnForm {
    flex-direction: column;
    border-radius: 20px;
  }

  .fnForm input {
    height: 48px;
  }
}

/* náhľad vytvorenej ponuky v strede scény Dokumenty */
.dkPreview {
  position: absolute;
  left: 462px;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 226px;
  padding: 14px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.45s, transform 0.45s;
}

.dkPreview.on {
  opacity: 1;
  transform: none;
}

.dkPrevHead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.dkPrevHead b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 160px;
}

.dkPrevHead small {
  color: var(--muted);
  font-size: 10px;
}

.dkThumb {
  display: grid;
  gap: 7px;
  padding: 14px 12px;
  border: 1px solid #ececef;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 18px -12px rgba(20, 20, 30, 0.35);
  font-size: 8px;
}

.dkThumb i {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: #ededf0;
}

.dkThumb i.s {
  width: 60%;
}

.dkThumb .dkTitle {
  font-size: 11px;
}

.dkPrevFoot {
  display: flex;
  gap: 6px;
  font-size: 10.5px;
}

.dkPrevFoot .rPill {
  height: 26px;
}

.stDocs.isCompact .dkPreview {
  display: none;
}

/* ===== Úvodná stránka: bloky medzi a za scénami, stránka funkcií ===== */

/* odkaz na samostatnú stránku pod textom scény (AI) */
.sceneMore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--green-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.sceneMore .i {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.sceneMore:hover .i {
  transform: translateX(3px);
}

/* pod textom kroku (mobil) je už medzera z popisu, ukážke ostane viac výšky */
.sceneCaption .sceneMore {
  margin-top: 0;
}

/* zákazníci pod oborovými riešeniami */
.trustInline {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--line);
}

.trustTitle {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.trustLogos {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 22px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trustLogos img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
}

/* kým nie je logo, názov firmy */
.trustName {
  color: #8d8b96;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.homeBlock {
  position: relative;
  z-index: 1;
  padding-top: clamp(64px, 9vw, 112px);
  background: var(--bg);
}

.homeHead {
  max-width: 720px;
  margin-bottom: 32px;
}

.homeHead h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 3.2vw, 40px);
  text-wrap: balance;
}

.homeHead p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.moreGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moreCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.moreCard:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.moreIco {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--green-soft);
  color: var(--green-ink);
}

.moreIco .i {
  width: 19px;
  height: 19px;
}

.moreCard .moreIco {
  margin-bottom: 16px;
}

.moreCard h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.moreCard p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.moreGo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--green-ink);
  font-size: 14px;
  font-weight: 600;
}

.moreGo .i {
  width: 15px;
  height: 15px;
}

.moreAll {
  justify-content: center;
  background: var(--night);
  color: #fff;
}

.moreAll p {
  color: rgba(255, 255, 255, 0.7);
}

.moreAll .moreGo {
  margin-top: 0;
  color: var(--green);
}

.solutionList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solutionList a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.solutionList a:hover {
  box-shadow: var(--shadow);
}

.solutionList strong {
  display: block;
  font-size: 16px;
}

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

.solutionList a > .i:last-child {
  width: 16px;
  height: 16px;
  flex: none;
  margin-left: auto;
  color: var(--faint);
}

.pricingBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.pricingText h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3.2vw, 40px);
}

.pricingText p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.pricingCtas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.pricingPlans {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricingPlans li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  align-items: baseline;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.pricingPlans li.isPopular {
  border-color: rgba(71, 185, 114, 0.55);
  background: var(--green-soft);
}

.pricingPlans strong {
  font-size: 17px;
}

.pricingPrice {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

.pricingPrice b {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
}

.pricingPlans small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 14px;
}

.homeFaq {
  padding-bottom: clamp(64px, 9vw, 112px);
}

.faqMore {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.faqMore a {
  color: var(--ink);
}

/* stránka funkcií: hlavička nad scénami a výzva na konci */
.featHead {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-h) + 56px) 0 56px;
  background: var(--bg);
}

.featHead h1 {
  margin-bottom: 16px;
  font-size: clamp(36px, 4.6vw, 58px);
  letter-spacing: -0.03em;
}

.featHead .lead {
  max-width: 640px;
}

.featNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.featNav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.featNav a:hover {
  box-shadow: var(--shadow);
}

.featNav b {
  color: var(--green-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.featMain {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.featMain span {
  margin-right: 4px;
}

.featMain a {
  color: var(--ink);
}

.featEnd {
  position: relative;
  z-index: 1;
  padding: 80px 0 96px;
  background: var(--bg);
}

@media (max-width: 1080px) {
  .moreGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .sceneMore {
    display: none;
  }

  .pricingBox {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1000px) {
  .trustLogos {
    grid-template-columns: repeat(3, auto);
    gap: 18px 40px;
  }
}

@media (max-width: 640px) {
  .trustLogos {
    grid-template-columns: repeat(2, auto);
    gap: 14px 32px;
  }

  .trustName {
    font-size: 16px;
  }

  .moreGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .homeHead p {
    font-size: 16px;
  }

  .pricingPlans li {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricingPrice {
    text-align: left;
  }

  .featHead {
    padding: calc(var(--header-h) + 32px) 0 40px;
  }
}