/* Wersja robocza: „Jak wygląda współpraca” na stronie głównej – wariant 16 z labu new2-kroki-zloto (Adrian 2026-10-27:
   „bierzemy 16”). Świeci tylko bieżący krok: pełna złota karta (gradient przycisku) ze złotą obwódką i poświatą,
   pozostałe karty szklane na granacie; kroki przewinięte wracają do szkła, oś z lewej bez zmian. Klasa kz16 dopisywana
   przez sandbox_kroki.py. Kolory wyłącznie tokenami strony. */
:root {
  --kz-gold: var(--orange-2);
  --kz-tlo: color-mix(in srgb, var(--orange-2) 18%, var(--white));
  --kz-ramka: color-mix(in srgb, var(--orange-2) 85%, var(--line-light));
  --kz-pierscien: color-mix(in srgb, var(--orange-2) 26%, transparent);
  --kz-blask: color-mix(in srgb, var(--orange-2) 55%, transparent);
  --kz-blask-mocny: color-mix(in srgb, var(--orange-2) 70%, transparent);
}

.kz16 .kroki__krok, .kz16 .kroki__krok:nth-child(n) { --k-tlo: var(--kz-tlo); --k-ramka: var(--kz-ramka);
  --k-pierscien: var(--kz-pierscien); --k-blask: var(--kz-blask); }
.kz16 .kroki__karta::before { background: var(--grad-btn); }
.kz16 .kroki__karta::after { border: 1.5px solid var(--kz-gold); box-shadow: 0 0 0 1px var(--kz-gold), 0 0 36px -2px var(--kz-blask-mocny); }
.kz16 .is-lit .kroki__p { color: var(--navy-900); }
.kz16.is-scroll .kroki__krok:not(.is-lit) .kroki__karta { background: var(--glass); border-color: var(--glass-line); box-shadow: none; }
.kz16.is-scroll .kroki__krok:not(.is-lit) .kroki__h { color: var(--on-dark); }
.kz16.is-scroll .kroki__krok:not(.is-lit) .kroki__p { color: var(--on-dark-2); }

@media screen and (prefers-reduced-motion: no-preference) {
  .kz16.kroki.is-scroll .is-done .kroki__karta::before, .kz16.kroki.is-scroll .is-done .kroki__karta::after { opacity: 0; }
  .kz16 .kroki__karta { transition: background-color .18s ease-out, border-color .18s ease-out; }
}