/* Strona „Jak to działa?" — trzy kroki i pytania. */
.cd-jak,
.cd-jak * { box-sizing:border-box; }
.cd-jak {
	--cd-jak-karta:#12071F;
	--cd-jak-ramka:#3A2560;
	--cd-jak-szary:#A594BE;
	width:100%; max-width:1180px; margin:0 auto;
	font-family:Barlow,"Helvetica Neue",Arial,sans-serif; color:#FFFFFF;
}
.cd-jak-hero { max-width:820px; margin-bottom:28px; }
.cd-jak-nad { display:block; margin-bottom:10px; font:600 11px/1 Oswald,Impact,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#FFFF00; }
.cd-jak-hero h2 { margin:0 0 12px; font:700 46px/1.04 Oswald,Impact,sans-serif; letter-spacing:.01em; text-transform:uppercase; }
.cd-jak-hero p { margin:0; font-size:16px; line-height:1.7; color:#C9BCD9; }
.cd-jak-cta { margin:16px 0 0; }
.cd-jak-cta a {
	display:inline-block; background:#FFFF00; color:#000000; text-decoration:none;
	padding:13px 20px; border-radius:999px;
	font:600 13px/1 Oswald,Impact,sans-serif; letter-spacing:.06em; text-transform:uppercase;
}

.cd-jak-kroki {
	list-style:none; margin:0 0 34px; padding:0;
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.cd-jak-krok {
	position:relative; overflow:clip;
	background:var(--cd-jak-karta); border:1px solid var(--cd-jak-ramka);
	border-radius:16px; padding:22px;
}
.cd-jak-nr {
	position:absolute; right:14px; top:2px;
	font:700 78px/1 Oswald,Impact,sans-serif; color:rgba(149,88,224,.14);
}
.cd-jak-krok h3 { position:relative; margin:0 0 8px; font:600 23px/1.2 Oswald,Impact,sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.cd-jak-krok p { position:relative; margin:0; font-size:14px; line-height:1.65; color:var(--cd-jak-szary); }

.cd-jak-pytania { display:flex; flex-direction:column; gap:9px; max-width:900px; }
.cd-jak-faq {
	background:var(--cd-jak-karta); border:1px solid var(--cd-jak-ramka);
	border-radius:12px; overflow:clip;
}
.cd-jak-faq summary {
	list-style:none; cursor:pointer; padding:15px 18px;
	font-size:14.5px; font-weight:600;
}
.cd-jak-faq summary::-webkit-details-marker { display:none; }
.cd-jak-faq summary::after { content:"+"; float:right; color:#D8A0FF; font:400 19px/1 Oswald,Impact,sans-serif; }
.cd-jak-faq[open] summary::after { content:"–"; }
.cd-jak-faq > div { padding:0 18px 16px; font-size:13.5px; line-height:1.7; color:var(--cd-jak-szary); }

@media (max-width:900px) {
	.cd-jak-kroki { grid-template-columns:1fr; }
	.cd-jak-hero h2 { font-size:34px; }
}