/* ═════════════ ZMIENNE  ═════════════ */
:root{
  --gz-blue:   #2457ff;
  --gz-blue-10:#e8f0ff;
  --gz-yellow: #fff347;
  --gz-pink:   #c8005b;
}

/* ═════════════ KARTA ════════════════ */
.krok{
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:32px;
  max-width:720px;
  margin:40px 0;                 /* wyrównanie do lewej */
  box-shadow:0 10px 40px rgba(0,0,0,.06);
  overflow:visible;               /* avatar może wychodzić */
  transition:.3s all;
}

/* ── AVATAR ───────────────────────── */
.krok__avatar{
  position:absolute;
  z-index:2;
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.krok__avatar svg{width:28px; height:28px;}

/* ── TEKSTY (bez Hx) ──────────────── */
.krok__title      {margin:0 0 12px 80px; font:700 28px/1.25 "Figtree",sans-serif; color:#0a0a23;}
.krok__description{margin:0 0 24px 80px; font:400 18px/1.45 "Figtree",sans-serif; color:#333;}

.krok--question .krok__title      {font-size:20px; margin-left:64px; margin-bottom:16px;}
.krok--question .krok__description{font-size:16px; margin-left:64px; margin-bottom:16px;}

/* ── PRZYCISKI OGÓLNE ─────────────── */
.btn{
  display:inline-flex; align-items:center; gap:24px;
  font:600 16px "Figtree",sans-serif;
  border:none; cursor:pointer; transition:.2s;
  border-radius:9999px;
}

/* ── Rozpocznij (welcome) ─────────── */
.btn--start{
  margin-left:80px;
  background:var(--gz-yellow); color:#000;
  padding:8px 16px;
}

.btn--start:hover{
  background:var(--gz-yellow); color:#000;
}


.btn--start .btn__icon{
  width:40px; height:40px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.btn--start:hover .btn__icon{transform:translateX(6px);}
.btn__arrow{font-size:18px; line-height:1;}

/* ── Dalej (inne kroki) ───────────── */
.btn--next{
  margin-left:64px;
  background:#fff; border:2px solid var(--gz-blue); color:var(--gz-blue);
  padding:14px 32px;
}
.btn--next:hover{background:var(--gz-blue-10);}
.btn--next .btn__icon{
  width:32px; height:32px; border-radius:50%;
  background:var(--gz-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ── Pigułki opcji (question) ─────── */
.krok .opcje{
  display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 0 64px;
}
.krok .opcje button{
  padding:12px 20px;
  font:500 15px "Figtree",sans-serif;
  background:#fff; color:#4d4d4d;
  border:1px solid #e5e5e5; border-radius:24px;
  cursor:pointer; transition:.2s;
}
.krok .opcje button:hover{background:#f5f5f5;}

/* ═══════════ WEDŁUG TYPOW ═══════════ */

/* — WELCOME — */
.krok--welcome{
  background:var(--gz-blue); color:#fff; overflow:hidden;
}
.krok--welcome .krok__avatar{
  top:24px; left:24px; background:#fff; color:var(--gz-blue);
}
.krok--welcome .krok__title,
.krok--welcome .krok__description{color:#fff;}
.krok--welcome::after{
  content:""; position:absolute; inset:0;
  background:url('https://www.gazelka.pl/wp-content/uploads/2024/07/logo-white-2.svg') no-repeat right bottom/70%;
  opacity:.15; pointer-events:none;
}

/* — QUESTION — */
.krok--question .krok__avatar{
  top:-32px; left:24px;           /* wychodzi poza kartę */
  background:var(--gz-blue); color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* — INFO (bez zmian) — */
.krok--info{background:#fef9f6;}