/* ==========================================================================
   Why choose us
   The "Why choose us" split section. HTML: template-parts/shared/why-choose-us.php
   ========================================================================== */

.why { overflow-x: clip; }
.why__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.why__intro .section-head { margin-bottom: 30px; }
.why__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.why__proof { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .92rem; }
.why__proof strong { color: #fff; }
.why__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
/* Glowing cross dividers instead of boxes */
.why__list::before, .why__list::after { content: ""; position: absolute; pointer-events: none; }
.why__list::before { left: 50%; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(transparent, rgba(167, 139, 250, .55), rgba(34, 211, 238, .45), transparent); }
.why__list::after { top: 50%; left: 4%; right: 4%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .55), rgba(34, 211, 238, .45), transparent); }
.why__item { position: relative; padding: clamp(28px, 3vw, 44px) clamp(22px, 3vw, 40px); }
.why__num {
	position: absolute;
	top: clamp(16px, 2vw, 28px);
	right: clamp(16px, 2.5vw, 34px);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3rem, 5vw, 4.6rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(167, 139, 250, .22);
	transition: -webkit-text-stroke-color .4s, transform .5s var(--ease);
}
.why__item:hover .why__num { -webkit-text-stroke-color: rgba(34, 211, 238, .55); transform: translateY(-4px); }
.why__icon {
	position: relative;
	width: 56px; height: 56px;
	display: grid; place-items: center;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--grad-btn);
	color: #fff;
	box-shadow: 0 0 0 7px rgba(124, 58, 237, .14), 0 14px 34px -12px rgba(147, 51, 234, .9);
	transition: transform .5s var(--ease), box-shadow .4s;
}
.why__item:nth-child(2) .why__icon { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 0 0 7px rgba(34, 211, 238, .12), 0 14px 34px -12px rgba(34, 211, 238, .7); }
.why__item:nth-child(3) .why__icon { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 0 0 7px rgba(52, 211, 153, .12), 0 14px 34px -12px rgba(52, 211, 153, .7); }
.why__item:nth-child(4) .why__icon { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 0 0 7px rgba(245, 158, 11, .12), 0 14px 34px -12px rgba(245, 158, 11, .7); }
.why__item:hover .why__icon { transform: rotate(-10deg) scale(1.08); }
.why__title { position: relative; display: inline-block; font-size: 1.22rem; margin-bottom: 10px; padding-bottom: 8px; }
.why__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.why__item:hover .why__title::after { transform: scaleX(1); }
.why__text { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.7; max-width: 300px; }

@media (max-width: 1024px) {
	.why__grid { grid-template-columns: 1fr; }
	.why__intro { text-align: center; }
	.why__intro .section-head { margin-inline: auto; }
	.why__intro .section-head--left .eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-glow), transparent); }
	.why__actions { align-items: center; }
}

@media (max-width: 680px) {
	.why__list { grid-template-columns: 1fr; }
	.why__list::before { display: none; }
	.why__list::after { display: none; }
	.why__item { padding: 26px 4px; border-bottom: 1px solid var(--border); }
	.why__item:last-child { border-bottom: 0; }
	.why__text { max-width: none; }
}