/*
  Formularz konfiguracyjny — style.

  Język wizualny platformy sprzedażowej ARKANIP: jedna jasna płaszczyzna
  z błękitną poświatą, szkło z białych warstw, czarne nagłówki, błękitne
  CTA. Trzy barwy (biel, błękit, czerń) — wszystkie z theme.css, tutaj
  tylko wyliczane rgba() na cienie i tinty.

  Układ:
    belka   — logo · ścieżka + postęp · zapis + menu
    uklad   — plan (spis części → działów → poddziałów) | scena
    scena   — jeden ekran naraz (start / wstęp / pytanie / podsumowanie)
*/

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

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
  color: inherit;
}

kbd {
  font-family: inherit;
}

/* ---------------------------------------------------------------- tło -- */

/*
  Poświata jak GlowBackdrop w platformie: jedna barwa światła (błękit),
  plamy różnią się tylko pozycją i kryciem. Stała, nieanimowana — pod nią
  nic nie musi się przeliczać.
*/
.tlo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% -10%, rgba(14, 165, 233, 0.22), transparent 62%),
    radial-gradient(700px 520px at 8% 110%, rgba(29, 78, 216, 0.12), transparent 60%),
    radial-gradient(1200px 700px at 50% 50%, rgba(255, 255, 255, 0.6), transparent 70%);
}

/* ---------------------------------------------------------------- logo -- */

.logo {
  display: inline-flex;
  align-items: flex-end;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.logo__dot {
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.08em;
  margin-bottom: 0.03em;
  border-radius: 999px;
  background: var(--blue);
  flex-shrink: 0;
}

/* --------------------------------------------------------------- belka -- */

.belka {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid rgba(29, 78, 216, 0.08);
}

.belka__srodek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sciezka {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.sciezka:empty {
  display: none;
}

.sciezka__krok--biezacy {
  color: var(--ink);
}

.sciezka__sep {
  color: var(--blue-line);
  font-weight: 700;
  margin: 0 6px;
}

.postep {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 100%);
}

.postep__tor {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-tint-2);
  overflow: hidden;
}

.postep__wypelnienie {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cta);
  transition: width 0.45s var(--ease);
}

.postep__procent {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.belka__akcje {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.zapis {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}

.zapis:empty {
  display: none;
}

.ikonka {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(29, 78, 216, 0.14);
  background: var(--surface);
  color: var(--ink-muted);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.ikonka:hover,
.ikonka[aria-expanded="true"] {
  color: var(--blue);
  border-color: var(--blue);
}

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
}

.menu__pozycja {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-size: 14px;
  font-weight: 600;
}

.menu__pozycja:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.menu__pozycja--ostrozna,
.menu__pozycja--ostrozna:hover {
  color: var(--bad);
}

/* --------------------------------------------------------------- układ -- */

.uklad {
  position: relative;
  z-index: 1;
  width: min(1720px, 100% - 56px);
  margin: 0 auto;
  padding: 24px 0 40px;
}

/* --- znacznik i schemat części --- */

/*
  Znacznik w lewym dolnym rogu (numer pytania · dział › poddział). Klik
  rozwija nad nim schemat TYLKO bieżącej części: działy z poddziałami
  i kropkami statusów. Zastąpił stały plan po lewej — pytanie ma mieć cały
  ekran dla siebie; nie przywracać stałego spisu.
*/
.znacznik {
  position: fixed;
  left: 32px;
  bottom: 26px;
  z-index: 35;
}

.znacznik__przycisk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 160px));
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(1.5);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: left;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.znacznik__przycisk:hover,
.znacznik__przycisk[aria-expanded="true"] {
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-lg);
}

.znacznik__numer {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--cta);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.znacznik__numer--ikona {
  padding: 0;
}

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

.znacznik__tekst .sciezka__sep {
  margin: 0 5px;
}

.znacznik__strzalka {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--blue);
  transition: transform 0.2s var(--ease);
}

.znacznik__przycisk[aria-expanded="true"] .znacznik__strzalka {
  transform: rotate(180deg);
}

.schemat {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: 400px;
  max-height: min(72vh, 680px);
  overflow-y: auto;
  padding: 14px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  animation: wejscie 0.25s var(--ease) both;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-tint-2) transparent;
}

.schemat .plan__dzial + .plan__dzial {
  margin-top: 4px;
}

.plan__czesc + .plan__czesc {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--blue-line);
}

.plan__tytul {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 6px 10px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plan__tytul small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.plan__tytul:hover {
  background: var(--blue-tint);
}

.plan__pozycja,
.plan__poddzial,
.plan__koniec {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.plan__pozycja:hover,
.plan__poddzial:hover,
.plan__koniec:hover {
  background: var(--blue-tint);
}

.plan__pozycja[aria-current="true"] {
  background: var(--surface);
  border-color: rgba(29, 78, 216, 0.25);
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(29, 78, 216, 0.4);
}

.plan__numer {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.plan__pozycja[aria-current="true"] .plan__numer {
  color: var(--blue);
}

.plan__nazwa {
  line-height: 1.25;
}

.plan__kropka {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--blue-line);
  color: #fff;
}

.plan__kropka--mala {
  width: 10px;
  height: 10px;
  margin-left: 3px;
  border-width: 2px;
}

[data-status="czesciowo"] > .plan__kropka {
  border-color: var(--blue);
  background: radial-gradient(var(--blue) 40%, transparent 46%);
}

[data-status="gotowy"] > .plan__kropka {
  border-color: var(--blue);
  background: var(--blue);
}

.plan__poddzialy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 8px;
  padding-left: 10px;
  border-left: 2px solid var(--blue-tint-2);
}

.plan__poddzial {
  grid-template-columns: 16px minmax(0, 1fr);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.plan__poddzial[aria-current="true"] {
  color: var(--blue);
  background: var(--blue-tint);
}

.plan__koniec {
  grid-template-columns: 18px minmax(0, 1fr);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--blue-line);
  border-radius: 0;
  color: var(--blue);
  font-weight: 700;
}

.plan__koniec:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- scena -- */

.scena {
  position: relative;
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

/* Ekran wjeżdża z dołu (dalej) albo z góry (wstecz). */
.ekran {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0 80px;
}

@keyframes z-dolu {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes z-gory {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes trzesie {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(3px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-5px);
  }
  40%,
  60% {
    transform: translateX(5px);
  }
}

@keyframes wyjscie-gora {
  to {
    opacity: 0;
    transform: translateY(-22px);
  }
}

@keyframes wyjscie-dol {
  to {
    opacity: 0;
    transform: translateY(22px);
  }
}

.ekran--wyjscie-gora {
  animation: wyjscie-gora 0.24s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

.ekran--wyjscie-dol {
  animation: wyjscie-dol 0.24s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

.ekran--z-dolu {
  animation: z-dolu 0.45s var(--ease) both;
}

.ekran--z-gory {
  animation: z-gory 0.45s var(--ease) both;
}

/* Cały ekran już się nie trzęsie (właściciel) — zostaje tylko komunikat i pole. */
.ekran--trzesie {
  animation: none;
}

.trzesie {
  animation: trzesie 0.5s var(--ease);
}



@media (prefers-reduced-motion: reduce) {
  .ekran--z-dolu,
  .ekran--z-gory,
  .ekran--trzesie,
  .ekran--wyjscie-gora,
  .ekran--wyjscie-dol {
    animation: none;
  }
}

/* ------------------------------------------------------- nadtytuły -- */

.nadtytul {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ------------------------------------------------------------ CTA -- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 0;
  border-radius: 14px;
  background: var(--cta);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 28px -12px rgba(29, 78, 216, 0.5);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}

.cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px -12px rgba(29, 78, 216, 0.6);
}

.cta:active {
  transform: translateY(0);
}

.cta--duzy {
  padding: 16px 30px;
  font-size: 17px;
  border-radius: 16px;
}

.cta--cichy {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(29, 78, 216, 0.18);
  box-shadow: none;
}

.cta--cichy:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: none;
}

.cta__kbd,
.cta__meta {
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
}

/* Klawisze podpowiedzi (Enter, A/B/C, T/N) */
kbd.klawisz,
.pytanie__enter kbd,
.podpowiedz kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid rgba(29, 78, 216, 0.25);
  background: var(--surface);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(29, 78, 216, 0.15);
}

.klawisz--duzy {
  min-width: 34px;
  height: 34px;
  font-size: 15px;
  border-radius: 10px;
}

/* chip — mała pigułka akcji (szablony, wstaw, dodaj) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.18);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}

.chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.chip--akcent {
  background: var(--blue-tint);
  border-color: rgba(29, 78, 216, 0.25);
  color: var(--blue);
}

.chip--cichy {
  cursor: default;
  color: var(--ink-muted);
}

/* ----------------------------------------------------------------- start -- */

.start {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 16px;
}

.start__tytul {
  margin-top: 16px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.start__lead {
  max-width: 640px;
  margin: 20px auto 0;
  color: var(--ink-soft);
  font-size: 17px;
}

.start__czesci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
  text-align: left;
}

.kafel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.kafel:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-lg);
}

.kafel__numer {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--cta);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.kafel__rola {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.kafel__tytul {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
}

.kafel__opis {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.kafel__stopka {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.start__akcje {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* ----------------------------------------------------------------- wstęp -- */

/*
  Ekrany wstępu (część / dział) — wyśrodkowane i większe niż pytania:
  to „karta tytułowa” rozdziału, ma wypełnić pusty ekran, nie tulić się
  do lewej krawędzi.
*/
.wstep {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

/* Znak wodny — numer działu w tle tytułu, ledwie widoczny. */
.wstep__znak {
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  font-size: clamp(220px, 28vw, 360px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(29, 78, 216, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Pasek akcji zostaje `fixed` w rogu — wyłączony z tej reguły. */
.wstep > :not(.wstep__znak):not(.pytanie__akcje) {
  position: relative;
  z-index: 1;
}

/* Numer działu i nadtytuł części stoją w jednym rzędzie, z wyraźnym odstępem. */
.wstep__numer {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 76px;
  height: 76px;
  margin: 0 20px 22px 0;
  border-radius: 22px;
  background: var(--cta);
  color: #fff;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.02em;
  box-shadow: 0 14px 30px -12px rgba(29, 78, 216, 0.6);
}

.wstep__numer + .nadtytul {
  vertical-align: middle;
  margin-bottom: 22px;
  font-size: 13px;
}

.wstep__tytul {
  margin-top: 12px;
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 850;
  letter-spacing: -0.035em;
}

.wstep--czesc .wstep__tytul {
  font-size: clamp(40px, 5vw, 64px);
}

.wstep__opis {
  margin: 22px auto 0;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1.5;
}

.wstep__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}

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

.wstep__lista b {
  min-width: 30px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.wstep__etykieta {
  margin-top: 34px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

/* Poddziały jako kafelki — klik przenosi do pierwszego pytania poddziału. */
.poddzial-kafel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 190px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.poddzial-kafel:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: var(--glass-shadow-lg);
}

.poddzial-kafel b {
  font-size: 15px;
  font-weight: 750;
}

.poddzial-kafel small {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}

.wskazowka {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 16px;
  margin-top: 30px;
  padding: 18px 22px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--ink-soft);
  font-size: 14.5px;
}

.wskazowka svg {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 9px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--blue);
}

.wskazowka b {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

/* --------------------------------------------------------------- pytanie -- */

.pytanie {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.pytanie--szerokie {
  max-width: 1360px;
}

.pytanie--z-ilustracja {
  max-width: 1360px;
}

.pytanie--modele {
  max-width: none;
}

.pytanie__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.pytanie__numer {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--cta);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.pytanie__poddzial .sciezka__sep {
  margin: 0 6px;
}

.pytanie__tresc {
  margin-top: 16px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.pytanie__gwiazdka {
  margin-left: 6px;
  color: var(--blue);
}

.pytanie__opis {
  margin-top: 12px;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: 17px;
}

.pytanie__punkty {
  margin: 14px 0 0;
  padding-left: 20px;
  max-width: 78ch;
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.pytanie__widzet {
  margin-top: 30px;
}

/*
  Akcje ekranu („Wstecz · Dalej · albo Enter”) siedzą w prawym dolnym rogu,
  w miejscu dawnych strzałek — zawsze widoczne, bez przewijania do końca
  długiego ekranu. Komunikat błędu wyskakuje nad nimi.
*/
.pytanie__akcje {
  position: fixed;
  right: 36px;
  bottom: 28px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(1.5);
}

.pytanie__akcje .cta {
  order: 2;
}

.pytanie__enter {
  order: 3;
  font-size: 13px;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}

.wstecz {
  order: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-muted);
  font-size: 13.5px;
  font-weight: 700;
}

.wstecz:hover {
  color: var(--blue);
  background: var(--blue-tint);
}

.pytanie__blad {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bad);
  white-space: nowrap;
  box-shadow: var(--glass-shadow);
}

.pytanie__blad:empty {
  display: none;
}

.podpowiedz {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- pasek wpisywania --- */

/*
  Typebar: duże pole bez ramki dookoła — tylko linia na dole, jak
  w formularzach jedno-pytaniowych. Fokus rozświetla linię błękitem.
*/
.typebar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 2px solid var(--blue-line);
  transition: border-color 0.2s var(--ease);
}

.typebar:focus-within {
  border-color: var(--blue);
}

.typebar__prefiks {
  padding: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-muted);
}

.typebar__pole {
  flex: 1;
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  outline: none;
}

.typebar__pole::placeholder {
  color: rgba(82, 101, 129, 0.45);
}

.typebar__pole--obszar {
  resize: none;
  line-height: 1.4;
  min-height: 3.2em;
  font-size: 24px;
}

.typebar__dodaj {
  margin-bottom: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(29, 78, 216, 0.25);
  background: var(--blue-tint);
  color: var(--blue);
  font-weight: 700;
}

.zalecane {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.18);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--ink-soft);
}

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

/* --- TAK / NIE --- */

.taknie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 560px;
}

.taknie__kafel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-radius: var(--r);
  border: 1px solid rgba(29, 78, 216, 0.18);
  background: var(--surface);
  font-size: 22px;
  font-weight: 700;
  text-align: left;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.15s var(--ease),
    background-color 0.22s var(--ease);
}

.taknie__kafel:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.taknie__kafel[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-tint);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16);
}

.taknie__ptaszek,
.opcja__ptaszek {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

[aria-pressed="true"] > .taknie__ptaszek,
[aria-pressed="true"] > .opcja__ptaszek {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s var(--ease) 0.05s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

/* --- opcje: karty i pigułki --- */

.opcje {
  display: grid;
  gap: 12px;
}

.opcje--karty {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.opcje--pigulki {
  display: flex;
  flex-wrap: wrap;
}

.opcja {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px 16px 16px;
  border-radius: var(--r);
  border: 1px solid rgba(29, 78, 216, 0.18);
  background: var(--surface);
  text-align: left;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.15s var(--ease),
    background-color 0.22s var(--ease);
}

.opcje--pigulki .opcja {
  padding: 12px 40px 12px 12px;
  border-radius: 16px;
}

.opcja:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.opcja[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-tint);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16);
}

.opcja__tresc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.opcja__tresc b {
  font-size: 16px;
  font-weight: 700;
}

.opcja__tresc small {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.loga {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.logo-marki {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.logo-marki svg {
  width: 22px;
  height: 22px;
}

/* --- modele 5.1: trzy kafle z animacją --- */

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

.model {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.model:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-lg);
}

.model[aria-pressed="true"] {
  border-color: rgba(29, 78, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18), var(--glass-shadow-lg);
}

.model__scena {
  position: relative;
  aspect-ratio: 360 / 215;
  overflow: hidden;
  background:
    radial-gradient(360px 200px at 70% 0%, rgba(14, 165, 233, 0.16), transparent 60%),
    linear-gradient(180deg, #fff, var(--blue-tint));
  border-bottom: 1px solid rgba(29, 78, 216, 0.1);
}

.model__dol {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

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

.model__znacznik {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(29, 78, 216, 0.2);
  color: var(--ink-muted);
  background: var(--surface);
}

.model__znacznik[data-znacznik="rekomendowany"] {
  color: #fff;
  border-color: transparent;
  background: var(--cta);
}

.model__tytul {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 800;
}

.model__opis {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.model__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(29, 78, 216, 0.25);
  background: var(--surface);
  color: var(--blue);
  font-size: 14.5px;
  font-weight: 700;
  transform: translateY(0);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

/*
  CTA wszystkich trzech kafli w JEDNEJ linii: kafle są równej wysokości
  (siatka), a przycisk dociska się do dołu (`margin-top: auto` w .model__cta)
  — najdłuższy opis (model A) wyznacza poziom, krótsze dostają nad sobą
  powietrze. Wcześniejsze `margin-top: 20px` psuło wyrównanie — nie przywracać.
*/
.model__opis {
  margin-bottom: 20px;
}

.model:hover .model__cta,
.model[aria-pressed="true"] .model__cta {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
}

/* --- scenka modelu (górna część kafla) --- */

/*
  Aktorzy w rzędzie, między nimi wiązki połączenia. Cała choreografia to
  keyframes w procentach cyklu (`--cykl` na scenie), więc każdy element ma
  własną „partyturę”, a wszystkie grają w tym samym takcie. Żadnego JS —
  w dławionej karcie scenka po prostu stoi.
*/
.scenka {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 26px 22px;
}

.aktor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  flex-shrink: 0;
}

.aktor__kolo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(29, 78, 216, 0.16);
  box-shadow: 0 10px 24px -12px rgba(29, 78, 216, 0.45), inset 0 1px 0 #fff;
}

.aktor__podpis {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* fale dzwonka — pacjent dzwoni bez przerwy */
.fala {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid var(--blue-sky);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: fala 1.8s ease-out infinite;
}

.fala--2 {
  animation-delay: 0.6s;
}

.fala--3 {
  animation-delay: 1.2s;
}

@keyframes fala {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.1);
    opacity: 0;
  }
}

.aktor--pacjent .aktor__kolo {
  animation: dzwoni 1.8s ease-in-out infinite;
}

@keyframes dzwoni {
  0%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(9deg);
  }
  30% {
    transform: rotate(-6deg);
  }
  40% {
    transform: rotate(0);
  }
}

/* Asystent — gradient CTA, aura i korektor głosu */
.aktor--ai .aktor__kolo {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 30px -12px rgba(29, 78, 216, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.aura {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.55), rgba(29, 78, 216, 0) 70%);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

.eq {
  position: absolute;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
}

.eq i {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #fff;
  animation: eq 0.9s ease-in-out infinite;
}

.eq i:nth-child(2) {
  animation-delay: 0.15s;
}

.eq i:nth-child(3) {
  animation-delay: 0.3s;
}

.eq i:nth-child(4) {
  animation-delay: 0.45s;
}

.eq i:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes eq {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 18px;
  }
}

/* Gdy Asystent mówi, ikona ustępuje korektorowi. */
.aktor--ai.aktor--mowi .aktor__kolo svg,
.aktor--ai[data-mowi="tak"] .aktor__kolo svg {
  opacity: 0;
}

/* etykiety stanów pod aktorem */
.etykieta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px) scale(0.85);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.16);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  box-shadow: 0 8px 20px -10px rgba(29, 78, 216, 0.4);
}

.etykieta--ok {
  color: var(--blue);
}

.etykieta--zajeta {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.etykieta--wizyta {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
  top: auto;
  bottom: 100%;
  transform: translate(-50%, -6px) scale(0.85);
}

.etykieta--cicho {
  opacity: 1;
  transform: translate(-50%, 4px);
  color: var(--ink-muted);
  box-shadow: none;
}

/* wiązka połączenia */
.wiazka {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  margin: 0 8px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(29, 78, 216, 0.28) 0 6px, transparent 6px 12px);
  overflow: visible;
}

.wiazka__impuls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 46px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0), var(--blue-sky), var(--blue));
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.7);
  transform: translate(-100%, -50%);
  opacity: 0;
}

/* ---- partytura A (9 s): odebrała · zajęta · Asystent przejmuje ---- */

@keyframes a-impuls-1 {
  0%,
  6% {
    left: 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  18% {
    left: 100%;
    opacity: 1;
  }
  19%,
  44% {
    left: 0;
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  56% {
    left: 100%;
    opacity: 1;
  }
  57%,
  100% {
    left: 0;
    opacity: 0;
  }
}

@keyframes a-odebrala {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85);
  }
  21%,
  40% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1);
  }
  43%,
  100% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85);
  }
}

@keyframes a-zajeta {
  0%,
  56% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85);
  }
  59%,
  94% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1);
  }
  97%,
  100% {
    opacity: 0;
  }
}

@keyframes a-recepcja-kolo {
  0%,
  56% {
    filter: none;
    opacity: 1;
  }
  59%,
  94% {
    filter: grayscale(1);
    opacity: 0.55;
  }
  97%,
  100% {
    filter: none;
    opacity: 1;
  }
}

@keyframes a-impuls-2 {
  0%,
  60% {
    left: 0;
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  72% {
    left: 100%;
    opacity: 1;
  }
  73%,
  100% {
    left: 0;
    opacity: 0;
  }
}

@keyframes a-aura {
  0%,
  72% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  76%,
  94% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.3);
  }
}

@keyframes a-eq {
  0%,
  73% {
    opacity: 0;
  }
  76%,
  95% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}

@keyframes a-ikona-ai {
  0%,
  73% {
    opacity: 1;
  }
  76%,
  95% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}

@keyframes a-wizyta {
  0%,
  84% {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.85);
  }
  87%,
  97% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  100% {
    opacity: 0;
  }
}

.scenka--a .wiazka--1 .wiazka__impuls {
  animation: a-impuls-1 var(--cykl) linear infinite;
}

.scenka--a .wiazka--2 .wiazka__impuls {
  animation: a-impuls-2 var(--cykl) linear infinite;
}

.scenka--a .etykieta--ok {
  animation: a-odebrala var(--cykl) var(--ease) infinite;
}

.scenka--a .etykieta--zajeta {
  animation: a-zajeta var(--cykl) var(--ease) infinite;
}

.scenka--a .aktor--recepcja .aktor__kolo {
  animation: a-recepcja-kolo var(--cykl) linear infinite;
}

.scenka--a .aura {
  animation: a-aura var(--cykl) ease-out infinite;
}

.scenka--a .eq {
  animation: a-eq var(--cykl) linear infinite;
}

.scenka--a .aktor--ai .aktor__kolo svg {
  animation: a-ikona-ai var(--cykl) linear infinite;
}

.scenka--a .etykieta--wizyta {
  animation: a-wizyta var(--cykl) var(--ease) infinite;
}

/* ---- partytura B (6 s): każde połączenie wprost do Asystenta ---- */

.scenka--b {
  padding-top: 40px;
}

.scenka--b .aktor--cicho {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) scale(0.72);
  opacity: 0.55;
}

.scenka--b .aktor--cicho .aktor__kolo {
  box-shadow: none;
}

@keyframes b-impuls {
  0%,
  4% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    left: 100%;
    opacity: 1;
  }
  25%,
  48% {
    left: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  68% {
    left: 100%;
    opacity: 1;
  }
  69%,
  100% {
    left: 0;
    opacity: 0;
  }
}

@keyframes b-aura {
  0%,
  24% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  28%,
  44% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.1);
  }
  48%,
  68% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  72%,
  92% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes b-eq {
  0%,
  25% {
    opacity: 0;
  }
  28%,
  44% {
    opacity: 1;
  }
  47%,
  69% {
    opacity: 0;
  }
  72%,
  92% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes b-ikona-ai {
  0%,
  25% {
    opacity: 1;
  }
  28%,
  44% {
    opacity: 0;
  }
  47%,
  69% {
    opacity: 1;
  }
  72%,
  92% {
    opacity: 0;
  }
  95%,
  100% {
    opacity: 1;
  }
}

@keyframes b-wizyta {
  0%,
  34% {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.85);
  }
  37%,
  46% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  49%,
  80% {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.85);
  }
  83%,
  95% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  100% {
    opacity: 0;
  }
}

.scenka--b .wiazka__impuls {
  animation: b-impuls var(--cykl) linear infinite;
}

.scenka--b .aura {
  animation: b-aura var(--cykl) ease-out infinite;
}

.scenka--b .eq {
  animation: b-eq var(--cykl) linear infinite;
}

.scenka--b .aktor--ai .aktor__kolo svg {
  animation: b-ikona-ai var(--cykl) linear infinite;
}

.scenka--b .etykieta--wizyta {
  animation: b-wizyta var(--cykl) var(--ease) infinite;
}

/* ---- partytura C (10 s): oś dnia, w oknie harmonogramu odbiera Asystent ---- */

.scenka--c {
  padding-bottom: 58px;
}

.cel {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}

.cel .aktor {
  position: absolute;
  inset: 0;
}

@keyframes c-recepcja {
  0%,
  66% {
    opacity: 1;
    transform: translateY(0);
  }
  70%,
  96% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes c-ai {
  0%,
  66% {
    opacity: 0;
    transform: translateY(8px);
  }
  70%,
  96% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

.scenka--c .cel .aktor--recepcja {
  animation: c-recepcja var(--cykl) var(--ease) infinite;
}

.scenka--c .cel .aktor--ai {
  animation: c-ai var(--cykl) var(--ease) infinite;
}

@keyframes c-impuls {
  0%,
  8% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    left: 100%;
    opacity: 1;
  }
  21%,
  38% {
    left: 0;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    left: 100%;
    opacity: 1;
  }
  51%,
  72% {
    left: 0;
    opacity: 0;
  }
  74% {
    opacity: 1;
  }
  84% {
    left: 100%;
    opacity: 1;
  }
  85%,
  100% {
    left: 0;
    opacity: 0;
  }
}

@keyframes c-odebrala {
  0%,
  20% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85);
  }
  23%,
  34% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1);
  }
  37%,
  50% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85);
  }
  53%,
  62% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1);
  }
  65%,
  100% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85);
  }
}

@keyframes c-aura {
  0%,
  84% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  87%,
  96% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes c-eq {
  0%,
  85% {
    opacity: 0;
  }
  88%,
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes c-ikona-ai {
  0%,
  85% {
    opacity: 1;
  }
  88%,
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes c-wizyta {
  0%,
  90% {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.85);
  }
  93%,
  99% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  100% {
    opacity: 0;
  }
}

.scenka--c .wiazka__impuls {
  animation: c-impuls var(--cykl) linear infinite;
}

.scenka--c .etykieta--ok {
  animation: c-odebrala var(--cykl) var(--ease) infinite;
}

.scenka--c .aura {
  animation: c-aura var(--cykl) ease-out infinite;
}

.scenka--c .eq {
  animation: c-eq var(--cykl) linear infinite;
}

.scenka--c .aktor--ai .aktor__kolo svg {
  animation: c-ikona-ai var(--cykl) linear infinite;
}

.scenka--c .etykieta--wizyta {
  animation: c-wizyta var(--cykl) var(--ease) infinite;
}

/* oś dnia */
.doba {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 14px;
}

.doba__tor {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--blue-tint-2);
}

.doba__okno {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 71.4%;
  right: 0;
  border-radius: 999px;
  background: var(--cta);
  opacity: 0.85;
}

.doba__znacznik {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue);
  border: 2px solid var(--blue);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.6);
  animation: c-znacznik var(--cykl) linear infinite;
}

@keyframes c-znacznik {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

.doba__godziny {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.doba__godziny i {
  font-style: normal;
}

.doba__etykieta {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.16);
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: 0;
}

.doba__etykieta--wieczor {
  left: auto;
  right: 0;
  background: var(--cta);
  color: #fff;
  border-color: transparent;
}

@keyframes c-etykieta-dzien {
  0%,
  66% {
    opacity: 1;
  }
  70%,
  96% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes c-etykieta-wieczor {
  0%,
  66% {
    opacity: 0;
  }
  70%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.scenka--c .doba__etykieta--dzien {
  animation: c-etykieta-dzien var(--cykl) linear infinite;
}

.scenka--c .doba__etykieta--wieczor {
  animation: c-etykieta-wieczor var(--cykl) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scenka *,
  .scenka *::before {
    animation: none !important;
  }

  .scenka .eq,
  .scenka .etykieta--ok {
    opacity: 1;
  }
}

/* --- dopracowanie: wejścia elementów, głębia szkła --- */

/* Elementy ekranu wjeżdżają jeden po drugim — jak w platformie (beaty). */
@keyframes wejscie {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pytanie > *,
.wstep > *,
.start > * {
  animation: wejscie 0.55s var(--ease) both;
}

.pytanie > :nth-child(2),
.wstep > :nth-child(2),
.start > :nth-child(2) {
  animation-delay: 0.06s;
}

.pytanie > :nth-child(3),
.wstep > :nth-child(3),
.start > :nth-child(3) {
  animation-delay: 0.12s;
}

.pytanie > :nth-child(4),
.wstep > :nth-child(4),
.start > :nth-child(4) {
  animation-delay: 0.18s;
}

.pytanie > :nth-child(5),
.wstep > :nth-child(5),
.start > :nth-child(5) {
  animation-delay: 0.24s;
}

.pytanie > :nth-child(n + 6),
.wstep > :nth-child(n + 6),
.start > :nth-child(n + 6) {
  animation-delay: 0.3s;
}

.modele .model:nth-child(1) {
  animation: wejscie 0.6s var(--ease) 0.15s both;
}

.modele .model:nth-child(2) {
  animation: wejscie 0.6s var(--ease) 0.27s both;
}

.modele .model:nth-child(3) {
  animation: wejscie 0.6s var(--ease) 0.39s both;
}

@media (prefers-reduced-motion: reduce) {
  .pytanie > *,
  .wstep > *,
  .start > *,
  .modele .model {
    animation: none;
  }
}

/* --- tydzień --- */

.tydzien {
  border-radius: var(--r);
  border: 1px solid var(--blue-line);
  background: var(--surface);
  overflow: hidden;
}

.tydzien__dzien,
.tydzien__os {
  display: grid;
  grid-template-columns: 170px 240px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--blue-line);
}

.tydzien__os {
  padding: 8px 16px 4px;
  border-top: 0;
  background: var(--blue-tint);
}

.tydzien__os-tor {
  position: relative;
  height: 14px;
}

.tydzien__os-godzina {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
}

.tydzien__os-godzina:first-child {
  transform: none;
}

.tydzien__os-godzina:last-child {
  transform: translateX(-100%);
}

.tydzien__dzien[data-otwarte="nie"] {
  background: rgba(234, 242, 255, 0.5);
}

.tydzien__nazwa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.tydzien__ptaszek {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.tydzien__krotka {
  display: none;
}

.tydzien__dzien[data-otwarte="nie"] .tydzien__nazwa {
  color: var(--ink-muted);
}

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

.tydzien__dzien[data-otwarte="nie"] .tydzien__godziny {
  visibility: hidden;
}

.tydzien__do {
  color: var(--ink-muted);
}

.tydzien__linia {
  position: relative;
  height: 30px;
  border-radius: 10px;
  background-color: rgba(29, 78, 216, 0.04);
  background-image: repeating-linear-gradient(90deg, rgba(29, 78, 216, 0.14) 0 1px, transparent 1px calc(100% / 8));
  display: flex;
  align-items: center;
}

.tydzien__pasek {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cta);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: left 0.25s var(--ease), width 0.25s var(--ease);
}

.tydzien__pasek i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}

.tydzien__wolne {
  padding-left: 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-muted);
}

.tydzien__akcje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--blue-line);
  background: var(--blue-tint);
}

.tydzien__akcje-etykieta {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- pola wewnątrz kart / tabel / tygodnia --- */

.pole {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--blue-line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.pole:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}

.pole:disabled {
  color: var(--ink-muted);
  background: var(--blue-tint);
}

.pole--czas {
  width: 118px;
  padding: 7px 10px;
  font-variant-numeric: tabular-nums;
}

.pole--obszar {
  resize: vertical;
  min-height: 60px;
}

/* --- chipy (listy jednopolowe) --- */

.chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chipy:empty {
  display: none;
}

.chipy__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--blue-tint);
  border: 1px solid rgba(29, 78, 216, 0.2);
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.chipy__usun {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1;
}

.chipy__usun:hover {
  color: var(--bad);
}

/* --- karty (listy wielopolowe) --- */

.karty {
  display: grid;
  gap: 14px;
}

.karta {
  padding: 18px 22px 22px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.karta__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.karta__tytul {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.karta__pole + .karta__pole {
  margin-top: 14px;
}

.karta__etykieta {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
}

.usun {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-muted);
}

.usun:hover {
  color: var(--bad);
  background: rgba(220, 38, 38, 0.08);
}

.lista__akcje {
  margin-top: 14px;
}

/* Ostrzeżenie pod grafikiem lekarza — dni poza godzinami kliniki. */
.ostrzezenie {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.05);
  font-size: 13.5px;
  color: var(--ink);
}

.ostrzezenie b {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bad);
}

.ostrzezenie ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
}

/* --- tabela (cennik) --- */

.tabela {
  border-radius: var(--r);
  border: 1px solid var(--blue-line);
  background: var(--surface);
  overflow: hidden;
}

.tabela__naglowek,
.tabela__wiersz {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) 136px minmax(0, 1.6fr) 34px;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
}

.tabela__naglowek {
  align-items: end;
  background: var(--blue-tint);
  border-bottom: 1px solid var(--blue-line);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tabela__kolumna {
  padding-left: 15px;
}

.tabela__wiersz + .tabela__wiersz {
  border-top: 1px solid var(--blue-line);
}

.tabela__komorka {
  min-width: 0;
}

.tabela__komorka--akcje {
  display: flex;
  justify-content: flex-end;
}

.tabela__etykieta {
  display: none;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tabela__brak {
  display: block;
  padding: 8px 10px;
  color: var(--blue-line);
}

.segment {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--blue-line);
  background: var(--blue-tint);
}

.segment__opcja {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.segment__opcja[aria-pressed="true"] {
  background: var(--cta);
  color: #fff;
}

/* --- podpis --- */

.podpis {
  max-width: 720px;
  border-radius: var(--r);
  border: 1px dashed rgba(29, 78, 216, 0.4);
  background: var(--surface);
  overflow: hidden;
}

.podpis__plotno {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
  background-image: linear-gradient(to top, transparent 44px, var(--blue-line) 44px, var(--blue-line) 45px, transparent 45px);
}

.podpis__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-top: 1px solid var(--blue-line);
  background: var(--blue-tint);
  font-size: 13px;
  color: var(--ink-muted);
}

/* ------------------------------------------------- wszystkie odpowiedzi -- */

.pods {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.pods__tytul {
  margin-top: 10px;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.pods__lead {
  margin-top: 12px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 16px;
}

.pods__druk {
  display: none;
}

.pods__akcje {
  position: sticky;
  top: 84px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px);
}

.pods__status {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pods__status[data-typ="ok"] {
  color: var(--good);
}

.pods__status[data-typ="blad"] {
  color: var(--bad);
}

.pods__braki,
.pods__komplet {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.7;
}

.pods__braki {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.pods__komplet {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: var(--good);
  font-weight: 650;
}

.pods__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pods__czesc {
  margin-top: 40px;
}

.pods__czesc-tytul {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 12px;
}

.pods__dzial {
  padding: 18px 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.pods__dzial + .pods__dzial {
  margin-top: 14px;
}

.pods__dzial-belka {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pods__dzial-numer {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--cta);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.pods__dzial-tytul {
  font-size: 19px;
  font-weight: 800;
}

.pods__poddzial {
  margin-top: 16px;
}

.pods__poddzial-tytul {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pods__lista {
  margin: 6px 0 0;
}

.pods__wiersz {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--blue-line);
  font-size: 14.5px;
}

.pods__wiersz dt {
  color: var(--ink-soft);
  font-weight: 600;
}

.pods__wiersz dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pods__popraw {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  background: var(--surface);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.pods__brak {
  color: var(--bad);
  font-weight: 700;
}

.pods__pusto {
  color: var(--blue-line);
}

.pods__taknie {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--blue-tint);
  color: var(--blue);
}

.pods__taknie[data-wartosc="nie"] {
  color: var(--ink-muted);
}

.pods__opcja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue-tint);
  font-weight: 650;
}

.pods__opcja .logo-marki,
.pods__opcja .logo-marki svg {
  width: 16px;
  height: 16px;
}

.pods__wielowiersz {
  white-space: pre-wrap;
}

.pods__tydzien {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.pods__tydzien li {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blue-tint);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.pods__tydzien-wolne {
  color: var(--ink-muted);
  font-style: italic;
}

.pods__pozycje {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.pods__podpole {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 8px;
  font-size: 13.5px;
}

.pods__podetykieta {
  color: var(--ink-muted);
}

.pods__przewijanie {
  overflow-x: auto;
}

.pods__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pods__tabela th,
.pods__tabela td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--blue-line);
  text-align: left;
  vertical-align: top;
}

.pods__tabela th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--blue-tint);
}

.pods__podpis {
  display: block;
  max-width: 320px;
  height: auto;
  border: 1px solid var(--blue-line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

/* -------------------------------------------------------- ilustracje -- */

/*
  Scenka po prawej stronie pytania (ilustracje.js). Jedna karta szkła
  o stałych proporcjach; w środku klocki: telefon z dymkami, mapa,
  wizytówka, zegar… Ruch to CSS keyframes — nic od niego nie zależy.
  Elementy `data-zywy` pokazują to, co klinika właśnie wpisuje.
*/
.pytanie__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 48px;
  align-items: center;
}

.pytanie__ilustracja {
  animation: wejscie 0.6s var(--ease) 0.2s both;
}

.il {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.1;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(420px 260px at 80% 0%, rgba(14, 165, 233, 0.18), transparent 62%),
    radial-gradient(300px 200px at 0% 100%, rgba(29, 78, 216, 0.08), transparent 60%),
    radial-gradient(rgba(29, 78, 216, 0.09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fff, var(--blue-tint));
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--ink);
}

/* Cała scena ledwo zauważalnie się unosi — jak modele 3D w platformie. */
.il > * {
  animation: il-unosi 7s ease-in-out infinite;
}

.il__mapa,
.il__fale {
  animation: none !important;
}

@keyframes il-unosi {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

.il__zywy {
  color: var(--blue);
  font-weight: 700;
}

.il__zywy--mocny {
  color: inherit;
  font-weight: 800;
}

/* --- telefon --- */
.il__telefon {
  position: relative;
  width: 250px;
  margin: 0 auto;
  border-radius: 30px;
  border: 7px solid var(--ink);
  background: linear-gradient(180deg, #fff, #f6f9fe);
  box-shadow: 0 30px 60px -22px rgba(3, 7, 18, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.il__telefon-notch {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 78px;
  height: 20px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
  z-index: 2;
}

.il__telefon-notch::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1e3a8a;
  box-shadow: inset 0 0 0 2px #0b1220;
}

.il__telefon-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 4px;
  font-size: 11px;
  font-weight: 700;
}

.il__telefon-status i {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid var(--ink);
  background: linear-gradient(90deg, var(--ink) 70%, transparent 70%);
}

.il__telefon-ekran {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 18px;
  min-height: 190px;
}

.il__telefon--niski .il__telefon-ekran {
  min-height: 150px;
}

.il__naglowek {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--blue-line);
  font-size: 12px;
}

.il__naglowek b {
  grid-column: 2;
}

.il__naglowek small {
  grid-column: 2;
  color: var(--ink-muted);
  font-size: 10.5px;
}

.il__naglowek .il__awatar {
  grid-row: 1 / 3;
}

.il__awatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--ink);
  flex-shrink: 0;
}

.il__awatar--ai {
  background: var(--cta);
  color: #fff;
}

.il__awatar--duzy {
  width: 52px;
  height: 52px;
}

.il__dymek {
  position: relative;
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: il-dymek 0.45s var(--ease) forwards;
  box-shadow: 0 6px 16px -10px rgba(3, 7, 18, 0.25);
}

/*
  Ogonek dymka jak w iMessage: część samego dymka, nie doklejony trójkąt
  (właściciel: „niech dymek ma sam w sobie taką strzałeczkę jak w iOS”).
  Pseudo-element nachodzi na dolny róg dymka i ma kształt z clip-path:
  prosto w dół wzdłuż boku, wygięcie na zewnątrz i szpic przy dolnej
  krawędzi — wklęsła krawędź zewnętrzna jak w Apple. Wariant z klipowanym
  trójkątem uchylony.
*/
.il__dymek--bot::before,
.il__dymek--user::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 18px;
  pointer-events: none;
}

.il__dymek--bot::before {
  left: -7px;
  background: var(--blue-tint);
  clip-path: path("M14 0 L7 0 C7 8 5 13.5 0 18 C6 18 11 17 14 14 Z");
}

.il__dymek--user::before {
  right: -7px;
  background: var(--blue);
  clip-path: path("M0 0 L7 0 C7 8 9 13.5 14 18 C8 18 3 17 0 14 Z");
}

.il__dymek--bot {
  align-self: flex-start;
  background: var(--blue-tint);
  border-bottom-left-radius: 4px;
}

.il__dymek--user {
  align-self: flex-end;
  background: var(--cta);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/*
  Rozmowa zapętlona (cykl 10 s): dymki wchodzą jeden po drugim, stoją,
  pod koniec cyklu wszystkie gasną i rozmowa gra od nowa. Każdy dymek ma
  własną partyturę, bo wspólny keyframe z opóźnieniem gasiłby je nierówno.
*/
.il__telefon .il__dymek--1 {
  animation: il-rozmowa-1 10s var(--ease) infinite;
}

.il__telefon .il__dymek--2 {
  animation: il-rozmowa-2 10s var(--ease) infinite;
}

.il__telefon .il__dymek--3 {
  animation: il-rozmowa-3 10s var(--ease) infinite;
}

.il__telefon .il__znak-ok {
  animation: il-rozmowa-2 10s var(--ease) infinite;
}

@keyframes il-rozmowa-1 {
  0%,
  12% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  16%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes il-rozmowa-2 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  34%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes il-rozmowa-3 {
  0%,
  52% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  56%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* „pisze…” — trzy kropki widoczne tuż przed dymkiem bota */
.il__pisze {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 9px 12px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: var(--blue-tint);
  opacity: 0;
  margin-bottom: -38px;
}

.il__pisze i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-muted);
  animation: il-kropka-pisze 0.9s ease-in-out infinite;
}

.il__pisze i:nth-child(2) {
  animation-delay: 0.15s;
}

.il__pisze i:nth-child(3) {
  animation-delay: 0.3s;
}

.il__pisze--1 {
  animation: il-pisze-1 10s linear infinite;
}

.il__pisze--3 {
  animation: il-pisze-3 10s linear infinite;
}

@keyframes il-pisze-1 {
  0%,
  3% {
    opacity: 0;
  }
  5%,
  11% {
    opacity: 1;
  }
  12%,
  100% {
    opacity: 0;
  }
}

@keyframes il-pisze-3 {
  0%,
  42% {
    opacity: 0;
  }
  44%,
  51% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}

@keyframes il-kropka-pisze {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.il__dymek--1 {
  animation-delay: 0.3s;
}

.il__dymek--2 {
  animation-delay: 1.3s;
}

.il__dymek--3 {
  animation-delay: 2.3s;
}

.il__dymek--luzny {
  max-width: 100%;
  align-self: stretch;
}

.il__dymek--maly {
  padding: 6px 10px;
  font-size: 12px;
}

@keyframes il-dymek {
  to {
    opacity: 1;
    transform: none;
  }
}

.il__znak-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--good);
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) forwards;
}

/* --- mapa --- */
.il__mapa {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #eef4fb, #e2ecfa);
}

.il__droga {
  position: absolute;
  background: #fff;
  border-radius: 999px;
}

.il__droga--1 {
  left: 0;
  right: 0;
  top: 46%;
  height: 12px;
}

.il__droga--2 {
  top: 0;
  bottom: 0;
  left: 32%;
  width: 9px;
}

.il__droga--3 {
  left: -10%;
  right: -10%;
  top: 72%;
  height: 7px;
  transform: rotate(-9deg);
}

.il__kwartal {
  position: absolute;
  border-radius: 10px;
  background: rgba(29, 78, 216, 0.06);
}

.il__kwartal--1 {
  left: 4%;
  top: 8%;
  width: 22%;
  height: 30%;
}

.il__kwartal--2 {
  left: 40%;
  top: 6%;
  width: 20%;
  height: 32%;
}

.il__kwartal--3 {
  left: 4%;
  top: 56%;
  width: 22%;
  height: 34%;
}

.il__kwartal--4 {
  left: 40%;
  top: 58%;
  width: 34%;
  height: 30%;
}

.il__droga--4 {
  top: 0;
  bottom: 0;
  left: 70%;
  width: 6px;
}

.il__park {
  position: absolute;
  right: 6%;
  top: 8%;
  width: 22%;
  height: 30%;
  border-radius: 16px;
  background: rgba(22, 163, 74, 0.16);
}

.il__park b {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.35);
}

.il__park b:nth-child(1) {
  left: 18%;
  top: 22%;
}

.il__park b:nth-child(2) {
  left: 55%;
  top: 40%;
}

.il__park b:nth-child(3) {
  left: 30%;
  top: 65%;
}

/* Pierścień pulsujący u stóp pinezki. */
.il__pin-pierscien {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid var(--blue);
  transform: translate(-50%, -50%);
  animation: il-pierscien 2.2s ease-out infinite;
}

@keyframes il-pierscien {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

.il__pin {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -100%);
  color: var(--blue);
  animation: il-pin 3.2s var(--ease) infinite;
}

.il__pin svg {
  fill: #fff;
  filter: drop-shadow(0 8px 14px rgba(29, 78, 216, 0.4));
}

.il__pin-cien {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 22px;
  height: 8px;
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.18);
  transform: translateX(-50%);
  animation: il-pin-cien 3.2s var(--ease) infinite;
}

@keyframes il-pin {
  0%,
  100% {
    transform: translate(-50%, -100%);
  }
  50% {
    transform: translate(-50%, -122%);
  }
}

@keyframes il-pin-cien {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) scale(0.7);
    opacity: 0.3;
  }
}

.il__adres {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12.5px;
  white-space: nowrap;
  text-align: center;
}

.il__adres b {
  font-size: 13.5px;
}

.il__adres span {
  color: var(--ink-soft);
}

/* --- połączenie przychodzące --- */
.il--dzwonek {
  align-items: center;
}

.il__fale {
  position: absolute;
  left: 50%;
  top: 50%;
}

.il__fale i {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  border: 2px solid var(--blue-sky);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: il-fala 2.4s ease-out infinite;
}

.il__fale i:nth-child(2) {
  animation-delay: 0.8s;
}

.il__fale i:nth-child(3) {
  animation-delay: 1.6s;
}

@keyframes il-fala {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

.il__telefon--polaczenie {
  position: relative;
  width: 210px;
  animation: il-wibruje 2.4s ease-in-out infinite;
}

@keyframes il-wibruje {
  0%,
  20%,
  100% {
    transform: rotate(0);
  }
  4% {
    transform: rotate(-2deg);
  }
  8% {
    transform: rotate(2deg);
  }
  12% {
    transform: rotate(-1.5deg);
  }
  16% {
    transform: rotate(1.5deg);
  }
}

.il__telefon-ekran--polaczenie {
  align-items: center;
  text-align: center;
  padding-top: 18px;
}

.il__telefon-ekran--polaczenie small {
  font-size: 11px;
  color: var(--ink-muted);
}

.il__telefon-ekran--polaczenie b {
  font-size: 15px;
}

.il__telefon-ekran--polaczenie > span {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.il__odbierz {
  display: flex;
  gap: 40px;
  margin-top: 18px;
}

.il__odbierz i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.il__odbierz-nie {
  background: rgba(220, 38, 38, 0.15);
}

.il__odbierz-tak {
  background: var(--good);
  color: #fff;
  animation: il-odbierz 1.2s ease-in-out infinite;
}

@keyframes il-odbierz {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

/* --- koperta --- */
.il--koperta {
  align-items: center;
}

.il__koperta {
  color: var(--blue);
  animation: il-plywa 3s ease-in-out infinite;
}

@keyframes il-plywa {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.il__karta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 13px;
}

.il__karta--mail {
  width: 100%;
  max-width: 340px;
}

.il__karta-etykieta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- przeglądarka --- */
.il__okno {
  width: 100%;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.il__okno-belka {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--blue-tint);
  border-bottom: 1px solid var(--blue-line);
}

.il__okno-belka i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue-line);
}

.il__okno-adres {
  flex: 1;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__okno-tresc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 60px;
}

.il__okno-tresc b {
  font-size: 16px;
}

.il__okno-linia {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--blue-tint-2);
}

.il__okno-linia--1 {
  width: 80%;
}

.il__okno-linia--2 {
  width: 55%;
}

.il__okno-linia--3 {
  width: 68%;
}

.il__widget {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
  font-weight: 600;
  animation: il-dymek 0.5s var(--ease) 0.8s both;
}

/* --- wizytówka --- */
.il--wizytowka {
  align-items: center;
}

.il__karta--osoba {
  position: relative;
  flex-direction: row;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  padding: 18px 20px;
  animation: il-plywa 4s ease-in-out infinite;
}

.il__karta-awatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--cta);
  color: #fff;
  flex-shrink: 0;
}

.il__karta-linie {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.il__karta-linie b {
  font-size: 15px;
}

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

.il__karta-wiersz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.il__karta-stempel {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--blue);
}

/* --- sloty --- */
.il__sloty-naglowek {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

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

.il__slot {
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid var(--blue-line);
  background: var(--surface);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: il-slot 6s var(--ease) infinite;
}

.il__slot--2 {
  animation-delay: 0.5s;
}

.il__slot--3 {
  animation-delay: 1s;
}

.il__slot--4 {
  animation-delay: 1.5s;
}

.il__slot--5 {
  animation-delay: 2s;
}

.il__slot--6 {
  animation-delay: 2.5s;
}

@keyframes il-slot {
  0%,
  8%,
  60%,
  100% {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--blue-line);
  }
  14%,
  50% {
    background: var(--cta);
    color: #fff;
    border-color: transparent;
  }
}

/* --- zegar --- */
.il--zegar,
.il--miesiace {
  align-items: center;
}

.il__zegar {
  position: relative;
  width: 150px;
  height: 150px;
}

.il__zegar-tarcza {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--blue-line);
  box-shadow: var(--glass-shadow);
}

.il__zegar-luk {
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: conic-gradient(rgba(29, 78, 216, 0.18) 0 60deg, transparent 60deg);
  animation: il-luk 4s var(--ease) infinite;
}

@keyframes il-luk {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(360deg);
  }
}

.il__zegar-godz,
.il__zegar-min {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 4px;
  border-radius: 999px;
  background: var(--ink);
  transform-origin: 50% 100%;
}

.il__zegar-godz {
  height: 38px;
  margin-left: -2px;
  animation: il-wsk 24s linear infinite;
}

.il__zegar-min {
  height: 54px;
  margin-left: -2px;
  background: var(--blue);
  animation: il-wsk 4s linear infinite;
}

@keyframes il-wsk {
  to {
    transform: rotate(360deg);
  }
}

.il__zegar-srodek {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue);
  transform: translate(-50%, -50%);
}

.il__zegar-podpis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.il__zegar-podpis b {
  font-size: 18px;
}

.il__zegar-podpis span {
  font-size: 12px;
  color: var(--ink-muted);
}

/* --- miesiące --- */
.il__miesiace {
  display: flex;
  gap: 8px;
}

.il__miesiac {
  width: 52px;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid var(--blue-line);
  background: var(--surface);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  animation: il-miesiac 5s var(--ease) infinite;
}

.il__miesiac--2 {
  animation-delay: 0.3s;
}

.il__miesiac--3 {
  animation-delay: 0.6s;
}

.il__miesiac--4,
.il__miesiac--5,
.il__miesiac--6 {
  opacity: 0.45;
  animation: none;
}

@keyframes il-miesiac {
  0%,
  10%,
  70%,
  100% {
    background: var(--surface);
    color: var(--ink);
  }
  18%,
  60% {
    background: var(--cta);
    color: #fff;
    border-color: transparent;
  }
}

/* --- przełączenie / synchro --- */
.il__rzad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.il__rzad--szeroki {
  justify-content: space-between;
}

.il__aktor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}

.il__aktor b {
  font-size: 13px;
  color: var(--ink);
}

.il__przekaz {
  position: relative;
  width: 110px;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(29, 78, 216, 0.3) 0 6px, transparent 6px 12px);
}

.il__przekaz i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--blue-sky), var(--blue));
  transform: translateY(-50%);
  animation: il-impuls 2.2s linear infinite;
}

.il__przekaz small {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

@keyframes il-impuls {
  0% {
    left: -40px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 110px;
    opacity: 0;
  }
}

.il__zywy--lista {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
}

.il__box {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}

.il__box--ai {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
}

.il__sync {
  position: relative;
  flex: 1;
  height: 3px;
  margin: 0 12px 24px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(29, 78, 216, 0.3) 0 6px, transparent 6px 12px);
  color: var(--blue);
}

.il__sync svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px;
  box-sizing: content-box;
}

.il__sync-kropka {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateY(-50%);
  animation: il-kropka 3s linear infinite;
}

.il__sync-kropka--2 {
  animation-delay: 1s;
}

.il__sync-kropka--3 {
  animation-delay: 2s;
}

@keyframes il-kropka {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.il__wpis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
}

.il__wpis svg {
  color: var(--good);
}

.il__wpis--1 {
  animation-delay: 1s;
}

.il__wpis--2 {
  animation-delay: 2s;
}

.il__pasek-postepu {
  height: 8px;
  border-radius: 999px;
  background: var(--blue-tint-2);
  overflow: hidden;
}

.il__pasek-postepu i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--cta);
  animation: il-postep 4s var(--ease) infinite;
}

@keyframes il-postep {
  0% {
    width: 0;
  }
  70%,
  100% {
    width: 100%;
  }
}

/* --- głos --- */
.il--glos {
  align-items: center;
}

.il__fala-glosu {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 90px;
}

.il__fala-glosu i {
  width: 6px;
  height: 20px;
  border-radius: 999px;
  background: var(--cta);
  animation: il-slupek 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.11s);
}

@keyframes il-slupek {
  0%,
  100% {
    height: 14px;
    opacity: 0.55;
  }
  50% {
    height: 78px;
    opacity: 1;
  }
}

/* --- kanały --- */
.il__kanaly {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.il__kanal {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
}

.il__kanal--1 {
  animation-delay: 0.2s;
}

.il__kanal--2 {
  animation-delay: 0.8s;
}

.il__kanal--3 {
  animation-delay: 1.4s;
}

.il__kanal--4 {
  animation-delay: 2s;
}

.il__kanal-logo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.il__kanal-logo svg {
  width: 26px;
  height: 26px;
}

.il__kanal-logo--duzy,
.il__kanal-logo--duzy svg {
  width: 40px;
  height: 40px;
}

.il__kanal .il__dymek {
  animation: none;
  opacity: 1;
  transform: none;
}

.il__odpowiedz {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.il__odpowiedz .il__dymek {
  animation-delay: 2.7s;
}

/* --- opinie --- */
.il--opinie {
  gap: 10px;
}

.il__opinia {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  font-size: 12.5px;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
}

.il__opinia--2 {
  animation-delay: 0.7s;
}

.il__opinia--3 {
  animation-delay: 1.4s;
}

.il__gwiazdki {
  display: inline-flex;
  gap: 2px;
  color: var(--blue-line);
}

.il__gwiazdki i {
  display: inline-grid;
}

.il__gwiazdka--pelna {
  color: var(--warn);
}

.il__gwiazdka--pelna svg {
  fill: currentColor;
}

.il__odp {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
}

.il__odp--ai {
  color: var(--blue);
}

.il__odp--recepcja {
  color: var(--ink-muted);
}

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

.il__platforma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  text-align: center;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
}

.il__platforma--2 {
  animation-delay: 0.6s;
}

/* --- reaktywacja --- */
.il__os-miesiecy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.il__os-tor {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--blue-tint-2);
}

.il__os-znacznik {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 3px solid var(--blue);
  transform: translate(-50%, -50%);
  animation: il-znacznik 5s var(--ease) infinite;
}

@keyframes il-znacznik {
  0% {
    left: 0;
  }
  60%,
  100% {
    left: 100%;
  }
}

.il__os-etykiety {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
}

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

/* --- notatnik --- */
.il__notatnik {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--blue-tint-2) 31px 32px);
  background-position: 0 44px;
}

.il__notatnik-tytul {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.il__notatka {
  font-size: 13.5px;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: il-pisze 1.4s steps(28) forwards;
}

.il__notatka--2 {
  animation-delay: 1.5s;
}

.il__notatka--3 {
  animation-delay: 3s;
}

@keyframes il-pisze {
  to {
    width: 100%;
  }
}

.il__notatka--kursor {
  width: 2px;
  height: 16px;
  background: var(--blue);
  animation: il-kursor 0.9s steps(2) infinite;
}

@keyframes il-kursor {
  50% {
    opacity: 0;
  }
}

/* --- dokument z podpisem --- */
.il__dokument {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 18px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
}

.il__dokument-tytul {
  font-size: 14px;
  font-weight: 800;
}

.il__podpisy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
  padding-top: 8px;
  border-top: 1px solid var(--blue-line);
  font-size: 12px;
}

.il__podpisy small {
  display: block;
  font-size: 10px;
  color: var(--ink-muted);
}

.il__parafka {
  position: absolute;
  right: 22px;
  bottom: 40px;
  width: 140px;
  height: 52px;
}

.il__parafka path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: il-parafka 5s var(--ease) infinite;
}

@keyframes il-parafka {
  0%,
  10% {
    stroke-dashoffset: 400;
  }
  50%,
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

.il__pioro {
  position: absolute;
  right: 22px;
  bottom: 58px;
  color: var(--blue);
  animation: il-pioro 5s var(--ease) infinite;
}

@keyframes il-pioro {
  0%,
  10% {
    transform: translate(-130px, 14px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  50% {
    transform: translate(0, 0);
    opacity: 1;
  }
  60%,
  100% {
    transform: translate(10px, -10px);
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .pytanie__uklad {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .pytanie__ilustracja {
    max-width: 460px;
  }
}

@media (max-width: 760px) {
  .pytanie__ilustracja {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .il *,
  .il *::before {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------- wersja 3: hero -- */

/* Hero: tekst po lewej, animowana rozmowa z Asystentem po prawej. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.hero__tekst > * {
  animation: wejscie 0.55s var(--ease) both;
}

.hero__tekst > :nth-child(2) {
  animation-delay: 0.06s;
}

.hero__tekst > :nth-child(3) {
  animation-delay: 0.12s;
}

.hero__tekst > :nth-child(4) {
  animation-delay: 0.18s;
}

.hero__tekst > :nth-child(5) {
  animation-delay: 0.24s;
}

.hero__tytul {
  margin-top: 16px;
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.hero__lead {
  max-width: 54ch;
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__fakty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
}

.hero__fakty li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__fakty svg {
  color: var(--blue);
}

.hero__scena {
  animation: wejscie 0.7s var(--ease) 0.25s both;
}

.il--hero {
  aspect-ratio: 4 / 3.4;
  padding: 34px;
}

.il__telefon--hero {
  width: 290px;
}

.il__telefon--hero .il__telefon-ekran {
  min-height: 250px;
  padding-top: 12px;
}

.il__hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
  font-weight: 700;
  animation: il-plywa 4.5s ease-in-out infinite;
}

.il__hero-chip svg {
  color: var(--good);
}

.il__hero-chip--1 {
  right: 22px;
  top: 22%;
}

.il__hero-chip--2 {
  left: 22px;
  bottom: 18%;
  animation-delay: 1.4s;
}

.il__hero-chip--2 svg {
  color: var(--blue);
}

/* ----------------------------------------------------- wersja 3: moduły -- */

.moduly {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.moduly > * {
  animation: wejscie 0.5s var(--ease) both;
}

.moduly__tytul {
  margin-top: 12px;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.moduly__lead {
  max-width: 60ch;
  margin: 16px auto 0;
  color: var(--ink-soft);
  font-size: 17px;
}

.moduly__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  text-align: left;
}

.modul {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}

.modul:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-lg);
}

.modul[aria-pressed="false"] {
  opacity: 0.6;
}

.modul__ikona {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--cta);
  color: #fff;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.modul[aria-pressed="false"] .modul__ikona {
  background: var(--blue-tint);
  color: var(--ink-muted);
}

.modul__tresc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.modul__tresc b {
  font-size: 16px;
  font-weight: 750;
}

.modul__tresc small {
  font-size: 13px;
  color: var(--ink-soft);
}

/* Przełącznik iOS-owy */
.przelacznik {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: var(--blue-line);
  transition: background 0.25s var(--ease);
  flex-shrink: 0;
}

.przelacznik i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(3, 7, 18, 0.25);
  transition: transform 0.25s var(--ease);
}

.modul[aria-pressed="true"] .przelacznik {
  background: var(--blue);
}

.modul[aria-pressed="true"] .przelacznik i {
  transform: translateX(20px);
}

.ikonka--tekst {
  width: auto;
  gap: 8px;
  padding: 0 14px 0 12px;
  grid-auto-flow: column;
  font-size: 13px;
  font-weight: 700;
}

/* --------------------------------------------- wersja 3: siatka działów -- */

.dzialy-siatka {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
  text-align: left;
}

.dzial-kafel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 150px;
  padding: 16px 16px 14px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.dzial-kafel:hover {
  transform: translateY(-3px);
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: var(--glass-shadow-lg);
}

.dzial-kafel[data-status="wylaczony"] {
  opacity: 0.55;
  background: var(--surface);
}

.dzial-kafel[data-status="wylaczony"]:hover {
  transform: none;
}

.dzial-kafel__ikona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--blue);
}

.dzial-kafel[data-status="gotowy"] .dzial-kafel__ikona {
  background: var(--cta);
  color: #fff;
}

.dzial-kafel__numer {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.dzial-kafel__nazwa {
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.25;
}

.dzial-kafel__stopka {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}

.dzial-kafel[data-status="wylaczony"] .dzial-kafel__stopka {
  color: var(--ink-muted);
}

.dzial-kafel__kropka {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* ---------------------------------------------- wersja 3: panel działu -- */

.dzial-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  max-width: 980px;
  margin: 34px auto 0;
  text-align: left;
}

.dzial-panel__cytat {
  position: relative;
  display: flex;
  gap: 16px;
  /* Karta rozciąga się do wysokości listy kroków, więc treść jest
     wyśrodkowana w pionie — u góry zostawała pusta połowa karty. */
  align-items: center;
  padding: 22px 24px 22px 26px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.dzial-panel__cytat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 999px;
  background: var(--cta);
}

.dzial-panel__ikona {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--blue);
}

.dzial-panel__kroki {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dzial-panel__krok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.dzial-panel__krok:hover {
  transform: translateX(3px);
  border-color: rgba(29, 78, 216, 0.35);
}

.dzial-panel__krok b {
  display: block;
  font-size: 15px;
  font-weight: 750;
}

.dzial-panel__krok small {
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
}

.dzial-panel__nr {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--cta);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* ---------------------------------------------------- wersja 3: kafle -- */

.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.kafle[data-ile="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

.kafel-w {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 190px;
  padding: 20px 20px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease),
    background-color 0.22s var(--ease);
}

.kafel-w:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-lg);
}

.kafel-w[aria-pressed="true"] {
  border-color: rgba(29, 78, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18), var(--glass-shadow-lg);
}

.kafel-w__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.kafel-w__ikona {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue-tint);
  color: var(--blue);
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.kafel-w[aria-pressed="true"] .kafel-w__ikona {
  background: var(--cta);
  color: #fff;
}

.kafel-w__loga {
  display: inline-flex;
  gap: 6px;
}

.kafel-w__loga .logo-marki,
.kafel-w__loga .logo-marki svg {
  width: 40px;
  height: 40px;
}

.kafel-w__tytul {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.kafel-w__opis {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.kafel-w__stopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(29, 78, 216, 0.25);
  background: var(--surface);
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 700;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.kafel-w[aria-pressed="true"] .kafel-w__stopka,
.kafel-w:hover .kafel-w__stopka {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
}

.kafel-w__pole {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid currentColor;
}

.kafel-w__pole i {
  display: grid;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.kafel-w[aria-pressed="true"] .kafel-w__pole i {
  opacity: 1;
}

/* ---------------------------------------------------- wersja 3: głosy -- */

.glosy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 900px;
}

.glos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.glos[aria-pressed="true"] {
  border-color: rgba(29, 78, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18), var(--glass-shadow-lg);
}

.glos__play {
  grid-row: 1 / 3;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(29, 78, 216, 0.6);
  transition: transform 0.15s var(--ease);
}

.glos__play:hover {
  transform: scale(1.05);
}

.glos__play-pauza {
  display: none;
}

.glos--gra .glos__play-ikona {
  display: none;
}

.glos--gra .glos__play-pauza {
  display: grid;
}

.glos__fala {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}

.glos__fala i {
  width: 4px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-line);
  transition: background 0.2s var(--ease);
}

.glos--gra .glos__fala i {
  background: var(--blue);
  animation: il-slupek 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.09s);
}

.glos--gra .glos__fala i {
  height: 8px;
}

@keyframes glos-fala {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 24px;
  }
}

.glos--gra .glos__fala i {
  animation-name: glos-fala;
}

.glos__wybor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 40px 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.glos__wybor:hover {
  background: var(--surface);
  border-color: var(--blue-line);
}

.glos__wybor[aria-pressed="true"] {
  background: var(--blue-tint);
  border-color: rgba(29, 78, 216, 0.3);
}

.glos__tresc {
  display: flex;
  flex-direction: column;
}

.glos__tresc b {
  font-size: 16px;
  font-weight: 750;
}

.glos__tresc small {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.glos--brak .glos__play {
  background: var(--bad);
}

.podpowiedz code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--blue-tint);
  font-family: var(--mono);
  font-size: 12px;
}

/* -------------------------------------------------- wersja 3: gwiazdki -- */

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

.gwiazdki__gwiazda {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--blue-line);
  transition: color 0.2s var(--ease), transform 0.15s var(--ease), border-color 0.2s var(--ease);
}

.gwiazdki__gwiazda svg {
  transition: fill 0.2s var(--ease);
}

.gwiazdki__gwiazda:hover {
  transform: translateY(-2px);
  color: var(--warn);
}

.gwiazdki__gwiazda[aria-pressed="true"] {
  color: var(--warn);
  border-color: rgba(217, 119, 6, 0.4);
}

.gwiazdki__gwiazda[aria-pressed="true"] svg {
  fill: currentColor;
}

.gwiazdki__gwiazda kbd {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
}

.gwiazdki__opis {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ------------------------------------------------- wersja 3: notatki -- */

.notatki {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.notatki:empty {
  display: none;
}

.notatki__wpis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  animation: wejscie 0.35s var(--ease) both;
}

.notatki__nr {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.notatki__tresc {
  font-size: 15.5px;
}

.pomin {
  margin-top: 16px;
}

.pomin__przycisk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.pomin__przycisk:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

/* ---------------------------------------------- wersja 3: karty cennika -- */

/*
  Cennik jako karty w siatce (po dwie na szerokim ekranie): każda usługa to
  szklana karta z etykietowanymi polami — czytelniej niż ciasna tabela.
  Klasy .tabela__* zostają (silnik ich używa), zmienia się tylko wygląd.
*/
.tabela {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.tabela__naglowek {
  display: none;
}

.tabela__wiersz {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 12px;
  padding: 18px 18px 18px;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.tabela__wiersz + .tabela__wiersz {
  border-top: 1px solid var(--glass-border);
}

.tabela__komorka {
  grid-column: span 2;
}

.tabela__komorka:first-child {
  grid-column: span 6;
  padding-right: 40px;
}

.tabela__komorka:nth-child(5),
.tabela__komorka:nth-child(6) {
  grid-column: span 3;
}

.tabela__komorka--akcje {
  position: absolute;
  top: 12px;
  right: 12px;
  grid-column: auto;
}

.tabela__etykieta {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tabela__brak {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed var(--blue-line);
  color: var(--ink-muted);
  font-size: 13px;
}

.tabela .pole {
  background: var(--surface);
}

/* ------------------------------------------ wersja 3: szyld i klawiatura -- */

.il--szyld {
  justify-content: flex-end;
  padding: 0;
  background:
    radial-gradient(420px 260px at 80% 0%, rgba(14, 165, 233, 0.22), transparent 62%),
    linear-gradient(180deg, #eaf2ff, #f8fafc 60%);
}

.il__fasada {
  position: relative;
  margin: 0 30px;
  height: 78%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.il__szyld {
  position: relative;
  align-self: center;
  margin-bottom: 14px;
  padding: 14px 26px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 40px -16px rgba(3, 7, 18, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__szyld-swiatlo {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, rgba(14, 165, 233, 0.5), transparent 70%);
  opacity: 0.8;
  animation: szyld-swiatlo 3s ease-in-out infinite;
}

@keyframes szyld-swiatlo {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.il__szyld-napis {
  position: relative;
}

.il__szyld-napis i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.25);
  animation: litera-zapala 6s linear infinite;
  animation-delay: calc(var(--i) * 0.12s);
  text-shadow: none;
}

@keyframes litera-zapala {
  0%,
  6% {
    color: rgba(255, 255, 255, 0.25);
    text-shadow: none;
  }
  10%,
  86% {
    color: #fff;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.9), 0 0 24px rgba(56, 189, 248, 0.5);
  }
  94%,
  100% {
    color: rgba(255, 255, 255, 0.25);
    text-shadow: none;
  }
}

.il__szyld-napis.il__zywy--pusty i {
  color: rgba(255, 255, 255, 0.55);
}

.il__fasada-sciana {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
  gap: 14px;
  align-items: end;
  height: 120px;
  padding: 26px 24px 0;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #fff, #eef4fb);
  border: 1px solid var(--blue-line);
  border-bottom: 0;
}

.il__okno-f {
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(180deg, #bfe0ff, #7cc0f5);
  box-shadow: inset 0 0 0 3px #fff, inset 0 2px 6px rgba(29, 78, 216, 0.25);
}

.il__drzwi {
  position: relative;
  height: 94px;
  border-radius: 10px 10px 0 0;
  background: var(--cta);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.il__drzwi b {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
}

.il__markiza {
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 22px, #fff 22px 44px);
  border-radius: 0 0 8px 8px;
  margin: 0 8px;
  order: -1;
  transform: translateY(6px);
  z-index: 1;
}

.il__chodnik {
  height: 18px;
  margin: 0 -30px;
  background: linear-gradient(180deg, #dbe8fb, #cfe0f6);
}

/* klawiatura */
.il--klawiatura {
  align-items: center;
  padding: 18px;
}

.il__telefon--klawiatura {
  width: 230px;
  padding-bottom: 14px;
}

.il__wyswietlacz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 12px 8px;
  text-align: center;
}

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

.il__wyswietlacz b {
  font-size: 19px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.il__klawisze {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 18px;
}

.il__klawisz {
  position: relative;
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 999px;
  background: var(--blue-tint);
  font-size: 17px;
  font-weight: 700;
}

.il__nacisk {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--cta);
  opacity: 0;
  animation: nacisk var(--cykl, 4s) linear infinite;
}

@keyframes nacisk {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  3% {
    opacity: 0.9;
    transform: scale(1);
  }
  8% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
  }
}

.il__zadzwon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  animation: il-odbierz 1.6s ease-in-out infinite;
}

.il__telefon--pusty .il__zadzwon {
  animation: none;
  opacity: 0.5;
}

/* ------------------------------------------------ wersja 3: podsumowanie -- */

.pods__moduly {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pods__modul {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue-tint);
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}

.pods__modul small {
  color: var(--blue);
  font-weight: 700;
}

.pods__modul[data-wl="nie"] {
  opacity: 0.55;
  text-decoration: line-through;
}

.pods__popraw--moduly {
  margin-top: 12px;
}

/* ------------------------------------------------ wersja 3: responsywność -- */

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    text-align: center;
  }

  .hero__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__akcje,
  .hero__fakty {
    justify-content: center;
  }

  .hero__scena {
    max-width: 520px;
    margin: 0 auto;
  }

  .dzialy-siatka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dzial-panel,
  .moduly__siatka,
  .glosy,
  .tabela {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .dzialy-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ikonka--tekst span {
    display: none;
  }

  .ikonka--tekst {
    padding: 0;
    width: 40px;
  }

  .gwiazdki__gwiazda {
    width: 56px;
    height: 56px;
  }

  .gwiazdki__gwiazda svg {
    width: 28px;
    height: 28px;
  }

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

  .tabela__komorka,
  .tabela__komorka:first-child,
  .tabela__komorka:nth-child(5),
  .tabela__komorka:nth-child(6) {
    grid-column: span 2;
  }

  .tabela__komorka--akcje {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------- responsywność -- */

@media (max-width: 1180px) {
  .modele {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }

  .model__scena {
    aspect-ratio: 360 / 190;
  }
}

@media (max-width: 1100px) {
  .uklad {
    width: min(1720px, 100% - 32px);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  .belka {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 14px;
  }

  .sciezka {
    display: none;
  }

  .zapis {
    display: none;
  }

  .uklad {
    width: calc(100% - 24px);
    padding-top: 14px;
  }

  .ekran {
    justify-content: flex-start;
    padding: 12px 0 90px;
  }

  .start__czesci,
  .wstep__lista,
  .taknie {
    grid-template-columns: minmax(0, 1fr);
  }

  .typebar__pole {
    font-size: 22px;
  }

  .pytanie__akcje {
    right: 14px;
    bottom: 14px;
    gap: 8px;
    padding: 6px;
  }

  .pytanie__enter {
    display: none;
  }

  /* Na telefonie znacznik to sam numer; schemat rozwija się nad nim. */
  .znacznik {
    left: 14px;
    bottom: 14px;
  }

  .znacznik__tekst {
    display: none;
  }

  .schemat {
    width: min(360px, calc(100vw - 28px));
  }

  .tydzien__dzien {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .tydzien__krotka {
    display: inline;
  }

  .tydzien__pelna {
    display: none;
  }

  .tydzien__os,
  .tydzien__linia {
    display: none;
  }

  .tydzien__dzien[data-otwarte="nie"] .tydzien__godziny {
    display: none;
  }

  .tydzien__dzien[data-otwarte="nie"]::after {
    content: attr(data-wolne);
    font-size: 13px;
    font-style: italic;
    color: var(--ink-muted);
  }

  .pole--czas {
    width: 100px;
  }

  .tabela__naglowek {
    display: none;
  }

  .tabela__wiersz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .tabela__komorka:first-child,
  .tabela__komorka--akcje {
    grid-column: span 2;
  }

  .tabela__etykieta {
    display: block;
  }

  .pods__wiersz {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .pods__podpole {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pods__akcje {
    position: static;
  }
}

/* ================================================================== */
/* ------------------------------------------------------ WERSJA 4 -- */
/* ================================================================== */

/*
  Wersja 4 (wrzesień 2026) — reguły poniżej NADPISUJĄ wcześniejsze:
    • liquid glass na wszystkich kartach (blik ::before, belka jako
      pływający pasek, logo w szklanej pigułce),
    • ekran pytania 75/25: scena u góry, pytanie + widżet w rzędzie na dole,
      albo „pełny” — pytanie u góry, kafle / głosy / tydzień / tabela na
      resztę ekranu, wyśrodkowane,
    • ekran części: linia z prądem, kafle działów na linii,
    • ekran działu: błękitny znak wodny numeru, duża scena zamiast panelu,
    • sceny na stałej scenie 720×360 skalowanej zoomem (--skala z app.js),
    • tydzień w jednym błękicie, zaokrąglony checkbox,
    • tabela cennika z paskiem „Dodaj” u góry,
    • podsumowanie z dużym numerem działu po LEWEJ stronie karty.
  Uchylone (nie przywracać): karta ilustracji po prawej stronie pytania,
  siatka 5×2 działów, panel „cytat + kroki” na ekranie działu, telefon
  w hero, kafelek z numerem nad tytułem działu, karty cennika w siatce.
*/

/* ------------------------------------------------------ liquid glass -- */

/* Odstęp nad belką jako padding body (margines przebijał przez body i dodawał 10 px przewijania). */
body {
  padding-top: 10px;
  min-height: calc(100vh - 10px);
}

.belka {
  position: sticky;
  top: 10px;
  margin: 0 24px 0;
  padding: 10px 16px 10px 12px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(18px) saturate(1.6);
}

.logo {
  padding: 8px 14px 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  font-size: 20px;
}

.ikonka {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.dzial-kafel,
.kafel-w,
.glos,
.model,
.modul,
.karta,
.pods__dzial,
.il-ramka,
.znacznik__przycisk,
.taknie__kafel,
.opcja,
.gwiazdki__gwiazda,
.notatki__wpis,
.pomin__przycisk,
.menu,
.schemat,
.pods__akcje,
.tydzien,
.tabela,
.il__modul-kafel,
.il__rdzen {
  position: relative;
}

.dzial-kafel::before,
.kafel-w::before,
.glos::before,
.model::before,
.modul::before,
.karta::before,
.pods__dzial::before,
.il-ramka::before,
.pytanie__akcje::before,
.znacznik__przycisk::before,
.taknie__kafel::before,
.opcja::before,
.gwiazdki__gwiazda::before,
.notatki__wpis::before,
.pomin__przycisk::before,
.pods__akcje::before,
.il__modul-kafel::before,
.il__rdzen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-blik);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.dzial-kafel > *,
.kafel-w > *,
.glos > *,
.model > *,
.modul > *,
.karta > *,
.pods__dzial > *,
.pytanie__akcje > *,
.znacznik__przycisk > *,
.taknie__kafel > *,
.opcja > *,
.gwiazdki__gwiazda > *,
.notatki__wpis > *,
.pomin__przycisk > *,
.pods__akcje > *,
.il__modul-kafel > *,
.il__rdzen > * {
  position: relative;
  z-index: 1;
}

.taknie__kafel,
.opcja,
.pomin__przycisk {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.taknie__kafel[aria-pressed="true"],
.opcja[aria-pressed="true"] {
  border-color: rgba(29, 78, 216, 0.5);
  background: linear-gradient(160deg, rgba(234, 242, 255, 0.95), rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16), var(--glass-shadow-lg);
}

/* CTA płaskie: żadnych wewnętrznych rozjaśnień, które dawały efekt przejścia (właściciel). */
.cta {
  box-shadow: 0 12px 28px -12px rgba(29, 78, 216, 0.5);
}

.cta:hover {
  box-shadow: 0 16px 32px -12px rgba(29, 78, 216, 0.55);
}

.cta--cichy {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.cta--maly {
  padding: 9px 16px;
  font-size: 13.5px;
  border-radius: 12px;
}

/* --------------------------------------------- scena 720×360 + zoom -- */

.il-ramka {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(640px 320px at 82% -4%, rgba(14, 165, 233, 0.2), transparent 62%),
    radial-gradient(420px 260px at 0% 100%, rgba(29, 78, 216, 0.09), transparent 60%),
    radial-gradient(rgba(29, 78, 216, 0.09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fff, var(--blue-tint));
  box-shadow: var(--glass-shadow-lg);
  overflow: hidden;
}

.il {
  flex: none;
  width: 720px;
  height: 360px;
  aspect-ratio: auto;
  zoom: var(--skala, 1);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Sceny z własnym tłem (szyld, mapa) wypełniają całą ramkę. */
.il--szyld,
.il--mapa {
  overflow: hidden;
}

.il--szyld {
  background:
    radial-gradient(520px 300px at 80% 0%, rgba(14, 165, 233, 0.22), transparent 62%),
    linear-gradient(180deg, #eaf2ff, #f8fafc 60%);
}

.il__fasada {
  margin: 0 120px;
}

/* ------------------------------------------ ekran pytania: 75 / 25 -- */

/*
  Ekran pytania ze sceną (decyzja właściciela, 06.09):
    • górne 75% ekranu — animacja „na pełnym ekranie”, bez kafelka
      (ramka sceny traci tło, ramkę i cień),
    • dolne 25% — śnieżnobiały pasek od lewej do prawej krawędzi ekranu
      (stały, jak belka u góry): po lewej pytanie, po prawej pasek wpisywania
      albo TAK / NIE. Pasek akcji zostaje w prawym dolnym rogu, na pasku.
  Wcześniejsze warianty (karta sceny + pytanie na środku) uchylone.
*/
.pytanie--scena {
  display: block;
  width: 100%;
  max-width: none;
  height: calc(70vh - 84px);
  min-height: 300px;
}

.pytanie__scena {
  height: 100%;
  min-height: 0;
  display: flex;
}

/* Ekran ze sceną nie potrzebuje dolnego marginesu — dół zajmuje stały biały pasek. */
.ekran:has(.pytanie--scena) {
  padding: 0;
  justify-content: flex-start;
}

.uklad:has(.pytanie--scena) {
  padding-top: 0;
}

.scena:has(.pytanie--scena) {
  min-height: 0;
}

.pytanie--scena .il-ramka {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  align-items: flex-start;
}

/* Sceny, które sięgają dołu planszy, podnoszą treść, żeby nie chować się pod paskiem. */
.pytanie--scena .il--szyld {
  padding-bottom: 60px;
}

.pytanie--scena .il--wybieranie {
  padding-top: 18px;
  padding-bottom: 18px;
}

.pytanie--scena .il--mail {
  padding-bottom: 44px;
}

.pytanie--scena .il-ramka::before {
  display: none;
}

.pytanie--scena .il--szyld {
  background: none;
}

/*
  Dół ekranu pytania (~25%): pytanie wyśrodkowane, pod nim pasek wpisywania /
  TAK–NIE dopasowany szerokością do sceny (max 760 px), też na środku.
  Wariant „pytanie po lewej, pasek po prawej” uchylony — nie przywracać.
*/
.pytanie__dol {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  height: 30vh;
  min-height: 240px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  justify-content: center;
  gap: 120px;
  align-items: center;
  padding: 16px 64px 72px 60px;
  background: #fff;
  border-top: 1px solid rgba(29, 78, 216, 0.08);
  box-shadow: 0 -18px 50px -30px rgba(29, 78, 216, 0.25);
  text-align: left;
}

/* Pytanie i pasek blisko siebie: obie kolumny dosunięte do środka paska. */
.pytanie__tekst {
  max-width: 560px;
  min-width: 0;
  justify-self: end;
}

.pytanie--scena .pytanie__widzet {
  width: 100%;
  max-width: 620px;
  justify-self: start;
}

/* TAK / NIE: dwa krótsze kafle, tekst wyśrodkowany, litera klawisza w rogu. */
.pytanie--scena .taknie {
  max-width: 460px;
  margin: 0;
  gap: 12px;
}

.pytanie--scena .taknie__kafel {
  justify-content: center;
  padding: 18px 20px;
  font-size: 22px;
}

.pytanie--scena .taknie__kafel > .klawisz {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.pytanie--scena .gwiazdki__rzad,
.pytanie--scena .opcje--pigulki,
.pytanie--scena .chipy,
.pytanie--scena .podpowiedz {
  justify-content: flex-start;
}

.pytanie--scena .pytanie__punkty {
  text-align: left;
  font-size: 12.5px;
  gap: 2px;
  margin-top: 8px;
}

.pytanie--scena .gwiazdki__opis,
.pytanie--scena .pomin {
  text-align: left;
}

.pytanie--scena .pytanie__tresc {
  font-size: clamp(22px, 2vw, 30px);
}

.pytanie--scena .pytanie__opis {
  font-size: 14.5px;
}

.pytanie--scena .typebar__pole {
  font-size: 24px;
}

.pytanie--scena .notatki {
  max-height: 96px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.pytanie--scena .chipy {
  margin-bottom: 8px;
}

.pytanie--scena .zalecane {
  margin-top: 12px;
}

.pytanie--scena .pytanie__tresc {
  margin-top: 0;
  font-size: clamp(24px, 2.35vw, 36px);
}

.pytanie--scena .pytanie__opis {
  margin-top: 6px;
  font-size: 15.5px;
}

.pytanie--scena .pytanie__punkty {
  font-size: 13.5px;
  gap: 3px;
}

.pytanie--scena .pytanie__widzet {
  margin-top: 0;
  min-width: 0;
}

.pytanie--scena .typebar__pole {
  font-size: 26px;
}

.pytanie--scena .taknie {
  max-width: none;
}

.pytanie--scena .gwiazdki__gwiazda {
  width: 72px;
  height: 72px;
}

.pytanie--scena .opcje--karty {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.pytanie--scena .opcja {
  padding: 12px 40px 12px 14px;
}

/* ------------------------------------------ ekran pytania: pełny -- */

.pytanie--pelny {
  display: flex;
  flex-direction: column;
  width: min(1500px, 100%);
  max-width: none;
  min-height: calc(100vh - 190px);
  text-align: center;
}

.pytanie--pelny.pytanie--modele {
  width: 100%;
}

.pytanie__naglowek {
  max-width: 900px;
  margin: 0 auto;
}

.pytanie--pelny .pytanie__tresc {
  margin-top: 0;
}

.pytanie--pelny .pytanie__opis,
.pytanie--pelny .pytanie__punkty {
  margin-left: auto;
  margin-right: auto;
}

.pytanie--pelny .pytanie__punkty {
  text-align: left;
}

.pytanie__widzet--pelny {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 26px;
  padding-bottom: 56px;
}

.pytanie__widzet--pelny .kafle,
.pytanie__widzet--pelny .modele,
.pytanie__widzet--pelny .glosy {
  flex: 1;
}

/* Kafle na całą stronę, wyśrodkowane — kolumn tyle, ile opcji. */
.pytanie__widzet--pelny .kafle {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.pytanie__widzet--pelny .kafle[data-ile="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1040px;
}

.pytanie__widzet--pelny .kafle[data-ile="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pytanie__widzet--pelny .kafle[data-ile="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pytanie__widzet--pelny .kafel-w {
  min-height: 340px;
  padding: 36px 30px 28px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.pytanie__widzet--pelny .kafel-w__gora {
  justify-content: center;
  margin-bottom: 8px;
}

.pytanie__widzet--pelny .kafel-w__gora .klawisz {
  position: absolute;
  top: 18px;
  right: 18px;
}

.pytanie__widzet--pelny .kafel-w__tytul {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.pytanie__widzet--pelny .kafel-w__opis {
  font-size: 15px;
  max-width: 34ch;
}

.pytanie__widzet--pelny .kafel-w__stopka {
  width: auto;
  min-width: 180px;
  margin-top: auto;
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 14.5px;
}

/* Ikony i loga w kaflach — JEDEN kształt: białe koło 72 px. */
.kafel-w__ikona,
.kafel-w__loga .logo-marki {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
}

.kafel-w__loga {
  gap: 10px;
}

.kafel-w__loga .logo-marki svg {
  width: 36px;
  height: 36px;
}

.kafel-w__ikona svg {
  width: 30px;
  height: 30px;
}

.kafel-w[aria-pressed="true"] .kafel-w__ikona {
  background: var(--blue);
  color: #fff;
}

.pytanie__widzet--pelny .tydzien,
.pytanie__widzet--pelny .karty,
.pytanie__widzet--pelny .lista__akcje,
.pytanie__widzet--pelny .tabela,
.pytanie__widzet--pelny .tabela__pasek,
.pytanie__widzet--pelny .ostrzezenie {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.pytanie__widzet--pelny .lista__akcje {
  margin-top: 14px;
}

.pytanie__widzet--pelny .podpowiedz {
  justify-content: center;
}

/* ----------------------------------------------- ekran części: linia -- */

.wstep__opis--karta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 860px;
  margin: 26px auto 0;
  padding: 14px 24px 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--ink-soft);
  font-size: 17.5px;
  line-height: 1.45;
  text-align: left;
}

.wstep__opis--karta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-blik);
  opacity: 0.8;
  pointer-events: none;
}

.wstep__opis--karta > * {
  position: relative;
}

.wstep__opis-ikona {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(29, 78, 216, 0.6);
}

.wstep--czesc {
  max-width: 1500px;
}

/* Linia leży POD kaflami: nóżki schodzą z kafli, a ich kropki siedzą na torze. */
.linia {
  position: relative;
  margin-top: 54px;
  padding-bottom: 58px;
}

.linia__tor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.6), 0 0 2px rgba(29, 78, 216, 0.8);
  overflow: hidden;
}

.linia__prad {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -220px;
  width: 220px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, #fff 60%, var(--blue-sky) 80%, transparent);
  animation: linia-prad 3.6s linear infinite;
}

.linia__prad--2 {
  animation-delay: 1.8s;
}

@keyframes linia-prad {
  from {
    left: -220px;
  }
  to {
    left: 100%;
  }
}

.linia__kafle {
  display: grid;
  grid-template-columns: repeat(var(--ile, 5), minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}

.linia .dzial-kafel {
  min-height: 156px;
  padding: 14px 13px 12px;
  gap: 3px;
  translate: 0 0;
  animation:
    kafel-po-linii 0.7s var(--ease) both,
    kafel-podnosi 3.6s ease-in-out infinite;
  animation-delay: calc(0.07s * var(--i)), calc(3.6s / var(--ile, 5) * var(--i) + 0.6s);
}

.linia .dzial-kafel:hover {
  transform: translateY(-4px);
}

@keyframes kafel-po-linii {
  from {
    opacity: 0;
    translate: -90px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes kafel-podnosi {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: var(--glass-shadow);
  }
  7% {
    transform: translateY(-7px);
    box-shadow: var(--glass-shadow-lg), 0 0 0 2px rgba(14, 165, 233, 0.35);
  }
  16% {
    transform: translateY(0);
    box-shadow: var(--glass-shadow);
  }
}

.dzial-kafel__nozka {
  position: absolute;
  left: 50%;
  bottom: -42px;
  width: 2px;
  height: 42px;
  background: var(--blue);
  transform: translateX(-50%);
  opacity: 0.8;
  z-index: 0;
}

.dzial-kafel__nozka::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 3px solid var(--blue);
  background: #fff;
  transform: translateX(-50%);
}

.linia .dzial-kafel__ikona {
  width: 40px;
  height: 40px;
}

.linia .dzial-kafel__nazwa {
  font-size: 13.5px;
}

.linia .dzial-kafel__numer {
  margin-top: 8px;
}

.linia .dzial-kafel[data-status="wylaczony"] {
  animation-name: kafel-po-linii;
}

/* Bez kropki statusu w rogu kafla (wyglądała jak checkbox) — status niesie ikona. */
.linia .dzial-kafel__kropka {
  display: none;
}

/* ----------------------------------------------- ekran działu: scena -- */

.wstep--dzial {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
  min-height: calc(100vh - 190px);
}

/* Znak wodny w błękicie. Bez animacji wejścia (.wstep > *): jej fill-mode
   nadpisywał krycie, więc krycie siedzi w kolorach gradientu. */
/* Numer działu jako sam błękitny OBRYS (bez wypełnienia — decyzja właściciela). */
.wstep__znak {
  left: 0;
  top: -30px;
  transform: none;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(29, 78, 216, 0.45);
  background: none;
  opacity: 1;
  font-size: clamp(200px, 24vw, 320px);
  animation: none;
}

.uklad {
  padding: 16px 0 0;
}

.ekran {
  padding: 16px 0 72px;
}

.wstep--dzial .nadtytul {
  margin-bottom: 0;
  font-size: 12.5px;
}

.wstep--dzial .wstep__tytul {
  margin-top: 14px;
}

.wstep__scena {
  flex: 1;
  display: flex;
  width: 100%;
  min-height: 300px;
  margin-top: 30px;
}

/* --------------------------------------------------------- tydzień -- */

.tydzien {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}

.tydzien__pasek {
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.tydzien__pasek i {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tydzien__ptaszek {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid var(--blue);
  background: var(--blue-tint);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.tydzien__ptaszek:hover {
  background: var(--blue-tint-2);
}

.tydzien__ptaszek::after {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -2px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.12s var(--ease);
}

.tydzien__ptaszek:checked {
  background: var(--blue);
  border-color: var(--blue);
}

.tydzien__ptaszek:checked::after {
  opacity: 1;
}

.tydzien__ptaszek:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.2);
}

.pole--czas,
.pole--czas::-webkit-datetime-edit {
  font-family: var(--font);
  font-weight: 650;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.pole--czas {
  width: 124px;
  border-radius: 12px;
}

.segment__opcja[aria-pressed="true"] {
  background: var(--blue);
}

.tydzien__os {
  background: rgba(234, 242, 255, 0.7);
}

.tydzien__akcje {
  background: rgba(234, 242, 255, 0.7);
}

/* ---------------------------------------------------------- głosy -- */

.glosy {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.glos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 380px;
  padding: 36px 24px 26px;
  border-radius: var(--r-lg);
  text-align: center;
  animation: wejscie 0.6s var(--ease) both;
  animation-delay: calc(0.12s + 0.09s * var(--i));
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.glos:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-lg);
}

.glos__klawisz {
  position: absolute;
  top: 18px;
  right: 18px;
}

.glos__play {
  width: 104px;
  height: 104px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 0 rgba(3, 7, 18, 0.15),
    0 18px 40px -16px rgba(29, 78, 216, 0.7);
  transition: transform 0.18s var(--ease);
}

.glos[data-plec="k"] .glos__play {
  background: linear-gradient(135deg, var(--blue-sky), var(--blue));
}

.glos__play:hover {
  transform: scale(1.06);
}

.glos__play-ikona,
.glos__play-pauza {
  position: relative;
  z-index: 1;
  display: grid;
}

.glos__play-pauza,
.glos--gra .glos__play-ikona {
  display: none;
}

.glos--gra .glos__play-pauza {
  display: grid;
}

.glos__play-ikona svg {
  transform: translateX(3px);
}

.glos__pierscien {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(14, 165, 233, 0.6);
  opacity: 0;
}

.glos--gra .glos__pierscien {
  animation: il-fala-pierscien 1.8s ease-out infinite;
}

.glos--gra .glos__pierscien--2 {
  animation-delay: 0.9s;
}

@keyframes il-fala-pierscien {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.glos__fala {
  height: 36px;
  gap: 3px;
}

.glos__fala i {
  width: 4px;
  height: 8px;
  background: var(--blue-line);
}

.glos--gra .glos__fala i {
  background: var(--blue);
  animation: glos-fala 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.07s);
}

.glos__imie {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.glos__opis {
  font-size: 14px;
  color: var(--ink-muted);
}

.glos__wybor {
  width: 100%;
  max-width: 220px;
  margin-top: auto;
  padding: 13px 20px;
  border-radius: 14px;
  border: 1px solid rgba(29, 78, 216, 0.25);
  background: var(--surface);
  color: var(--blue);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.glos__wybor:hover,
.glos__wybor[aria-pressed="true"] {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
}

.glos__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.glos[aria-pressed="true"] {
  border-color: rgba(29, 78, 216, 0.5);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18), var(--glass-shadow-lg);
}

.glos--brak .glos__play {
  background: var(--bad);
}

/* -------------------------------------------------- tabela cennika -- */

.tabela__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tabela__licznik {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
}

.tabela {
  display: block;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.tabela__naglowek {
  display: grid;
}

.tabela__naglowek,
.tabela__wiersz {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) 136px minmax(0, 1.6fr) 34px;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.tabela__naglowek {
  background: rgba(234, 242, 255, 0.8);
  border-bottom: 1px solid var(--blue-line);
  padding: 10px 14px 8px;
}

.tabela__wiersz {
  position: static;
}

.tabela__wiersz + .tabela__wiersz {
  border-top: 1px solid var(--blue-line);
}

.tabela__komorka,
.tabela__komorka:first-child,
.tabela__komorka:nth-child(5),
.tabela__komorka:nth-child(6) {
  grid-column: auto;
  padding-right: 0;
}

.tabela__komorka--akcje {
  position: static;
}

.tabela__etykieta {
  display: none;
}

.tabela__brak {
  padding: 8px 10px;
  border: 0;
  color: var(--blue-line);
}

.lista__akcje--tabela {
  padding-bottom: 12px;
}

/* --------------------------------------------------- podsumowanie -- */

.pods {
  max-width: 1180px;
}

.pods__dzial {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  padding: 24px 26px 26px 20px;
  overflow: hidden;
}

/* Numer działu w podsumowaniu: sam błękitny obrys, bez wypełnienia (jak znak wodny działu). */
.pods__dzial-znak {
  font-size: 84px;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px rgba(29, 78, 216, 0.55);
  background: none;
  align-self: start;
  user-select: none;
}

.pods__dzial-tresc {
  min-width: 0;
}

.pods__dzial-tytul {
  font-size: 22px;
}

.pods__czesc-tytul {
  font-size: 13px;
}

/* ------------------------------------------------- sceny wersji 4 -- */

.il__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
  font-weight: 700;
  animation: il-plywa 4.5s ease-in-out infinite;
}

.il__chip svg {
  color: var(--good);
}

.il__chip .il__awatar {
  width: 24px;
  height: 24px;
}

.il__chip .il__awatar svg {
  width: 14px;
  height: 14px;
}

.il__chip--2 {
  position: absolute;
  right: 90px;
  bottom: 70px;
}

.il__dymek--os {
  max-width: 540px;
  align-self: center;
  padding: 11px 18px;
  font-size: 14px;
}

/* --- mapa modułów (hero) --- */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hero__scena {
  height: clamp(400px, 64vh, 620px);
  display: flex;
}

.il--mapa-modulow {
  align-items: center;
  justify-content: center;
  padding: 0;
}

.il__orbita {
  position: relative;
  width: 340px;
  height: 340px;
}

.il__rdzen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  margin: -65px 0 0 -65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow:
    var(--glass-shadow-lg),
    0 0 0 12px rgba(14, 165, 233, 0.08),
    0 0 0 26px rgba(14, 165, 233, 0.04);
  animation: rdzen-oddech 4s ease-in-out infinite;
  z-index: 3;
}

@keyframes rdzen-oddech {
  0%,
  100% {
    box-shadow:
      var(--glass-shadow-lg),
      0 0 0 12px rgba(14, 165, 233, 0.08),
      0 0 0 26px rgba(14, 165, 233, 0.04);
  }
  50% {
    box-shadow:
      var(--glass-shadow-lg),
      0 0 0 16px rgba(14, 165, 233, 0.12),
      0 0 0 34px rgba(14, 165, 233, 0.05);
  }
}

.il__rdzen-logo {
  display: inline-flex;
  align-items: flex-end;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.il__rdzen-logo i {
  width: 5px;
  height: 5px;
  margin: 0 0 1px 1px;
  border-radius: 999px;
  background: var(--blue);
}

.il__rdzen small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.il__promien {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 3px;
  margin-top: -1.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--kat));
  background: repeating-linear-gradient(90deg, rgba(29, 78, 216, 0.35) 0 6px, transparent 6px 12px);
  z-index: 1;
}

.il__promien-prad {
  position: absolute;
  left: 40px;
  top: 50%;
  width: 46px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--blue-sky), var(--blue));
  opacity: 0;
  animation: il-impuls-promien 2.4s linear infinite;
  animation-delay: calc(var(--i) * 0.4s);
}

@keyframes il-impuls-promien {
  0% {
    left: 44px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 124px;
    opacity: 0;
  }
}

.il__modul-kafel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 134px;
  margin: -29px 0 0 -67px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 8px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  transform: rotate(var(--kat)) translateX(152px) rotate(calc(-1 * var(--kat)));
  translate: 0 0;
  animation: modul-plywa 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
  z-index: 2;
}

@keyframes modul-plywa {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

.il__modul-ikona {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--cta);
  color: #fff;
}

.il--mapa-modulow > * {
  animation: none;
}

/* --- wybieranie numeru (duża klawiatura) --- */
.il--wybieranie {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 4px;
}

.il__wybieranie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 12px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
}

.il--wybieranie .il__wyswietlacz {
  padding: 4px 8px 2px;
}

.il--wybieranie .il__wyswietlacz b {
  font-size: 22px;
}

.il--wybieranie .il__klawisze {
  gap: 6px;
  padding: 0;
}

.il--wybieranie .il__klawisz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px;
  height: 46px;
  line-height: 1;
}

.il--wybieranie .il__klawisz b {
  font-size: 19px;
}

.il--wybieranie .il__klawisz small {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  min-height: 8px;
}

.il--wybieranie .il__zadzwon {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

.il__wybieranie-bok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 270px;
}

.il__karta--kontakt {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
}

/* --- e-mail: koperta z listem --- */
.il--mail {
  align-items: center;
  justify-content: center;
}

.il__mail {
  display: flex;
  align-items: center;
  gap: 48px;
}

.il__mail-do {
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 13px;
}

.il__mail-do b {
  overflow-wrap: anywhere;
}

.il__koperta-3d {
  position: relative;
  width: 250px;
  height: 165px;
  margin-top: 70px;
  perspective: 700px;
}

.il__koperta-tyl {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--blue-tint-2);
  z-index: 0;
}

.il__list {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 152px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px -14px rgba(3, 7, 18, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  z-index: 1;
  animation: list-wysuwa 6s var(--ease) infinite;
}

.il__list b {
  font-size: 13.5px;
  color: var(--ink);
}

.il__list-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--good);
}

.il__koperta-przod {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.il__koperta-klapka {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  border-radius: 14px 14px 0 0;
  background: var(--blue-deep);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: klapka-otwiera 6s var(--ease) infinite;
  z-index: 3;
}

@keyframes klapka-otwiera {
  0%,
  10% {
    transform: rotateX(0);
    z-index: 3;
  }
  22% {
    z-index: 0;
  }
  28%,
  82% {
    transform: rotateX(178deg);
    z-index: 0;
  }
  96%,
  100% {
    transform: rotateX(0);
    z-index: 3;
  }
}

@keyframes list-wysuwa {
  0%,
  28% {
    transform: translateY(0);
  }
  48%,
  80% {
    transform: translateY(-112px);
  }
  96%,
  100% {
    transform: translateY(0);
  }
}

/* --- lekarze --- */
.il--lekarze {
  justify-content: center;
  gap: 18px;
}

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

.il__lekarz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12.5px;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.35s);
}

.il__lekarz-awatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.il__lekarz-dni {
  display: flex;
  gap: 4px;
}

.il__lekarz-dni i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 7px;
  background: var(--blue-tint);
  color: var(--ink-muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

.il__lekarz-dni i.il__dzien--jest {
  background: var(--blue);
  color: #fff;
  animation: dzien-zapala 6s ease-in-out infinite;
  animation-delay: calc(var(--k) * 0.15s + var(--i) * 0.35s + 0.8s);
}

@keyframes dzien-zapala {
  0% {
    transform: scale(0.7);
    opacity: 0.3;
  }
  8%,
  100% {
    transform: none;
    opacity: 1;
  }
}

/* --- powiadomienie SMS (kalendarz + baner) --- */
.il--powiadomienie {
  align-items: center;
  justify-content: flex-end;
  padding: 26px 26px 18px;
}

.il__kalendarz {
  width: 340px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  overflow: hidden;
  font-size: 12.5px;
}

.il__kalendarz-belka {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--blue-tint);
  color: var(--blue);
}

.il__kalendarz-belka b {
  font-size: 13px;
  color: var(--ink);
}

.il__kalendarz-belka span {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-muted);
}

.il__kal-slot {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  border-top: 1px solid var(--blue-line);
}

.il__kal-slot span {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.il__kal-slot i {
  height: 22px;
  border-radius: 8px;
  font-style: normal;
  font-size: 11px;
  line-height: 22px;
  padding: 0 10px;
}

.il__kal-slot--zajety i {
  background: var(--blue-tint-2);
  font-weight: 600;
}

.il__kal-slot--nowy i {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  transform-origin: 0 50%;
  animation: slot-wchodzi 8s var(--ease) infinite;
}

@keyframes slot-wchodzi {
  0%,
  30% {
    transform: scaleX(0);
    opacity: 0;
  }
  40%,
  90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

.il__baner {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 470px;
  margin-left: -235px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12px;
  animation: baner-wjezdza 8s var(--ease) infinite !important;
}

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

.il__baner span {
  display: block;
  line-height: 1.35;
  color: var(--ink-soft);
  white-space: nowrap;
}

.il__baner small {
  align-self: start;
  color: var(--ink-muted);
}

.il__baner-ikona {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
}

@keyframes baner-wjezdza {
  0%,
  42% {
    transform: translateY(-130px);
    opacity: 0;
  }
  52%,
  92% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(-130px);
    opacity: 0;
  }
}

/* --- redukcja pustych foteli --- */
.il--fotele {
  justify-content: center;
  gap: 22px;
}

.il__fotele {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.il__fotel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 104px;
  padding: 16px 10px 12px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.il__fotel-ikona {
  color: var(--blue);
}

.il__fotel--pusty .il__fotel-ikona {
  animation: fotel-kolor 8s var(--ease) infinite;
}

.il__fotel-osoba {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
}

.il__fotel--pusty .il__fotel-osoba {
  opacity: 0;
  animation: fotel-zapelnia 8s var(--ease) infinite;
}

@keyframes fotel-zapelnia {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.5);
  }
  68%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fotel-kolor {
  0%,
  60% {
    color: var(--blue-line);
  }
  68%,
  92% {
    color: var(--blue);
  }
  100% {
    color: var(--blue-line);
  }
}

.il__fotele-sms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.il__dymek--f1 {
  animation: il-rozmowa-1 8s var(--ease) infinite;
  max-width: 100%;
}

.il__dymek--f2 {
  align-self: flex-end;
  animation: il-rozmowa-2 8s var(--ease) infinite;
}

/* --- oś czasu („kiedy?”) --- */
.il--os-czasu {
  justify-content: center;
  gap: 34px;
}

.il__os {
  position: relative;
  height: 140px;
  margin: 0 40px;
}

.il--os-czasu .il__os-tor {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: var(--blue-line);
  overflow: hidden;
}

.il__os-prad {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -160px;
  width: 160px;
  background: linear-gradient(90deg, transparent, var(--blue-sky), var(--blue), transparent);
  animation: os-prad 3.2s linear infinite;
}

@keyframes os-prad {
  from {
    left: -160px;
  }
  to {
    left: 100%;
  }
}

.il__os-punkt {
  position: absolute;
  left: var(--x);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
}

.il__os-punkt b {
  font-size: 12.5px;
  color: var(--ink);
}

.il__os-punkt small .il__zywy {
  color: var(--blue);
}

.il__os-ikona {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 7px rgba(29, 78, 216, 0.12);
}

.il__os-ikona--wizyta {
  background: var(--surface);
  color: var(--blue);
  border: 2px solid var(--blue);
}

.il__os-punkt--sms {
  animation: os-punkt 0.6s var(--ease) 0.5s both;
}

@keyframes os-punkt {
  from {
    opacity: 0;
    transform: translate(-50%, -30%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* --- ocena (prośba o opinię) --- */
.il--ocena {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.il__ocena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 28px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 14px;
}

.il__ocena .il__gwiazdki {
  gap: 6px;
}

.il__ocena .il__gwiazdka--pelna {
  color: var(--blue-line);
  animation: gwiazdka-zapala 6s ease-in-out infinite;
  animation-delay: calc(var(--g) * 0.25s);
}

@keyframes gwiazdka-zapala {
  0% {
    color: var(--blue-line);
    transform: scale(0.8);
  }
  10%,
  85% {
    color: var(--warn);
    transform: none;
  }
  100% {
    color: var(--blue-line);
  }
}

.il__ocena-podpis {
  font-size: 12px;
  color: var(--ink-muted);
}

.il__ocena-podpis em {
  font-style: normal;
  font-weight: 800;
  color: var(--blue);
}

.il__opinia--google {
  width: 280px;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 2.2s forwards;
}

.il__opinia-logo,
.il__opinia-logo svg {
  width: 26px;
  height: 26px;
  display: inline-grid;
}

/* --- cennik (metki) --- */
.il--cennik {
  justify-content: center;
  gap: 22px;
}

.il__metki {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.il__metka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 176px;
  padding: 18px 14px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.35s);
}

.il__metka-ikona {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--blue);
}

.il__metka b {
  font-size: 13.5px;
}

.il__metka em {
  font-style: normal;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.il__metka small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-muted);
}

/* --- rozmowa bez ramki telefonu (karta z dymkami) --- */
.il__rozmowa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 400px;
  margin: 0 auto;
  padding: 16px 18px 18px;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
}

.il__rozmowa .il__dymek {
  font-size: 13.5px;
  max-width: 86%;
}

.il__rozmowa .il__dymek--1 {
  animation: il-rozmowa-1 10s var(--ease) infinite;
}

.il__rozmowa .il__dymek--2 {
  animation: il-rozmowa-2 10s var(--ease) infinite;
}

.il__rozmowa .il__dymek--3 {
  animation: il-rozmowa-3 10s var(--ease) infinite;
}

.il--powrot .il__rozmowa {
  width: 440px;
}

/* --- połączenie przychodzące jako karta --- */
.il__polaczenie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 300px;
  padding: 26px 24px 22px;
  border-radius: 28px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  text-align: center;
  animation: il-wibruje 2.4s ease-in-out infinite;
}

.il__polaczenie-awatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--blue-tint-2);
  color: var(--blue);
}

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

.il__polaczenie b {
  font-size: 18px;
}

.il__polaczenie > span:not(.il__polaczenie-awatar) {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.il--przelaczenie,
.il--synchro,
.il--baza,
.il--sloty,
.il--kanaly,
.il--opinie,
.il--notatnik,
.il--przegladarka,
.il--powrot {
  padding: 26px 110px;
}

/* ------------------------------------------------------ responsywność -- */

@media (max-width: 1180px) {
  .pytanie__widzet--pelny .kafle[data-ile="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .linia__kafle {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__scena {
    height: clamp(300px, 46vh, 460px);
  }
}

@media (max-width: 900px) {
  .pytanie--scena {
    height: auto;
    min-height: 0;
  }

  .pytanie__scena {
    height: 42vh;
    min-height: 240px;
  }

  .pytanie__dol {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 16px -12px 0;
    padding: 18px 16px 90px;
    border-radius: 24px 24px 0 0;
  }

  .pytanie--scena .pytanie__widzet,
  .pytanie--scena .taknie {
    justify-self: stretch;
    margin: 0;
    max-width: none;
  }

  .pytanie__widzet--pelny .kafle,
  .pytanie__widzet--pelny .kafle[data-ile="2"],
  .pytanie__widzet--pelny .kafle[data-ile="3"],
  .pytanie__widzet--pelny .kafle[data-ile="4"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .pytanie__widzet--pelny .kafel-w {
    min-height: 0;
    padding: 24px 20px;
  }

  .glosy {
    grid-template-columns: minmax(0, 1fr);
  }

  .glos {
    min-height: 0;
    padding: 24px 20px;
  }

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

  .linia__tor,
  .dzial-kafel__nozka {
    display: none;
  }

  .wstep__scena {
    min-height: 240px;
  }

  .pods__dzial {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 18px 16px;
  }

  .pods__dzial-znak {
    font-size: 48px;
  }

  .tabela__naglowek {
    display: none;
  }

  .tabela__wiersz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .tabela__komorka:first-child,
  .tabela__komorka--akcje {
    grid-column: span 2;
  }

  .tabela__etykieta {
    display: block;
  }

  .belka {
    margin: 8px 10px 0;
    top: 6px;
  }
}

/* --------------------------------------- wersja 4: kropka ARKANIP (AI) -- */

/*
  Każda akcja Asystenta w scenach nosi KROPKĘ ARKANIP — błękitną kulkę
  jak kropka w logo — zamiast ikony „iskierek AI”. Właściciel: ma być
  widać, że to ARKANIP, nie losowy bot.
*/
.il__kropka {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  box-shadow:
    inset 0 -3px 6px rgba(3, 7, 18, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.65),
    0 4px 10px -4px rgba(29, 78, 216, 0.7);
}

.il__awatar--ai {
  padding: 0;
  background: none;
  box-shadow: none;
}

.il__kropka--mala {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.aktor--ai .aktor__kolo {
  background: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  box-shadow:
    inset 0 -4px 8px rgba(3, 7, 18, 0.28),
    inset 0 2px 4px rgba(255, 255, 255, 0.65),
    0 14px 30px -12px rgba(29, 78, 216, 0.7);
}

/* Loga kanałów / platform w kaflach — jeden kształt: wszystkie przycięte do koła. */
.kafel-w__loga .logo-marki svg {
  clip-path: circle(49% at 50% 50%);
}

/* --- przebudowa w miejscu: bez animacji wejścia, tylko nowy wiersz wjeżdża --- */
.ekran--bez-wejscia .pytanie > *,
.ekran--bez-wejscia .wstep > *,
.ekran--bez-wejscia .modele .model,
.ekran--bez-wejscia .glos,
.ekran--bez-wejscia .linia .dzial-kafel,
.ekran--bez-wejscia .hero__tekst > *,
.ekran--bez-wejscia .hero__scena,
.ekran--bez-wejscia .notatki__wpis {
  animation: none;
}

.ekran--bez-wejscia .linia .dzial-kafel {
  animation: kafel-podnosi 3.6s ease-in-out infinite;
  animation-delay: calc(3.6s / var(--ile, 5) * var(--i) + 0.6s);
}

.wiersz--nowy {
  animation: wejscie 0.4s var(--ease) both;
}

/* ------------------------------------------ wersja 4: sceny działów -- */

/* --- profil kliniki --- */
.il--profil {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.il__profil {
  width: 360px;
  padding: 14px 16px 12px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
}

.il__profil-belka {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--blue-line);
}

.il__profil-belka .il__karta-awatar {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.il__profil-belka b {
  font-size: 13.5px;
}

.il__profil-belka small {
  color: var(--ink-muted);
  font-size: 10.5px;
}

.il__profil-wiersz {
  display: grid;
  grid-template-columns: 26px 62px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.5s);
}

.il__profil-wiersz small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.il__profil-wiersz b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 650;
}

.il__profil-ikona {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--blue-tint);
  color: var(--blue);
}

.il__profil-ok {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  animation: il-dymek 0.3s var(--ease) both;
  animation-delay: calc(0.9s + var(--i) * 0.5s);
}

.il__chip--profil {
  animation-delay: 1.2s;
}

/* --- akceptacja (właściciel) --- */
.il--akceptacja {
  justify-content: center;
  gap: 26px;
  padding: 26px 110px;
}

.il__wpisy-kolumna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.il__wpis--1,
.il__wpis--2 {
  animation-name: il-dymek;
}

/* --- grafik tygodnia (lekarze) --- */
.il--grafik {
  justify-content: center;
  gap: 16px;
  padding: 26px 90px;
}

.il__grafik {
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  padding: 12px 14px 14px;
}

.il__grafik-dni {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}

.il__grafik-siatka {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, 44px);
  gap: 8px;
  background-image: repeating-linear-gradient(180deg, var(--blue-tint) 0 44px, transparent 44px 52px);
}

.il__grafik-blok {
  grid-column: calc(var(--d) + 1);
  grid-row: calc(var(--od) + 1) / span var(--dl);
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  transform-origin: 50% 0;
  animation: blok-rosnie 0.5s var(--ease) both;
  animation-delay: calc(0.3s + var(--i) * 0.18s);
}

@keyframes blok-rosnie {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.il__grafik-blok--jk {
  background: var(--blue-sky);
}

.il__grafik-blok--mw {
  background: var(--blue-deep);
}

.il__legenda {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

.il__legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.il__legenda i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--blue);
}

/* --- miesiąc (terminy) --- */
.il--miesiac {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.il__miesiac-karta {
  width: 300px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  overflow: hidden;
}

.il__miesiac-siatka {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 14px 14px;
}

.il__miesiac-siatka i {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 9px;
  background: var(--blue-tint);
  color: var(--ink-muted);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
}

.il__miesiac-siatka i.il__dzien--wolny {
  background: var(--blue);
  color: #fff;
  animation: dzien-pulsuje 4s ease-in-out infinite;
  animation-delay: calc(var(--k) * 0.35s);
}

@keyframes dzien-pulsuje {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.3);
  }
  12% {
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(29, 78, 216, 0);
  }
}

.il__reguly {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.il__regula {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
}

.il__regula svg {
  color: var(--blue);
}

.il__regula--1 {
  animation-delay: 0.5s;
}

.il__regula--2 {
  animation-delay: 1s;
}

.il__regula--3 {
  animation-delay: 1.5s;
}

/* --- oceny (opinie) --- */
.il--oceny {
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.il__oceny {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 26px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
}

.il__oceny-srednia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.il__oceny-srednia b {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

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

.il__oceny-slupki {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 220px;
}

.il__oceny-slupek {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
}

.il__oceny-slupek i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--blue-tint-2);
  overflow: hidden;
}

.il__oceny-slupek b {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: 999px;
  background: var(--blue);
  transform-origin: 0 50%;
  animation: blok-rosnie-x 0.8s var(--ease) both;
  animation-delay: calc(0.3s + var(--i) * 0.12s);
}

@keyframes blok-rosnie-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}

/* chip „Odpowiedziałem na 128 opinii” na osi pod panelem ocen (właściciel: wyśrodkowane lub po prawej — wybrane środek) */
.il__chip--oceny {
  align-self: center;
  animation-delay: 1s;
}

/* --- powroty (reaktywacja) --- */
.il--powroty {
  justify-content: center;
  align-items: center;
}

.il__powroty {
  display: flex;
  gap: 16px;
}

.il__powrot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 190px;
  padding: 18px 14px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.3s);
}

.il__powrot b {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.il__powrot small {
  font-size: 13px;
  font-weight: 700;
}

.il__lekarz-awatar--pacjent {
  background: var(--blue-tint-2);
  color: var(--blue);
}

.il__powrot-status {
  position: relative;
  height: 24px;
  width: 100%;
  margin-top: 8px;
}

.il__powrot-status em {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}

.il__powrot-sms {
  background: var(--blue-tint);
  color: var(--blue);
  animation: powrot-sms 7s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.6s);
}

.il__powrot-ok {
  background: rgba(22, 163, 74, 0.12);
  color: var(--good);
  animation: powrot-ok 7s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.6s);
}

@keyframes powrot-sms {
  0%,
  10% {
    opacity: 0;
  }
  18%,
  50% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}

@keyframes powrot-ok {
  0%,
  56% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  64%,
  92% {
    opacity: 1;
    transform: translateX(-50%);
  }
  100% {
    opacity: 0;
  }
}

/* --- wątek SMS (sms) --- */
.il--watek {
  justify-content: center;
  padding: 26px 140px;
}

.il__watek {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.il__watek-wpis {
  display: grid;
  grid-template-columns: 90px 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.6s);
}

.il__watek-kiedy {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: right;
}

.il__watek-ikona {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.1);
}

.il__watek-dymek {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 16px;
  border-top-left-radius: 4px;
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
}

.il__watek-dymek b {
  font-size: 12.5px;
}

.il__watek-dymek span {
  color: var(--ink-soft);
}

/* --- integracja: paczki danych lecą z programu kliniki do ARKANIP --- */
.il--integracja {
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.il__int {
  display: flex;
  align-items: center;
}

.il__int-karta {
  width: 210px;
  padding: 14px 16px 12px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 11.5px;
}

.il__int-karta--ai {
  background: var(--cta);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 24px 50px -20px rgba(29, 78, 216, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.il__int-naglowek {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--blue-line);
  color: var(--blue);
}

.il__int-karta--ai .il__int-naglowek {
  border-bottom-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.il__int-naglowek svg,
.il__int-kropka {
  grid-row: 1 / 3;
}

.il__int-naglowek b {
  font-size: 13px;
  color: var(--ink);
}

.il__int-karta--ai .il__int-naglowek b {
  color: #fff;
}

.il__int-naglowek small {
  font-size: 10.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__int-karta--ai .il__int-naglowek small {
  color: rgba(255, 255, 255, 0.75);
}

.il__int-kropka {
  display: block;
  width: 30px;
  height: 30px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
}

.il__int-wiersz {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}

.il__int-wiersz span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.il__int-wiersz i {
  height: 20px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--blue-tint);
  font-style: normal;
  line-height: 20px;
}

.il__int-wiersz--nowy i {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.il__int-link {
  position: relative;
  width: 190px;
  height: 4px;
  border-radius: 999px;
  background: var(--blue-line);
}

.il__int-blask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  width: 80px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--blue-sky), var(--blue), transparent);
  animation: int-blask 2s linear infinite;
}

@keyframes int-blask {
  from {
    left: -80px;
  }
  to {
    left: 100%;
  }
}

.il__int-paczka {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  animation: int-paczka 6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 2s);
}

.il__int-paczka svg {
  color: var(--blue);
}

@keyframes int-paczka {
  0% {
    left: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    left: 100%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  34%,
  100% {
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

.il__int-odbior {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin-top: 2px;
  border-radius: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  animation: int-odbior 6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 2s);
}

.il__int-odbior svg {
  color: #fff;
  opacity: 0.6;
}

@keyframes int-odbior {
  0%,
  28% {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
  }
  32% {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }
  60%,
  100% {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
  }
}

.il__int-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.il__int-status i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: int-puls 2s ease-out infinite;
}

@keyframes int-puls {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  }
  100% {
    box-shadow: 0 0 0 9px rgba(22, 163, 74, 0);
  }
}

/* --- wyjątek (uwagi) --- */
.il--wyjatek {
  align-items: center;
  justify-content: center;
}

.il--wyjatek .il__rozmowa {
  width: 380px;
  margin: 0 0 0 40px;
}

.il__chip--wyjatek {
  position: absolute;
  right: 60px;
  bottom: 40px;
  max-width: 260px;
  white-space: normal;
  animation-delay: 1.5s;
}

.il__chip--wyjatek svg {
  color: var(--blue);
}

/* --- pakiety (materiały) --- */
.il--pakiety {
  justify-content: center;
  align-items: center;
}

.il__pakiety {
  display: flex;
  gap: 24px;
}

.il__pakiet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 220px;
  padding: 20px 18px 16px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.35s);
}

.il__pakiet b {
  margin-top: 8px;
  font-size: 14px;
}

.il__pakiet small {
  color: var(--ink-muted);
}

.il__pierscien {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: conic-gradient(var(--blue) var(--kat, 0deg), var(--blue-tint-2) 0);
  animation: pierscien 6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.8s);
}

.il__pierscien i {
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--surface);
}

.il__pakiet-ikona {
  position: relative;
  color: var(--blue);
}

@property --kat {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes pierscien {
  0%,
  10% {
    --kat: 0deg;
  }
  60%,
  100% {
    --kat: 360deg;
  }
}

.il__pakiet-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--good);
  opacity: 0;
  animation: pakiet-ok 6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.8s);
}

@keyframes pakiet-ok {
  0%,
  60% {
    opacity: 0;
  }
  68%,
  100% {
    opacity: 1;
  }
}

/* ================================================================== */
/* ------------------------------------------ WERSJA 4.1: SZLIF APPLE -- */
/* ================================================================== */

/*
  Szlif w duchu Apple (decyzja właściciela: minimalizm, jakość, przejrzystość,
  elegancja). Reguły nadpisują wcześniejsze: mniej ozdób (bez kropkowanej
  siatki i mocnych poświat), włosowe krawędzie zamiast białych obrysów,
  cienie ledwie widoczne, typografia z mocną hierarchią i spokojniejszymi
  wagami, przyciski w pigułkach, jeden wyraźny akcent: błękit.
*/

/* --- tło: spokojniejsza poświata --- */
.tlo {
  background:
    radial-gradient(900px 600px at 88% -10%, rgba(14, 165, 233, 0.12), transparent 62%),
    radial-gradient(700px 520px at 8% 110%, rgba(29, 78, 216, 0.07), transparent 60%);
}

/* --- typografia --- */
h1,
h2,
h3 {
  letter-spacing: -0.03em;
}

.hero__tytul,
.wstep__tytul,
.moduly__tytul,
.pods__tytul {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.pytanie__tresc {
  font-weight: 750;
}

.hero__lead,
.wstep__opis,
.moduly__lead,
.pytanie__opis,
.pods__lead {
  color: var(--ink-muted);
}

.nadtytul {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Przycisk CTA („OK”, „Dalej”) zostaje w wersji z gradientem i zaokrągleniem 14 px —
   właściciel odrzucił pigułkę w płaskim błękicie. Nie zmieniać. */
.cta--cichy {
  background: var(--surface);
  border: 1px solid rgba(3, 7, 18, 0.1);
  color: var(--ink);
  box-shadow: none;
}

.cta--cichy:hover {
  background: var(--surface);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: none;
}

.cta__kbd,
.cta__meta {
  background: rgba(255, 255, 255, 0.2);
}

.chip,
.pomin__przycisk,
.pods__popraw {
  border-color: rgba(3, 7, 18, 0.1);
  box-shadow: none;
}

/* Podpowiedź klawisza („Spacja”) zostaje niebieska jak wcześniej. */

/* --- belka: biała, włosowa linia, bez ciężkiego cienia --- */
.belka {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(3, 7, 18, 0.06);
  box-shadow: 0 8px 30px -22px rgba(3, 7, 18, 0.25);
}

.logo {
  border: 0;
  background: none;
  box-shadow: none;
  padding-left: 8px;
}

.ikonka {
  border-color: rgba(3, 7, 18, 0.08);
  background: var(--surface);
  box-shadow: none;
}

.postep__tor {
  height: 4px;
  background: rgba(29, 78, 216, 0.1);
}

.postep__wypelnienie {
  background: var(--blue);
}

/* --- pasek akcji i znacznik: białe pigułki --- */
.pytanie__akcje,
.znacznik__przycisk {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(3, 7, 18, 0.06);
  box-shadow: 0 10px 30px -18px rgba(3, 7, 18, 0.25);
  backdrop-filter: blur(12px);
}

.pytanie__akcje::before,
.znacznik__przycisk::before {
  display: none;
}

.znacznik__numer {
  background: var(--blue);
}

/* --- karty: włosowe krawędzie, duży promień, blik ledwie widoczny --- */
.dzial-kafel::before,
.kafel-w::before,
.glos::before,
.model::before,
.modul::before,
.karta::before,
.pods__dzial::before,
.il-ramka::before,
.taknie__kafel::before,
.opcja::before,
.gwiazdki__gwiazda::before,
.notatki__wpis::before,
.pomin__przycisk::before,
.pods__akcje::before,
.il__modul-kafel::before,
.il__rdzen::before {
  opacity: 0.6;
}

.dzial-kafel,
.kafel-w,
.glos,
.model,
.modul,
.karta,
.pods__dzial,
.taknie__kafel,
.opcja,
.notatki__wpis,
.tydzien,
.tabela,
.menu,
.schemat {
  border-color: rgba(3, 7, 18, 0.06);
}

.kafel-w,
.glos,
.model,
.pods__dzial,
.il-ramka {
  border-radius: 28px;
}

.dzial-kafel:hover,
.kafel-w:hover,
.glos:hover,
.model:hover,
.modul:hover {
  transform: translateY(-2px);
}

/* Zaznaczenie: jedna wyraźna błękitna obwódka, bez łuny. */
.kafel-w[aria-pressed="true"],
.glos[aria-pressed="true"],
.model[aria-pressed="true"],
.taknie__kafel[aria-pressed="true"],
.opcja[aria-pressed="true"] {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), var(--glass-shadow-lg);
  background: var(--surface);
}

.kafel-w__stopka,
.glos__wybor,
.model__cta {
  border-radius: 999px;
  border-color: rgba(3, 7, 18, 0.1);
}

.kafel-w__ikona,
.kafel-w__loga .logo-marki {
  border-color: rgba(3, 7, 18, 0.06);
  box-shadow: 0 6px 16px -10px rgba(3, 7, 18, 0.2);
}

/* --- ramka sceny na ekranie działu: bez kropek, czysty gradient --- */
.il-ramka {
  background: linear-gradient(180deg, #fff, var(--blue-tint));
}

/* --- pola --- */
.typebar {
  border-bottom: 1.5px solid rgba(3, 7, 18, 0.12);
}

.typebar:focus-within {
  border-bottom-color: var(--blue);
}

.typebar__pole {
  font-weight: 500;
}

.pole,
.wpis__pole {
  border-color: rgba(3, 7, 18, 0.1);
  border-radius: 12px;
}

.tydzien__dzien,
.tydzien__os {
  border-top-color: rgba(3, 7, 18, 0.06);
}

.tydzien__linia {
  background-color: rgba(3, 7, 18, 0.03);
  background-image: repeating-linear-gradient(90deg, rgba(3, 7, 18, 0.06) 0 1px, transparent 1px calc(100% / 8));
}

.tydzien__pasek {
  box-shadow: none;
}

.tydzien__ptaszek {
  border-width: 1.5px;
}

.tabela__naglowek {
  background: rgba(3, 7, 18, 0.025);
  border-bottom-color: rgba(3, 7, 18, 0.06);
}

.tabela__wiersz + .tabela__wiersz {
  border-top-color: rgba(3, 7, 18, 0.06);
}

/* --- dolny pasek pytania --- */
.pytanie__dol {
  border-top: 1px solid rgba(3, 7, 18, 0.06);
  box-shadow: 0 -12px 40px -32px rgba(3, 7, 18, 0.2);
}

/* --- ekran części: linia cieńsza, kafle spokojniejsze --- */
.linia__tor {
  height: 3px;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.35);
}

.dzial-kafel__nozka::after {
  border-width: 2px;
}

.wstep__opis--karta {
  border-color: rgba(3, 7, 18, 0.06);
  box-shadow: var(--glass-shadow);
}

.wstep__opis-ikona {
  background: var(--blue);
  box-shadow: none;
}

/* --- głosy: przycisk play płaski, pierścień cienki --- */
.glos__play {
  background: var(--blue);
  box-shadow: 0 12px 28px -14px rgba(29, 78, 216, 0.6);
}

.glos[data-plec="k"] .glos__play {
  background: var(--blue-sky);
}

/* --- podsumowanie --- */
.pods__akcje {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(3, 7, 18, 0.06);
}

.pods__wiersz {
  border-top-color: rgba(3, 7, 18, 0.06);
}

/* --- moduły: przełącznik iOS --- */
.przelacznik {
  background: rgba(3, 7, 18, 0.12);
}

.modul[aria-pressed="true"] .przelacznik {
  background: var(--good);
}

.modul__ikona {
  background: var(--blue);
}

/* --- przejścia ekranów bez transformacji na .ekran --- */

/*
  Wjazd / wyjazd ekranu animuje TYLKO krycie na .ekran. Transformacja na
  .ekran robiła z niego blok odniesienia dla elementów position: fixed
  (biały pasek pytania, pasek akcji) — na starcie stały pośrodku i skakały
  na dół po animacji. Ruch mają dzieci: ekrany bez własnych animacji
  (hero, moduły, podsumowanie) dostają zsuw, pytanie i wstęp mają swoje.
*/
@keyframes ekran-pojawia {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ekran-znika {
  to {
    opacity: 0;
  }
}

.ekran--z-dolu,
.ekran--z-gory {
  animation: ekran-pojawia 0.3s var(--ease) both;
}

.ekran--wyjscie-gora,
.ekran--wyjscie-dol {
  animation: ekran-znika 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

.ekran--z-dolu > :not(.pytanie):not(.wstep) {
  animation: z-dolu 0.45s var(--ease) both;
}

.ekran--z-gory > :not(.pytanie):not(.wstep) {
  animation: z-gory 0.45s var(--ease) both;
}

.ekran--wyjscie-gora > :not(.pytanie):not(.wstep) {
  animation: wyjscie-gora 0.24s cubic-bezier(0.4, 0, 1, 1) both;
}

.ekran--wyjscie-dol > :not(.pytanie):not(.wstep) {
  animation: wyjscie-dol 0.24s cubic-bezier(0.4, 0, 1, 1) both;
}

/* Biały pasek pytania stoi w miejscu: tylko wygasza się i pojawia. */
.pytanie--scena .pytanie__dol {
  animation: ekran-pojawia 0.35s var(--ease) both;
}

.ekran--wyjscie-gora .pytanie__dol,
.ekran--wyjscie-dol .pytanie__dol {
  animation: ekran-znika 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

.ekran--wyjscie-gora .pytanie__akcje,
.ekran--wyjscie-dol .pytanie__akcje {
  animation: ekran-znika 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- numer działu w tle: mniejszy, węższy, cieńszy obrys --- */
.wstep__znak {
  left: 0;
  top: -6px;
  font-size: clamp(150px, 15vw, 210px);
  letter-spacing: -0.09em;
  -webkit-text-stroke: 2px rgba(29, 78, 216, 0.4);
  transform: scaleX(0.86);
  transform-origin: 0 50%;
}

/* --- ekran pytania ze sceną: scena „wtapia się” w dół, bez twardej krawędzi --- */

/*
  Zamiast ostro odciętego białego paska: dolna strefa przechodzi z tła
  w biel miękkim gradientem, a scena sięga pod ten gradient, więc obraz
  rozpływa się w pytanie. Pod sceną leży delikatna błękitna poświata jako
  „grunt”, żeby animacja nie wisiała w pustce. Pytanie i pasek stoją w jednym
  rzędzie, w kontenerze max 1240 px, na osi ekranu.
*/
.pytanie--scena {
  height: calc(76vh - 84px);
  padding-top: 14px;
}

.pytanie__scena {
  position: relative;
}

.pytanie__scena::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 64%;
  height: 44%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(29, 78, 216, 0.1), rgba(14, 165, 233, 0.04) 45%, transparent 72%);
  pointer-events: none;
}

.pytanie__dol {
  height: 36vh;
  min-height: 260px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  padding: 56px max(56px, calc(50% - 620px)) 78px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 28%, #fff 55%);
  border-top: 0;
  box-shadow: none;
}

.pytanie__tekst {
  max-width: none;
  justify-self: stretch;
}

.pytanie--scena .pytanie__widzet {
  max-width: none;
  justify-self: stretch;
}

.pytanie--scena .pytanie__tresc {
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -0.035em;
}

.pytanie--scena .pytanie__opis {
  margin-top: 8px;
  font-size: 15px;
}

.pytanie--scena .typebar {
  border-bottom: 2px solid rgba(29, 78, 216, 0.22);
}

.pytanie--scena .typebar:focus-within {
  border-bottom-color: var(--blue);
}

.pytanie--scena .typebar__pole {
  padding: 8px 0 12px;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.pytanie--scena .typebar__pole::placeholder {
  color: rgba(82, 101, 129, 0.38);
}

.pytanie--scena .taknie {
  max-width: 520px;
  margin: 0;
}

/* ------------------------------------------ wersja 4: fasada kliniki (SVG) -- */

/*
  Scena kliniki na CAŁĄ szerokość: plansza .il--szyld rozciąga się na
  szerokość ramki, a niebo, chodnik, krawężnik i ulica rysuje CSS jako
  pełnoszerokie warstwy (::before = chodnik, ::after = ulica). Budynek
  i wszystko wokół to SVG 720 px na środku, o stałych proporcjach — nic się
  nie rozciąga. --ks = skala rysunku (1 na ekranie działu, 0.82 na pytaniu).
  Wariant z rozmyciem boków uchylony (właściciel: „tragicznie”).
*/
.il--szyld {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #e9f1fb);
  -webkit-mask-image: none;
  mask-image: none;
}

.il--szyld::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(288px * var(--ks));
  bottom: 0;
  background:
    linear-gradient(180deg, #b9c8dc 0, #b9c8dc calc(6px * var(--ks)), transparent calc(6px * var(--ks))),
    linear-gradient(180deg, transparent calc(28px * var(--ks)), rgba(255, 255, 255, 0.7) calc(28px * var(--ks)), rgba(255, 255, 255, 0.7) calc(29px * var(--ks)), transparent calc(29px * var(--ks))),
    linear-gradient(180deg, #e3eaf4, #cbd7e8);
  z-index: 0;
}

.il--szyld::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(336px * var(--ks));
  bottom: 0;
  background:
    linear-gradient(180deg, #aebdd2 0, #aebdd2 calc(2px * var(--ks)), transparent calc(2px * var(--ks))),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 calc(18px * var(--ks)), transparent calc(18px * var(--ks)) calc(32px * var(--ks))) 0 calc(11px * var(--ks)) / 100% calc(2px * var(--ks)) no-repeat,
    #c3cfe0;
  z-index: 0;
}

.il__fasada {
  display: none;
}

.il__klinika {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  /* klinika lekko w prawo, po lewej zostaje miejsce na billboard ARKANIP */
  margin-left: calc(-360px * var(--ks) + 30px);
  overflow: visible;
  z-index: 1;
}

/* Szyld dokładnie nad wejściem: środek drzwi w SVG = x 360 → +30 px przesunięcia budynku. */
.il--szyld .il__szyld {
  margin-left: 30px;
}

.il--szyld .il__szyld,
.il__chip--klinika {
  z-index: 2;
}

/* Na ekranie pytania rysunek jest mniejszy (0.82), żeby ulica z autem była nad białym przejściem. */
.pytanie--scena .il--szyld {
  --ks: 0.82;
  padding-bottom: 0;
}

.pytanie--scena .il--szyld .il__szyld {
  top: calc(106px * var(--ks));
  transform: translateX(-50%) scale(0.84);
}

.pytanie--scena .il__chip--klinika {
  top: 0;
}

/* Szyld (HTML) nad ciemnym pasem między piętrami. */
.il--szyld .il__szyld {
  position: absolute;
  left: 50%;
  top: 106px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 22px 10px 14px;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px -12px rgba(3, 7, 18, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  max-width: 78%;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

.il__szyld-logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cta);
  color: #fff;
  flex-shrink: 0;
}

/* Okno z zapalonym światłem na piętrze */
.il__k-okno--swiatlo rect:first-child {
  fill: #fff1c2;
  animation: k-okno 6s ease-in-out infinite;
}

@keyframes k-okno {
  0%,
  100% {
    fill: #fff1c2;
  }
  50% {
    fill: #ffe9a8;
  }
}

/* Odblask po witrynie */
.il__k-odblask {
  animation: k-odblask 9s ease-in-out infinite;
}

@keyframes k-odblask {
  0%,
  100% {
    transform: translateX(0) skewX(-16deg);
  }
  50% {
    transform: translateX(440px) skewX(-16deg);
  }
}

/* Drzwi przesuwne: rozsuwają się na boki i wracają */
.il__k-drzwi-l,
.il__k-drzwi-p {
  animation: k-drzwi-l 9s var(--ease) infinite;
}

.il__k-drzwi-p {
  animation-name: k-drzwi-p;
}

@keyframes k-drzwi-l {
  0%,
  28% {
    transform: translateX(0);
  }
  40%,
  62% {
    transform: translateX(-52px);
  }
  74%,
  100% {
    transform: translateX(0);
  }
}

@keyframes k-drzwi-p {
  0%,
  28% {
    transform: translateX(0);
  }
  40%,
  62% {
    transform: translateX(52px);
  }
  74%,
  100% {
    transform: translateX(0);
  }
}

.il__k-lampki circle {
  animation: k-lampka 3s ease-in-out infinite;
}

.il__k-lampki circle:nth-child(2) {
  animation-delay: 0.6s;
}

.il__k-lampki circle:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes k-lampka {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.il__k-otwarte {
  animation: otwarte-mruga 3s ease-in-out infinite;
}

@keyframes otwarte-mruga {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* --- fasada: życie wokół kliniki (chmury, ptaki, drzewa, auto, pacjent, recepcja) --- */
.il__k-chmura {
  animation: k-chmura 40s linear infinite;
}

.il__k-chmura--1 {
  transform: translate(60px, 8px);
  animation-duration: 46s;
}

.il__k-chmura--2 {
  transform: translate(380px, 18px) scale(0.8);
  animation-duration: 58s;
  animation-delay: -20s;
}

@keyframes k-chmura {
  from {
    translate: -140px 0;
  }
  to {
    translate: 760px 0;
  }
}

.il__k-ptaki {
  animation: k-ptaki 18s linear infinite;
}

@keyframes k-ptaki {
  0% {
    transform: translate(-40px, 14px);
  }
  50% {
    transform: translate(360px, -4px);
  }
  100% {
    transform: translate(780px, 10px);
  }
}

.il__k-drzewo {
  transform-origin: 33px 292px;
  animation: k-drzewo 6s ease-in-out infinite;
}

.il__k-drzewo--p {
  transform-origin: 691px 292px;
  animation-delay: -3s;
}

@keyframes k-drzewo {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}

.il__k-auto {
  animation: k-auto 14s linear infinite;
}

/* Auto wjeżdża spoza lewej krawędzi strony i wyjeżdża poza prawą (SVG ma overflow visible). */
@keyframes k-auto {
  0% {
    transform: translateX(-760px);
  }
  70%,
  100% {
    transform: translateX(1420px);
  }
}

/* Pacjent idzie chodnikiem do drzwi i znika w środku, gdy drzwi się rozsuwają (9 s jak drzwi). */
.il__k-pacjent {
  animation: k-pacjent 9s linear infinite;
}

@keyframes k-pacjent {
  0% {
    transform: translate(120px, 286px);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  40% {
    transform: translate(352px, 286px);
    opacity: 1;
  }
  46% {
    transform: translate(360px, 276px) scale(0.92);
    opacity: 1;
  }
  52%,
  100% {
    transform: translate(360px, 270px) scale(0.85);
    opacity: 0;
  }
}

/* Pacjent: spokojny krok (lekkie kołysanie sylwetki), bez machających nóg. */
.il__k-pacjent-sylwetka {
  animation: k-krok 0.6s ease-in-out infinite;
}

@keyframes k-krok {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.il__k-reka {
  transform-origin: 134px 208px;
  animation: k-reka 0.5s ease-in-out infinite;
}

@keyframes k-reka {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-8deg);
  }
}

.il__k-ekran {
  animation: k-ekran 2.4s ease-in-out infinite;
}

@keyframes k-ekran {
  0%,
  100% {
    fill: #bfe0ff;
  }
  50% {
    fill: #e0f0ff;
  }
}

.il__chip--klinika {
  position: absolute;
  right: calc(50% - 320px);
  top: 14px;
  z-index: 3;
  animation: il-plywa 4.5s ease-in-out infinite, il-dymek 0.6s var(--ease) 1.2s both;
}

/* Scena pytania na CAŁĄ szerokość strony (poza kontener .uklad). */
.pytanie--scena .pytanie__scena {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

body {
  overflow-x: hidden;
}

/* Felgi Porsche obracają się podczas jazdy. */
.il__k-felga {
  animation: k-felga 0.5s linear infinite;
}

@keyframes k-felga {
  to {
    transform: rotate(360deg);
  }
}

/* Na ulicy jeździ tylko rysunek wektorowy Porsche (zdjęcia aut i Urus uchylone przez właściciela). */

/* Scena kliniki stoi w miejscu — bez „oddychania” całej planszy (drzwi, auta, chmury animują się dalej). */
.il--szyld > * {
  animation: none;
}

.il--szyld .il__szyld.il__szyld {
  margin-left: 30px;
}

/* ------------------------------------------------ wersja 4: mapa Apple -- */

.il--mapa {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #f1f5fa;
}

.il--mapa .il__mapa {
  display: none;
}

.il__mapka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: mapka-zoom 1.4s var(--ease) both;
  transform-origin: 53% 45%;
}

@keyframes mapka-zoom {
  from {
    transform: scale(1.12);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.il--mapa > * {
  animation: none;
}

.il--mapa .il__mapka {
  animation: mapka-zoom 1.4s var(--ease) both;
}

/* pinezka: spada, odbija się, fala rozchodzi się po lądowaniu */
.il__mapka-pin-korpus {
  transform-origin: 385px 138px;
  animation: mapka-pin 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

@keyframes mapka-pin {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  55% {
    transform: translateY(0);
    opacity: 1;
  }
  75% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.il__mapka-fala {
  transform-origin: 385px 138px;
  animation: mapka-fala 2.4s ease-out 1.4s infinite;
}

@keyframes mapka-fala {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* auto jedzie aleją tam i z powrotem */
.il__mapka-auto {
  animation: mapka-auto 14s linear infinite;
}

/* ruch prawostronny: w prawo dolnym pasem, powrót górnym */
@keyframes mapka-auto {
  0% {
    transform: translate(-30px, 221px);
  }
  48% {
    transform: translate(750px, 221px);
  }
  50% {
    transform: translate(750px, 209px) scaleX(-1);
  }
  98% {
    transform: translate(-30px, 209px) scaleX(-1);
  }
  100% {
    transform: translate(-30px, 221px);
  }
}

/* nazwa ulicy na żywo — podświetla się, gdy klinika wpisuje */
.il__mapka-ulica {
  fill: #1d4ed8;
}

.il__mapka-ulica-tekst {
  font-weight: 800;
}

/* karta adresu w stylu Apple, nad mapą */
.il__mapka-karta {
  position: absolute;
  right: 26px;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(3, 7, 18, 0.06);
  box-shadow: 0 16px 40px -20px rgba(3, 7, 18, 0.35);
  font-size: 12px;
  animation: il-dymek 0.5s var(--ease) 1.2s both;
  z-index: 2;
}

.il__mapka-karta-ikona {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  flex-shrink: 0;
}

.il__mapka-karta-tresc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-width: 260px;
}

.il__mapka-karta-tresc b {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__mapka-karta-tresc span {
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__mapka-nawiguj {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.pytanie--scena .il--mapa {
  height: 100%;
}

/* --------------------------------------- wersja 4: połączenie w toku -- */

.il__wybieranie-bok {
  width: 300px;
}

.il__rozmowa-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 18px 18px 16px;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
}

.il__rozmowa-naglowek {
  display: flex;
  align-items: center;
  gap: 12px;
}

.il__rozmowa-naglowek .il__awatar--duzy {
  width: 46px;
  height: 46px;
}

.il__rozmowa-kto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.il__rozmowa-kto b {
  font-size: 14px;
}

.il__rozmowa-status {
  position: relative;
  height: 15px;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.il__status {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  animation: 12s linear infinite;
}

.il__status--1 {
  animation-name: status-1;
}

.il__status--2 {
  animation-name: status-2;
  color: var(--blue);
}

.il__status--3 {
  animation-name: status-3;
  color: var(--good);
  font-weight: 700;
}

@keyframes status-1 {
  0%,
  24% {
    opacity: 1;
  }
  26%,
  100% {
    opacity: 0;
  }
}

@keyframes status-2 {
  0%,
  25% {
    opacity: 0;
  }
  27%,
  41% {
    opacity: 1;
  }
  43%,
  100% {
    opacity: 0;
  }
}

@keyframes status-3 {
  0%,
  42% {
    opacity: 0;
  }
  44%,
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* licznik czasu rozmowy: paski cyfr przesuwane skokowo */
.il__rozmowa-czas {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  opacity: 0;
  animation: status-3 12s linear infinite;
}

.il__rozmowa-czas i {
  font-style: normal;
}

.il__cyfra {
  display: inline-block;
  width: 0.62em;
  height: 1.1em;
  overflow: hidden;
  line-height: 1.1em;
  vertical-align: bottom;
}

/* Pasek cyfr: każda cyfra łamie się do własnej linii (word-break), krok animacji = 1.1em = jedna linia. */
.il__cyfra-pasek {
  display: block;
  width: 0.62em;
  font-style: normal;
  word-break: break-all;
  line-height: 1.1em;
  text-align: center;
  translate: 0 0;
}

.il__cyfra-pasek--jednosci {
  animation: cyfry-10 10s steps(10, end) infinite;
}

.il__cyfra-pasek--dziesiatki {
  animation: cyfry-10 100s steps(10, end) infinite;
}

@keyframes cyfry-10 {
  to {
    translate: 0 -11em;
  }
}

/* fala głosu — słupki żyją tylko po połączeniu */
.il__rozmowa-fala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 0 6px;
  border-radius: 14px;
  background: var(--blue-tint);
}

.il__rozmowa-fala i {
  width: 4px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0.35;
  animation: fala-glos 12s linear infinite;
  animation-delay: calc(var(--i) * -0.09s);
}

@keyframes fala-glos {
  0%,
  43% {
    height: 6px;
    opacity: 0.35;
  }
  46% {
    height: 24px;
    opacity: 1;
  }
  50% {
    height: 10px;
  }
  54% {
    height: 28px;
  }
  58% {
    height: 8px;
  }
  62% {
    height: 22px;
  }
  66% {
    height: 12px;
  }
  70% {
    height: 30px;
  }
  74% {
    height: 9px;
  }
  78% {
    height: 20px;
  }
  82% {
    height: 14px;
  }
  86% {
    height: 26px;
  }
  90% {
    height: 7px;
  }
  94% {
    height: 18px;
    opacity: 1;
  }
  98%,
  100% {
    height: 6px;
    opacity: 0.35;
  }
}

.il__rozmowa-numer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}

.il__rozmowa-numer svg {
  color: var(--blue);
  flex-shrink: 0;
}

.il__rozmowa-numer b {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__rozmowa-numer span {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.il__rozmowa-przyciski {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--blue-line);
}

.il__rp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--ink-muted);
}

.il__rp i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--ink);
}

.il__rp--koniec i {
  background: #ef4444;
  color: #fff;
  transform: rotate(135deg);
}

/* zielony przycisk klawiatury pulsuje mocno, gdy „dzwoni” */
.il--wybieranie .il__zadzwon {
  animation: zadzwon-dzwoni 12s ease-in-out infinite;
}

@keyframes zadzwon-dzwoni {
  0%,
  24% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
  28%,
  40% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(22, 163, 74, 0.18);
  }
  44%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

/* ------------------------------------------- wersja 4: recepcja kliniki -- */

.il--recepcja-scena {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

/* podłoga na całą szerokość + listwa przypodłogowa */
.il--recepcja-scena::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(262px * var(--ks));
  bottom: 0;
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff calc(4px * var(--ks)), transparent calc(4px * var(--ks))),
    linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

/* linia lamperii na ścianie na całą szerokość */
.il--recepcja-scena::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(204px * var(--ks));
  height: calc(3px * var(--ks));
  background: #e3eaf3;
  z-index: 0;
}

.il--recepcja-scena > * {
  animation: none;
}

.il__recepcja {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks) - 110px);
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--recepcja-scena {
  --ks: 0.82;
  padding-bottom: 0;
}

/* panel rozmowy Asystenta nad sceną, po prawej */
.il__recepcja-panel {
  position: absolute;
  right: calc(50% - 400px);
  top: 26px;
  width: 300px;
  z-index: 2;
  animation: il-dymek 0.6s var(--ease) 0.4s both;
}

/* telefon dzwoni (0–40 % cyklu): słuchawka drga, fale i dioda migają */
.il__r-sluchawka {
  transform-origin: 266px 160px;
  animation: r-sluchawka 12s ease-in-out infinite;
}

@keyframes r-sluchawka {
  0%,
  2%,
  6%,
  10%,
  14%,
  18%,
  22%,
  26%,
  30%,
  34%,
  38% {
    transform: rotate(0);
  }
  4%,
  12%,
  20%,
  28%,
  36% {
    transform: rotate(-4deg) translateY(-2px);
  }
  8%,
  16%,
  24%,
  32% {
    transform: rotate(3deg) translateY(-1px);
  }
  42%,
  100% {
    transform: rotate(0);
  }
}

.il__r-fale path {
  opacity: 0;
  animation: r-fale 12s linear infinite;
}

.il__r-fale path:nth-child(2) {
  animation-delay: 0.25s;
}

.il__r-fale path:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes r-fale {
  0%,
  40% {
    opacity: 0;
  }
  2%,
  8%,
  14%,
  20%,
  26%,
  32%,
  38% {
    opacity: 1;
  }
  5%,
  11%,
  17%,
  23%,
  29%,
  35% {
    opacity: 0.15;
  }
  41%,
  100% {
    opacity: 0;
  }
}

.il__r-dioda {
  animation: r-dioda 12s linear infinite;
}

@keyframes r-dioda {
  0%,
  40% {
    fill: #ef4444;
    opacity: 1;
  }
  3%,
  9%,
  15%,
  21%,
  27%,
  33%,
  39% {
    opacity: 0.2;
  }
  44%,
  100% {
    fill: #22c55e;
    opacity: 1;
  }
}

.il__r-reka {
  transform-origin: 352px 175px;
  animation: k-reka 0.5s ease-in-out infinite;
}

.il__r-ekran {
  animation: k-ekran 2.4s ease-in-out infinite;
}

.il__r-wsk-m {
  transform-origin: 0 0;
  animation: r-wsk 60s linear infinite;
}

.il__r-wsk-g {
  transform-origin: 0 0;
  transform: rotate(300deg);
}

@keyframes r-wsk {
  to {
    transform: rotate(360deg);
  }
}

/* --- recepcja: dopracowanie panelu i postaci --- */

.il__rozmowa-panel {
  padding: 20px 20px 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  box-shadow: 0 30px 70px -30px rgba(29, 78, 216, 0.4), 0 2px 4px rgba(3, 7, 18, 0.04), inset 0 1px 0 #fff;
}

.il__rozmowa-awatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.il__rozmowa-awatar .il__awatar--duzy {
  width: 46px;
  height: 46px;
}

.il__rozmowa-pierscien {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(29, 78, 216, 0.55);
  opacity: 0;
  animation: rozmowa-pierscien 12s ease-out infinite;
}

.il__rozmowa-pierscien--2 {
  animation-delay: 0.8s;
}

@keyframes rozmowa-pierscien {
  0%,
  2%,
  8%,
  14%,
  20%,
  26%,
  32%,
  38% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  7%,
  13%,
  19%,
  25%,
  31%,
  37%,
  43% {
    transform: scale(1.7);
    opacity: 0;
  }
  44%,
  100% {
    opacity: 0;
  }
}

.il__rozmowa-status {
  font-size: 12px;
}

.il__rozmowa-czas {
  font-size: 16px;
}

/* dół panelu: w fazie dzwonienia „odrzuć / odbierz”, po połączeniu sterowanie rozmową */
.il__rozmowa-dol {
  position: relative;
  min-height: 62px;
  border-top: 1px solid var(--blue-line);
}

.il__rozmowa-odbierz,
.il__rozmowa-przyciski {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-top: 12px;
  border-top: 0;
}

.il__rozmowa-odbierz {
  display: flex;
  justify-content: space-around;
  animation: status-12 12s linear infinite;
}

.il__rozmowa-przyciski {
  animation: status-3 12s linear infinite;
  opacity: 0;
}

@keyframes status-12 {
  0%,
  41% {
    opacity: 1;
  }
  43%,
  100% {
    opacity: 0;
  }
}

.il__rp i {
  width: 38px;
  height: 38px;
}

.il__rp--odrzuc i {
  background: #ef4444;
  color: #fff;
  transform: rotate(135deg);
}

.il__rp--odbierz i {
  background: #22c55e;
  color: #fff;
  animation: odbierz-puls 1.2s ease-in-out infinite;
}

@keyframes odbierz-puls {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

.il__r-reka--2 {
  transform-origin: 304px 179px;
  animation-delay: -0.25s;
}

.il__r-pacjent {
  animation: pacjent-czyta 4s ease-in-out infinite;
  transform-origin: 104px 210px;
}

@keyframes pacjent-czyta {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

/* --- połączenie: JEDEN przebieg (dzwoni → odbiera → rozmowa trwa), czas m:ss --- */

/*
  Oś czasu od wejścia na ekran: 0–3 s dzwoni (odbierz / odrzuć), 3–5 s
  „Odbieram…”, od 5 s „Połączono” i licznik idzie bez końca w formacie m:ss
  (jedności 0–9 co sekundę, dziesiątki 0–5 co 10 s, minuty co 60 s).
  Nic się nie zapętla do początku — decyzja właściciela.
*/
.il__status,
.il__rozmowa-czas,
.il__rozmowa-odbierz,
.il__rozmowa-przyciski {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 5s;
}

.il__status--1 {
  animation-name: raz-status-1;
}

.il__status--2 {
  animation-name: raz-status-2;
}

.il__status--3,
.il__rozmowa-czas,
.il__rozmowa-przyciski {
  animation-name: raz-status-3;
}

.il__rozmowa-odbierz {
  animation-name: raz-status-12;
}

@keyframes raz-status-1 {
  0%,
  58% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}

@keyframes raz-status-2 {
  0%,
  60% {
    opacity: 0;
  }
  64%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes raz-status-3 {
  0%,
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes raz-status-12 {
  0%,
  58% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}

/* paski cyfr startują w chwili połączenia (5 s) */
.il__cyfra-pasek--jednosci {
  animation: cyfry-10 10s steps(10, end) 5s infinite;
}

.il__cyfra-pasek--dziesiatki {
  animation: cyfry-6 60s steps(6, end) 5s infinite;
}

.il__cyfra-pasek--minuty {
  animation: cyfry-10 600s steps(10, end) 5s infinite;
}

@keyframes cyfry-6 {
  to {
    translate: 0 -6.6em;
  }
}

/* pierścienie wokół awatara i dzwonek telefonu — tylko przez 3 s */
.il__rozmowa-pierscien {
  animation: pierscien-raz 1s ease-out 3;
}

.il__rozmowa-pierscien--2 {
  animation-delay: 0.5s;
}

@keyframes pierscien-raz {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.il__r-sluchawka {
  animation: sluchawka-raz 0.5s ease-in-out 6;
}

@keyframes sluchawka-raz {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-4deg) translateY(-2px);
  }
  75% {
    transform: rotate(3deg) translateY(-1px);
  }
}

.il__r-fale path {
  animation: fale-raz 0.75s linear 4 both;
}

@keyframes fale-raz {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

.il__r-dioda {
  animation: dioda-raz 5s linear 1 forwards;
}

@keyframes dioda-raz {
  0%,
  10%,
  20%,
  30%,
  40%,
  50% {
    fill: #ef4444;
    opacity: 1;
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55% {
    fill: #ef4444;
    opacity: 0.2;
  }
  100% {
    fill: #22c55e;
    opacity: 1;
  }
}

/* fala głosu: cicho do połączenia, potem żyje bez końca */
.il__rozmowa-fala i {
  animation:
    fala-budzi 0.4s var(--ease) 5s both,
    fala-zywa 1.1s ease-in-out 5s infinite;
  animation-delay: 5s, calc(5s + var(--i) * -0.09s);
}

@keyframes fala-budzi {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

@keyframes fala-zywa {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 28px;
  }
}

/* ------------------------------------------ wersja 4: gabinet właściciela -- */

.il--gabinet {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f0f4fa);
}

/* blat biurka na całą szerokość (perspektywa: jaśniejszy przy krawędzi) */
.il--gabinet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(238px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #edf1f7 0, #e2e8f0 45%, #d3dbe6 100%);
  z-index: 0;
}

/* lamperia / linia ściany */
.il--gabinet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(200px * var(--ks));
  height: calc(3px * var(--ks));
  background: #e3eaf3;
  z-index: 0;
}

.il--gabinet > * {
  animation: none;
}

.il__gabinet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--gabinet {
  --ks: 0.82;
}

.il__g-chmury {
  animation: g-chmury 40s linear infinite;
}

@keyframes g-chmury {
  from {
    transform: translateX(-40px);
  }
  to {
    transform: translateX(120px);
  }
}

/* wiadomości wjeżdżają na listę, treść pojawia się chwilę później */
.il__g-mail {
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
}

.il__g-mail--1 {
  animation-delay: 0.4s;
}

.il__g-mail--2 {
  animation-delay: 0.7s;
}

.il__g-mail--3 {
  animation-delay: 1s;
}

.il__g-tresc {
  opacity: 0;
  animation: il-dymek 0.6s var(--ease) 1.2s forwards;
}

.il__g-przycisk {
  animation: g-przycisk 2.4s ease-in-out infinite;
}

@keyframes g-przycisk {
  0%,
  100% {
    fill: #1d4ed8;
  }
  50% {
    fill: #3b82f6;
  }
}

.il__g-kursor {
  animation: g-kursor 1s steps(2, end) infinite;
}

@keyframes g-kursor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.il__g-para path {
  animation: g-para 3s ease-in-out infinite;
}

.il__g-para path:nth-child(2) {
  animation-delay: -1s;
}

.il__g-para path:nth-child(3) {
  animation-delay: -2s;
}

@keyframes g-para {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-14px);
    opacity: 0;
  }
}

.il__g-powiadomienie {
  animation: g-powiadomienie 8s var(--ease) infinite;
}

@keyframes g-powiadomienie {
  0%,
  18% {
    transform: translateY(-46px);
    opacity: 0;
  }
  26%,
  92% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-46px);
    opacity: 0;
  }
}

/* ------------------------------------------ wersja 4: numery działów -- */

/*
  Cyfry to tekst Inter z obrysem (jak było); tylko „4” jest SVG-iem
  (patrz CZWORKA_SVG w app.js). Odstęp między cyframi lekko ujemny, ale
  tak, żeby cyfra nie nachodziła na zero (właściciel: 4 i 5 nachodziły).
*/
.wstep__znak {
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.pods__dzial-znak {
  letter-spacing: -0.02em;
  white-space: nowrap;
  width: auto;
}

.znak-4 {
  display: inline-block;
  height: 0.727em;
  width: 0.727em;
  vertical-align: baseline;
  overflow: visible;
  margin-left: 0.02em;
}

.wstep__znak .znak-4 {
  color: rgba(29, 78, 216, 0.4);
}

.pods__dzial-znak .znak-4 {
  color: rgba(29, 78, 216, 0.55);
}

/* ------------------------------------------ wersja 4: głosowy — oś rozmowy -- */

.il--glos {
  --cykl: 13s;
  justify-content: center;
  padding: 26px 40px 22px;
}

.il__glos {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 640px;
}

.il__glos-os {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 14px;
}

.il__glos-strona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.il__glos-strona b {
  margin-top: 8px;
  font-size: 13px;
}

.il__glos-strona small {
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.il__glos-awatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
}

.il__glos-awatar .il__awatar--duzy {
  width: 60px;
  height: 60px;
}

/* pierścienie „dzwoni” — tylko na początku cyklu */
.il__glos-pierscien {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--blue);
  opacity: 0;
  animation: glos-pierscien var(--cykl) ease-out infinite;
}

.il__glos-pierscien--2 {
  animation-delay: 0.5s;
}

@keyframes glos-pierscien {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  4% {
    transform: scale(1.7);
    opacity: 0;
  }
  8% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  12%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* fala głosu między stronami */
.il__glos-fala {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 64px;
  padding: 0 18px;
  border-radius: 20px;
  background: var(--blue-tint);
}

.il__glos-fala > i {
  width: 4px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0.35;
  transform-origin: 50% 50%;
  /* szybka fala (własny rytm słupka) + bramka cyklu: cicho, gdy „dzwoni” i po rozłączeniu */
  animation:
    glos-fala-zywa 1.15s ease-in-out infinite,
    glos-fala-bramka var(--cykl) linear infinite;
  animation-delay: calc(var(--i) * -0.09s), 0s;
}

@keyframes glos-fala-zywa {
  0%,
  100% {
    height: 6px;
  }
  30% {
    height: 26px;
  }
  55% {
    height: 12px;
  }
  75% {
    height: 30px;
  }
}

@keyframes glos-fala-bramka {
  0%,
  13% {
    transform: scaleY(0.25);
    opacity: 0.35;
  }
  16%,
  90% {
    transform: none;
    opacity: 1;
  }
  94%,
  100% {
    transform: scaleY(0.25);
    opacity: 0.35;
  }
}

/* status nad falą: „Dzwoni…” → „Połączono” */
.il__glos-status {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.il__glos-status > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 22px;
  opacity: 0;
}

.il__glos-status-1 {
  color: var(--blue);
  animation: glos-status-1 var(--cykl) linear infinite;
}

.il__glos-status-2 {
  color: var(--good);
  animation: glos-status-2 var(--cykl) linear infinite;
}

.il__glos-status-2 i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--good);
}

@keyframes glos-status-1 {
  0%,
  12% {
    opacity: 1;
  }
  14%,
  100% {
    opacity: 0;
  }
}

@keyframes glos-status-2 {
  0%,
  13% {
    opacity: 0;
  }
  15%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}

/* transkrypcja: wiersze wchodzą po kolei, wynik na końcu */
.il__glos-napisy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
}

.il__glos-napis {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 78%;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  animation: glos-napis var(--cykl) var(--ease) infinite;
  animation-delay: calc(var(--t) * 1.7s);
}

.il__glos-napis--p {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.il__glos-napis--a {
  align-self: flex-end;
  background: var(--blue-tint);
  color: var(--ink);
}

.il__glos-osoba {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--blue-tint-2);
  color: var(--blue);
}

.il__glos-napis .il__kropka--mala {
  flex-shrink: 0;
}

@keyframes glos-napis {
  0%,
  15% {
    opacity: 0;
    transform: translateY(8px);
  }
  19%,
  92% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.il__glos-wynik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-top: 2px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--good-tint, #e8f7ee);
  color: var(--good);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.9);
  animation: glos-wynik var(--cykl) var(--ease) infinite;
}

@keyframes glos-wynik {
  0%,
  70% {
    opacity: 0;
    transform: scale(0.9);
  }
  74%,
  92% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* ------------------------------------------ wersja 4: SMS z potwierdzeniem -- */

.il__sms {
  display: block;
}

.il__sms-wiersz {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
  font-variant-numeric: tabular-nums;
}

.il__sms-wiersz svg {
  flex-shrink: 0;
  color: var(--blue);
}

.il__sms-wiersz b {
  font-weight: 700;
}

.il__sms-zywy {
  font-weight: 700;
}

/* ------------------------------------------ wersja 4: ekran informacyjny -- */

/*
  Ekran „info” (np. Baza wiedzy Asystentów) w układzie sceny: nagłówek po
  lewej, szary opis z punktami po PRAWEJ — w kolumnie, gdzie zwykle stoi
  pasek wpisywania (właściciel). display: contents wyciąga h1/opis/punkty
  do siatki dolnej strefy. Wariant z opisem pod nagłówkiem uchylony.
*/
.pytanie--scena[data-typ="info"] .pytanie__tekst {
  display: contents;
}

.pytanie--scena[data-typ="info"] .pytanie__dol {
  grid-template-rows: auto auto;
  align-items: start;
  align-content: start;
  row-gap: 0;
}

.pytanie--scena[data-typ="info"] .pytanie__tresc {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}

.pytanie--scena[data-typ="info"] .pytanie__opis {
  grid-column: 2;
  grid-row: 1;
  margin: 4px 0 0;
  max-width: none;
  font-size: 15px;
}

.pytanie--scena[data-typ="info"] .pytanie__punkty {
  grid-column: 2;
  grid-row: 2;
  margin: 12px 0 0;
  max-width: none;
  font-size: 14px;
}

.pytanie--scena[data-typ="info"] .pytanie__widzet {
  display: none;
}

/* ------------------------------------------ wersja 4: klinika na mapie -- */

/*
  Zamiast niebieskiego bloku z nazwą w SVG (długa nazwa wychodziła poza
  blok — właściciel): miniatura fasady kliniki z poprzedniej sceny jako
  „landmark”, a nazwa w etykiecie HTML (foreignObject) pod budynkiem —
  ma limit szerokości i wielokropek.
*/
/* etykieta POI natywnie w SVG: tekst z białą obwódką (paint-order), 2 linie łamane w app.js */
.il__mapka-poi {
  animation: none;
}

/* ------------------------------------------ wersja 4: ekran części — spokój -- */

/*
  Właściciel: „za dużo się dzieje, kolory zbyt wyraziste, zbyt jasne”.
  Kafle nie falują bez końca (zostaje tylko wejście), na linii jeden wolny,
  miękki impuls, linia/nóżki/kropki w przygaszonym błękicie bez poświaty,
  podpisy w szarym. Nie przywracać kafel-podnosi ani drugiego impulsu.
*/
.linia .dzial-kafel,
.ekran--bez-wejscia .linia .dzial-kafel {
  animation: kafel-po-linii 0.6s var(--ease) both;
  animation-delay: calc(0.06s * var(--i));
}

.ekran--bez-wejscia .linia .dzial-kafel {
  animation: none;
}

.linia__tor {
  height: 2px;
  background: rgba(29, 78, 216, 0.22);
  box-shadow: none;
}

.linia__prad {
  width: 160px;
  left: -160px;
  background: linear-gradient(90deg, transparent, rgba(29, 78, 216, 0.55) 55%, transparent);
  animation: linia-prad 7s linear infinite;
}

.linia__prad--2 {
  display: none;
}

.dzial-kafel__nozka {
  width: 1.5px;
  background: rgba(29, 78, 216, 0.28);
  opacity: 1;
}

.dzial-kafel__nozka::after {
  width: 11px;
  height: 11px;
  bottom: -6px;
  border-width: 2px;
  border-color: rgba(29, 78, 216, 0.5);
}

.linia .dzial-kafel__stopka {
  color: var(--ink-muted);
  font-weight: 600;
}

.linia .dzial-kafel__ikona {
  background: var(--blue-tint);
  color: var(--blue);
}

.linia .dzial-kafel:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 78, 216, 0.22);
}

/* Fasada: ptaki i Porsche usunięte na życzenie właściciela (nie przywracać). */
.il__k-ptaki,
.il__k-auto {
  display: none;
}

/* --- koperta: JEDEN przebieg — klapka się otwiera, list wyjeżdża i ZOSTAJE (właściciel) --- */
.il__koperta-klapka {
  animation: klapka-otwiera-raz 3s var(--ease) forwards;
}

.il__list {
  animation: list-wysuwa-raz 3s var(--ease) forwards;
}

@keyframes klapka-otwiera-raz {
  0%,
  20% {
    transform: rotateX(0);
    z-index: 3;
  }
  44% {
    z-index: 0;
  }
  56%,
  100% {
    transform: rotateX(178deg);
    z-index: 0;
  }
}

@keyframes list-wysuwa-raz {
  0%,
  56% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-112px);
  }
}

/* Ostrzeżenie o grafiku: informacja (bursztyn), nie błąd — nie blokuje przejścia dalej. */
.ostrzezenie {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.ostrzezenie b {
  color: #b45309;
}

/* ================================ wersja 4: spójność scen i zwarte kafle ================================ */

/*
  Właściciel (06.09): „niespójność stylu z pierwszymi animacjami” i „za dużo
  pustej przestrzeni”.
  1) Kafle wyboru i głosy: karty nie rozciągają się na całą wysokość ekranu
     z pustym środkiem — są zwarte, wyśrodkowane w pionie, z dużą ikoną
     i przyciskiem tuż pod opisem. Wariant „min-height 340/380 + stopka
     przyklejona do dołu” uchylony.
  2) Sceny z kartami UI (oceny, oś czasu, grafik, kalendarz, fotele, powroty,
     koperta…) dostają WSPÓLNE pomieszczenie na całą szerokość — ściana,
     linia lamperii, podłoga i cień pod kompozycją — takie samo jak w recepcji
     i gabinecie, więc należą do jednej rodziny z fasadą, mapą i recepcją.
     Sceny pełnoszerokie (szyld, mapa, recepcja, gabinet) mają własne tło
     i zakrywają pomieszczenie.
*/

/* --- 1. kafle wyboru: zwarte, wyśrodkowane --- */
.pytanie__widzet--pelny .kafle {
  align-items: center;
  align-content: center;
}

.pytanie__widzet--pelny .kafel-w {
  min-height: 0;
  padding: 44px 32px 34px;
  gap: 12px;
  justify-content: flex-start;
}

.pytanie__widzet--pelny .kafel-w__gora {
  margin-bottom: 10px;
}

.pytanie__widzet--pelny .kafel-w__ikona,
.pytanie__widzet--pelny .kafel-w__loga .logo-marki {
  width: 96px;
  height: 96px;
}

.pytanie__widzet--pelny .kafel-w__ikona svg {
  width: 40px;
  height: 40px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki svg {
  width: 46px;
  height: 46px;
}

.pytanie__widzet--pelny .kafel-w__tytul {
  font-size: 25px;
}

.pytanie__widzet--pelny .kafel-w__opis {
  font-size: 15.5px;
  line-height: 1.5;
}

.pytanie__widzet--pelny .kafel-w__stopka {
  margin-top: 22px;
  min-width: 200px;
  padding: 13px 24px;
}

/* --- 1b. głosy: zwarte karty, płaskie przyciski odtwarzania --- */
.pytanie__widzet--pelny .glosy {
  align-items: center;
  align-content: center;
}

.glos {
  min-height: 0;
  padding: 44px 24px 32px;
  gap: 10px;
  justify-content: flex-start;
}

.glos__play {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
  background: var(--blue);
  box-shadow: 0 18px 40px -16px rgba(29, 78, 216, 0.55);
}

.glos[data-plec="k"] .glos__play {
  background: var(--blue-sky);
  box-shadow: 0 18px 40px -16px rgba(14, 165, 233, 0.55);
}

.glos__tresc b {
  font-size: 24px;
}

.glos__wybor,
.glos__cta {
  margin-top: 22px;
}

/* --- 2. wspólne pomieszczenie pod scenami z kartami --- */
.pytanie__scena {
  position: relative;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f5fb 100%);
}

/* ściana + linia lamperii (jak w recepcji) */
.pytanie__scena::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  width: auto;
  bottom: auto;
  transform: none;
  background:
    linear-gradient(180deg, transparent calc(100% - 3px), #e3eaf3 calc(100% - 3px)),
    radial-gradient(900px 420px at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%);
  pointer-events: none;
}

/* podłoga na całą szerokość, z jasną krawędzią u góry */
.pytanie__scena::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  bottom: 0;
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff 4px, transparent 4px),
    linear-gradient(180deg, #e6edf6, #d7e1ee);
  pointer-events: none;
}

.pytanie--scena .il-ramka {
  position: relative;
  z-index: 1;
}

/* cień pod kompozycją — karty „stoją” na podłodze jak przedmioty w recepcji */
.pytanie--scena .il-ramka::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 62%;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

.pytanie--scena .il {
  position: relative;
  z-index: 1;
}

/* sceny pełnoszerokie mają własne tło — bez cienia pomieszczenia */
.pytanie--scena .il-ramka:has(.il--szyld)::before,
.pytanie--scena .il-ramka:has(.il--mapa)::before,
.pytanie--scena .il-ramka:has(.il--recepcja-scena)::before,
.pytanie--scena .il-ramka:has(.il--gabinet)::before,
.pytanie--scena .il-ramka:has(.il--korytarz)::before,
.pytanie--scena .il-ramka:has(.il--horyzont)::before,
.pytanie--scena .il-ramka:has(.il--stol)::before,
.pytanie--scena .il-ramka:has(.il--miasteczko)::before,
.pytanie--scena .il-ramka:has(.il--centrala)::before,
.pytanie--scena .il-ramka:has(.il--dzien)::before,
.pytanie--scena .il-ramka:has(.il--kalsc)::before,
.pytanie--scena .il-ramka:has(.il--tasma)::before,
.pytanie--scena .il-ramka:has(.il--paczka)::before,
.pytanie--scena .il-ramka:has(.il--gwiazdki)::before,
.pytanie--scena .il-ramka:has(.il--zegar-sc)::before,
.pytanie--scena .il-ramka:has(.il--stempel)::before,
.pytanie--scena .il-ramka:has(.il--sync)::before,
.pytanie--scena .il-ramka:has(.il--cennik-sc)::before,
.pytanie--scena .il-ramka:has(.il--sznur)::before,
.pytanie--scena .il-ramka:has(.il--kolej)::before,
.pytanie--scena .il-ramka:has(.il--okienko)::before,
.pytanie--scena .il-ramka:has(.il--klepsydry)::before,
.pytanie--scena .il-ramka:has(.il--czat-dnia)::before,
.pytanie--scena .il-ramka:has(.il--tablica)::before,
.pytanie--scena .il-ramka:has(.il--sloik)::before,
.pytanie--scena .il-ramka:has(.il--paczka2)::before,
.pytanie--scena .il-ramka:has(.il--osdnia)::before,
.pytanie--scena .il-ramka:has(.il--drukarka)::before,
.pytanie--scena .il-ramka:has(.il--przeplyw)::before,
.pytanie--scena .il-ramka:has(.il--opinia2)::before {
  display: none;
}

/* ------------------------------------------ wersja 4d: hero minimalistyczny -- */

.il--hero-min {
  aspect-ratio: 720 / 540;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.il__hero-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.il__hero-kula {
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
  animation: il-dymek 0.8s var(--ease) 0.1s both;
}

.il__hero-kula .il__kropka {
  width: 200px;
  height: 200px;
  box-shadow:
    inset 0 -12px 22px rgba(3, 7, 18, 0.32),
    inset 0 7px 10px rgba(255, 255, 255, 0.6),
    0 30px 60px -22px rgba(29, 78, 216, 0.7);
}

/* trzy cienkie, nieruchome pierścienie */
.il__hero-pierscien {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.16);
  transform: translate(-50%, -50%);
}

.il__hero-pierscien--1 {
  width: 250px;
  height: 250px;
}

.il__hero-pierscien--2 {
  width: 320px;
  height: 320px;
  border-color: rgba(29, 78, 216, 0.1);
}

.il__hero-pierscien--3 {
  width: 400px;
  height: 400px;
  border-color: rgba(29, 78, 216, 0.06);
}

.il__hero-podpis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: il-dymek 0.6s var(--ease) 0.4s both;
}

.il__hero-podpis .il__rdzen-logo {
  font-size: 26px;
}

.il__hero-podpis small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.il__hero-moduly {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.il__hero-modul {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  color: var(--blue);
  animation: il-dymek 0.5s var(--ease) both;
  animation-delay: calc(0.6s + var(--i) * 0.06s);
}

.il--hero-min > * {
  animation: none;
}

/* powiększenie kompozycji sceny (liczone w app.js → powiekszKompozycje) */
.pytanie--scena .il {
  transform: scale(var(--powieksz, 1));
  transform-origin: 50% 36%;
}

/* szyld fasady: rozmiar liter zależny od długości nazwy — długa nazwa nie wychodzi poza tabliczkę */
.il--szyld .il__szyld {
  max-width: none;
  overflow: visible;
}

.il--szyld .il__szyld-napis {
  font-size: clamp(11px, calc(31px - var(--n, 12) * 0.34px), 18px);
}

/* ------------------------------------------ wersja 4c: dział klinika — dwie równe kolumny -- */

.il--profil {
  gap: 16px;
  padding: 24px 22px;
}

.il__profil {
  width: 320px;
  flex-shrink: 0;
}

.il__profil-strzalka {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  color: var(--blue);
  animation: il-dymek 0.4s var(--ease) 1.2s both;
}

.il__rozmowa--profil {
  width: 320px;
  margin: 0;
  flex-shrink: 0;
  gap: 8px;
  padding: 14px 16px 16px;
  font-size: 12px;
}

.il__rozmowa--profil .il__rozmowa-naglowek {
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--blue-line);
}

.il__rozmowa--profil .il__awatar--duzy {
  width: 40px;
  height: 40px;
}

.il__rozmowa--profil .il__rozmowa-kto b {
  font-size: 13px;
}

.il__rozmowa--profil .il__rozmowa-kto small {
  font-size: 10.5px;
  color: var(--ink-muted);
}

/* dymki wchodzą po wierszach profilu, po kolei */
.il__rozmowa--profil .il__dymek--profil {
  max-width: 92%;
  font-size: 12px;
  animation: il-dymek 0.45s var(--ease) both;
}

.il__rozmowa--profil .il__dymek--profil:nth-of-type(1) {
  animation-delay: 1.4s;
}

.il__rozmowa--profil .il__dymek--profil:nth-of-type(2) {
  animation-delay: 2.2s;
}

.il__rozmowa--profil .il__dymek--profil:nth-of-type(3) {
  animation-delay: 3s;
}

.il__rozmowa--profil .il__dymek--profil:nth-of-type(4) {
  animation-delay: 3.8s;
}

.il__rozmowa--profil .il__dymek--bot .il__zywy {
  font-weight: 700;
  color: var(--blue);
}

/* ------------------------------------------ wersja 4c: korytarz kliniki (ekran na ścianie) -- */

.il--korytarz {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--korytarz::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(262px * var(--ks));
  bottom: 0;
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff calc(4px * var(--ks)), transparent calc(4px * var(--ks))),
    linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il--korytarz::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(204px * var(--ks));
  height: calc(3px * var(--ks));
  background: #e3eaf3;
  z-index: 0;
}

.il--korytarz > * {
  animation: none;
}

.il__korytarz {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--korytarz {
  --ks: 0.82;
}

/* nakładka HTML dokładnie w polu wyświetlacza (158,38 → 404×210 na planszy 720×360) */
.il__korytarz-ekran {
  position: absolute;
  left: calc(50% - 202px * var(--ks));
  top: calc(38px * var(--ks));
  width: calc(404px * var(--ks));
  height: calc(210px * var(--ks));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(5px * var(--ks));
  z-index: 2;
}

.il__korytarz-ekran > * {
  zoom: var(--ks);
}

.il__ekran-tytul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.il__ekran-tytul span {
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.il__ekran-tytul svg {
  color: var(--blue);
}

/* grafik lekarzy na ekranie */
.il__ekran-grafik {
  width: 380px;
  padding: 10px 0 0;
}

.il__ekran-grafik .il__grafik {
  padding: 8px 10px 10px;
  background: var(--blue-tint);
  box-shadow: none;
  border-radius: 12px;
}

.il__ekran-grafik .il__grafik-siatka {
  grid-template-rows: repeat(3, 34px);
  gap: 6px;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0 34px, transparent 34px 40px);
}

.il__ekran-grafik .il__grafik-dni {
  margin-bottom: 6px;
  font-size: 10px;
}

.il__ekran-grafik .il__grafik-blok {
  font-size: 11px;
}

.il__ekran-grafik .il__legenda {
  margin-top: 8px;
  font-size: 11px;
  justify-content: center;
}

/* miesiąc + reguły na ekranie */
.il__ekran-miesiac {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 440px;
  zoom: calc(var(--ks) * 0.8);
}

.il__ekran-miesiac .il__miesiac-karta {
  width: 250px;
  flex-shrink: 0;
  box-shadow: none;
  border: 1px solid var(--blue-line);
}

.il__ekran-miesiac .il__miesiac-siatka {
  gap: 4px;
  padding: 8px 10px 10px;
}

.il__ekran-miesiac .il__miesiac-siatka i {
  height: 24px;
  font-size: 10.5px;
  border-radius: 7px;
}

.il__ekran-miesiac .il__reguly {
  gap: 7px;
}

.il__ekran-miesiac .il__regula {
  padding: 7px 10px;
  font-size: 10.5px;
  box-shadow: none;
  border-color: var(--blue-line);
  white-space: nowrap;
}

/* sloty na ekranie */
.il__ekran-sloty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 370px;
}

.il__ekran-sloty .il__sloty {
  gap: 7px;
}

.il__ekran-sloty .il__slot {
  padding: 8px 0;
  font-size: 12.5px;
}

.il__ekran-sloty .il__dymek {
  max-width: 100%;
  font-size: 11.5px;
  padding: 7px 11px;
}

/* przełączenie: sam rząd Asystent → Recepcja, większy, z podpisem */
.il--przelaczenie {
  padding: 26px 60px;
  gap: 22px;
}

.il--przelaczenie .il__rzad {
  gap: 34px;
}

.il--przelaczenie .il__awatar--duzy {
  width: 84px;
  height: 84px;
}

.il--przelaczenie .il__aktor b {
  font-size: 16px;
}

.il--przelaczenie .il__aktor > span {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}

.il--przelaczenie .il__przekaz {
  width: 220px;
}

.il--przelaczenie .il__przekaz small {
  font-size: 12px;
}

.il__przelaczenie-podpis {
  margin: 0;
  max-width: 420px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  animation: il-dymek 0.5s var(--ease) 0.6s both;
}

/* ================================ wersja 4d: kafle w subgrid + sceny w otoczeniach ================================ */

/*
  Kafle wyboru (właściciel: „ikony większe, mniej pustego miejsca, okna muszą
  być równe”): każda karta to siatka SUBGRID w czterech rzędach (ikona /
  tytuł / opis / przycisk), dzięki czemu rzędy są wyrównane między kartami
  i wszystkie karty mają tę samą wysokość, niezależnie od długości tekstu.
*/
.pytanie__widzet--pelny .kafle {
  grid-template-rows: auto auto auto auto;
  align-items: stretch;
  align-content: center;
}

.pytanie__widzet--pelny .kafel-w {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  align-items: start;
  justify-items: center;
  min-height: 0;
  padding: 36px 28px 30px;
}

.pytanie__widzet--pelny .kafel-w__gora {
  grid-row: 1;
  margin-bottom: 18px;
}

.pytanie__widzet--pelny .kafel-w__tytul {
  grid-row: 2;
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
}

.pytanie__widzet--pelny .kafel-w__opis {
  grid-row: 3;
  margin: 0 0 24px;
  max-width: 30ch;
}

.pytanie__widzet--pelny .kafel-w__stopka {
  grid-row: 4;
  align-self: end;
  margin-top: 0;
}

.pytanie__widzet--pelny .kafel-w__ikona,
.pytanie__widzet--pelny .kafel-w__loga .logo-marki {
  width: 120px;
  height: 120px;
}

.pytanie__widzet--pelny .kafel-w__ikona svg {
  width: 52px;
  height: 52px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki svg {
  width: 58px;
  height: 58px;
}

.pytanie__widzet--pelny .kafel-w__loga {
  gap: 12px;
}

/* --- recepcja z panelem: warianty --- */
.il__recepcja-panel .il__rozmowa {
  width: 100%;
  margin: 0;
}

.il--recepcja-powrot .il__recepcja-panel,
.il--recepcja-watek .il__recepcja-panel {
  width: 360px;
  right: calc(50% - 420px);
  top: 14px;
}

.il__panel-powrot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
}

.il__panel-powrot .il__rozmowa {
  border: 0;
  box-shadow: none;
  padding: 10px 6px 4px;
  background: none;
}

.il__panel-powrot .il__os-miesiecy {
  width: 100%;
}

.il__panel-watek {
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
}

.il__panel-watek .il__watek {
  width: 100%;
  gap: 10px;
}

.il__panel-watek .il__watek-dymek {
  font-size: 11.5px;
}

.il__panel-watek .il__watek-kiedy {
  font-size: 9px;
  letter-spacing: 0.04em;
}

.il__panel-watek .il__watek-wpis {
  grid-template-columns: 62px 30px minmax(0, 1fr);
  gap: 8px;
}

.il__panel-watek .il__watek-ikona {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.1);
}

.il__panel-watek .il__watek-ikona svg {
  width: 14px;
  height: 14px;
}

.il__panel-watek .il__watek-dymek {
  padding: 8px 12px;
  box-shadow: none;
  border: 1px solid var(--blue-line);
}

.il--recepcja-watek .il__recepcja-panel {
  width: 390px;
  right: calc(50% - 440px);
}

/* --- korytarz: element pływający nad ekranem (baner) + warianty ekranu --- */
.il__korytarz-extra {
  position: absolute;
  right: calc(50% - 320px * var(--ks));
  top: calc(-4px * var(--ks));
  width: calc(300px * var(--ks));
  z-index: 3;
}

.il__korytarz-extra > * {
  zoom: var(--ks);
}

.il__korytarz-extra .il__baner {
  position: relative;
  width: 100%;
  margin: 0;
}

.il__ekran-kalendarz {
  width: 372px;
  zoom: calc(var(--ks) * 0.9);
}

.il__ekran-kalendarz .il__kalendarz {
  box-shadow: none;
  border: 1px solid var(--blue-line);
}

.il__ekran-powroty {
  width: 380px;
  zoom: calc(var(--ks) * 0.9);
}

.il__ekran-powroty .il__powroty {
  gap: 10px;
}

.il__ekran-powroty .il__powrot {
  box-shadow: none;
  border: 1px solid var(--blue-line);
  padding: 12px 10px;
}

/* ------------------------------------------ wersja 4d: profil kliniki na ekranie korytarza -- */

.il__ekran-profil {
  width: 376px;
  zoom: calc(var(--ks) * 0.92);
}

.il__ekran-profil-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.il__ekran-profil-wiersz {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--blue-tint);
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
  animation-delay: calc(0.4s + var(--i) * 0.35s);
}

.il__ekran-profil-wiersz > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.il__ekran-profil-wiersz small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.il__ekran-profil-wiersz b {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__ekran-profil-wiersz .il__profil-ikona {
  background: var(--surface);
}

.il__ekran-profil-wiersz .il__profil-ok {
  width: 16px;
  height: 16px;
  animation-delay: calc(0.7s + var(--i) * 0.35s);
}

/* ------------------------------------------ wersja 4d: ekran części — lekka oś -- */

/*
  Właściciel: „coś lżejszego, ładniejszego, bardziej estetycznie”. Zamiast
  kart z nóżkami: cienka linia, na niej okrągłe węzły z ikonami, pod nimi
  numer, nazwa i liczba pytań. Bez ramek i cieni kart. Nie wracać do kafli.
*/
.linia {
  margin-top: 70px;
  padding-bottom: 20px;
}

.linia__tor {
  top: 30px;
  bottom: auto;
  left: 4%;
  right: 4%;
  height: 2px;
  background: rgba(29, 78, 216, 0.16);
  z-index: 0;
}

.linia__kafle {
  position: relative;
  gap: 8px;
  z-index: 1;
}

.linia .dzial-kafel,
.linia .dzial-kafel:hover,
.linia .dzial-kafel[data-status="wylaczony"] {
  min-height: 0;
  padding: 0;
  gap: 0;
  align-items: center;
  text-align: center;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

.linia .dzial-kafel__ikona {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.22);
  background: #ffffff;
  color: var(--blue);
  box-shadow: 0 8px 22px -12px rgba(29, 78, 216, 0.4);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.linia .dzial-kafel:hover .dzial-kafel__ikona {
  transform: translateY(-3px);
  border-color: rgba(29, 78, 216, 0.5);
  box-shadow: 0 14px 28px -12px rgba(29, 78, 216, 0.5);
}

.linia .dzial-kafel[data-status="gotowy"] .dzial-kafel__ikona {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.linia .dzial-kafel[data-status="wylaczony"] .dzial-kafel__ikona {
  opacity: 0.5;
}

.linia .dzial-kafel__numer {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--blue);
}

.linia .dzial-kafel__nazwa {
  margin-top: 4px;
  max-width: 120px;
  font-size: 13px;
  line-height: 1.25;
}

.linia .dzial-kafel__stopka {
  margin-top: 6px;
  padding-top: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
}

.linia .dzial-kafel__nozka,
.linia .dzial-kafel__kropka {
  display: none;
}

/* ------------------------------------------ wersja 4d: grafik jak kalendarz GHL -- */

.il__ghl {
  width: 396px;
  height: 202px;
  display: flex;
  flex-direction: column;
  font-family: Inter, sans-serif;
  color: var(--ink);
  zoom: var(--ks);
}

.il__ghl-belka {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 5px;
  font-size: 11px;
  border-bottom: 1px solid #e5e9f0;
}

.il__ghl-belka b {
  font-weight: 800;
}

.il__ghl-belka span {
  color: var(--ink-muted);
}

.il__ghl-belka i {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #dfe5ee;
  background: #fff;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft);
}

.il__ghl-naglowki {
  display: grid;
  grid-template-columns: 30px repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid #e5e9f0;
}

.il__ghl-naglowki > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  font-size: 9px;
  color: var(--ink-muted);
  border-left: 1px solid #eef1f6;
}

.il__ghl-naglowki > span:first-child {
  border-left: 0;
}

.il__ghl-naglowki b {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}

.il__ghl-naglowki .il__ghl-dzis b {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
}

.il__ghl-naglowki .il__ghl-dzis small {
  color: var(--blue);
  font-weight: 700;
}

.il__ghl-siatka {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 30px repeat(6, minmax(0, 1fr));
  /* linie co 2 h: 5 przedziałów na 100 % wysokości */
  background-image: repeating-linear-gradient(180deg, #edf1f6 0 1px, transparent 1px 20%);
  background-size: 100% 100%;
}

.il__ghl-godziny {
  position: relative;
  border-right: 1px solid #e5e9f0;
}

.il__ghl-godziny span {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.il__ghl-godziny span:nth-child(1) {
  top: 0;
  transform: translateY(0);
}

.il__ghl-godziny span:nth-child(2) {
  top: 20%;
}

.il__ghl-godziny span:nth-child(3) {
  top: 40%;
}

.il__ghl-godziny span:nth-child(4) {
  top: 60%;
}

.il__ghl-godziny span:nth-child(5) {
  top: 80%;
}

.il__ghl-godziny span:nth-child(6) {
  top: 100%;
  transform: translateY(-100%);
}

.il__ghl-dzien {
  position: relative;
  border-left: 1px solid #eef1f6;
}

.il__ghl-dzien--dzis {
  background: rgba(29, 78, 216, 0.05);
}

/* wizyta: jasny blok z kolorową lewą krawędzią, jak w GHL */
.il__ghl-wizyta {
  position: absolute;
  left: 3px;
  right: 3px;
  top: calc(var(--od) * 100%);
  height: calc(var(--dl) * 100% - 2px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 4px;
  border-radius: 4px;
  border-left: 3px solid var(--k);
  background: var(--kt);
  overflow: hidden;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) forwards;
  animation-delay: calc(0.4s + var(--i) * 0.12s);
}

.il__ghl-wizyta b {
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__ghl-wizyta span {
  font-size: 6.8px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.il__ghl-wizyta--an {
  --k: #1d4ed8;
  --kt: #e4ecfd;
}

.il__ghl-wizyta--jk {
  --k: #0ea5e9;
  --kt: #e0f4fe;
}

.il__ghl-wizyta--mw {
  --k: #0369a1;
  --kt: #e3eef7;
}

/* ------------------------------------------ wersja 4d: ekran laptopa w gabinecie -- */

/* nakładka dokładnie w polu ekranu laptopa (214,122 → 292×162 na planszy 720×360) */
.il__gabinet-ekran {
  position: absolute;
  left: calc(50% - 146px * var(--ks));
  top: calc(122px * var(--ks));
  width: calc(292px * var(--ks));
  height: calc(162px * var(--ks));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(3px * var(--ks));
  z-index: 2;
}

.il__gabinet-ekran > * {
  zoom: var(--ks);
}

.il__gabinet-ekran .il__ekran-sloty {
  width: 262px;
  gap: 7px;
  zoom: calc(var(--ks) * 0.92);
}

.il__gabinet-ekran .il__sloty-naglowek {
  font-size: 11px;
}

.il__gabinet-ekran .il__slot {
  padding: 6px 0;
  font-size: 11px;
  border-radius: 8px;
}

.il__gabinet-ekran .il__dymek {
  font-size: 9.5px;
  padding: 6px 9px;
  border-radius: 10px;
}

/* ------------------------------------------ wersja 4d: miesiąc jak w GHL -- */

.il__ekran-miesiac {
  width: 396px;
  gap: 10px;
  zoom: calc(var(--ks) * 0.96);
}

.il__ghlm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e9f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.il__ghlm-tydzien,
.il__ghlm-siatka {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.il__ghlm-tydzien span {
  padding: 3px 0;
  text-align: center;
  font-size: 7.5px;
  font-weight: 700;
  color: var(--ink-muted);
  border-bottom: 1px solid #e5e9f0;
}

.il__ghlm-dzien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  height: 26px;
  padding: 2px 3px;
  border-right: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
  opacity: 0;
  animation: il-dymek 0.3s var(--ease) forwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.02s);
}

.il__ghlm-dzien--pusty {
  opacity: 1;
  animation: none;
  background: #fafbfd;
}

.il__ghlm-dzien b {
  font-size: 8px;
  font-weight: 600;
  color: var(--ink-soft);
}

.il__ghlm-dzien--dzis b {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.il__ghlm-dzien i {
  align-self: stretch;
  padding: 1px 3px;
  border-radius: 3px;
  border-left: 2px solid var(--blue);
  background: #e4ecfd;
  font-style: normal;
  font-size: 6.5px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
}

.il__ekran-miesiac .il__reguly {
  flex-shrink: 0;
}

/* ------------------------------------------ wersja 4d: panele w recepcji (przełączenie, horyzont, głosowy) -- */

.il__panel-karta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
}

.il__panel-tytul {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
}

.il__panel-tytul svg {
  color: var(--blue);
}

/* przełączenie: mały rząd Asystent → Recepcja */
.il--recepcja-przelaczenie .il__recepcja-panel {
  width: 340px;
  right: calc(50% - 410px);
  top: 40px;
}

.il__panel-przelaczenie .il__rzad {
  gap: 18px;
  justify-content: space-between;
}

.il__panel-przelaczenie .il__awatar--duzy {
  width: 56px;
  height: 56px;
}

.il__panel-przelaczenie .il__aktor b {
  font-size: 13px;
}

.il__panel-przelaczenie .il__aktor > span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
}

.il__panel-przelaczenie .il__przekaz {
  width: 96px;
}

.il__panel-przelaczenie .il__przelaczenie-podpis {
  max-width: none;
  font-size: 11.5px;
  text-align: left;
}

/* horyzont: pasek miesięcy w panelu */
.il--recepcja-horyzont .il__recepcja-panel {
  width: 380px;
  right: calc(50% - 430px);
  top: 50px;
}

.il__panel-horyzont .il__miesiace {
  gap: 6px;
}

.il__panel-horyzont .il__miesiac {
  width: auto;
  flex: 1;
  padding: 10px 0;
  font-size: 11px;
}

.il__panel-horyzont .il__zegar-podpis {
  margin: 0;
  align-items: flex-start;
  text-align: left;
}

/* głosowy: kompaktowa oś rozmowy w panelu */
.il--recepcja-glos .il__recepcja-panel {
  width: 420px;
  right: calc(50% - 450px);
  top: 8px;
}

.il__panel-glos {
  padding: 14px 16px;
}

.il__panel-glos .il__glos {
  width: 100%;
  gap: 10px;
}

.il__panel-glos .il__glos-os {
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 8px;
}

.il__panel-glos .il__glos-awatar,
.il__panel-glos .il__glos-awatar .il__awatar--duzy {
  width: 40px;
  height: 40px;
}

.il__panel-glos .il__glos-strona b {
  margin-top: 4px;
  font-size: 11px;
}

.il__panel-glos .il__glos-strona small {
  font-size: 9.5px;
}

.il__panel-glos .il__glos-fala {
  height: 44px;
  gap: 3px;
  padding: 0 10px;
}

.il__panel-glos .il__glos-fala > i {
  width: 3px;
}

.il__panel-glos .il__glos-status {
  top: -10px;
  height: 18px;
  font-size: 9.5px;
}

.il__panel-glos .il__glos-napisy {
  min-height: 0;
  gap: 6px;
}

.il__panel-glos .il__glos-napis {
  padding: 6px 10px;
  font-size: 10.5px;
  max-width: 88%;
}

.il__panel-glos .il__glos-wynik {
  padding: 5px 11px;
  font-size: 10.5px;
}

/* ------------------------------------------ wersja 4d: głosy 2×2 z rozwijanym kaflem -- */

.pytanie__widzet--pelny .glosy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  gap: 16px;
  align-items: start;
}

.glos {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 2px 18px;
  align-items: center;
  min-height: 0;
  padding: 20px 22px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.glos:hover {
  transform: none;
  border-color: rgba(29, 78, 216, 0.25);
}

.glos__klawisz {
  top: 12px;
  right: 12px;
}

.glos__play {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 76px;
  height: 76px;
  margin: 0;
  transition: transform 0.25s var(--ease), width 0.25s var(--ease), height 0.25s var(--ease);
}

.glos__imie {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 22px;
  align-self: end;
}

.glos__opis {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 13.5px;
}

.glos__wybor {
  grid-column: 3;
  grid-row: 1 / 3;
  width: auto;
  min-width: 120px;
  margin: 0 8px 0 0;
  padding: 11px 18px;
}

/* pole fali: schowane, po kliknięciu rozwija się na całą szerokość kafla — miejsce na mp3 */
.glos__fala {
  grid-column: 1 / -1;
  grid-row: 3;
  height: 0;
  margin-top: 0;
  padding: 0 6px;
  border-radius: 14px;
  background: var(--blue-tint);
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s var(--ease), opacity 0.3s var(--ease), margin-top 0.3s var(--ease);
}

.glos--otwarty {
  border-color: rgba(29, 78, 216, 0.4);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14), var(--glass-shadow-lg);
  transform: scale(1.02);
  z-index: 1;
}

.glos--otwarty .glos__fala {
  height: 60px;
  margin-top: 14px;
  opacity: 1;
}

.glos--otwarty .glos__fala i {
  height: 10px;
}

.glos--otwarty .glos__play {
  transform: scale(1.06);
}

/* ------------------------------------------ wersja 4d: tekstowy — lejek kanałów -- */

.il--lejek {
  padding: 0;
  background: #ffffff;
}

.pytanie--scena .il--lejek {
  background: none;
}

.il__lejek {
  position: relative;
  width: 720px;
  height: 360px;
}

.il__lejek-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* elipsy „kręcą się” bardzo wolno (spirala) — subtelnie, bez nerwowego ruchu */
.il__lejek-elipsa {
  stroke-dasharray: 10 14;
  stroke-linecap: round;
  animation: lejek-obrot 14s linear infinite;
  animation-delay: calc(var(--i) * -2s);
}

.il__lejek-elipsa:first-of-type {
  stroke-dasharray: none;
  animation: none;
}

@keyframes lejek-obrot {
  to {
    stroke-dashoffset: -240;
  }
}

.il__lejek-ikona {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  animation: lejek-ikona 0.5s var(--ease) both;
  animation-delay: calc(0.2s + var(--i) * 0.08s);
}

@keyframes lejek-ikona {
  from {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.il__lejek-ikona .logo-marki,
.il__lejek-ikona .logo-marki svg {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  filter: drop-shadow(0 8px 16px rgba(3, 7, 18, 0.14));
}

.il__lejek-ikona b {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.il__lejek-dol {
  position: absolute;
  left: 50%;
  top: 296px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  animation: il-dymek 0.6s var(--ease) 0.9s both;
}

.il__lejek-dol .il__kropka {
  width: 44px;
  height: 44px;
}

.il__lejek-dol b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ------------------------------------------ wersja 4d: kafle — wejście z logiem (raz, bez pętli) -- */

.pytanie__widzet--pelny .kafel-w {
  animation: kafel-wchodzi 0.55s var(--ease) both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.09s);
}

@keyframes kafel-wchodzi {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pytanie__widzet--pelny .kafel-w__ikona,
.pytanie__widzet--pelny .kafel-w__loga .logo-marki {
  animation: logo-wskakuje 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.09s);
}

@keyframes logo-wskakuje {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* kafle bez opisu: tytuł bliżej ikony, przycisk tuż pod nim */
.pytanie__widzet--pelny .kafel-w__tytul:last-of-type {
  margin-bottom: 0;
}

/* ------------------------------------------ wersja 4d: kafle — 5 kolumn, ikona na środku, spójny styl -- */

.pytanie__widzet--pelny .kafle[data-ile="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1400px;
  gap: 16px;
}

.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w {
  padding: 32px 18px 26px;
}

.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__ikona,
.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__loga .logo-marki {
  width: 100px;
  height: 100px;
}

.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__tytul {
  font-size: 20px;
}

.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__stopka {
  min-width: 0;
  width: 100%;
}

/* ikona zawsze na osi kafla (właściciel: „krzywe”) */
.pytanie__widzet--pelny .kafel-w__gora {
  width: 100%;
  justify-content: center;
  margin-bottom: 18px;
}

/* ikony opcji w stylu reszty aplikacji: błękitne koło, niebieski glif, bez obwódki */
.pytanie__widzet--pelny .kafel-w__ikona {
  border: 0;
  background: var(--blue-tint);
  box-shadow: none;
}

.pytanie__widzet--pelny .kafel-w__ikona svg {
  width: 46px;
  height: 46px;
  stroke-width: 1.8;
}

.pytanie__widzet--pelny .kafel-w[aria-pressed="true"] .kafel-w__ikona {
  background: var(--blue);
  color: #fff;
}

/* reaktywacja (dział) na ekranie laptopa */
.il__gabinet-ekran .il__ekran-powroty {
  width: 380px;
  zoom: calc(var(--ks) * 0.72);
}

.il__gabinet-ekran .il__ekran-powroty .il__ekran-tytul {
  margin-bottom: 6px;
}

/* ------------------------------------------ wersja 4d: panele recepcji skalują się ze sceną -- */

.il__recepcja-panel {
  zoom: var(--ks);
}

/* węższe panele — nie zasłaniają lady, półki i zegara */
.il--recepcja-powrot .il__recepcja-panel,
.il--recepcja-watek .il__recepcja-panel,
.il--recepcja-horyzont .il__recepcja-panel,
.il--recepcja-przelaczenie .il__recepcja-panel {
  width: 330px;
  right: calc(50% - 410px);
  top: 18px;
}

.il--recepcja-glos .il__recepcja-panel {
  width: 360px;
  right: calc(50% - 420px);
  top: 6px;
}

.il__panel-watek .il__watek-wpis {
  grid-template-columns: 54px 26px minmax(0, 1fr);
  gap: 7px;
}

.il__panel-watek .il__watek-kiedy {
  font-size: 8.5px;
}

.il__panel-watek .il__watek-ikona {
  width: 26px;
  height: 26px;
}

.il__panel-watek .il__watek-dymek {
  font-size: 11px;
  padding: 7px 10px;
}

.il__panel-watek .il__watek-dymek b {
  font-size: 11.5px;
}

/* ================================ wersja 4e: bez „pokoju” pod scenami, poczekalnia, integracje na laptopie ================================ */

/* Pokój (ściana/podłoga/cień) pod scenami z kartami UCHYLONY — właściciel: „tło do dupy”. Zostaje czyste tło. */
.pytanie__scena {
  background: none;
}

.pytanie__scena::before,
.pytanie__scena::after,
.pytanie--scena .il-ramka::before {
  display: none;
}

/* poczekalnia: panel po prawej, jak w recepcji */
.il--poczekalnia .il__recepcja-panel {
  width: 340px;
  right: calc(50% - 410px);
  top: 20px;
}

.il__panel-os {
  gap: 6px;
}

.il__panel-os .il__os {
  position: relative;
  height: 104px;
  margin: 4px 30px 0;
}

.il__panel-os .il__os-tor {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: var(--blue-line);
  overflow: hidden;
}

.il__panel-os .il__os-ikona {
  width: 36px;
  height: 36px;
}

.il__panel-os .il__os-ikona svg {
  width: 17px;
  height: 17px;
}

.il__panel-os .il__os-punkt b {
  font-size: 11px;
}

.il__panel-os .il__os-punkt small {
  font-size: 10px;
}

.il__panel-os .il__dymek--os {
  max-width: 100%;
  font-size: 12px;
  margin: 0;
}

.il__panel-sms {
  gap: 8px;
}

.il__panel-sms .il__dymek--user {
  align-self: flex-end;
}

.il__panel-sms .il__dymek {
  font-size: 12px;
}

.il__panel-potw {
  gap: 10px;
}

.il__panel-potw .il__baner {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  margin: 0;
  animation: il-dymek 0.5s var(--ease) 0.4s both;
}

.il__panel-potw .il__kalendarz {
  width: 100%;
  box-shadow: none;
  border: 1px solid var(--blue-line);
  font-size: 12px;
}

.il__panel-potw .il__kal-slot {
  padding: 6px 10px;
  font-size: 11.5px;
}

.il__panel-ocena {
  gap: 10px;
}

.il__panel-ocena .il__ocena,
.il__panel-ocena .il__opinia {
  width: 100%;
  max-width: none;
  box-shadow: none;
  border: 1px solid var(--blue-line);
}

.il__panel-ocena .il__ocena b {
  font-size: 13px;
}

/* integracje na ekranie laptopa */
.il__gabinet-ekran .il__ekran-int {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 520px;
  zoom: calc(var(--ks) * 0.54);
}

/* ------------------------------------------ wersja 4e: cennik, uwagi, materiały na laptopie; oś części dla 1–2 działów -- */

.il__gabinet-ekran .il__ekran-cennik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 500px;
  zoom: calc(var(--ks) * 0.56);
}

.il__gabinet-ekran .il__ekran-uwagi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 420px;
  zoom: calc(var(--ks) * 0.6);
}

.il__gabinet-ekran .il__ekran-uwagi .il__rozmowa {
  width: 100%;
  margin: 0;
}

.il__gabinet-ekran .il__ekran-pakiety {
  width: 460px;
  zoom: calc(var(--ks) * 0.58);
}

.il__gabinet-ekran .il__ekran-pakiety .il__pakiety {
  justify-content: center;
}

/* oś części: przy 1–2 działach węzły stoją na środku, nie rozciągają się na całą szerokość */
.linia__kafle {
  grid-template-columns: repeat(var(--ile, 5), minmax(0, 150px));
  justify-content: center;
}

.linia__tor {
  left: 8%;
  right: 8%;
}

/* dział klinika: lista bez wartości + stopka z kropką */
.il__ekran-profil-wiersz--lista {
  grid-template-columns: 26px minmax(0, 1fr) 16px;
}

.il__ekran-profil-wiersz--lista > b {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__ekran-profil-stopka {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 2.8s forwards;
}

/* ------------------------------------------ wersja 4e: miesiąc GHL na całą szerokość ekranu -- */

.il__ekran-miesiac--pelny {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 392px;
  zoom: var(--ks);
}

.il__ekran-miesiac--pelny .il__ghlm {
  width: 100%;
}

.il__ekran-miesiac--pelny .il__ghl-belka {
  padding: 5px 10px 4px;
  white-space: nowrap;
}

.il__ekran-miesiac--pelny .il__ghl-belka b {
  font-size: 11px;
}

.il__ekran-miesiac--pelny .il__ghl-belka span {
  font-size: 10px;
}

.il__ekran-miesiac--pelny .il__ghlm-tydzien span {
  padding: 2px 0;
  font-size: 8px;
}

.il__ekran-miesiac--pelny .il__ghlm-dzien {
  height: 23px;
  padding: 2px 4px;
  gap: 2px;
}

.il__ekran-miesiac--pelny .il__ghlm-dzien b {
  font-size: 8px;
  line-height: 1;
}

.il__ekran-miesiac--pelny .il__ghlm-dzien--dzis b {
  width: 12px;
  height: 12px;
  font-size: 7.5px;
}

.il__ekran-miesiac--pelny .il__ghlm-dzien i {
  padding: 1px 4px;
  font-size: 6.5px;
  line-height: 1.2;
  overflow: visible;
}

/* reguły jako rząd pigułek pod kalendarzem */
.il__ekran-miesiac--pelny .il__reguly {
  flex-direction: row;
  justify-content: center;
  gap: 6px;
}

.il__ekran-miesiac--pelny .il__regula {
  padding: 5px 9px;
  font-size: 9.5px;
  box-shadow: none;
  border-color: var(--blue-line);
  white-space: nowrap;
}

.il__ekran-miesiac--pelny .il__regula svg {
  width: 11px;
  height: 11px;
}

/* ------------------------------------------ wersja 4e: horyzont rezerwacji — droga do horyzontu -- */

.il--horyzont {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #eaf4ff 0%, #f6fbff 55%, #f6fbff 100%);
}

/* trawa na całą szerokość poniżej horyzontu */
.il--horyzont::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(200px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #dcefe3, #cfe8d8);
  z-index: 0;
}

.il--horyzont > * {
  animation: none;
}

.il__horyzont {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--horyzont {
  --ks: 0.82;
}

/* drogowskazy wjeżdżają po kolei, szlaban opada, oś jezdni „płynie” raz */
.il__h-znak {
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.15s);
}

.il__h-szlaban {
  opacity: 0;
  animation: il-dymek 0.6s var(--ease) 1.4s forwards;
}

.il__h-osiowa {
  animation: h-osiowa 2.4s linear 0.2s both;
}

@keyframes h-osiowa {
  from {
    stroke-dashoffset: 96;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ------------------------------------------ wersja 4e: głosy — większe kafle, duża karta na środku -- */

.pytanie__widzet--pelny .glosy {
  max-width: 1040px;
  gap: 20px;
}

.glos {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 4px 22px;
  padding: 26px 28px;
}

.glos__play {
  width: 96px;
  height: 96px;
}

.glos__imie {
  font-size: 26px;
}

.glos__opis {
  font-size: 14.5px;
}

.glos__wybor {
  min-width: 140px;
  padding: 13px 22px;
  font-size: 15px;
}

/* w siatce kafel nie rozwija fali — rozwinięcie to duża karta na środku */
.glos--otwarty {
  transform: none;
  border-color: rgba(29, 78, 216, 0.4);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14), var(--glass-shadow-lg);
}

.glos--otwarty .glos__fala {
  height: 0;
  margin-top: 0;
  opacity: 0;
}

.glos-tlo {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.28);
  backdrop-filter: none;
  z-index: 80;
  animation: il-dymek 0.25s var(--ease) both;
}

.glos-duzy {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 40px 36px;
  border-radius: 28px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: 0 40px 90px -30px rgba(3, 7, 18, 0.45);
  z-index: 81;
  text-align: center;
  animation: glos-duzy-wchodzi 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.1) both;
}

@keyframes glos-duzy-wchodzi {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.glos-duzy__zamknij {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--ink-muted);
}

.glos-duzy__play {
  width: 150px;
  height: 150px;
  margin-bottom: 8px;
}

.glos-duzy__play svg {
  width: 44px;
  height: 44px;
}

.glos-duzy[data-plec="k"] .glos-duzy__play {
  background: var(--blue-sky);
}

.glos-duzy__imie {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.glos-duzy__opis {
  font-size: 15px;
  color: var(--ink-muted);
}

/* animacja słuchania: fala żyje przez ~40 s (nie w nieskończoność), potem zamiera */
.glos-duzy__fala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 72px;
  margin-top: 12px;
  padding: 0 10px;
  border-radius: 18px;
  background: var(--blue-tint);
}

.glos-duzy__fala i {
  width: 5px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0.9;
  animation: glos-slucha 1.1s ease-in-out 36;
  animation-delay: calc(var(--i) * -0.075s);
}

.glos-duzy[data-plec="k"] .glos-duzy__fala i {
  background: var(--blue-sky);
}

@keyframes glos-slucha {
  0%,
  100% {
    height: 8px;
  }
  30% {
    height: 44px;
  }
  55% {
    height: 18px;
  }
  75% {
    height: 52px;
  }
}

.glos-duzy__status {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
}

.glos-duzy__wybor {
  margin-top: 14px;
  min-width: 220px;
}

/* lejek: kropka na środku pod lejkiem, napis pod kropką */
.il__lejek-dol {
  top: 286px;
  flex-direction: column;
  gap: 8px;
}

.il__lejek-dol .il__kropka {
  width: 40px;
  height: 40px;
}

.il__lejek-dol b {
  font-size: 17px;
}

/* ================================ wersja 4f: kafle wyboru jako poziome wiersze (jak głosy) ================================ */

/*
  Właściciel odrzucił pionowe karty („krzywo, brzydko, nie pasuje”). Kafle
  wyboru wyglądają teraz jak kafle głosów: poziomy wiersz — ikona po lewej,
  tytuł i opis obok, przycisk po prawej. 2–3 opcje = jedna kolumna,
  4+ = dwie kolumny. Subgrid już niepotrzebny (wiersze mają równą wysokość).
*/
.pytanie__widzet--pelny .kafle,
.pytanie__widzet--pelny .kafle[data-ile="2"],
.pytanie__widzet--pelny .kafle[data-ile="3"],
.pytanie__widzet--pelny .kafle[data-ile="4"],
.pytanie__widzet--pelny .kafle[data-ile="5"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  max-width: 820px;
  gap: 14px;
  align-items: stretch;
}

.pytanie__widzet--pelny .kafle[data-ile="4"],
.pytanie__widzet--pelny .kafle[data-ile="5"],
.pytanie__widzet--pelny .kafle[data-ile="6"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1120px;
}

.pytanie__widzet--pelny .kafel-w,
.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-row: auto;
  gap: 3px 20px;
  align-items: center;
  justify-items: start;
  min-height: 0;
  padding: 20px 24px 20px 22px;
  text-align: left;
}

.pytanie__widzet--pelny .kafel-w__gora {
  grid-column: 1;
  grid-row: 1 / 3;
  width: auto;
  margin: 0;
  justify-content: flex-start;
}

.pytanie__widzet--pelny .kafel-w__gora .klawisz {
  top: 12px;
  right: 12px;
}

.pytanie__widzet--pelny .kafel-w__ikona,
.pytanie__widzet--pelny .kafel-w__loga .logo-marki,
.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__ikona,
.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__loga .logo-marki {
  width: 76px;
  height: 76px;
  animation: none;
}

.pytanie__widzet--pelny .kafel-w__ikona svg {
  width: 34px;
  height: 34px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki svg {
  width: 40px;
  height: 40px;
}

.pytanie__widzet--pelny .kafel-w__loga {
  gap: 8px;
}

.pytanie__widzet--pelny .kafel-w__tytul,
.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__tytul {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.pytanie__widzet--pelny .kafel-w__opis {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.4;
}

/* bez opisu: tytuł na środku wysokości */
.pytanie__widzet--pelny .kafel-w__tytul:last-of-type {
  grid-row: 1 / 3;
  align-self: center;
}

.pytanie__widzet--pelny .kafel-w__stopka,
.pytanie__widzet--pelny .kafle[data-ile="5"] .kafel-w__stopka {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: auto;
  min-width: 132px;
  margin: 0 36px 0 0;
  padding: 11px 18px;
}

/* baner powiadomienia: tekst zawija się w ramce */
.il__baner span,
.il__baner b {
  white-space: normal;
  overflow-wrap: anywhere;
}

.il__baner > div {
  min-width: 0;
}

.il__panel-potw .il__baner span {
  font-size: 11.5px;
  line-height: 1.35;
}

/* ------------------------------------------ wersja 4f: telefon na stole -- */

.il--stol {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  /* blat z góry: jasne drewno/beż, na całą szerokość */
  background:
    radial-gradient(900px 500px at 50% 60%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, #f1ebe3, #e7dfd4);
}

.il--stol > * {
  animation: none;
}

.il__stol {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--stol {
  --ks: 0.82;
}

/* nakładka HTML w polu ekranu telefonu (266,12 → 188×336), pod paskiem statusu */
.il__stol-ekran {
  position: absolute;
  left: calc(50% - 94px * var(--ks));
  top: calc(44px * var(--ks));
  width: calc(188px * var(--ks));
  height: calc(300px * var(--ks));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.il__stol-ekran > * {
  zoom: calc(var(--ks) * 0.53);
  width: 340px;
  border: 0;
  box-shadow: none;
  background: none;
  padding: 8px 6px;
}

.il__stol-ekran .il__panel-karta,
.il__stol-ekran .il__panel-watek,
.il__stol-ekran .il__panel-powrot {
  border: 0;
  box-shadow: none;
  background: none;
}

.il__stol-ekran .il__panel-watek .il__watek-wpis {
  grid-template-columns: 50px 26px minmax(0, 1fr);
}

/* telefon na stole (mniejszy): pole ekranu 277,29 → 166×304, treść pod paskiem statusu, wyśrodkowana w pionie */
.il__stol-ekran {
  left: calc(50% - 83px * var(--ks));
  top: calc(56px * var(--ks));
  width: calc(166px * var(--ks));
  height: calc(268px * var(--ks));
  align-items: stretch;
}

.il__stol-ekran > * {
  zoom: calc(var(--ks) * 0.52);
  width: 300px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 10px 8px;
}

.il__stol-ekran .il__glos {
  width: 100%;
  min-height: 480px;
  justify-content: center;
  gap: 16px;
}

.il__stol-ekran .il__glos-napisy {
  min-height: 0;
}

.il__stol-ekran .il__panel-os,
.il__stol-ekran .il__panel-potw,
.il__stol-ekran .il__panel-ocena,
.il__stol-ekran .il__panel-sms,
.il__stol-ekran .il__panel-przelaczenie {
  gap: 14px;
}

/* CTA „Wybieram / Zaznacz” w kaflach: zaokrąglony prostokąt jak reszta CTA, nie pigułka */
.pytanie__widzet--pelny .kafel-w__stopka,
.pytanie__widzet--pelny .kafel-w[aria-pressed="true"] .kafel-w__stopka {
  border-radius: 12px;
  padding: 11px 20px;
  font-size: 14px;
  line-height: 1.2;
  min-height: 0;
  height: auto;
  box-shadow: none;
}

.pytanie__widzet--pelny .kafel-w[aria-pressed="true"] .kafel-w__stopka {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* lejek: kropka dokładnie pod wylotem spirali (po przechyleniu -7°), napis pod nią */
.il__lejek-dol {
  left: calc(50% + 10px);
  top: 284px;
  gap: 6px;
}

.il__lejek-ikona b {
  display: none;
}

/* kafle-wiersze: litera klawisza w rogu karty (nie na logo), dwa loga obok siebie, tytuł bez opisu na środku */
.pytanie__widzet--pelny .kafel-w {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pytanie__widzet--pelny .kafel-w__gora {
  position: static;
  min-width: 76px;
}

.pytanie__widzet--pelny .kafel-w .klawisz {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.pytanie__widzet--pelny .kafel-w__loga {
  display: flex;
  gap: 8px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki {
  width: 60px;
  height: 60px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki svg {
  width: 32px;
  height: 32px;
}

.pytanie__widzet--pelny .kafle .kafel-w .kafel-w__tytul:last-of-type {
  grid-row: 1 / 3;
  align-self: center;
}

.pytanie__widzet--pelny .kafle .kafel-w .kafel-w__tytul:not(:last-of-type) {
  grid-row: 1;
  align-self: end;
}

/* wątek SMS na telefonie: wpisy rozłożone na całą wysokość ekranu */
.il__stol-ekran .il__panel-watek {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
}

.il__stol-ekran .il__panel-watek .il__watek {
  flex: 1;
  justify-content: space-evenly;
  gap: 0;
}

.il__stol-ekran .il__panel-watek .il__watek-dymek {
  font-size: 12.5px;
  padding: 10px 12px;
}

.il__stol-ekran .il__panel-watek .il__watek-dymek b {
  font-size: 13px;
}

/* potwierdzenie na telefonie: wątek wiadomości, dymki po kolei, raz */
.il__panel-czat {
  gap: 10px;
}

.il__czat-naglowek {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--blue-line);
}

.il__czat-naglowek .il__awatar {
  width: 36px;
  height: 36px;
}

.il__czat-naglowek b {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.il__czat-chip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--blue-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.il__czat-chip svg {
  color: var(--blue);
}

.il__stol-ekran .il__dymek--raz {
  opacity: 0;
  transform: translateY(8px);
  animation: il-dymek 0.45s var(--ease) forwards;
  animation-delay: calc(0.6s + var(--t, 0) * 0.9s);
  max-width: 92%;
  font-size: 13px;
}

.il__stol-ekran .il__dymek--raz-2 {
  --t: 2;
}

/* Plakietki liter klawiszy (A, B, C…) na kaflach, głosach, TAK/NIE — UKRYTE (właściciel). Skróty działają dalej. */
.kafel-w .klawisz,
.glos__klawisz,
.taknie .klawisz,
.modul .klawisz,
.gwiazdki .klawisz,
.kafel .klawisz {
  display: none !important;
}

/* TAK / NIE: ptaszek po prawej, na środku wysokości; tekst wyśrodkowany (bez litery klawisza) */
.taknie__kafel {
  position: relative;
  justify-content: center;
  text-align: center;
}

.taknie__ptaszek {
  top: 50%;
  right: 16px;
  margin-top: -11px;
}

[aria-pressed="true"] > .taknie__ptaszek {
  transform: none;
}

/* ------------------------------------------ wersja 4f: ekran blokady (kiedy wychodzi SMS) -- */

.il__stol-ekran .il__lock {
  width: 300px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 26px 14px 18px;
  border-radius: 22px;
  background:
    radial-gradient(260px 200px at 30% 10%, rgba(147, 197, 253, 0.55), transparent 70%),
    radial-gradient(260px 240px at 80% 90%, rgba(29, 78, 216, 0.28), transparent 70%),
    linear-gradient(180deg, #dbeafe, #eff6ff 60%, #e0ecff);
}

.il__lock-data {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  opacity: 0.85;
}

.il__lock-godzina {
  margin-top: 2px;
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.il__lock-powiadomienie {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
  padding: 12px 12px 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px -16px rgba(3, 7, 18, 0.35);
  opacity: 0;
  transform: translateY(-40px);
  animation: lock-powiadomienie 0.6s cubic-bezier(0.2, 0.9, 0.2, 1.05) 1s forwards;
}

@keyframes lock-powiadomienie {
  to {
    opacity: 1;
    transform: none;
  }
}

.il__lock-powiadomienie .il__awatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.il__lock-tresc {
  min-width: 0;
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: #0f172a;
}

.il__lock-kto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.il__lock-kto b {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__lock-kto small {
  font-size: 10.5px;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.il__lock-tresc > span {
  display: block;
  margin-top: 2px;
}

.il__lock-tresc .il__sms-wiersz {
  margin: 3px 0;
}

.il__lock-stopka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.il__lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 11.5px;
  font-weight: 700;
  color: #1e3a8a;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) 1.7s forwards;
}

.il__lock-chip--kiedy {
  animation-delay: 2s;
}

.il__lock-chip svg {
  color: var(--blue);
}

/* ================================ wersja 4g: cztery nowe sceny ================================ */

/* wspólne: pełna szerokość, --ks, SVG na środku */
.il--miasteczko,
.il--centrala,
.il--dzien,
.il--kalsc {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
}

.il--miasteczko > *,
.il--centrala > *,
.il--dzien > *,
.il--kalsc > * {
  animation: none;
}

.il__miasteczko,
.il__centrala,
.il__dzien,
.il__kalsc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--miasteczko,
.pytanie--scena .il--centrala,
.pytanie--scena .il--dzien,
.pytanie--scena .il--kalsc {
  --ks: 0.82;
}

/* --- 1. miasteczko: niebo + trawa --- */
.il--miasteczko {
  background: linear-gradient(180deg, #e6f1ff, #f7fbff 70%);
}

.il--miasteczko::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(292px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #d5ecdc, #c7e5d0);
  z-index: 0;
}

.il__mi-kula {
  position: absolute;
  left: calc(50% - 16px * var(--ks));
  top: calc(96px * var(--ks));
  width: calc(32px * var(--ks));
  height: calc(32px * var(--ks));
  z-index: 2;
}

.il__mi-impuls {
  opacity: 0;
  animation: mi-impuls 2.2s linear 0.4s forwards;
}

.il__mi-impuls--2 {
  animation: mi-impuls 1.6s linear 4.2s forwards;
}

@keyframes mi-impuls {
  0% {
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.il__mi-dymek {
  position: absolute;
  padding: 7px 11px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) forwards;
  animation-delay: calc(0.2s + var(--t) * 1.8s);
}

.il__mi-dymek--dom {
  left: calc(50% - 320px);
  top: 92px;
}

.il__mi-dymek--dom2 {
  top: 130px;
}

.il__mi-dymek--ai {
  left: calc(50% - 20px);
  top: 46px;
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.il__mi-wynik {
  position: absolute;
  left: calc(50% + 150px);
  top: 100px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #e8f7ee;
  color: var(--good);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 6s forwards;
}

/* --- 2. centrala: ściana + blat --- */
.il--centrala {
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--centrala::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(310px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__ce-kabel {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ce-kabel 1.6s var(--ease) 0.6s forwards;
}

@keyframes ce-kabel {
  to {
    stroke-dashoffset: 0;
  }
}

.il__ce-wtyk {
  opacity: 0;
  animation: il-dymek 0.3s var(--ease) 2.1s forwards;
}

.il__ce-dioda {
  animation: ce-dioda 0.4s linear 2.3s forwards;
}

@keyframes ce-dioda {
  to {
    fill: #22c55e;
  }
}

.il__ce-status {
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 2.4s forwards;
}

/* --- 3. dzień wizyty: niebo rano→wieczór + łąka --- */
.il--dzien {
  background: linear-gradient(90deg, #fff3e0 0%, #e6f1ff 45%, #dbe7ff 75%, #f3e2ff 100%);
}

.il--dzien::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(292px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #d5ecdc, #c7e5d0);
  z-index: 0;
}

.il__dw-flaga {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(90deg);
  animation: dw-flaga 0.5s var(--ease) forwards;
  animation-delay: calc(1.2s + var(--i) * 1.5s);
}

@keyframes dw-flaga {
  to {
    transform: rotate(0);
  }
}

.il__dw-sms {
  opacity: 0;
  transform: translateY(-14px);
  animation: dw-sms 0.5s var(--ease) forwards;
  animation-delay: calc(0.9s + var(--i) * 1.5s);
}

@keyframes dw-sms {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- 4. kalendarz ścienny: ściana + lamperia --- */
.il--kalsc {
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--kalsc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(300px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__ks-pasek {
  animation: ks-pasek 3s steps(6, end) 0.6s forwards;
}

@keyframes ks-pasek {
  to {
    transform: translateY(-192px);
  }
}

.il__ks-dzis {
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 3.8s forwards;
}

.il__ks-karteczka {
  position: absolute;
  left: calc(50% + 150px);
  top: 96px;
  width: 150px;
  padding: 12px 14px;
  border-radius: 4px;
  background: #fff3c4;
  box-shadow: 0 10px 24px -12px rgba(3, 7, 18, 0.35);
  transform: rotate(4deg);
  font-size: 12px;
  color: #0f172a;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 4.2s forwards;
}

.il__ks-karteczka b {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.il__ks-karteczka em {
  font-style: normal;
  font-weight: 800;
  color: var(--blue);
}

.il__ks-sms {
  position: absolute;
  left: 50%;
  top: 318px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 5s forwards;
}

/* TAK / NIE: ptaszek absolutnie, po prawej na środku (nadpisuje późniejsze reguły) */
.taknie__kafel .taknie__ptaszek {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  margin-top: -11px !important;
}

/* ================================ wersja 4g: taśmociąg, paczka, laptop-ogród ================================ */

.il--tasma,
.il--paczka {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--tasma > *,
.il--paczka > * {
  animation: none;
}

.il--tasma::before,
.il--paczka::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(300px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__tasma,
.il__paczka {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--tasma,
.pytanie--scena .il--paczka {
  --ks: 0.82;
}

/* taśmociąg */
.il__ta-rolka {
  transform-box: fill-box;
  transform-origin: center;
  animation: ta-rolka 1.2s linear 5;
}

@keyframes ta-rolka {
  to {
    transform: rotate(360deg);
  }
}

.il__ta-paczka {
  opacity: 0;
  animation: ta-paczka 2.4s linear forwards;
  animation-delay: calc(0.4s + var(--i) * 1.3s);
}

@keyframes ta-paczka {
  0% {
    opacity: 0;
  }
  8%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.il__ta-kula {
  position: absolute;
  left: calc(50% + 226px * var(--ks));
  top: calc(196px * var(--ks));
  width: calc(38px * var(--ks));
  height: calc(38px * var(--ks));
  z-index: 2;
}

.il__ta-wpisy {
  position: absolute;
  left: calc(50% + 200px);
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  zoom: var(--ks);
  z-index: 2;
}

.il__ta-wpisy span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f7ee;
  color: var(--good);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  animation: il-dymek 0.4s var(--ease) forwards;
  animation-delay: calc(2.9s + var(--i) * 1.3s);
}

.il__ta-status {
  position: absolute;
  left: 50%;
  top: 322px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 6.8s forwards;
}

.il__ta-status i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--good);
}

/* paczka */
.il__pa-klapa {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0.2);
  animation: pa-klapa 0.7s var(--ease) 0.4s forwards;
}

@keyframes pa-klapa {
  to {
    transform: scaleY(1);
  }
}

.il__pa-item {
  opacity: 0;
  transform: translate(360px, 250px) scale(0.6);
  animation: pa-item 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.il__pa-item--1 {
  animation-delay: 1.2s;
  --cel: translate(500px, 80px);
}

.il__pa-item--2 {
  animation-delay: 2.4s;
  --cel: translate(600px, 96px);
}

@keyframes pa-item {
  0% {
    opacity: 0;
    transform: translate(360px, 250px) scale(0.6);
  }
  25% {
    opacity: 1;
    transform: translate(360px, 160px) scale(1);
  }
  100% {
    opacity: 1;
    transform: var(--cel) scale(0.72);
  }
}

.il__pa-chmura {
  opacity: 0;
  animation: il-dymek 0.6s var(--ease) 0.8s forwards;
}

.il__pa-lista {
  position: absolute;
  left: calc(50% - 340px);
  top: 120px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12px;
  zoom: var(--ks);
  z-index: 2;
}

.il__pa-lista b {
  font-size: 13px;
}

.il__pa-poz {
  color: var(--ink-soft);
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) forwards;
  animation-delay: calc(2.2s + var(--i) * 1.2s);
}

.il__pa-poz--ok {
  font-weight: 800;
  color: var(--good);
}

/* laptop-ogród: cieplejsza ściana */
.il--gabinet-ogrod {
  background: linear-gradient(180deg, #fbfaf6, #f3f1ea);
}

.il--gabinet-ogrod::before {
  background: linear-gradient(180deg, #efe9de 0, #e5ddd0 45%, #d8cfbf 100%);
}

/* CTA „Wybieram” w głosach: zaokrąglony prostokąt, nie pigułka */
.glos__wybor,
.glos__wybor[aria-pressed="true"],
.glos-duzy__wybor {
  border-radius: 12px;
}

/* lejek: kropka dokładnie pod wylotem spirali, na jej osi */
.il__lejek-dol {
  left: calc(50% + 10px);
  top: 288px;
}

/* lejek: kropka nie „przejeżdża” po wejściu — animacja tylko przezroczystości, transform zostaje */
.il__lejek-dol {
  transform: translateX(-50%);
  animation: lejek-dol 0.6s var(--ease) 0.9s both;
}

@keyframes lejek-dol {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================================ wersja 4g: kanały jako ekran z aplikacjami ================================ */

.pytanie__widzet--pelny .kafle.kafle--aplikacje {
  grid-template-columns: repeat(var(--ile, 5), minmax(0, 1fr));
  max-width: 980px;
  gap: 16px;
  align-items: start;
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 8px 18px;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w:hover {
  transform: none;
  box-shadow: none;
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w__gora {
  position: relative;
  min-width: 0;
  margin: 0;
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w__loga .logo-marki {
  width: 112px;
  height: 112px;
  border: 0;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 40px -18px rgba(3, 7, 18, 0.35);
  opacity: 0.72;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w__loga .logo-marki svg {
  width: 112px;
  height: 112px;
  border-radius: 28px;
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w:hover .logo-marki {
  transform: translateY(-4px) scale(1.03);
  opacity: 1;
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w[aria-pressed="true"] .logo-marki {
  opacity: 1;
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px var(--blue), 0 18px 40px -18px rgba(3, 7, 18, 0.35);
}

/* ptaszek w rogu ikony po zaznaczeniu */
.pytanie__widzet--pelny .kafle--aplikacje .kafel-w__gora::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 16px no-repeat;
  border: 3px solid #ffffff;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w[aria-pressed="true"] .kafel-w__gora::after {
  transform: scale(1);
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w__tytul,
.pytanie__widzet--pelny .kafle--aplikacje .kafel-w .kafel-w__tytul:last-of-type {
  grid-row: auto;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.pytanie__widzet--pelny .kafle--aplikacje .kafel-w__stopka {
  display: none;
}

/* wiersze wyboru: tytuł i opis w jednej kolumnie, równo z lewej; przy dwóch logach kolumna szersza */
.pytanie__widzet--pelny .kafel-w:not(.kafle--aplikacje .kafel-w) .kafel-w__gora {
  justify-self: start;
}

.pytanie__widzet--pelny .kafel-w__loga {
  min-width: 76px;
  justify-content: flex-start;
}

/* powiadomienia na telefonie w gabinecie: trzy wjeżdżają po kolei */
.il__g-powiadomienie {
  opacity: 0;
  transform: translateY(-14px);
  animation: g-powiadomienie-raz 0.5s var(--ease) forwards;
}

.il__g-powiadomienie--1 {
  animation-delay: 1.2s;
}

.il__g-powiadomienie--2 {
  animation-delay: 2s;
}

.il__g-powiadomienie--3 {
  animation-delay: 2.8s;
}

@keyframes g-powiadomienie-raz {
  to {
    opacity: 1;
    transform: none;
  }
}

/* skrzynki: chorągiewka obraca się wokół dolnego końca drzewca, koperta wyskakuje z góry */
.il__dw-flaga {
  transform-box: fill-box;
  transform-origin: 10% 100%;
  transform: rotate(90deg);
}

.il__dw-sms {
  opacity: 0;
  transform: translateY(30px);
}

/* iPhone w proporcji 1:2.16 — pole ekranu 288,14 → 144×330, treść pod paskiem statusu */
.il__stol-ekran {
  left: calc(50% - 72px * var(--ks));
  top: calc(40px * var(--ks));
  width: calc(144px * var(--ks));
  height: calc(292px * var(--ks));
}

.il__stol-ekran > * {
  zoom: calc(var(--ks) * 0.48);
  width: 300px;
  min-height: 600px;
}

.il__stol-ekran .il__lock {
  min-height: 600px;
}

.il__stol-ekran .il__panel-watek {
  min-height: 600px;
}

/* wątek w stylu iMessage */
.il__stol-ekran .il__panel-czat {
  justify-content: flex-start;
  gap: 10px;
  padding-top: 0;
}

.il__stol-ekran .il__czat-naglowek {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

.il__stol-ekran .il__czat-naglowek .il__awatar {
  width: 52px;
  height: 52px;
}

.il__stol-ekran .il__czat-naglowek b {
  font-size: 13px;
  max-width: 100%;
}

.il__stol-ekran .il__czat-naglowek small {
  font-size: 11px;
}

.il__stol-ekran .il__dymek--raz {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.35;
}

.il__stol-ekran .il__dymek--bot.il__dymek--raz {
  background: #e9edf5;
  color: #0f172a;
}

.il__stol-ekran .il__czat-chip {
  font-size: 11px;
  padding: 6px 12px;
}

.il__stol-ekran .il__dymek--raz-2::after {
  content: "Dostarczono";
  position: absolute;
  right: 4px;
  bottom: -16px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}

/* ================================ wersja 4h: gwiazdki, zegar ścienny, stempel ================================ */

.il--gwiazdki,
.il--zegar-sc,
.il--stempel {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--gwiazdki > *,
.il--zegar-sc > *,
.il--stempel > * {
  animation: none;
}

.il--zegar-sc::before,
.il--stempel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(300px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__gw,
.il__zegar-sc,
.il__stempel,
.il__sync-sc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--gwiazdki,
.pytanie--scena .il--zegar-sc,
.pytanie--scena .il--stempel {
  --ks: 0.82;
}

/* gwiazdki */
.il__gw-star,
.il__gw-star-m {
  opacity: 0.18;
  animation: gw-star 0.35s var(--ease) forwards;
  animation-delay: calc(0.6s + var(--i) * 0.28s);
}

.il__gw-star-m {
  animation-delay: calc(2.4s + var(--i) * 0.2s);
}

@keyframes gw-star {
  0% {
    opacity: 0.18;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.il__gw-karta {
  opacity: 0;
  animation: il-dymek 0.6s var(--ease) 2s forwards;
}

.il__gw-odp {
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 3.8s forwards;
}

.il__gw-kula {
  position: absolute;
  left: calc(50% + 44px * var(--ks));
  top: calc(214px * var(--ks));
  width: calc(30px * var(--ks));
  height: calc(30px * var(--ks));
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 3.8s forwards;
}

/* zegar: wskazówki dojeżdżają do godziny (raz), sekundnik zamiera */
.il__zg-godz,
.il__zg-min {
  transform-box: view-box;
  transform-origin: 200px 180px;
  transform: rotate(calc(var(--kat) - 70deg));
  animation: zg-wsk 1.8s cubic-bezier(0.3, 0.8, 0.3, 1) 0.4s forwards;
}

@keyframes zg-wsk {
  to {
    transform: rotate(var(--kat));
  }
}

.il__zg-sek {
  transform-box: view-box;
  transform-origin: 200px 180px;
  animation: zg-sek 2.2s linear 0.4s forwards;
}

@keyframes zg-sek {
  from {
    transform: rotate(-200deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.il__zg-kartka,
.il__zg-etyk {
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 0.3s forwards;
}

.il__zg-etyk {
  animation-delay: 2.2s;
}

.il__zg-sms {
  position: absolute;
  left: calc(50% + 40px);
  top: 190px;
  width: 300px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #fff8db;
  box-shadow: 0 14px 30px -14px rgba(3, 7, 18, 0.4);
  transform: rotate(-2deg);
  font-size: 12.5px;
  line-height: 1.45;
  color: #0f172a;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: zg-sms 0.6s var(--ease) 2.4s forwards;
}

@keyframes zg-sms {
  from {
    opacity: 0;
    transform: rotate(-2deg) translateY(16px);
  }
  to {
    opacity: 1;
    transform: rotate(-2deg);
  }
}

.il__zg-sms-naglowek {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e0c98a;
  font-size: 11px;
}

.il__zg-sms-naglowek b {
  font-size: 12px;
}

.il__zg-sms-naglowek span {
  color: var(--blue);
  font-weight: 700;
}

/* stempel */
.il__stm-pieczatka {
  transform-box: view-box;
  transform: translateY(-160px);
  animation: stm-pieczatka 0.5s cubic-bezier(0.4, 0, 1, 1) 0.8s forwards;
}

@keyframes stm-pieczatka {
  0% {
    transform: translateY(-160px);
  }
  70% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(-64px);
  }
}

.il__stm-odcisk {
  opacity: 0;
  animation: stm-odcisk 0.15s linear 1.15s forwards;
}

@keyframes stm-odcisk {
  to {
    opacity: 1;
  }
}

.il__stm-koperta {
  opacity: 0;
  transform: translateX(-60px);
  animation: stm-koperta 0.7s var(--ease) 2s forwards;
}

@keyframes stm-koperta {
  to {
    opacity: 1;
    transform: none;
  }
}

.il__stm-sms {
  position: absolute;
  left: calc(50% + 150px);
  top: 286px;
  width: 210px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 2.7s forwards;
}

.il__stm-sms b {
  display: block;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ------------------------------------------ wersja 4h: synchronizacja kalendarzy -- */

.il--sync {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--sync > * {
  animation: none;
}

.il__sync-sc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--sync {
  --ks: 0.82;
}

.il__sy-kula {
  position: absolute;
  left: calc(50% + 98px * var(--ks));
  top: calc(59px * var(--ks));
  width: calc(18px * var(--ks));
  height: calc(18px * var(--ks));
  z-index: 2;
}

/* wpisy: po lewej pojawiają się co 1,4 s; po prawej 0,6 s później (po impulsie) */
.il__sy-wpis {
  opacity: 0;
  animation: il-dymek 0.35s var(--ease) forwards;
}

.il__sy-wpis--l {
  animation-delay: calc(0.6s + var(--i) * 1.4s);
}

.il__sy-wpis--p {
  animation-delay: calc(1.3s + var(--i) * 1.4s);
}

/* impulsy lecą z lewego kalendarza do prawego */
.il__sy-puls {
  opacity: 0;
  transform: translate(280px, 150px);
  animation: sy-puls 0.7s linear forwards;
}

.il__sy-puls--1 {
  animation-delay: 0.7s;
}

.il__sy-puls--2 {
  animation-delay: 2.1s;
}

.il__sy-puls--3 {
  animation-delay: 3.5s;
}

@keyframes sy-puls {
  0% {
    opacity: 0;
    transform: translate(280px, 150px);
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(440px, 150px);
  }
}

/* znak synchronizacji obraca się raz przy każdym impulsie (3 obroty łącznie), potem stoi */
.il__sy-strzalki {
  transform-box: fill-box;
  transform-origin: center;
  animation: sy-obrot 1.4s var(--ease) 0.7s 3;
}

@keyframes sy-obrot {
  to {
    transform: rotate(360deg);
  }
}

.il__sy-status {
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) 5s forwards;
}

/* ------------------------------------------ wersja 4h: tablica cennika -- */

.il--cennik-sc {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--cennik-sc > * {
  animation: none;
}

.il--cennik-sc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(300px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__cennik-sc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--cennik-sc {
  --ks: 0.82;
}

.il__ce-wiersz {
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) forwards;
  animation-delay: calc(0.4s + var(--i) * 0.5s);
}

.il__ce-metka {
  opacity: 0;
  transform: translateX(24px);
  animation: cn-metka 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.1) forwards;
  animation-delay: calc(0.75s + var(--i) * 0.5s);
}

@keyframes cn-metka {
  to {
    opacity: 1;
    transform: none;
  }
}

.il__cn-dymek {
  position: absolute;
  left: 50%;
  top: 318px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 3s forwards;
}

@keyframes cn-dymek {
  to {
    opacity: 1;
  }
}

/* CTA w kaflach głosów: kompaktowy, jak reszta CTA (nie rozciągnięty na wysokość kafla) */
.glos .glos__wybor,
.glos .glos__wybor[aria-pressed="true"] {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: auto;
  min-width: 132px;
  height: auto;
  min-height: 0;
  margin: 0 6px 0 0;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: none;
}

.glos .glos__wybor[aria-pressed="true"],
.glos[aria-pressed="true"] .glos__wybor {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* CTA głosu: mały, wyśrodkowany w swojej kolumnie, stała wysokość */
.glos .glos__wybor,
.glos .glos__wybor[aria-pressed="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  height: 40px;
  min-width: 0;
  padding: 0 18px;
  margin: 0 4px 0 0;
  font-size: 13.5px;
}

.glos .glos__wybor .glos__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.glos .glos__wybor .glos__cta svg {
  width: 14px;
  height: 14px;
}

/* lejek: czyste białe tło, bez karty (ramka bez tła, obwódki i cienia) */
.il-ramka:has(.il--lejek) {
  background: #ffffff;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.il--lejek,
.pytanie--scena .il--lejek {
  background: #ffffff;
}

.il-ramka:has(.il--lejek)::before {
  display: none;
}

/* lejek: kropka 10 px w prawo (właściciel) */
.il__lejek-dol {
  left: calc(50% + 20px);
}

/* loga w <i>: tekst w SVG bez kursywy */
.logo-marki,
.logo-marki svg text {
  font-style: normal;
}

/* ============================== wersja 4i: kanały jako półka aplikacji (.apki) ============================== */

.apki {
  display: inline-flex;
  justify-content: center;
  gap: 40px;
  margin: 0 auto;
  padding: 30px 44px 26px;
  border-radius: 32px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}

.pytanie__widzet--pelny:has(.apki) {
  display: flex;
  justify-content: center;
}

.apka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 124px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  opacity: 0;
  animation: apka-wejscie 0.45s var(--ease) forwards;
  animation-delay: calc(0.08s + var(--i) * 0.07s);
}

@keyframes apka-wejscie {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.apka__ikona {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 26px;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
  filter: saturate(0.35) opacity(0.55);
  box-shadow: 0 14px 30px -18px rgba(3, 7, 18, 0.45);
}

.apka__ikona .loga,
.apka__ikona .logo-marki,
.apka__ikona .logo-marki svg {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 26px;
}

.apka__ikona .loga {
  gap: 0;
}

.apka:hover .apka__ikona {
  transform: translateY(-4px);
  filter: saturate(0.8) opacity(0.9);
}

.apka[aria-pressed="true"] .apka__ikona {
  filter: none;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--blue), 0 16px 30px -16px rgba(29, 78, 216, 0.45);
}

.apka:focus-visible {
  outline: none;
}

.apka:focus-visible .apka__ikona {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--blue);
}

.apka__ptaszek {
  position: absolute;
  right: -10px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--blue);
  border: 3px solid #ffffff;
  color: #ffffff;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.apka__ptaszek svg {
  width: 14px;
  height: 14px;
}

.apka[aria-pressed="true"] .apka__ptaszek {
  transform: scale(1);
}

.apka__nazwa {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.apka[aria-pressed="true"] .apka__nazwa {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .apki {
    flex-wrap: wrap;
    gap: 24px 20px;
    padding: 24px 22px;
  }

  .apka {
    width: 104px;
  }

  .apka__ikona,
  .apka__ikona .loga,
  .apka__ikona .logo-marki,
  .apka__ikona .logo-marki svg {
    width: 80px;
    height: 80px;
    border-radius: 22px;
  }
}

/* ============================== wersja 4j: wiersze wyboru większe, tekst w jednej linii pionowej ============================== */

.pytanie__widzet--pelny .kafle {
  max-width: 1040px;
  gap: 18px;
}

.pytanie__widzet--pelny .kafle .kafel-w {
  padding: 30px 32px 30px 30px;
  gap: 4px 30px;
  min-height: 136px;
}

/* kolumna z logo ma STAŁĄ szerokość w całej grupie, gdy któryś wiersz ma dwa loga —
   tytuły wszystkich wierszy zaczynają się w tym samym miejscu (właściciel: „tekst równy”) */
.pytanie__widzet--pelny .kafle:has(.logo-marki + .logo-marki) .kafel-w__gora {
  width: 166px;
  min-width: 166px;
}

.pytanie__widzet--pelny .kafel-w__loga {
  gap: 10px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki {
  width: 76px;
  height: 76px;
}

.pytanie__widzet--pelny .kafel-w__loga .logo-marki svg {
  width: 40px;
  height: 40px;
}

.pytanie__widzet--pelny .kafel-w__ikona {
  width: 76px;
  height: 76px;
}

.pytanie__widzet--pelny .kafel-w__ikona svg {
  width: 32px;
  height: 32px;
}

.pytanie__widzet--pelny .kafel-w__tytul {
  font-size: 24px;
}

.pytanie__widzet--pelny .kafel-w__opis {
  font-size: 15.5px;
}

.pytanie__widzet--pelny .kafel-w__stopka {
  padding: 13px 26px;
  font-size: 15px;
}

/* tytuł Z opisem: tytuł w 1. wierszu (dół), opis w 2. (góra) — bez nakładania, gdy opis ma dwie linie;
   tytuł BEZ opisu nadal rozciąga się na oba wiersze i stoi na środku */
.pytanie__widzet--pelny .kafle .kafel-w .kafel-w__tytul:has(+ .kafel-w__opis) {
  grid-row: 1;
  align-self: end;
}

.pytanie__widzet--pelny .kafle .kafel-w .kafel-w__opis {
  grid-row: 2;
  align-self: start;
}

/* pieczątka: zjeżdża, odbija kartę, chwilę stoi, po czym odlatuje w górę w prawo i znika (właściciel) */
.il__stm-pieczatka {
  transform-origin: 400px 150px;
  animation: stm-pieczatka-lot 1.5s cubic-bezier(0.4, 0, 0.6, 1) 0.8s forwards;
}

@keyframes stm-pieczatka-lot {
  0% {
    transform: translateY(-160px);
    opacity: 1;
  }
  30% {
    transform: translateY(40px);
  }
  42% {
    transform: translateY(38px);
    opacity: 1;
  }
  70% {
    transform: translate(50px, -130px) rotate(12deg);
    opacity: 1;
  }
  100% {
    transform: translate(170px, -320px) rotate(26deg);
    opacity: 0;
  }
}

.il__stm-odcisk {
  animation-delay: 1.24s;
}

/* ------------------------------------------ wersja 4k: koperta w kolorze papieru -- */

.il__koperta-tyl {
  background: linear-gradient(180deg, #d9e4f3, #c8d7ea);
  box-shadow: inset 0 0 0 1.5px #b9c9df;
}

.il__koperta-przod {
  background: linear-gradient(180deg, #f9fbfe 0%, #eef3fa 100%);
  box-shadow: inset 0 0 0 1.5px #c9d6e8, inset 0 18px 24px -20px rgba(15, 23, 42, 0.25);
}

.il__koperta-klapka {
  background: linear-gradient(180deg, #e6eef9, #d6e2f2);
  box-shadow: inset 0 0 0 1.5px #c9d6e8;
}

/* miasteczko: drugi dymek Asystenta (reaktywacja) niżej od pierwszego */
.il__mi-dymek--ai2 {
  top: 86px;
  left: calc(50% + 10px);
}

/* ============================== wersja 4l: kafle pod sceną (p.scena) — zwarte wiersze ============================== */

.pytanie--scena .pytanie__widzet .kafle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 0 0 auto;
}

.pytanie--scena .pytanie__widzet .kafle .kafel-w {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 14px;
  min-height: 0;
  padding: 11px 14px 11px 12px;
  text-align: left;
  animation-delay: calc(0.05s + var(--i, 0) * 0.06s);
}

.pytanie--scena .pytanie__widzet .kafel-w__gora {
  grid-row: 1 / 3;
  grid-column: 1;
  position: static;
  margin: 0;
  min-width: 0;
}

.pytanie--scena .pytanie__widzet .kafel-w__ikona {
  width: 46px;
  height: 46px;
}

.pytanie--scena .pytanie__widzet .kafel-w__ikona svg {
  width: 22px;
  height: 22px;
}

.pytanie--scena .pytanie__widzet .kafel-w__tytul {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  font-size: 16px;
}

.pytanie--scena .pytanie__widzet .kafel-w__tytul:has(+ .kafel-w__opis) {
  grid-row: 1;
  align-self: end;
}

.pytanie--scena .pytanie__widzet .kafel-w__opis {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.3;
}

.pytanie--scena .pytanie__widzet .kafel-w__stopka {
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
}

/* kafle pod sceną: dolny pas wyższy, wiersze przesunięte nad pasek Wstecz/Dalej */
.pytanie--scena:has(.pytanie__widzet .kafle) .pytanie__dol {
  height: 42vh;
  min-height: 300px;
}

.pytanie--scena .pytanie__widzet:has(.kafle) {
  padding-bottom: 64px;
}

/* ============================== wersja 5: sznur miesięcy · kolej · okienko · głosy-kule · spis treści ============================== */

.il--sznur {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #eaf4ff 0%, #f6fbff 60%, #f6fbff 100%);
}

.il--sznur > * {
  animation: none;
}

.il__sznur {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--sznur {
  --ks: 0.82;
}

.il--sznur::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(300px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #dcefe3, #cfe8d8);
  z-index: 0;
}

.il__sz-karta {
  transform-box: view-box;
  transform-origin: var(--px) var(--py);
  opacity: 0;
  animation: sz-karta 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards;
  animation-delay: calc(0.2s + var(--i) * 0.16s);
}

@keyframes sz-karta {
  0% {
    opacity: 0;
    transform: rotate(-18deg) translateY(-24px);
  }
  40% {
    opacity: 1;
    transform: rotate(9deg);
  }
  70% {
    transform: rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* kartki poza horyzontem: kłódka; w zasięgu: plakietka WOLNE — z --n (liczba miesięcy) */
.il__sz-blokada {
  --o: clamp(0, calc(var(--i) - var(--n) + 1), 1);
  opacity: 0;
  animation: sz-o 0.5s var(--ease) 1.9s forwards;
}

.il__sz-wolne {
  --o: clamp(0, calc(var(--n) - var(--i)), 1);
  opacity: 0;
  animation: sz-o 0.5s var(--ease) 1.9s forwards;
}

@keyframes sz-o {
  to {
    opacity: var(--o);
  }
}

.il__sz-tag {
  position: absolute;
  left: 50%;
  top: 318px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 2.4s forwards;
}

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


.il--kolej {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #eaf4ff 0%, #f6fbff 55%, #f6fbff 100%);
}

.il--kolej > * {
  animation: none;
}

.il__kolej {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--kolej {
  --ks: 0.82;
}

.il--kolej::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(196px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #dcefe3, #cfe8d8);
  z-index: 0;
}

.il__ko-kula {
  position: absolute;
  left: calc(50% - 135px * var(--ks));
  top: calc(129px * var(--ks));
  width: calc(22px * var(--ks));
  height: calc(22px * var(--ks));
  z-index: 2;
}

.il__ko-pociag {
  --d: calc(0.4s + var(--i) * 4.2s);
  offset-path: var(--tor);
  offset-rotate: auto;
  offset-distance: 0%;
  opacity: 0;
  animation: ko-pojaw 0.2s linear var(--d) forwards, ko-jazda 3.4s cubic-bezier(0.3, 0, 0.2, 1) var(--d) forwards;
}

.il__ko-etykieta {
  offset-rotate: 0deg;
}

@keyframes ko-jazda {
  to {
    offset-distance: 100%;
  }
}

@keyframes ko-pojaw {
  to {
    opacity: 1;
  }
}

.il__ko-iglica {
  transform-box: view-box;
  transform-origin: 300px 250px;
  animation: ko-iglica 0.4s var(--ease) 4.3s forwards;
}

@keyframes ko-iglica {
  to {
    transform: rotate(16deg);
  }
}

.il__ko-swiatlo--a {
  opacity: 0.25;
  animation: ko-sw-a 8.6s linear forwards;
}

.il__ko-swiatlo--b {
  opacity: 0.25;
  animation: ko-sw-b 8.6s linear forwards;
}

@keyframes ko-sw-a {
  0% { opacity: 0.25; }
  5% { opacity: 1; }
  48% { opacity: 1; }
  52% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@keyframes ko-sw-b {
  0% { opacity: 0.25; }
  48% { opacity: 0.25; }
  52% { opacity: 1; }
  100% { opacity: 1; }
}

.il__ko-chip {
  position: absolute;
  padding: 7px 12px;
  border-radius: 999px;
  background: #e8f7ee;
  color: var(--good);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) forwards;
}

.il__ko-chip--a {
  left: calc(50% + 190px);
  top: 46px;
  animation-delay: 3.9s;
}

.il__ko-chip--b {
  left: calc(50% + 150px);
  top: 330px;
  background: #eaf2ff;
  color: var(--blue);
  animation-delay: 8.1s;
}


.il--okienko {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--okienko > * {
  animation: none;
}

.il__okienko {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--okienko {
  --ks: 0.82;
}

.il--okienko::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(312px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__ok-kula {
  position: absolute;
  left: calc(50% - 24px * var(--ks));
  top: calc(150px * var(--ks));
  width: calc(48px * var(--ks));
  height: calc(48px * var(--ks));
  z-index: 2;
}

.il__ok-karta {
  transform-box: view-box;
  transform-origin: 360px 226px;
  opacity: 0;
  animation: ok-karta 3.4s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--i) * 1.7s);
}

@keyframes ok-karta {
  0% {
    opacity: 0;
    transform: translate(-470px, 62px);
  }
  14% {
    opacity: 1;
    transform: translate(-200px, 62px);
  }
  32% {
    transform: translate(-200px, 62px);
  }
  48% {
    transform: translate(0, 0);
  }
  62% {
    transform: translate(0, 0);
  }
  82% {
    opacity: 1;
    transform: translate(var(--kx), calc(var(--ky) + 62px)) rotate(var(--rot));
  }
  100% {
    opacity: 1;
    transform: translate(var(--kx), calc(var(--ky) + 62px)) rotate(var(--rot));
  }
}

.il__ok-ok {
  opacity: 0;
  animation: ko-pojaw 0.3s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--i) * 1.7s + 1.8s);
}

.il__ok-dymek {
  position: absolute;
  left: calc(50% + 118px);
  top: 56px;
  max-width: 190px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 2s forwards;
}

/* ---------- głosy: cztery kule (jak kropka ARKANIP), imię pod spodem, klik = duża karta z próbką ---------- */
.pytanie__widzet--pelny .glosy {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  max-width: none;
  padding: 24px 0 8px;
}

.pytanie__widzet--pelny .glosy .glos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 200px;
  min-height: 0;
  padding: 14px 10px 12px;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.pytanie__widzet--pelny .glosy .glos:hover,
.pytanie__widzet--pelny .glosy .glos--otwarty {
  transform: none;
  border: 0;
  box-shadow: none;
}

.pytanie__widzet--pelny .glosy .glos__play {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(3, 7, 18, 0.28),
    inset 0 4px 6px rgba(255, 255, 255, 0.55),
    0 22px 40px -22px rgba(29, 78, 216, 0.75);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.pytanie__widzet--pelny .glosy .glos[data-plec="k"] .glos__play {
  background: radial-gradient(circle at 32% 26%, #cfe8ff 0%, #6fb4ff 34%, #2f80ed 62%, #1d4ed8 100%);
}

.pytanie__widzet--pelny .glosy .glos:hover .glos__play {
  transform: translateY(-4px) scale(1.03);
}

.pytanie__widzet--pelny .glosy .glos[aria-pressed="true"] .glos__play {
  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 8px var(--blue),
    inset 0 -6px 12px rgba(3, 7, 18, 0.28),
    inset 0 4px 6px rgba(255, 255, 255, 0.55),
    0 22px 40px -22px rgba(29, 78, 216, 0.75);
}

.pytanie__widzet--pelny .glosy .glos__play .glos__play-ikona,
.pytanie__widzet--pelny .glosy .glos__play .glos__play-pauza {
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(3, 7, 18, 0.3));
}

.pytanie__widzet--pelny .glosy .glos__pierscien {
  display: none;
}

.pytanie__widzet--pelny .glosy .glos__fala {
  display: none;
}

.pytanie__widzet--pelny .glosy .glos__imie {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pytanie__widzet--pelny .glosy .glos__opis {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.pytanie__widzet--pelny .glosy .glos__wybor {
  min-width: 0;
  margin: 0;
  padding: 0 18px;
}

/* ---------- ekran części: spis treści działów ---------- */
.spis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 56px;
  width: 100%;
  max-width: 1120px;
  margin: 26px auto 0;
}

.spis[data-ile="1"],
.spis[data-ile="2"],
.spis[data-ile="3"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}

.spis__wiersz {
  display: grid;
  grid-template-columns: 38px 40px auto minmax(24px, 1fr) auto 26px;
  align-items: center;
  gap: 0 14px;
  width: 100%;
  padding: 12px 16px 12px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  opacity: 0;
  animation: apka-wejscie 0.45s var(--ease) forwards;
  animation-delay: calc(0.1s + var(--i) * 0.05s);
}

.spis__wiersz:hover {
  background: #ffffff;
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  transform: translateY(-2px);
}

.spis__wiersz:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.spis__numer {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.spis__ikona {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
}

.spis__ikona svg {
  width: 18px;
  height: 18px;
}

.spis__nazwa {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.spis__kropki {
  display: block;
  height: 0;
  margin: 4px 2px 0;
  border-bottom: 2px dotted #cbd5e1;
}

.spis__liczba {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.spis__status {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #d3dce9;
  color: #ffffff;
}

.spis__status svg {
  width: 13px;
  height: 13px;
}

.spis__wiersz[data-status="gotowy"] .spis__status {
  border-color: var(--blue);
  background: var(--blue);
}

.spis__wiersz[data-status="czesciowo"] .spis__status,
.spis__wiersz[data-status="wtrakcie"] .spis__status {
  border-color: var(--blue);
  background: linear-gradient(90deg, var(--blue) 50%, transparent 50%);
}

.spis__wiersz[data-status="wylaczony"] {
  opacity: 0.55;
}

@media (max-width: 1100px) {
  .spis {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
  }
}

/* ============================== wersja 5b: spis jak Ustawienia iOS · karty dwuopcyjne · chipy reguł ============================== */

/* --- spis treści części: grupy jak w Ustawieniach iOS --- */
.spis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 1080px;
  margin: 26px auto 0;
  align-items: start;
}

.spis[data-ile="1"],
.spis[data-ile="2"],
.spis[data-ile="3"],
.spis[data-ile="4"],
.spis[data-ile="5"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

.spis__grupa {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  overflow: hidden;
}

.spis__wiersz {
  position: relative;
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr) auto 22px 14px;
  align-items: center;
  gap: 0 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px 10px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: background 0.15s var(--ease);
  opacity: 0;
  animation: apka-wejscie 0.4s var(--ease) forwards;
  animation-delay: calc(0.08s + var(--i) * 0.04s);
  transform: none;
  box-shadow: none;
}

.spis__wiersz + .spis__wiersz::before {
  content: "";
  position: absolute;
  left: 60px;
  right: 0;
  top: 0;
  height: 1px;
  background: #e9edf3;
}

.spis__wiersz:hover {
  background: #f3f6fb;
  border: 0;
  box-shadow: none;
  transform: none;
}

.spis__wiersz:active {
  background: #e9eef7;
}

.spis__wiersz:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.spis__ikona {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--kolor, var(--blue));
  color: #ffffff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.spis__ikona svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.spis__numer {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.spis__nazwa {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spis__liczba {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.spis__status {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid #d3dce9;
  color: #ffffff;
}

.spis__status svg {
  width: 12px;
  height: 12px;
}

.spis__wiersz[data-status="gotowy"] .spis__status {
  border-color: var(--blue);
  background: var(--blue);
}

.spis__wiersz[data-status="czesciowo"] .spis__status {
  border-color: var(--blue);
  background: linear-gradient(90deg, var(--blue) 50%, transparent 50%);
}

.spis__chevron {
  color: #c3cbd8;
}

.spis__chevron svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.spis__wiersz[data-status="wylaczony"] {
  opacity: 0.55;
}

@media (max-width: 1100px) {
  .spis {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
}

/* --- karty dwuopcyjne (SMS auto/ręcznie, zakres opinii): dwie karty na środku --- */
.modele[data-ile="2"] {
  grid-template-columns: repeat(2, minmax(0, 460px));
  justify-content: center;
  gap: 24px;
}

.modele .aktor--pacjent2 .aktor__kolo {
  color: var(--blue);
}

/* SMS automatycznie: 0,4 s „Wizyta umówiona” nad Asystentem → impuls → „SMS wysłany” u pacjenta */
.scenka--sa .etykieta--start,
.scenka--sr .etykieta--panel {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 0.4s forwards;
}

.scenka--sa .etykieta--start {
  background: #e8f7ee;
  color: var(--good);
}

.scenka--sa .wiazka--1 .wiazka__impuls {
  animation: sa-impuls 1.2s linear 1.2s forwards;
}

.scenka--sr .wiazka--1 .wiazka__impuls {
  animation: sa-impuls 1.2s linear 1.9s forwards;
}

@keyframes sa-impuls {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.scenka--sa .etykieta--ok,
.scenka--sr .etykieta--ok {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 2.5s forwards;
}

.scenka--sr .etykieta--ok {
  animation-delay: 3.2s;
}

/* ręcznie: pigułka „Wyślij SMS” jak przycisk w panelu, kliknięcie (pierścień) w 1,5 s */
.scenka--sr .etykieta--panel {
  background: var(--blue);
  color: #ffffff;
  padding-right: 14px;
}

.scenka--sr .klik {
  position: absolute;
  right: -6px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 999px;
  border: 2.5px solid var(--blue);
  opacity: 0;
  transform: scale(0.4);
  animation: sr-klik 0.6s var(--ease) 1.5s forwards;
}

@keyframes sr-klik {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* opinie: kolumna pięciu opinii po lewej */
.opinie-mini {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.op {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  font-size: 10px;
  opacity: 0;
  animation: il-dymek 0.35s var(--ease) forwards;
  animation-delay: calc(0.2s + var(--i) * 0.12s);
}

.op b {
  display: inline-flex;
  gap: 1px;
  font-weight: 400;
  color: #d5dbe5;
  font-size: 11px;
  line-height: 1;
}

.op .op__g--pelna {
  color: #f5b301;
}

.op em {
  display: none;
  font-style: normal;
  font-weight: 800;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
}

.op em svg {
  width: 9px;
  height: 9px;
  vertical-align: -1px;
}

.op__ok {
  background: #e8f7ee;
  color: var(--good);
}

.op__rec {
  background: #f1f5f9;
  color: var(--muted);
}

.scenka--ow .op .op__ok,
.scenka--op .op[data-gwiazdki="5"] .op__ok,
.scenka--op .op[data-gwiazdki="4"] .op__ok,
.scenka--op .op[data-gwiazdki="3"] .op__rec,
.scenka--op .op[data-gwiazdki="2"] .op__rec,
.scenka--op .op[data-gwiazdki="1"] .op__rec {
  display: inline-block;
  animation: il-dymek 0.35s var(--ease) forwards;
  animation-delay: calc(1.6s + var(--i) * 0.35s);
}

.scenka--ow .wiazka--1 .wiazka__impuls,
.scenka--op .wiazka--1 .wiazka__impuls {
  animation: sa-impuls 1s linear 0.9s forwards;
}

/* --- chipy reguł (dział terminów): mniejsze, żeby mieściły się w oknie --- */
.il__regula {
  padding: 7px 11px;
  gap: 6px;
  font-size: 11.5px;
}

.il__reguly {
  gap: 8px;
}

/* karty dwuopcyjne bez litery: belka bez pustego kółka; opinie-mini nieco większe */
.modele .model__belka:empty {
  display: none;
}

.op {
  font-size: 11px;
  padding: 4px 9px 4px 7px;
}

.op b {
  font-size: 12.5px;
}

.op em {
  font-size: 10px;
}

/* karty SMS: etykieta „SMS wysłany” przy prawej krawędzi nie wychodzi poza kartę; niższe karty przy dwóch opcjach */
.scenka--sa .etykieta--ok,
.scenka--sr .etykieta--ok {
  left: auto;
  right: 0;
  transform: none;
}

.modele[data-ile="2"] .model__opis {
  min-height: 0;
}

.modele[data-ile="2"] .model__dol {
  min-height: 0;
  gap: 8px;
}

/* karty dwuopcyjne: wysokość z treści (nie rozciągają się na cały ekran) */
.pytanie--modele .modele[data-ile="2"] {
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  margin-top: 8px;
}

.modele[data-ile="2"] .model {
  height: auto;
}

/* scena pytania nie może wychodzić poza szerokość okna (powiększane kompozycje, np. baza) */
.pytanie__scena {
  overflow-x: clip;
}

/* głosy: większe kule, wszystko wyśrodkowane (stare reguły siatki dawały align-self end/start) */
.pytanie__widzet--pelny .glosy {
  gap: 64px;
  padding: 36px 0 8px;
}

.pytanie__widzet--pelny .glosy .glos {
  width: 240px;
}

.pytanie__widzet--pelny .glosy .glos__play {
  width: 172px;
  height: 172px;
  margin-bottom: 18px;
}

.pytanie__widzet--pelny .glosy .glos__play .glos__play-ikona svg,
.pytanie__widzet--pelny .glosy .glos__play .glos__play-pauza svg {
  width: 40px;
  height: 40px;
}

.pytanie__widzet--pelny .glosy .glos__imie,
.pytanie__widzet--pelny .glosy .glos__opis,
.pytanie__widzet--pelny .glosy .glos__wybor {
  align-self: center;
  justify-self: center;
  grid-column: auto;
  text-align: center;
}

.pytanie__widzet--pelny .glosy .glos__imie {
  font-size: 26px;
}

.pytanie__widzet--pelny .glosy .glos__opis {
  font-size: 15px;
  margin-bottom: 14px;
}

.pytanie__widzet--pelny .glosy .glos__wybor {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

/* ------------------------------------------ wersja 5c: klepsydry (reaktywacja) -- */

.il--klepsydry {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--klepsydry > * {
  animation: none;
}

.il--klepsydry::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(312px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__klepsydry {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--klepsydry {
  --ks: 0.82;
}

/* piasek: górna komora maleje ku przewężeniu, dolna rośnie od dna; strumień gaśnie, gdy koniec */
.il__kl-gora {
  transform-box: view-box;
  transform-origin: var(--cx) var(--ym);
  animation: kl-gora linear forwards;
}

.il__kl-dol {
  transform-box: view-box;
  transform-origin: var(--cx) var(--y1);
  transform: scaleY(0);
  animation: kl-dol linear forwards;
}

.il__kl-strumien {
  animation: kl-strumien linear forwards;
}

.il__kl--1 .il__kl-gora,
.il__kl--1 .il__kl-dol,
.il__kl--1 .il__kl-strumien {
  animation-duration: 3.4s;
  animation-delay: 0.3s;
  --koniec: 0;
}

.il__kl--2 .il__kl-gora,
.il__kl--2 .il__kl-dol,
.il__kl--2 .il__kl-strumien {
  animation-duration: 9s;
  animation-delay: 0.3s;
  --koniec: 0.5;
}

@keyframes kl-gora {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(var(--koniec));
  }
}

@keyframes kl-dol {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(calc(1 - var(--koniec)));
  }
}

@keyframes kl-strumien {
  0%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: calc(var(--koniec) * 2);
  }
}

.il__kl-sms {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 3.8s forwards;
}

/* ------------------------------------------ wersja 5d: pieczątka + iMessage · wątek dnia (SMS) -- */

/* pieczątka: karta stoi na drewnianym biurku, po prawej dymek SMS */
.il--stempel::before {
  background: linear-gradient(180deg, #d9b98a, #c9a06a);
}

.il__stm-czat {
  position: absolute;
  left: calc(50% + 150px);
  top: 150px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 2.3s forwards;
}

.il__stm-nad {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-left: 4px;
}

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

.il__stm-czat .il__dymek {
  max-width: 100%;
  animation-delay: 2.5s;
}

.il__stm-dost {
  align-self: flex-end;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  padding-right: 4px;
  opacity: 0;
  animation: cn-dymek 0.4s var(--ease) 3.2s forwards;
}

/* wątek dnia */
.il--czat-dnia {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--czat-dnia > * {
  animation: none;
}

.pytanie--scena .il--czat-dnia {
  --ks: 0.82;
}

.il__cd {
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 360px;
  margin-left: -360px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 40px;
  padding: 34px 48px 28px 56px;
  zoom: var(--ks);
}

.il__cd-os {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}

.il__cd-os::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 24px;
  bottom: 24px;
  border-left: 2px dotted #c3cfe0;
}

.il__cd-moment {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  opacity: 0.35;
  animation: cd-moment 0.4s var(--ease) forwards;
  animation-delay: calc(0.5s + var(--i) * 1.4s);
}

.il__cd-moment i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--blue);
}

.il__cd-moment b {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.il__cd-moment small {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

@keyframes cd-moment {
  to {
    opacity: 1;
  }
}

.il__cd-czat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.il__cd-czat .il__dymek {
  max-width: 340px;
  font-size: 13px;
  animation-delay: calc(0.5s + var(--i) * 1.4s);
}

.il__cd-czat .il__dymek--bot {
  align-self: flex-start;
}

.il__cd-czat .il__dymek--user {
  align-self: flex-end;
}

.il__cd-czat .il__dymek[style="--i:2"] {
  animation-delay: 2.6s;
}

.il__cd-czat .il__dymek[style="--i:3"] {
  animation-delay: 3.3s;
}

.il__cd-gw {
  color: #f5b301;
  letter-spacing: 1px;
}

/* ============================== wersja 5e: tablica wysyłek · słoik · paczka v2 · notatki w cenniku ============================== */

/* ---- tablica wysyłek (jak tablica odjazdów) ---- */
.il--tablica {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--tablica > * {
  animation: none;
}

.pytanie--scena .il--tablica {
  --ks: 0.82;
}

.il__tb {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 660px;
  margin-left: -330px;
  padding: 18px 22px 20px;
  border-radius: 20px;
  background: #0f172a;
  box-shadow: 0 30px 60px -30px rgba(3, 7, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  zoom: var(--ks);
  color: #ffffff;
}

.il__tb-naglowek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #93c5fd;
}

.il__tb-dziś {
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: none;
}

.il__tb-kol,
.il__tb-w {
  display: grid;
  grid-template-columns: 14px 330px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 0 14px;
  padding: 0 6px;
}

.il__tb-kol {
  padding-bottom: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #64748b;
}

.il__tb-w {
  height: 52px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.4;
}

.il__tb-w--aktywny {
  opacity: 1;
}

.il__tb-led {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #334155;
}

.il__tb-w--aktywny .il__tb-led {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: tb-led 0.4s linear 1.6s both;
}

@keyframes tb-led {
  from {
    background: #334155;
    box-shadow: none;
  }
}

.il__tb-kom {
  display: flex;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
}

.il__tb-kom b {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #cbd5e1;
}

.il__tb-kom--czas {
  justify-content: flex-end;
}

.il__tb-c {
  position: relative;
  display: grid;
  place-items: center;
  width: 14px;
  height: 22px;
  border-radius: 3px;
  background: #1e293b;
  font-size: 11.5px;
  font-weight: 800;
  font-style: normal;
  color: #ffffff;
  transform: rotateX(-90deg);
  animation: tb-klapka 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.045s);
}

.il__tb-c::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(15, 23, 42, 0.8);
}

.il__tb-c--puste {
  background: transparent;
}

.il__tb-c--puste::after {
  display: none;
}

.il__tb-c--szeroki {
  width: auto;
  min-width: 60px;
  padding: 0 8px;
  color: #93c5fd;
  animation-delay: 1.3s;
}

.il__tb-c--stale {
  transform: none;
  animation: none;
  color: #64748b;
}

@keyframes tb-klapka {
  to {
    transform: rotateX(0);
  }
}

/* ---- słoik na gwiazdki ---- */

.il--sloik {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--sloik > * {
  animation: none;
}

.il__sloik {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--sloik {
  --ks: 0.82;
}

.il--sloik::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(320px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__sl-gw {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sl-gw 0.8s cubic-bezier(0.3, 0.9, 0.4, 1.15) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.45s);
}

@keyframes sl-gw {
  0% {
    opacity: 0;
    transform: translateY(-250px) rotate(-40deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot));
  }
}

.il__sl-opinia {
  position: absolute;
  left: calc(50% + 30px);
  top: 84px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 0.4s forwards;
}

.il__sl-gwiazdki {
  color: #f5b301;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}

.il__sl-opinia b {
  font-size: 14px;
  line-height: 1.35;
}

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

.il__sl-odp {
  position: absolute;
  left: calc(50% + 30px);
  top: 208px;
  width: 260px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #eaf2ff;
  font-size: 12.5px;
  line-height: 1.35;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 3s forwards;
}

.il__sl-odp .il__kropka--mala {
  flex-shrink: 0;
  margin-top: 2px;
}

.il__sl-odp b {
  display: block;
  color: var(--blue);
}

/* ---- paczka v2 ---- */

.il--paczka2 {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--paczka2 > * {
  animation: none;
}

.il__paczka2 {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--paczka2 {
  --ks: 0.82;
}

.il--paczka2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(320px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e6edf6, #d7e1ee);
  z-index: 0;
}

.il__pk-chmura {
  opacity: 0;
  animation: cn-dymek 0.6s var(--ease) 0.2s forwards;
}

.il__pk-item {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pk-item 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.8s + var(--i) * 0.9s);
}

@keyframes pk-item {
  0% {
    opacity: 0;
    transform: translateY(190px) scale(0.5);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.il__pk-chip {
  position: absolute;
  left: 50%;
  top: 172px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: #e8f7ee;
  color: var(--good);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 3s forwards;
}

/* ---- synchro (pytania integracji): bez powiadomień, aktorzy bliżej środka ---- */
.il--synchro .il__rzad--szeroki {
  justify-content: center;
  gap: 110px;
}

/* ---- notatki pod tabelą usług ---- */
.tabela__notatka {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.tabela__notatka-etykieta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.tabela__notatka-pole {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: #ffffff;
  box-shadow: var(--glass-shadow);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
}

.tabela__notatka-pole:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}

.pods__notatka {
  margin: 10px 0 0;
  font-size: 13px;
}

/* podsumowanie: tabela usług bez łamania nagłówków w środku słowa */
.pods__tabela {
  width: 100%;
  min-width: 640px;
  table-layout: auto;
}

.pods__tabela th,
.pods__tabela td {
  white-space: nowrap;
  padding: 9px 12px;
}

.pods__tabela td:last-child,
.pods__tabela th:last-child {
  white-space: normal;
  min-width: 160px;
}

/* głosy: cały rząd na środku ekranu */
.pytanie__widzet--pelny .glosy {
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

/* duża karta głosu: kula jak na kaflach, lżejsza fala, spokojna typografia */
.glos-duzy {
  gap: 8px;
  padding: 40px 40px 34px;
}

.glos-duzy .glos-duzy__play {
  width: 160px;
  height: 160px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(3, 7, 18, 0.28),
    inset 0 4px 6px rgba(255, 255, 255, 0.55),
    0 24px 44px -22px rgba(29, 78, 216, 0.75);
}

.glos-duzy[data-plec="k"] .glos-duzy__play {
  background: radial-gradient(circle at 32% 26%, #cfe8ff 0%, #6fb4ff 34%, #2f80ed 62%, #1d4ed8 100%);
}

.glos-duzy .glos-duzy__play .glos__play-ikona,
.glos-duzy .glos-duzy__play .glos__play-pauza {
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(3, 7, 18, 0.3));
}

.glos-duzy .glos-duzy__play .glos__play-ikona svg,
.glos-duzy .glos-duzy__play .glos__play-pauza svg {
  width: 44px;
  height: 44px;
}

.glos-duzy__imie {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.glos-duzy__opis {
  font-size: 15px;
  color: var(--muted);
}

.glos-duzy__fala {
  height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  gap: 3px;
  border-radius: 999px;
  background: none;
}

.glos-duzy__fala i {
  width: 3px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0.85;
}

.glos-duzy__status {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.glos-duzy__wybor {
  margin-top: 14px;
  min-width: 220px;
}

.glos-duzy__zamknij {
  top: 14px;
  right: 14px;
}

/* synchro (pytania integracji): tylko lekkie powiększenie, kompozycja na środku */
.pytanie--scena .il--synchro {
  --powieksz: 1.25 !important;
}

.pytanie--scena .il--synchro .il__rzad--szeroki {
  gap: 70px;
}

.pytanie--scena .il--synchro .il__sync {
  min-width: 180px;
}

/* ============================== wersja 5f: karty z animacją dla wyborów 3-opcyjnych ============================== */

/* --- reaktywacja: Asystent + trzej pacjenci --- */
.scenka--rk {
  padding: 30px 16px 22px;
}

.scenka--rk .wiazka {
  flex: 0 0 34px;
  margin: 0 4px 22px;
}

.scenka--rk .wiazka__impuls {
  animation: sa-impuls 0.9s linear 0.6s forwards;
}

.rk-pacjenci {
  display: flex;
  gap: 6px;
}

.rk-p {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rk-p .aktor {
  width: 64px;
}

.rk-p .aktor__kolo {
  width: 44px;
  height: 44px;
  color: var(--blue);
}

.rk-p .aktor__kolo svg {
  width: 18px;
  height: 18px;
}

.rk-p .aktor__podpis {
  font-size: 10.5px;
}

.rk-chip {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eaf2ff;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.rk-sms {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) var(--d) forwards;
}

/* --- platformy opinii: Facebook — Asystent — Google --- */
.scenka--pl {
  padding: 30px 20px 22px;
}

.aktor--platforma .aktor__kolo .logo-marki,
.aktor--platforma .aktor__kolo .logo-marki svg {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.aktor--platforma .etykieta {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 2.2s forwards;
}

.aktor--platforma.aktor--cicho .aktor__kolo {
  filter: grayscale(1);
  opacity: 0.5;
}

.aktor--platforma.aktor--cicho .aktor__podpis {
  opacity: 0.6;
}

.aktor--platforma.aktor--cicho .etykieta {
  animation-delay: 0.8s;
}

/* impuls z Asystenta do Facebooka (w lewo) i do Google (w prawo) */
.scenka--pl-fb .wiazka--1 .wiazka__impuls {
  animation: pl-impuls-lewo 1s linear 0.9s forwards;
}

.scenka--pl-google .wiazka--2 .wiazka__impuls {
  animation: sa-impuls 1s linear 0.9s forwards;
}

@keyframes pl-impuls-lewo {
  0% {
    left: 100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

.scenka--pl .aktor--cicho + .wiazka,
.scenka--pl .wiazka + .aktor--cicho {
  opacity: 0.5;
}

/* --- baza pacjentów: źródło → ARKANIP --- */
.scenka--bz {
  padding: 30px 40px 22px;
}

.scenka--bz .aktor--zrodlo .aktor__kolo {
  color: var(--blue);
}

.scenka--bz .etykieta--start,
.scenka--bz .etykieta--cicho {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 0.4s forwards;
}

.scenka--bz .aktor--ai .etykieta--ok {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: il-dymek 0.4s var(--ease) 2.4s forwards;
}

.scenka--bz-wysle .wiazka__impuls,
.scenka--bz-pomoc .wiazka__impuls {
  animation: sa-impuls 1.1s linear 1.1s forwards;
}

.scenka--bz-pomoc .wiazka__impuls {
  animation: pl-impuls-lewo 1s linear 0.9s forwards, sa-impuls 1s linear 2.2s forwards;
}

.scenka--bz-pomoc .aktor--ai .etykieta--ok {
  animation-delay: 3.4s;
}

.scenka--bz-brak .wiazka {
  opacity: 0.35;
}

.scenka--bz-brak .aktor--zrodlo .aktor__kolo {
  color: var(--muted);
}

/* wątek dnia v2: rzędy moment | dymki na tej samej wysokości; kropki pisania; oś rysuje się w dół */
.il__cd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 30px 56px 26px 56px;
}

.il__cd::before {
  content: "";
  position: absolute;
  left: 73px;
  top: 64px;
  bottom: 64px;
  border-left: 2px dotted #c3cfe0;
  transform-origin: top;
  transform: scaleY(0);
  animation: cd-os 4s linear 0.6s forwards;
}

@keyframes cd-os {
  to {
    transform: scaleY(1);
  }
}

.il__cd-rzad {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 40px;
  align-items: center;
}

.il__cd-rzad .il__cd-moment {
  animation-delay: calc(0.6s + var(--i) * 1.7s);
}

.il__cd-dymki {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.il__cd-dymki .il__dymek {
  max-width: 340px;
  font-size: 13px;
  text-align: left;
  animation-delay: calc(0.9s + var(--n) * 1.25s);
}

.il__cd-dymki .il__dymek--user {
  align-self: flex-end;
  animation-delay: 3.2s;
}

.il__cd-dymki .il__dymek[style="--n:3"] {
  animation-delay: 4.3s;
}

/* kropki pisania: pojawiają się 0,6 s przed dymkiem i znikają, gdy dymek wchodzi */
.il__cd-pisze {
  display: flex;
  gap: 4px;
  height: 0;
  margin: 0;
  overflow: visible;
  opacity: 0;
  animation: cd-pisze 0.7s linear forwards;
  animation-delay: calc(0.2s + var(--n) * 1.25s);
}

.il__cd-pisze i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #94a3b8;
}

@keyframes cd-pisze {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ============================== wersja 5g: oś dnia (kiedy?) · drukarka potwierdzeń · rk-karty · poczekalnia ============================== */

.il--osdnia {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--osdnia > * {
  animation: none;
}

.pytanie--scena .il--osdnia {
  --ks: 0.82;
}

.il__od {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 640px;
  margin-left: -320px;
  padding: 22px 28px 30px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  zoom: var(--ks);
}

.il__od-naglowek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 96px;
}

.il__od-dzien {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.il__od-tor {
  position: relative;
  height: 4px;
  margin: 0 32px 70px;
  border-radius: 999px;
  background: #e2e8f0;
}

.il__od-postep {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--x);
  border-radius: 999px;
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(0);
  animation: od-postep 1.4s var(--ease) 0.5s forwards;
}

@keyframes od-postep {
  to {
    transform: scaleX(1);
  }
}

.il__od-pkt {
  position: absolute;
  left: var(--px);
  top: 50%;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
}

.il__od-pkt i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #cbd5e1;
}

.il__od-pkt--wizyta i {
  width: 16px;
  height: 16px;
  border-color: var(--blue);
}

.il__od-pkt b,
.il__od-pkt small {
  position: absolute;
  top: 18px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.il__od-pkt small {
  top: 34px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.il__od-znacznik {
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 2;
  animation: od-jazda 1.4s var(--ease) 0.5s forwards;
}

@keyframes od-jazda {
  to {
    left: var(--x);
  }
}

.il__od-dymek {
  position: absolute;
  left: var(--x);
  bottom: 22px;
  max-width: 300px;
  min-width: 200px;
  transform: translateX(-50%);
  font-size: 12.5px;
  animation-delay: 2s;
}

.il__od-dymek::before {
  display: none;
}

.il__od-dymek::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}

.il__od-tag {
  position: absolute;
  left: var(--x);
  top: 52px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaf2ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  animation: cn-dymek 0.4s var(--ease) 2s forwards;
}

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

/* --- drukarka potwierdzeń --- */
.il--drukarka {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f1f5fb);
}

.il--drukarka > * {
  animation: none;
}

.il--drukarka::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(300px * var(--ks));
  bottom: 0;
  background: linear-gradient(180deg, #e3c9a0, #d4b285);
  z-index: 0;
}

.il__drukarka {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(720px * var(--ks));
  height: calc(360px * var(--ks));
  margin-left: calc(-360px * var(--ks));
  overflow: visible;
  z-index: 1;
}

.pytanie--scena .il--drukarka {
  --ks: 0.82;
}

.il__dr-papier {
  transform: translateY(160px);
  animation: dr-papier 2s cubic-bezier(0.3, 0, 0.2, 1) 0.6s forwards;
}

@keyframes dr-papier {
  to {
    transform: translateY(0);
  }
}

.il__dr-dioda {
  animation: dr-dioda 0.3s steps(2) 0.2s 6;
}

@keyframes dr-dioda {
  50% {
    opacity: 0.2;
  }
}

.il__dr-czat {
  position: absolute;
  left: calc(50% + 120px);
  top: 96px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  zoom: var(--ks);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.5s var(--ease) 2.4s forwards;
}

.il__dr-czat .il__dymek {
  max-width: 100%;
  animation-delay: 2.6s;
}

.il__dr-czat .il__stm-dost {
  animation-delay: 3.3s;
}

/* --- reaktywacja (karty): bez podpisów pacjentów, czytelniejsze chipy --- */
.rk-p .aktor__podpis {
  display: none;
}

.rk-chip {
  font-size: 9.5px;
  padding: 3px 8px;
}

.rk-pacjenci {
  gap: 10px;
}

/* --- poczekalnia (redukcja): panel SMS lekko w prawo i w dół --- */
.il--poczekalnia .il__recepcja-panel {
  transform: translate(28px, 22px);
}

/* synchronizacja: kula ARKANIP przed napisem (tabela przesunięta na x=430) */
.il__sy-kula {
  left: calc(50% + 82px * var(--ks));
  top: calc(58px * var(--ks));
  width: calc(20px * var(--ks));
  height: calc(20px * var(--ks));
}

.il__od-tag {
  top: 62px;
}

/* ============================== wersja 5h: folder materiałów · notatki na szerokość tabeli · etykiety w kartach ============================== */

/* tabela usług: „Dodaj usługę” w lewym dolnym rogu, notatki niżej i na szerokość tabeli */
.pytanie__widzet--pelny .lista__akcje--tabela {
  width: 100%;
  max-width: 1180px;
  margin: 12px auto 0;
  justify-content: flex-start;
}

.pytanie__widzet--pelny .tabela__notatka {
  width: 100%;
  max-width: 1180px;
  margin: 26px auto 0;
}

/* karty bazy pacjentów: etykiety przy krawędziach nie wyjeżdżają poza okno */
.scenka--bz .aktor--zrodlo .etykieta--start,
.scenka--bz .aktor--zrodlo .etykieta--cicho {
  left: 0;
  transform: none;
}

.scenka--bz .aktor--ai .etykieta--ok {
  left: auto;
  right: 0;
  transform: none;
}

/* materiały v3 */
.il__pk-item {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pk-item2 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.7s + var(--i) * 0.8s);
}

@keyframes pk-item2 {
  0% {
    opacity: 1;
    transform: translateY(190px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.il__pk-kula {
  position: absolute;
  left: calc(50% - 13px * var(--ks));
  top: calc(163px * var(--ks));
  width: calc(26px * var(--ks));
  height: calc(26px * var(--ks));
  z-index: 2;
}

.il__pk-pierscien {
  animation: pk-pierscien 1.2s var(--ease) 2.4s forwards;
}

@keyframes pk-pierscien {
  to {
    stroke-dashoffset: 0;
  }
}

.il__pk-pod {
  position: absolute;
  top: calc(98px * var(--ks));
  width: calc(90px * var(--ks));
  text-align: center;
  font-size: calc(9.5px * var(--ks));
  font-weight: 700;
  color: var(--ink);
  z-index: 2;
  opacity: 0;
  animation: cn-dymek 0.4s var(--ease) forwards;
}

.il__pk-pod--1 {
  left: calc(50% - 83px * var(--ks));
  animation-delay: 1.6s;
}

.il__pk-pod--2 {
  left: calc(50% - 7px * var(--ks));
  animation-delay: 2.4s;
}

.il__pk-chip {
  top: 330px;
  animation-delay: 3.7s;
}

/* materiały: podpisy pod kartami, w dolnej części chmury */
.il__pk-pod {
  top: calc(138px * var(--ks));
}

/* ============================== wersja 5i: przepływ rozmowy (asystent głosowy) ============================== */

.il--przeplyw {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background:
    radial-gradient(420px 220px at 46% 50%, rgba(29, 78, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--przeplyw > * {
  animation: none;
}

.pytanie--scena .il--przeplyw {
  --ks: 0.82;
}

.il__pf {
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 360px;
  margin-left: -360px;
  zoom: var(--ks);
}

.il__pf-linie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.il__pf-karta {
  position: absolute;
  display: flex;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}

.il__pf-pacjent {
  left: 40px;
  top: 118px;
  width: 192px;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 14px;
}

.il__pf-naglowek {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.il__pf-dioda {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pf-dioda 0.6s steps(2) 0.2s 4;
}

@keyframes pf-dioda {
  50% {
    opacity: 0.3;
  }
}

.il__pf-fala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 34px;
}

.il__pf-fala i {
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue);
  animation: pf-fala 0.7s ease-in-out calc(var(--i) * 0.06s) 4, pf-fala 0.7s ease-in-out calc(4.8s + var(--i) * 0.06s) 4;
}

@keyframes pf-fala {
  50% {
    height: 26px;
  }
}

.il__pf-sprawa {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  opacity: 0;
}

.il__pf-sprawa--1 {
  animation: pf-sprawa 4.2s linear 0.3s forwards;
}

.il__pf-sprawa--2 {
  animation: cn-dymek 0.4s var(--ease) 4.9s forwards;
}

@keyframes pf-sprawa {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.il__pf-pacjent {
  padding-bottom: 36px;
}

.il__pf-orb {
  position: absolute;
  left: 284px;
  top: 134px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.il__pf-orb .il__kropka {
  width: 76px;
  height: 76px;
  z-index: 2;
}

.il__pf-orb b {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.il__pf-pierscien {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(29, 78, 216, 0.35);
  opacity: 0;
  transform: scale(0.9);
}

.il__pf-pierscien--a {
  animation: pf-pierscien 1.2s ease-out 1.7s 1, pf-pierscien 1.2s ease-out 6.2s 1;
}

.il__pf-pierscien--b {
  animation: pf-pierscien 1.2s ease-out 2s 1, pf-pierscien 1.2s ease-out 6.5s 1;
}

@keyframes pf-pierscien {
  0% {
    opacity: 0.9;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* impulsy po liniach: 1 i 3 = pacjent → Asystent, 2 = Asystent → kalendarz, 4 = Asystent → recepcja */
.il__pf-imp {
  opacity: 0;
  offset-rotate: 0deg;
}

.il__pf-imp--1,
.il__pf-imp--3 {
  offset-path: path("M232 180 L284 180");
  animation: pf-imp 0.8s linear forwards;
}

.il__pf-imp--1 {
  animation-delay: 0.9s;
}

.il__pf-imp--3 {
  animation-delay: 5.4s;
}

.il__pf-imp--2 {
  offset-path: path("M376 180 C 420 180 428 120 470 120");
  animation: pf-imp 1s linear 2.6s forwards;
}

.il__pf-imp--4 {
  offset-path: path("M376 180 C 420 180 428 240 470 240");
  animation: pf-imp 1s linear 7.1s forwards;
}

@keyframes pf-imp {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

.il__pf-cel {
  left: 470px;
  width: 214px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.il__pf-kal {
  top: 74px;
}

.il__pf-rec {
  top: 196px;
}

.il__pf-ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.il__pf-ikona--kal {
  grid-template-rows: 13px 1fr;
  background: #ffffff;
  border: 1px solid #d3dce9;
  overflow: hidden;
}

.il__pf-ikona--kal i {
  width: 100%;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  line-height: 13px;
  font-style: normal;
}

.il__pf-ikona--kal b {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.il__pf-ikona--rec {
  background: #eaf2ff;
  color: var(--blue);
}

.il__pf-tekst {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.il__pf-tekst > b {
  font-size: 14px;
  font-weight: 800;
}

.il__pf-tekst small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.il__pf-wpis,
.il__pf-status {
  position: absolute;
  left: 0;
  top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--good) !important;
  opacity: 0;
}

.il__pf-wpis {
  animation: cn-dymek 0.4s var(--ease) 3.5s forwards;
}

.il__pf-status {
  animation: cn-dymek 0.4s var(--ease) 8s forwards;
}

.il__pf-kal .il__pf-pusto {
  animation: pf-znika 0.3s linear 3.5s forwards;
}

.il__pf-rec .il__pf-pusto {
  animation: pf-znika 0.3s linear 8s forwards;
}

@keyframes pf-znika {
  to {
    opacity: 0;
  }
}

/* głosy: cała grupa na środku wysokości ekranu */
.pytanie--pelny:has(.glosy) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
}

.pytanie--pelny:has(.glosy) .pytanie__widzet--pelny {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
}

/* głosy: grupa nie rozciąga się na całą wysokość — stoi na środku */
.pytanie--pelny:has(.glosy) {
  min-height: calc(100vh - 190px);
}

.pytanie__widzet--pelny .glosy {
  flex: 0 0 auto;
  height: auto;
  align-items: center;
  align-self: center;
}

/* etykiety w mini-scenach: centrowanie bez transform (animacja il-dymek kończy na transform: none) */
.rk-sms,
.scenka--sa .etykieta--start,
.scenka--sr .etykieta--panel,
.aktor--platforma .etykieta {
  left: 0;
  right: 0;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

/* centrowanie etykiet i przesunięcie panelu przez właściwość translate (niezależna od animowanego transform) */
.rk-sms,
.scenka--sa .etykieta--start,
.scenka--sr .etykieta--panel,
.aktor--platforma .etykieta {
  left: 50%;
  right: auto;
  width: max-content;
  margin-left: 0;
  margin-right: 0;
  transform: none;
  translate: -50% 0;
}

.il--poczekalnia .il__recepcja-panel {
  transform: none;
  translate: 36px 28px;
}

/* ============================== wersja 5j: prośba o opinię (SMS + wizytówka Google) ============================== */

.il--opinia2 {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--opinia2 > * {
  animation: none;
}

.pytanie--scena .il--opinia2 {
  --ks: 0.82;
}

.il__op2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 360px;
  margin-left: -360px;
  display: grid;
  grid-template-columns: 280px 330px;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 24px 0;
  zoom: var(--ks);
}

.il__op2-czat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.il__op2-nad {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-left: 4px;
}

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

.il__op2-czat .il__dymek {
  font-size: 13px;
}

.il__op2-d1 {
  align-self: flex-start;
  animation-delay: 0.4s;
}

.il__op2-d2 {
  align-self: flex-end;
  padding: 8px 12px;
  animation-delay: 1.3s;
}

.il__op2-gw {
  display: inline-flex;
  gap: 3px;
  font-size: 18px;
  line-height: 1;
}

.il__op2-gw i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.35);
  animation: op2-gw 0.3s var(--ease) forwards;
  animation-delay: calc(1.8s + var(--i) * 0.22s);
}

@keyframes op2-gw {
  to {
    color: #ffd23f;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.6);
  }
}

.il__op2-dost {
  align-self: flex-end;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  padding-right: 4px;
  opacity: 0;
  animation: cn-dymek 0.4s var(--ease) 3.1s forwards;
}

.il__op2-karta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}

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

.il__op2-naglowek > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.il__op2-naglowek b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__op2-naglowek small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.il__op2-g,
.il__op2-g svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.il__op2-ocena {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

.il__op2-liczba {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 36px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 36px;
  color: var(--ink);
}

.il__op2-liczba em,
.il__op2-ile em {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
}

.il__op2-ile {
  position: relative;
  padding-left: 30px;
  font-size: 12px;
  color: var(--muted);
}

.il__op2-stara {
  animation: op2-znika 0.3s linear 3.4s forwards;
}

.il__op2-nowa {
  opacity: 0;
  transform: translateY(8px);
  animation: op2-wjazd 0.4s var(--ease) 3.5s forwards;
}

@keyframes op2-znika {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes op2-wjazd {
  to {
    opacity: 1;
    transform: none;
  }
}

.il__op2-gwiazdki {
  color: #f5b301;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}

.il__op2-gwiazdki--mala {
  font-size: 12px;
}

.il__op2-opinia {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 12.5px;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) 3.2s forwards;
}

.il__op2-opinia small {
  font-size: 10.5px;
  color: var(--muted);
}

.il__op2-odp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eaf2ff;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  animation: il-dymek 0.45s var(--ease) 4.4s forwards;
}

.il__op2-odp .il__kropka--mala {
  flex-shrink: 0;
  margin-top: 2px;
}

.il__op2-odp b {
  display: block;
  color: var(--blue);
}

/* -------------------------------------------------------------- wydruk -- */

@media print {
  @page {
    size: A4;
    margin: 16mm 14mm;
  }

  body {
    background: #fff;
    font-size: 12px;
  }

  .tlo,
  .belka,
  .plan,
  .ster,
  .pods__akcje,
  .pods__popraw,
  .pods__link {
    display: none !important;
  }

  .uklad {
    display: block;
    width: auto;
    padding: 0;
  }

  .scena {
    min-height: 0;
  }

  .ekran {
    padding: 0;
    animation: none;
  }

  .pods {
    max-width: none;
  }

  .pods__druk {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: var(--ink-muted);
  }

  .pods__dzial {
    box-shadow: none;
    break-inside: avoid;
    padding: 10px 14px 12px;
  }

  .pods__wiersz {
    grid-template-columns: 200px minmax(0, 1fr);
    padding: 5px 0;
    font-size: 11.5px;
  }

  .pods__podpis {
    max-width: 240px;
  }
}

/* ================================ wersja 5 (wrzesień 2026) ================================ */

/*
  Zmiany właściciela z jednej listy: start bez leadu i odznak, podpowiedź
  „albo Enter”, gwiazdka przy ostatnim wyrazie, mapa działów na ekranie części,
  własna lista godzin, próbka głosu na kuli, nowe sceny opinii i reaktywacji.
  Wszystko w bieli, błękicie i czerni — tokeny z theme.css.
*/

/* --- start: sam tytuł i CTA --- */
.hero--prosty .hero__akcje {
  margin-top: 34px;
}

/* --- pytanie: gwiazdka „wymagane” nie spada do nowej linii --- */
.pytanie__nowrap {
  white-space: nowrap;
}

/* --- modele 5.1: zdanie pod pytaniem w JEDNEJ linii --- */
.pytanie--modele .pytanie__opis {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .pytanie--modele .pytanie__opis {
    white-space: normal;
  }
}

/* --- głosy i kafle (kanały): nagłówek i podtytuł osadzone niżej --- */
.pytanie--pelny[data-typ="glos"] .pytanie__naglowek,
.pytanie--pelny[data-uklad="kafle"] .pytanie__naglowek {
  padding-top: clamp(24px, 7vh, 76px);
}

/* --- tydzień (godziny kliniki): nagłówek i tabela nieco niżej --- */
.pytanie--pelny[data-typ="tydzien"] .pytanie__naglowek {
  padding-top: clamp(16px, 5vh, 52px);
}

/* --- tydzień: dwa pola HH:MM z myślnikiem mieszczą się w swojej kolumnie (nie wjeżdżają na oś) --- */
.tydzien__dzien,
.tydzien__os {
  grid-template-columns: 170px 262px minmax(0, 1fr);
}

.pole--czas {
  width: 112px;
}

/* --- głosy: większe kule --- */
.glos__play {
  width: 132px;
  height: 132px;
}

.glos__play-ikona svg,
.glos__play-pauza svg {
  width: 38px;
  height: 38px;
}

/* --- głos: próbka gra NA kuli — fala zamiast ikony, pierścienie wokół --- */
.glos__fala {
  display: none;
}

.glos__kula-fala {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

.glos__kula-fala i {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.glos--gra .glos__kula-fala {
  opacity: 1;
}

/* iteracje skończone (nie infinite): zatrzymajPetle w app.js skraca tylko pętle nieskończone,
   a próbka może ruszyć chwilę po wyrenderowaniu ekranu — fala ma grać do końca mp3 */
.glos--gra .glos__kula-fala i {
  animation: glos-kula-fala 0.9s ease-in-out calc(var(--i) * -0.08s) 400;
}

@keyframes glos-kula-fala {
  0%,
  100% {
    height: 8px;
    opacity: 0.75;
  }
  50% {
    height: 40px;
    opacity: 1;
  }
}

.glos--gra .glos__play-ikona,
.glos--gra .glos__play-pauza {
  display: none;
}

.glos--gra .glos__pierscien {
  animation: il-fala-pierscien 1.8s ease-out 200;
}

.glos--gra .glos__pierscien--2 {
  animation-delay: 0.9s;
}

.glos--gra .glos__play {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 0 rgba(3, 7, 18, 0.15),
    0 0 0 8px rgba(29, 78, 216, 0.12),
    0 18px 40px -16px rgba(29, 78, 216, 0.7);
}

/* --- głosowy: karty celu w „przepływie” mieszczą podpis, nie wychodzą poza scenę --- */
.il__pf-cel {
  left: 446px;
  width: 256px;
}

/* --- integracje: nazwa programu (na żywo) i „Asystent AI” w jednej linii --- */
.il--synchro .il__aktor b {
  white-space: nowrap;
}

/* ------------------------------------------ wersja 5: ekran części — mapa działów -- */

.mapa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 30px auto 0;
}

.mapa[data-strony="1"] {
  grid-template-columns: 240px minmax(0, 400px);
  justify-content: center;
}

.mapa__kolumna {
  display: grid;
  gap: 10px;
  align-content: center;
}

.mapa__kolumna--lewa {
  justify-items: end;
}

.mapa__kolumna--prawa {
  justify-items: start;
}

/* środek: magistrala z prądem, kula ARKANIP, podpis */
.mapa__srodek {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.mapa__magistrala {
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(29, 78, 216, 0.18);
  overflow: hidden;
}

.mapa__prad {
  position: absolute;
  left: 0;
  top: -140px;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(29, 78, 216, 0.75) 55%, transparent);
  animation: mapa-prad 3.4s linear infinite;
}

@keyframes mapa-prad {
  to {
    top: 100%;
  }
}

.mapa__kula {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  animation: il-dymek 0.7s var(--ease) 0.1s both;
}

/* biała poświata pod kulą — magistrala „wchodzi” w kulę, nie przecina jej */
.mapa__kula::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 44%, rgba(255, 255, 255, 0) 72%);
}

.mapa__kula .il__kropka {
  position: relative;
  width: 132px;
  height: 132px;
  box-shadow:
    inset 0 -10px 18px rgba(3, 7, 18, 0.32),
    inset 0 6px 9px rgba(255, 255, 255, 0.6),
    0 26px 50px -20px rgba(29, 78, 216, 0.7);
}

.mapa__pierscien {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 176px;
  height: 176px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.16);
  transform: translate(-50%, -50%);
}

.mapa__pierscien--2 {
  width: 222px;
  height: 222px;
  border-color: rgba(29, 78, 216, 0.09);
}

.mapa__podpis {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  animation: il-dymek 0.6s var(--ease) 0.35s both;
}

/* kafel działu: szkło, ikona w błękitnym kwadracie, numer, nazwa, liczba pytań, status */
.mapa__kafel {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 0 12px;
  width: 100%;
  max-width: 372px;
  padding: 10px 14px 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  opacity: 0;
  animation: mapa-kafel 0.5s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.06s);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.mapa__kafel[data-strona="lewa"] {
  --dx: 14px;
}

.mapa__kafel[data-strona="prawa"] {
  --dx: -14px;
}

@keyframes mapa-kafel {
  from {
    opacity: 0;
    transform: translateX(var(--dx, 0));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mapa__kafel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-blik);
  opacity: 0.8;
  pointer-events: none;
}

.mapa__kafel > :not(.mapa__odnoga) {
  position: relative;
}

.mapa__kafel:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 78, 216, 0.25);
  box-shadow: var(--glass-shadow-lg);
}

.mapa__kafel:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.mapa__kafel[data-status="wylaczony"] > :not(.mapa__odnoga) {
  opacity: 0.5;
}

/* odnoga: od kafla do magistrali, z kropką na styku i przebiegającym impulsem */
.mapa__odnoga {
  position: absolute;
  top: 50%;
  width: 120px;
  height: 2px;
  margin-top: -1px;
  background: rgba(29, 78, 216, 0.18);
  overflow: visible;
}

.mapa__kafel[data-strona="lewa"] .mapa__odnoga {
  left: 100%;
}

.mapa__kafel[data-strona="prawa"] .mapa__odnoga {
  right: 100%;
}

.mapa__odnoga::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid rgba(29, 78, 216, 0.5);
}

.mapa__kafel[data-strona="lewa"] .mapa__odnoga::after {
  right: -4px;
}

.mapa__kafel[data-strona="prawa"] .mapa__odnoga::after {
  left: -4px;
}

.mapa__odnoga-prad {
  position: absolute;
  top: 0;
  width: 36px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(29, 78, 216, 0.8), transparent);
  opacity: 0;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(0.8s + var(--i) * 0.28s);
}

.mapa__kafel[data-strona="lewa"] .mapa__odnoga-prad {
  animation-name: mapa-odnoga-lewa;
}

.mapa__kafel[data-strona="prawa"] .mapa__odnoga-prad {
  animation-name: mapa-odnoga-prawa;
}

@keyframes mapa-odnoga-lewa {
  0% {
    left: 100%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: -36px;
    opacity: 0;
  }
}

@keyframes mapa-odnoga-prawa {
  0% {
    left: -36px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.mapa__ikona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--blue-tint);
  color: var(--blue);
}

.mapa__tresc {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.mapa__numer {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.mapa__nazwa {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapa__liczba {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.mapa__status {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--blue-line);
  color: #ffffff;
}

.mapa__status svg {
  width: 12px;
  height: 12px;
}

.mapa__kafel[data-status="gotowy"] .mapa__status {
  border-color: var(--blue);
  background: var(--blue);
}

.mapa__kafel[data-status="czesciowo"] .mapa__status,
.mapa__kafel[data-status="wtrakcie"] .mapa__status {
  border-color: var(--blue);
  background: linear-gradient(90deg, var(--blue) 50%, transparent 50%);
}

@media (max-width: 980px) {
  .mapa,
  .mapa[data-strony="1"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .mapa__srodek {
    order: -1;
    min-height: 220px;
  }

  .mapa__magistrala,
  .mapa__odnoga {
    display: none;
  }

  .mapa__kolumna {
    justify-items: stretch;
  }

  .mapa__kafel {
    max-width: none;
  }
}

/* ------------------------------------------ wersja 5: lista godzin pod polem czasu -- */

.pole--czas {
  text-align: center;
}

.pole--czas::placeholder {
  color: var(--ink-muted);
  opacity: 0.55;
}

.czas-lista {
  position: fixed;
  z-index: 90;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(14px) saturate(1.5);
  animation: czas-lista 0.18s var(--ease) both;
}

.czas-lista--nad {
  animation-name: czas-lista-nad;
}

@keyframes czas-lista {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes czas-lista-nad {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.czas-lista__kol {
  display: grid;
  gap: 3px;
  align-content: start;
  max-height: 236px;
  padding: 0 2px 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-line) transparent;
}

.czas-lista__etykieta {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 8px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: linear-gradient(180deg, #ffffff 70%, rgba(255, 255, 255, 0));
}

.czas-lista__opcja {
  min-width: 64px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.czas-lista__opcja:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.czas-lista__opcja[aria-selected="true"] {
  background: var(--blue);
  color: #ffffff;
}

/* ------------------------------------------ wersja 5: 07 opinie — odpowiedzi Asystenta -- */

.il--odpowiedzi {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background:
    radial-gradient(420px 220px at 26% 50%, rgba(29, 78, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--odpowiedzi > * {
  animation: none;
}

.pytanie--scena .il--odpowiedzi {
  --ks: 0.82;
}

.il__od {
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 360px;
  margin-left: -360px;
  zoom: var(--ks);
}

.il__od-linie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.il__od-orb {
  position: absolute;
  left: 68px;
  top: 134px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.il__od-orb .il__kropka {
  width: 76px;
  height: 76px;
  z-index: 2;
}

.il__od-orb > b {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.il__od-ocena {
  position: absolute;
  bottom: 100%;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: #ffffff;
  box-shadow: var(--glass-shadow);
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  animation: il-dymek 0.5s var(--ease) 0.3s both;
}

.il__od-ocena em {
  font-style: normal;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}

.il__od-gwiazda {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  color: #f5b301;
}

.il__od-ocena small {
  font-size: 11px;
  font-weight: 600;
}

.il__od-ocena small b {
  color: var(--ink);
}

.il__od-pierscien {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(29, 78, 216, 0.35);
  opacity: 0;
  transform: scale(0.9);
}

.il__od-pierscien--a {
  animation: pf-pierscien 1.2s ease-out 0.9s 1, pf-pierscien 1.2s ease-out 2.3s 1, pf-pierscien 1.2s ease-out 3.7s 1;
}

.il__od-pierscien--b {
  animation: pf-pierscien 1.2s ease-out 1.2s 1, pf-pierscien 1.2s ease-out 2.6s 1, pf-pierscien 1.2s ease-out 4s 1;
}

.il__od-imp {
  opacity: 0;
  offset-rotate: 0deg;
  animation: pf-imp 0.9s linear forwards;
}

.il__od-imp--1 {
  offset-path: path("M206 180 C 250 180 258 62 302 62");
  animation-delay: 0.9s;
}

.il__od-imp--2 {
  offset-path: path("M206 180 L302 180");
  animation-delay: 2.3s;
}

.il__od-imp--3 {
  offset-path: path("M206 180 C 250 180 258 298 302 298");
  animation-delay: 3.7s;
}

.il__od-karta {
  position: absolute;
  left: 302px;
  top: calc(14px + var(--i) * 112px);
  width: 384px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 13px 8px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: #ffffff;
  box-shadow: var(--glass-shadow-lg);
  opacity: 0;
  animation: od-karta 0.5s var(--ease) forwards;
  animation-delay: calc(0.2s + var(--i) * 1.4s);
}

@keyframes od-karta {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.il__od-zrodlo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.il__od-logo,
.il__od-logo svg {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.il__od-gwiazdki {
  display: flex;
  gap: 1px;
  font-size: 13px;
  line-height: 1;
}

.il__od-gw {
  font-style: normal;
  color: #d3dce9;
}

.il__od-gw--pelna {
  color: #f5b301;
}

.il__od-karta > b {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__od-odp {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 5px 8px;
  border-radius: 10px;
  background: var(--blue-tint);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ink-soft);
  opacity: 0;
  animation: cn-dymek 0.4s var(--ease) forwards;
  animation-delay: calc(1.7s + var(--i) * 1.4s);
}

.il__od-odp b {
  color: var(--blue);
}

/* ------------------------------------------ wersja 5: część 2 — zwrotnica rezerwacji -- */

.il--zwrotnica {
  --ks: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(360px * var(--ks));
  padding: 0;
  overflow: visible;
  background:
    radial-gradient(420px 220px at 50% 50%, rgba(29, 78, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #f8fbff, #eef4fc);
}

.il--zwrotnica > * {
  animation: none;
}

.pytanie--scena .il--zwrotnica {
  --ks: 0.82;
}

.il__zw {
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 360px;
  margin-left: -360px;
  zoom: var(--ks);
  text-align: left;
}

.il__zw-linie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* karty usług po lewej: nazwa, cena · czas · lekarz, decyzja AI */
.il__zw-karta {
  position: absolute;
  left: 28px;
  top: calc(30px + var(--i) * 106px);
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px 10px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: #ffffff;
  box-shadow: var(--glass-shadow-lg);
  opacity: 0;
  animation: zw-karta 0.5s var(--ease) forwards, zw-blask 1s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.15s), calc(0.6s + var(--i) * 1.8s);
}

@keyframes zw-karta {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* w chwili wysyłki impulsu karta dostaje błękitną obwódkę i już ją zachowuje */
@keyframes zw-blask {
  to {
    border-color: rgba(29, 78, 216, 0.45);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12), var(--glass-shadow-lg);
  }
}

.il__zw-karta > b {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.il__zw-karta > small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}

.il__zw-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--blue-line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.il__zw-ai--tak {
  border-color: transparent;
  background: var(--blue);
  color: #ffffff;
}

.il__zw-orb {
  position: absolute;
  left: 318px;
  top: 134px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.il__zw-orb .il__kropka {
  width: 76px;
  height: 76px;
  z-index: 2;
}

.il__zw-orb > b {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.il__zw-pierscien {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(29, 78, 216, 0.35);
  opacity: 0;
  transform: scale(0.9);
}

.il__zw-pierscien--a {
  animation: pf-pierscien 1.2s ease-out 1.4s 1, pf-pierscien 1.2s ease-out 3.2s 1, pf-pierscien 1.2s ease-out 5s 1;
}

.il__zw-pierscien--b {
  animation: pf-pierscien 1.2s ease-out 1.7s 1, pf-pierscien 1.2s ease-out 3.5s 1, pf-pierscien 1.2s ease-out 5.3s 1;
}

/* impulsy: w1–w3 karta → kula (0.6 / 2.4 / 4.2 s), k1–k2 kula → kalendarz, r1 kula → konsultacja */
.il__zw-imp {
  opacity: 0;
  offset-rotate: 0deg;
  animation: pf-imp 0.8s linear forwards;
}

.il__zw-imp--w1 {
  offset-path: path("M264 74 C 292 74 296 180 318 180");
  animation-delay: 0.6s;
}

.il__zw-imp--w2 {
  offset-path: path("M264 180 L318 180");
  animation-delay: 2.4s;
}

.il__zw-imp--w3 {
  offset-path: path("M264 286 C 292 286 296 180 318 180");
  animation-delay: 4.2s;
}

.il__zw-imp--k1,
.il__zw-imp--k2 {
  offset-path: path("M410 180 C 440 180 442 96 470 96");
}

.il__zw-imp--k1 {
  animation-delay: 1.5s;
}

.il__zw-imp--k2 {
  animation-delay: 3.3s;
}

.il__zw-imp--r1 {
  offset-path: path("M410 180 C 440 180 442 264 470 264");
  animation-delay: 5.1s;
}

/* cele po prawej: kalendarz (góra) i konsultacja (dół) */
.il__zw-cel {
  position: absolute;
  left: 470px;
  width: 232px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: #ffffff;
  box-shadow: var(--glass-shadow-lg);
}

.il__zw-kal {
  top: 44px;
}

.il__zw-kons {
  top: 214px;
}

.il__zw-ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.il__zw-ikona--kal {
  grid-template-rows: 13px 1fr;
  background: #ffffff;
  border: 1px solid #d3dce9;
  overflow: hidden;
}

.il__zw-ikona--kal i {
  width: 100%;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  line-height: 13px;
  font-style: normal;
}

.il__zw-ikona--kal b {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.il__zw-ikona--rec {
  background: #eaf2ff;
  color: var(--blue);
}

.il__zw-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.il__zw-tekst > b {
  font-size: 14px;
  font-weight: 800;
}

.il__zw-tekst small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* wpisy pojawiają się, gdy impuls dojedzie; podpis „pusto” gaśnie przy pierwszym wpisie */
.il__zw-wpis {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--good) !important;
}

.il__zw-wpis--1 {
  animation: zw-wpis 0.4s var(--ease) 2.3s forwards;
}

.il__zw-wpis--2 {
  animation: zw-wpis 0.4s var(--ease) 4.1s forwards;
}

.il__zw-wpis--3 {
  animation: zw-wpis 0.4s var(--ease) 5.9s forwards;
}

@keyframes zw-wpis {
  from {
    max-height: 0;
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    max-height: 20px;
    opacity: 1;
    transform: none;
  }
}

.il__zw-kal .il__zw-pusto {
  animation: pf-znika 0.3s linear 2.3s forwards;
}

.il__zw-kons .il__zw-pusto {
  animation: pf-znika 0.3s linear 5.9s forwards;
}

/* ------------------------------------------ wersja 5: 08 reaktywacja — panel na laptopie -- */

.il__gabinet-ekran .il__rk {
  width: 400px;
  zoom: calc(var(--ks) * 0.7);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
}

.il__rk-naglowek {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.il__rk-naglowek b {
  font-weight: 800;
  color: var(--ink);
}

.il__rk-naglowek span {
  color: var(--ink-muted);
}

.il__rk-naglowek em {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

.il__rk-wiersz {
  display: grid;
  grid-template-columns: 28px 120px minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--blue-line);
  background: #ffffff;
  opacity: 0;
  animation: il-dymek 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.25s);
}

.il__rk-awatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--blue-tint-2);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.il__rk-kto {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.il__rk-kto b {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il__rk-kto small {
  font-size: 9.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.il__rk-tor {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 34px;
}

.il__rk-linia,
.il__rk-postep {
  position: absolute;
  left: 16.6%;
  top: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-line);
}

.il__rk-linia {
  right: 16.6%;
}

.il__rk-postep {
  width: 0;
  background: var(--blue);
  animation: rk-postep 2.2s var(--ease) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.7s);
}

@keyframes rk-postep {
  to {
    width: 66.8%;
  }
}

.il__rk-krok {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.il__rk-krok i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--blue-line);
  background: #ffffff;
  color: #ffffff;
  animation: rk-krok 0.3s var(--ease) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.7s + var(--k) * 0.95s);
}

@keyframes rk-krok {
  to {
    border-color: var(--blue);
    background: var(--blue);
  }
}

.il__rk-krok i svg {
  width: 8px;
  height: 8px;
}

.il__rk-krok small {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ================================ wersja 6 (wrzesień 2026) ================================ */

/*
  Lista właściciela: nagłówki głosów i kanałów niżej (bez zdania pod pytaniem),
  dział 04 z ofertą, działy 07–09 w nowej kolejności, materiały w czterech
  scenach (kartoteka wiedzy, generator platformy z okienkiem e-mail), nowe
  „Wszystkie odpowiedzi” (siatka pól, spis działów, powrót z „Popraw”) i czysty
  wydruk dla działu technicznego. Biel, błękit, czerń — tokeny z theme.css.
*/

/* --- głosy i kanały: nagłówek osadzony niżej (bez zdania pod pytaniem) --- */
.pytanie--pelny[data-typ="glos"] .pytanie__naglowek,
.pytanie--pelny[data-typ="wielokrotny"][data-uklad="kafle"] .pytanie__naglowek {
  padding-top: clamp(36px, 10vh, 112px);
}

/* --- pasek akcji: powrót do wszystkich odpowiedzi (po „Popraw”) --- */
.wroc-pods {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(29, 78, 216, 0.25);
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.wroc-pods:hover {
  background: var(--blue);
  color: #fff;
}

/* ------------------------------------------------ generator platformy -- */

.gen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}

.gen__scena {
  height: clamp(300px, 50vh, 440px);
  display: flex;
}

.gen__scena .il-ramka {
  border: 0;
  background: none;
  box-shadow: none;
}

.gen__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 30px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
  animation: gen-panel 0.6s var(--ease) both;
}

.gen__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-blik);
  opacity: 0.8;
  pointer-events: none;
}

.gen__panel > * {
  position: relative;
}

@keyframes gen-panel {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.gen__etykieta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.gen__etykieta--ok {
  color: var(--good);
}

.gen__etykieta svg {
  width: 14px;
  height: 14px;
}

.gen__podglad {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  font-style: normal;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.gen__nazwa {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.gen__opis {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.gen__cta {
  margin-top: 10px;
}

.gen__cta svg {
  width: 18px;
  height: 18px;
}

.gen__status {
  min-height: 1.4em;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.gen__status[data-typ="ok"] {
  color: var(--good);
}

.gen__status[data-typ="blad"] {
  color: var(--bad);
}

/* pole z adresem / PIN-em i przyciskiem Kopiuj */
.gen__pole {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "etykieta etykieta"
    "wartosc kopiuj";
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(29, 78, 216, 0.12);
  background: var(--surface);
  animation: gen-pole 0.5s var(--ease) both;
}

.gen__pole + .gen__pole {
  animation-delay: 0.12s;
}

@keyframes gen-pole {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.gen__pole small {
  grid-area: etykieta;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.gen__url {
  grid-area: wartosc;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gen__pin {
  grid-area: wartosc;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.gen__kopiuj {
  grid-area: kopiuj;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  background: var(--surface);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.gen__kopiuj:hover {
  background: var(--blue-tint);
}

.gen__kopiuj--ok {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
}

.gen__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.gen__wyslano {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--good);
}

.gen__wyslano svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* --- okienko: adres e-mail do wysyłki dostępu --- */
.okno {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}

.okno__tlo {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.32);
  backdrop-filter: blur(6px);
  animation: okno-tlo 0.25s var(--ease) both;
}

@keyframes okno-tlo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.okno__karta {
  position: relative;
  width: min(480px, 100%);
  padding: 30px 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: 0 30px 80px -30px rgba(3, 7, 18, 0.45), var(--glass-shadow-lg);
  animation: okno-karta 0.35s var(--ease) both;
}

@keyframes okno-karta {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.okno__zamknij {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--blue-tint);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.okno__tytul {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.okno__opis {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

.okno__pole {
  display: block;
  margin-top: 18px;
}

.okno__pole span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.okno__input {
  width: 100%;
  margin-top: 4px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1.5px solid rgba(3, 7, 18, 0.12);
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color 0.15s var(--ease);
}

.okno__input:focus {
  border-bottom-color: var(--blue);
}

.okno__input::placeholder {
  color: rgba(82, 101, 129, 0.45);
}

.okno__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.okno__akcje .cta svg {
  width: 18px;
  height: 18px;
}

.okno__status {
  display: block;
  min-height: 1.4em;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.okno__status[data-typ="blad"] {
  color: var(--bad);
}

/* --- scena generatora: kula, orbity, satelity --- */
.il--generator {
  position: relative;
  display: block;
  padding: 0;
  overflow: visible;
}

.il--generator > * {
  animation: none;
}

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

.il__gen-orbity {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: gen-orbity 40s linear 3;
  transform-origin: 50% 50%;
}

@keyframes gen-orbity {
  to {
    transform: rotate(360deg);
  }
}

.il__gen-orb {
  position: absolute;
  left: 360px;
  top: 180px;
  width: 0;
  height: 0;
  transform: rotate(var(--a));
  animation: gen-orb 22s linear 5;
  animation-delay: calc(var(--i) * -3.6s);
}

@keyframes gen-orb {
  from {
    transform: rotate(var(--a));
  }
  to {
    transform: rotate(calc(var(--a) + 360deg));
  }
}

.il__gen-sat {
  position: absolute;
  left: -22px;
  top: -22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-lg);
  color: var(--blue);
  transform: translateX(var(--r)) rotate(calc(-1 * var(--a)));
  animation: gen-sat 22s linear 5, gen-sat-wejscie 0.6s var(--ease) both;
  animation-delay: calc(var(--i) * -3.6s), calc(0.2s + var(--i) * 0.08s);
}

@keyframes gen-sat {
  from {
    transform: translateX(var(--r)) rotate(calc(-1 * var(--a)));
  }
  to {
    transform: translateX(var(--r)) rotate(calc(-1 * var(--a) - 360deg));
  }
}

@keyframes gen-sat-wejscie {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.il__gen-kula {
  position: absolute;
  left: 312px;
  top: 132px;
  width: 96px;
  height: 96px;
  animation: gen-oddech 3.2s ease-in-out 12;
}

@keyframes gen-oddech {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.il__gen-lsnienie {
  position: absolute;
  inset: -22px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.35), rgba(29, 78, 216, 0) 68%);
  filter: blur(2px);
}

.il__gen-ptaszek {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.4);
}

.il__gen-ptaszek svg {
  width: 40px;
  height: 40px;
  stroke-width: 3;
}

.il__gen-postep {
  opacity: 0;
}

.il__gen-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.18);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
}

.il__gen-tag--url {
  left: 176px;
  top: 88px;
}

.il__gen-tag--pin {
  left: 452px;
  top: 232px;
}

/* stan: pracuje — satelity zbiegają do kuli, pierścień postępu obiega środek */
.gen--pracuje .il__gen-orb {
  animation-play-state: paused;
}

.gen--pracuje .il__gen-sat {
  animation: gen-zbieg 0.9s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes gen-zbieg {
  to {
    transform: translateX(0) rotate(calc(-1 * var(--a))) scale(0.3);
    opacity: 0;
  }
}

.gen--pracuje .il__gen-kula {
  animation: gen-puls 0.9s ease-in-out 4;
}

@keyframes gen-puls {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.gen--pracuje .il__gen-postep {
  opacity: 1;
  animation: gen-postep 2.1s var(--ease) forwards;
}

@keyframes gen-postep {
  to {
    stroke-dashoffset: 0;
  }
}

.gen--pracuje .il__gen-orbity {
  animation: gen-orbity 2.4s ease-in-out 1;
}

.gen--pracuje .gen__cta {
  opacity: 0.6;
}

/* stan: gotowe — ptaszek w kuli, tabliczki adres / PIN */
.gen--gotowe .il__gen-sat {
  opacity: 0;
  animation: none;
}

.gen--gotowe .il__gen-orb {
  animation: none;
}

.gen--gotowe .il__gen-kula {
  animation: gen-gotowe-kula 0.7s var(--ease) both;
}

@keyframes gen-gotowe-kula {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.gen--gotowe .il__gen-ptaszek {
  animation: gen-ptaszek 0.5s var(--ease) 0.35s forwards;
}

@keyframes gen-ptaszek {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gen--gotowe .il__gen-postep {
  opacity: 1;
  stroke-dashoffset: 0;
}

.gen--gotowe .il__gen-tag {
  animation: gen-tag 0.5s var(--ease) forwards, gen-tag-lot 5s ease-in-out 0.9s 6;
}

.gen--gotowe .il__gen-tag--url {
  animation-delay: 0.6s, 1.1s;
}

.gen--gotowe .il__gen-tag--pin {
  animation-delay: 0.8s, 1.3s;
}

@keyframes gen-tag {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gen-tag-lot {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

/* --- scena: kartoteka wiedzy --- */
.il--wiedza {
  position: relative;
  display: block;
  padding: 0;
  overflow: visible;
}

.il--wiedza > * {
  animation: none;
}

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

.il__wz-szafa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.il__wz-szuflada {
  animation: wz-szuflada 0.7s var(--ease) 0.2s both;
}

@keyframes wz-szuflada {
  from {
    transform: translateX(-60px);
  }
  to {
    transform: none;
  }
}

.il__wz-karta,
.il__wz-plik {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: var(--glass-shadow-lg);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  animation: wz-lot 2.6s var(--ease) forwards;
  animation-delay: calc(0.9s + var(--i) * 1.05s);
  z-index: 2;
}

.il__wz-karta i,
.il__wz-plik b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.il__wz-plik b {
  width: auto;
  padding: 0 6px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  background: var(--ink);
}

@keyframes wz-lot {
  0% {
    opacity: 0;
    transform: translate(18px, 0) scale(0.9);
  }
  14% {
    opacity: 1;
    transform: none;
  }
  50% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.45);
  }
}

.il__wz-kula {
  position: absolute;
  left: 556px;
  top: 118px;
  width: 92px;
  height: 92px;
  animation: gen-oddech 3s ease-in-out 8;
}

.il__wz-pierscien {
  position: absolute;
  inset: -16px;
  border-radius: 999px;
  border: 1.5px solid rgba(29, 78, 216, 0.22);
}

.il__wz-pierscien--2 {
  inset: -34px;
  border-color: rgba(29, 78, 216, 0.12);
}

.il__wz-kula-podpis {
  position: absolute;
  left: 556px;
  top: 250px;
  width: 92px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1e40af;
  opacity: 0.7;
}

.il__wz-chip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transform: translate(-50%, 10px);
  opacity: 0;
  animation: wz-chip 0.5s var(--ease) 7.6s forwards;
  z-index: 3;
}

.il__wz-chip svg {
  width: 14px;
  height: 14px;
}

@keyframes wz-chip {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ------------------------------------------- wszystkie odpowiedzi (v6) -- */

.pods--v6 {
  max-width: 1180px;
}

.pods__glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 6px;
}

.pods__glowa-tekst {
  min-width: 0;
}

.pods--v6 .pods__tytul {
  font-size: clamp(30px, 3.6vw, 44px);
}

.pods__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
}

.pods__meta span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--blue-line);
}

.pods__meta .pods__druk {
  display: none;
}

/* kółko postępu */
.pods__kolo {
  --p: 0;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--blue-tint) 0);
}

.pods__kolo::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--surface);
}

.pods__kolo b,
.pods__kolo small {
  position: relative;
  line-height: 1;
}

.pods__kolo b {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.pods__kolo small {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pods--v6 .pods__akcje .cta svg {
  width: 17px;
  height: 17px;
}

.pods__licznik {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
}

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

/* stan: komplet / braki */
.pods__stan {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
}

.pods__stan--komplet {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: var(--good);
  font-weight: 650;
}

.pods__stan--braki {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.pods__stan--braki > span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  vertical-align: middle;
}

.pods__stan--braki .pods__link {
  padding: 2px 10px;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
}

.pods__stan--braki .pods__link:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* spis działów */
.pods__spis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.pods__spis-el {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.pods__spis-el:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pods__spis-el i {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
}

.pods__spis-el[data-status="gotowy"] i {
  background: var(--blue);
  color: #fff;
}

.pods__spis-el[data-status="pusty"] {
  color: var(--ink-muted);
}

/* karta działu */
.pods--v6 .pods__dzial {
  display: block;
  padding: 22px 26px 24px;
  scroll-margin-top: 150px;
}

.pods--v6 .pods__dzial + .pods__dzial {
  margin-top: 16px;
}

.pods__dzial-glowa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(3, 7, 18, 0.06);
}

.pods--v6 .pods__dzial-numer {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.pods__dzial-tekst {
  min-width: 0;
}

.pods--v6 .pods__dzial-tytul {
  font-size: 21px;
  letter-spacing: -0.02em;
}

.pods__dzial-info {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pods__dzial-status {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--good);
}

.pods__dzial-status:empty {
  display: none;
}

.pods__dzial-status svg {
  width: 16px;
  height: 16px;
}

.pods__grupa {
  margin-top: 16px;
}

.pods__grupa-tytul {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

/* siatka pól */
.pods__siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pods__pole {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(29, 78, 216, 0.08);
  background: rgba(234, 242, 255, 0.45);
}

.pods__pole--szerokie {
  grid-column: 1 / -1;
}

.pods__pole--brak {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.3);
}

.pods__pole--puste .pods__etykieta,
.pods__pole--puste .pods__wartosc {
  opacity: 0.7;
}

.pods__pole--wrocono {
  animation: pods-wrocono 2.6s var(--ease) both;
}

@keyframes pods-wrocono {
  0% {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.5);
    background: var(--blue-tint);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(29, 78, 216, 0);
    background: rgba(234, 242, 255, 0.45);
  }
}

.pods__etykieta {
  padding-right: 78px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.pods__gwiazdka {
  margin-left: 2px;
  color: var(--blue);
  font-style: normal;
}

.pods__wartosc {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.pods--v6 .pods__popraw {
  position: absolute;
  top: 9px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.18);
  background: var(--surface);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}

.pods--v6 .pods__popraw svg {
  width: 13px;
  height: 13px;
}

.pods__pole:hover .pods__popraw,
.pods__pole:focus-within .pods__popraw,
.pods__pole--brak .pods__popraw {
  opacity: 1;
}

.pods--v6 .pods__popraw:hover {
  background: var(--blue);
  color: #fff;
}

@media (hover: none) {
  .pods--v6 .pods__popraw {
    opacity: 1;
  }
}

.pods--v6 .pods__brak {
  color: var(--bad);
  font-weight: 700;
}

.pods--v6 .pods__pusto {
  color: var(--ink-muted);
  font-weight: 500;
}

/* wartości: tydzień jako 7 kafelków, wpisy list jako karty, tabela na biało */
.pods--v6 .pods__tydzien {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.pods--v6 .pods__tydzien li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(29, 78, 216, 0.1);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 650;
}

.pods--v6 .pods__tydzien li b {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pods--v6 .pods__tydzien-wolne {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-muted);
}

.pods--v6 .pods__pozycje {
  list-style: none;
  padding: 0;
  gap: 8px;
}

.pods--v6 .pods__pozycje li {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(29, 78, 216, 0.1);
  background: var(--surface);
}

.pods--v6 .pods__podpole {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
}

.pods--v6 .pods__podpole + .pods__podpole {
  margin-top: 6px;
}

.pods--v6 .pods__przewijanie {
  border-radius: 12px;
  border: 1px solid rgba(29, 78, 216, 0.1);
  background: var(--surface);
}

.pods--v6 .pods__tabela {
  min-width: 0;
  font-size: 13.5px;
}

.pods--v6 .pods__tabela th,
.pods--v6 .pods__tabela td {
  white-space: normal;
  padding: 8px 12px;
}

.pods--v6 .pods__tabela th:last-child,
.pods--v6 .pods__tabela td:last-child {
  min-width: 0;
}

.pods--v6 .pods__notatka {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
}

.pods--v6 .pods__opcja {
  margin: 2px 4px 2px 0;
}

.pods__gen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.pods__gen-url {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--blue);
  overflow-wrap: anywhere;
}

.pods__gen-pin {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue-tint);
  font-size: 13px;
}

.pods__gen-pin b {
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.pods__gen-podglad {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.pods__gen-wyslano {
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--good);
}

.pods__stopka .pods__akcje {
  position: static;
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .gen {
    grid-template-columns: minmax(0, 1fr);
  }

  .gen__scena {
    height: clamp(240px, 36vh, 340px);
  }

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

@media (max-width: 760px) {
  .pods__glowa {
    flex-direction: column;
    align-items: flex-start;
  }

  .pods__siatka {
    grid-template-columns: minmax(0, 1fr);
  }

  .pods--v6 .pods__tydzien {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pods--v6 .pods__popraw {
    opacity: 1;
  }

  .wroc-pods span {
    display: none;
  }
}

/* --------------------------------------------- wydruk (PDF) — wersja 6 -- */

/*
  Z PDF-u pracuje dział techniczny: biało, bez szkła i cieni, karty działów
  jedna pod drugą, pola w trzech kolumnach, tabela na całą szerokość. Nic się
  nie chowa pod przyklejonym paskiem, przyciski i spis nie drukują się.
*/
@media print {
  @page {
    size: A4;
    margin: 13mm 12mm 14mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000;
    font-size: 11px;
  }

  .tlo,
  .belka,
  .plan,
  .ster,
  .znacznik,
  .pytanie__akcje,
  .pods__akcje,
  .pods__popraw,
  .pods__spis,
  .pods__kolo,
  .pods__stopka,
  .okno,
  .wroc-pods {
    display: none !important;
  }

  .uklad {
    display: block;
    width: auto;
    padding: 0;
  }

  .scena {
    min-height: 0;
  }

  .ekran {
    padding: 0;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .pods,
  .pods--v6 {
    max-width: none;
  }

  .pods__glowa {
    display: block;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }

  .pods--v6 .pods__tytul {
    margin-top: 4px;
    font-size: 24px;
  }

  .pods__meta {
    margin-top: 4px;
    font-size: 10px;
    color: #444;
  }

  .pods__meta .pods__druk {
    display: inline;
  }

  .pods__stan {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1.5;
    break-inside: avoid;
  }

  .pods__stan--braki .pods__link {
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10px;
  }

  .pods__czesc {
    margin-top: 14px;
  }

  .pods__czesc-tytul {
    padding-bottom: 6px;
    font-size: 10px;
    color: #000;
  }

  .pods--v6 .pods__dzial {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    break-inside: auto;
  }

  .pods--v6 .pods__dzial::before {
    display: none;
  }

  .pods__dzial-glowa {
    gap: 10px;
    padding: 8px 0 6px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #cbd5e1;
    break-after: avoid;
    break-inside: avoid;
  }

  .pods--v6 .pods__dzial-numer {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
    background: #000;
    color: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pods--v6 .pods__dzial-tytul {
    font-size: 15px;
  }

  .pods__dzial-info {
    font-size: 10px;
    color: #444;
  }

  .pods__dzial-status {
    background: none;
    color: #16a34a;
  }

  .pods__grupa {
    margin-top: 8px;
    break-inside: avoid;
  }

  .pods__grupa-tytul {
    margin-bottom: 4px;
    font-size: 9px;
    color: #000;
    break-after: avoid;
  }

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

  .pods__pole {
    padding: 4px 0 5px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: none;
    break-inside: avoid;
  }

  .pods__pole--brak {
    background: none;
  }

  .pods__pole--puste .pods__etykieta,
  .pods__pole--puste .pods__wartosc {
    opacity: 1;
    color: #666;
  }

  .pods__etykieta {
    padding-right: 0;
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
  }

  .pods__gwiazdka {
    color: #000;
  }

  .pods__wartosc {
    font-size: 11px;
    line-height: 1.4;
    color: #000;
  }

  .pods--v6 .pods__brak {
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
  }

  .pods__taknie,
  .pods__opcja,
  .pods__gen-pin,
  .pods__gen-podglad {
    padding: 0 6px;
    border: 1px solid #94a3b8;
    background: none;
    color: #000;
    font-size: 10px;
  }

  .pods__taknie[data-wartosc="tak"] {
    border-color: #000;
    font-weight: 800;
  }

  .pods--v6 .pods__tydzien {
    gap: 4px;
  }

  .pods--v6 .pods__tydzien li {
    padding: 3px 5px;
    border-color: #cbd5e1;
    border-radius: 4px;
    font-size: 10px;
  }

  .pods--v6 .pods__tydzien li b {
    font-size: 8px;
    color: #555;
  }

  .pods--v6 .pods__pozycje li {
    padding: 5px 8px;
    border-color: #cbd5e1;
    border-radius: 4px;
    break-inside: avoid;
  }

  .pods--v6 .pods__podpole {
    grid-template-columns: 120px minmax(0, 1fr);
    font-size: 10.5px;
  }

  .pods--v6 .pods__przewijanie {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .pods--v6 .pods__tabela {
    font-size: 10px;
  }

  .pods--v6 .pods__tabela th,
  .pods--v6 .pods__tabela td {
    padding: 4px 6px;
    border-bottom: 1px solid #cbd5e1;
  }

  .pods--v6 .pods__tabela th {
    background: none;
    color: #000;
    border-bottom: 1px solid #000;
    font-size: 8.5px;
  }

  .pods--v6 .pods__tabela tr {
    break-inside: avoid;
  }

  .pods--v6 .pods__notatka {
    font-size: 10.5px;
  }

  .pods__gen-url {
    font-size: 10.5px;
    color: #000;
  }

  .pods__podpis {
    max-width: 200px;
    border-color: #cbd5e1;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

/* generator: informacja, gdy brak tokenu Workspace (przycisk nieaktywny) */
.gen__cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.gen__uwaga {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* komunikat z Workspace pod belką (kontekst wdrożenia / odmowa tokenu) */
.komunikat {
  position: fixed;
  top: 78px;
  left: 50%;
  z-index: 40;
  max-width: min(760px, calc(100% - 40px));
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  transform: translateX(-50%);
  animation: okno-karta 0.35s var(--ease) both;
}

.komunikat[data-typ="ok"] {
  color: var(--good);
  border-color: rgba(22, 163, 74, 0.3);
}

.komunikat[data-typ="blad"] {
  color: var(--bad);
  border-color: rgba(220, 38, 38, 0.3);
}

@media print {
  .komunikat {
    display: none !important;
  }
}