/* Wyprane3City — strona główna, sekcja „Jak pracujemy": trzy kroki (.miniSteps) — 16.09.2026.
   Szef: „za blisko siebie, nieczytelne, ikony trzeba dodać, jakiś glow po najechaniu".
   Karty stykały się (grid bez gap), tytuł miał 10 px, opis 9 px, numer przyklejony do krawędzi.
   Ikony dochodzą CSS-em (maska SVG na ::before) — treść kroków w bazie nietknięta.
   ciemny.css kładzie na te karty tło/obwódkę/cień z !important, stąd !important przy hover. */

.darkFeature .miniSteps{gap:14px;margin:30px 0 34px}
.darkFeature .miniSteps article{
  grid-template-columns:auto 50px 1fr; align-items:center; column-gap:16px;
  padding:20px 24px 20px 20px; border-radius:18px;
  transition:transform .3s cubic-bezier(.22,.8,.18,1), border-color .3s, box-shadow .3s;
}
.darkFeature .miniSteps article:last-child{border-bottom-width:1px}
.darkFeature .miniSteps article>span{
  grid-column:1; grid-row:1; min-width:34px;
  font:900 32px/1 'Barlow Condensed',sans-serif; color:#29d3ff;
  text-shadow:0 0 18px rgb(41 211 255/.35);
}
.darkFeature .miniSteps article>div{grid-column:3; grid-row:1; min-width:0}
.darkFeature .miniSteps strong{display:block;font-size:18px;line-height:1.25;font-weight:800;color:#f2f8fc}
.darkFeature .miniSteps p{margin:6px 0 0;font-size:15px;line-height:1.55;color:#b4c6d6}

/* ikona w kółku */
.darkFeature .miniSteps article::before{
  content:""; grid-column:2; grid-row:1; width:50px; height:50px; border-radius:50%;
  background:
    radial-gradient(circle,rgb(41 211 255/.16),rgb(10 86 200/.10));
  box-shadow:inset 0 0 0 1px rgb(41 211 255/.35);
  transition:box-shadow .3s, background .3s;
}
.darkFeature .miniSteps article::after{
  content:""; grid-column:2; grid-row:1; justify-self:center; align-self:center;
  width:24px; height:24px; background:#29d3ff;
  -webkit-mask:var(--krok-ikona) center/contain no-repeat; mask:var(--krok-ikona) center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgb(41 211 255/.5));
  transition:transform .3s cubic-bezier(.22,.8,.18,1), background .3s, opacity .4s;
}
/* 1 — roztwór wnika (krople) · 2 — natrysk i odsysanie (spryskiwacz) · 3 — płukanie i suszenie (wiatr) */
.darkFeature .miniSteps article:nth-child(1){--krok-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z'/%3E%3Cpath d='M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97'/%3E%3C/svg%3E")}
.darkFeature .miniSteps article:nth-child(2){--krok-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h.01M7 5h.01M11 7h.01M3 7h.01M7 9h.01M3 11h.01'/%3E%3Crect width='4' height='4' x='15' y='5'/%3E%3Cpath d='m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2'/%3E%3Cpath d='m13 14 8-2M13 19l8-2'/%3E%3C/svg%3E")}
.darkFeature .miniSteps article:nth-child(3){--krok-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 19.6A2 2 0 1 0 14 16H2'/%3E%3Cpath d='M17.5 8a2.5 2.5 0 1 1 2 4H2'/%3E%3Cpath d='M9.8 4.4A2 2 0 1 1 11 8H2'/%3E%3C/svg%3E")}

/* glow po najechaniu */
.darkFeature .miniSteps article:hover{
  transform:translateY(-3px);
  border-color:rgb(41 211 255/.55) !important;
  box-shadow:0 18px 50px rgb(0 0 0/.45), 0 0 0 1px rgb(41 211 255/.25), 0 0 34px rgb(41 211 255/.28), inset 0 1px 0 rgb(255 255 255/.12) !important;
}
.darkFeature .miniSteps article:hover::before{
  background:radial-gradient(circle,rgb(41 211 255/.30),rgb(10 86 200/.18));
  box-shadow:inset 0 0 0 1px rgb(41 211 255/.7), 0 0 22px rgb(41 211 255/.45);
}
.darkFeature .miniSteps article:hover::after{transform:scale(1.12);background:#8fecff}

@media (max-width:560px){
  .darkFeature .miniSteps article{grid-template-columns:auto 42px 1fr;column-gap:12px;padding:16px 16px 16px 14px}
  .darkFeature .miniSteps article::before{width:42px;height:42px}
  .darkFeature .miniSteps article::after{width:20px;height:20px}
  .darkFeature .miniSteps article>span{font-size:26px;min-width:28px}
  .darkFeature .miniSteps strong{font-size:16.5px}
  .darkFeature .miniSteps p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.darkFeature .miniSteps article,.darkFeature .miniSteps article::after{transition:none}.darkFeature .miniSteps article:hover{transform:none}}