/* ==========================================================================
   Shared: "Four steps" blue process section (template-parts/sections/four-steps.php)
   Figma: Home "Section - FourStepProcess" 519:32030 / tablet 519:36790 / mobile 519:41189
   ========================================================================== */
.four-steps {
	position: relative;
	overflow: hidden;
	padding: 80px 0 81px;
	border-bottom: 1px solid rgba(49, 43, 182, .12);
}
.four-steps__squares {
	position: absolute; top: -3.5px; right: -4px;
	width: 255px; height: 257px; object-fit: cover;
	opacity: .1; pointer-events: none;
}
.four-steps .container { position: relative; display: flex; flex-direction: column; gap: 64px; }

/* Head */
.four-steps__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1052px; }
.four-steps__heading { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.four-steps .four-steps__eyebrow { color: rgba(255, 255, 255, .7); }
.four-steps__title { font-size: 48px; line-height: 48px; letter-spacing: -1.2px; color: #fff; }
.four-steps__badge {
	display: inline-flex; align-items: center; gap: 8px; flex: none;
	padding: 10px 15px 9px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1000px;
	font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}
.four-steps__badge-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c-orange); }

/* Timeline */
.four-steps__list { position: relative; display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.four-steps__list::before {
	content: ""; position: absolute; top: 20px; left: 32px; right: 32px; height: 0;
	border-top: 1px dashed rgba(255, 255, 255, .15);
}
.four-steps__step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.four-steps__num {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 2px;
	background: #fff; color: var(--c-blue);
	font-weight: 500; font-size: 14px; line-height: 20px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
	transition: transform .3s var(--ease-out), background-color .3s, color .3s;
}
.four-steps__num.is-first { background: var(--c-orange); color: #fff; }
.four-steps__step:hover .four-steps__num { transform: translateY(-2px); }
.four-steps__step-title { padding-top: 16px; font-weight: 400; font-size: 18px; line-height: 28px; color: #fff; }
.four-steps__step-text { max-width: 282px; font-family: var(--ff-text); font-weight: 300; font-size: 14px; line-height: 19.5px; color: var(--c-on-dark); }

/* Bottom strip */
.four-steps__strip {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding-top: 33px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.four-steps__strip-text { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -.35px; color: var(--c-on-dark); }
.four-steps__strip-text strong, .four-steps__strip-text b { font-weight: 500; color: #fff; }
.four-steps__btns { gap: 15px; flex: none; }
.four-steps__btns .btn { min-height: 48px; padding-block: 13px; }
.four-steps__btns .tk-btn-wa { padding-inline: 28px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
	.four-steps { padding: 64px 0 65px; }
	.four-steps__squares { width: 163px; height: 164px; top: -3px; right: -3px; }
	.four-steps .container { gap: 48px; }
	.four-steps__title { font-size: 38px; line-height: 38px; }
	.four-steps__list { gap: 24px; }
	.four-steps__step-text { max-width: none; font-weight: 400; }
	.four-steps__strip { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.four-steps { padding: 48px 0 49px; }
	.four-steps__squares { width: 77px; height: 78px; top: -2px; right: -2px; }
	.four-steps .container { gap: 35px; }
	.four-steps__head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.four-steps__title { font-size: 30px; line-height: 30px; letter-spacing: -1.2px; }
	.four-steps__badge { font-size: 11px; padding: 10px 14px; gap: 10px; }
	.four-steps__list { flex-direction: column; gap: 22px; }
	.four-steps__step-text { max-width: 282px; }
	.four-steps__strip { gap: 20px; padding-top: 25px; }
	.four-steps__btns { flex-direction: column; gap: 16px; width: 100%; }
	.four-steps__btns .btn { width: 100%; padding-inline: 20px; }
}