/* ==========================================================================
   OIB Why Choose Us — split layout: feature list (left) + amber stat card (right)
   ========================================================================== */

.oib-why {
	--oib-why-pt: 96px;
	--oib-why-pb: 96px;
	--oib-why-card-from: #7E5D74;
	--oib-why-card-to:   #6A4960;

	position: relative;
	padding: var(--oib-why-pt) 24px var(--oib-why-pb);
	background: #eef2ff;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* ---- Container ---- */
.oib-why__inner {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 64px;
}

.oib-why__inner--narrow { max-width: 1080px; }
.oib-why__inner--wide   { max-width: 1280px; }
.oib-why__inner--full   { max-width: calc(100% - 32px); }

/* ---- Card-on-left layout swap ---- */
.oib-why--card-left .oib-why__copy { order: 2; }
.oib-why--card-left .oib-why__card { order: 1; }

/* ==========================================================================
   Left: heading + features
   ========================================================================== */

.oib-why__copy {
	min-width: 0;
}

.oib-why__heading {
	margin: 0 0 36px;
	color: #0f172a;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.oib-why__features {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ---- Feature row ---- */
.oib-why__feat {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.oib-why__feat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: #ffffff;
	color: #7E5D74;
	font-size: 20px;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.oib-why__feat-icon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

.oib-why__feat-icon i {
	font-size: inherit;
	line-height: 1;
}

.oib-why__feat-body {
	min-width: 0;
}

.oib-why__feat-title {
	margin: 0 0 6px;
	color: #0f172a;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.oib-why__feat-desc {
	margin: 0;
	color: #475569;
	font-size: 15px;
	line-height: 1.65;
}

/* ==========================================================================
   Right: amber gradient stat card
   ========================================================================== */

.oib-why__card {
	position: relative;
	padding: 44px;
	border-radius: 24px;
	background:
		linear-gradient(160deg, var(--oib-why-card-from) 0%, var(--oib-why-card-to) 100%);
	color: #ffffff;
	box-shadow:
		0 20px 40px -22px rgba(106, 73, 96, 0.45),
		0 10px 20px -14px rgba(15, 23, 42, 0.12);
	min-width: 0;
}

/* ---- Hero number + label ---- */
.oib-why__card-number {
	margin: 0;
	color: #ffffff;
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.oib-why__card-label {
	margin: 12px 0 32px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ---- Breakdown rows ---- */
.oib-why__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oib-why__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	color: #ffffff;
	font-size: 15px;
}

.oib-why__row + .oib-why__row {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.oib-why__row-label {
	font-weight: 500;
	opacity: 0.95;
}

.oib-why__row-value {
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — single column, card stacks below */
@media (max-width: 980px) {
	.oib-why__inner {
		grid-template-columns: 1fr !important;
		gap: 48px;
	}

	.oib-why--card-left .oib-why__copy { order: 1; }
	.oib-why--card-left .oib-why__card { order: 2; }

	.oib-why__heading {
		margin-bottom: 28px;
	}

	.oib-why__card {
		padding: 36px;
	}
}

/* Phone — tighter spacing */
@media (max-width: 600px) {
	.oib-why {
		padding: clamp(56px, 12vw, 80px) 18px clamp(56px, 12vw, 80px);
	}

	.oib-why__inner {
		gap: 36px;
	}

	.oib-why__heading {
		font-size: clamp(22px, 6vw, 28px);
		margin-bottom: 24px;
	}

	.oib-why__features {
		gap: 22px;
	}

	.oib-why__feat {
		gap: 14px;
	}

	.oib-why__feat-icon {
		width: 42px;
		height: 42px;
		font-size: 18px;
	}

	.oib-why__feat-title {
		font-size: 17px;
	}

	.oib-why__feat-desc {
		font-size: 14.5px;
	}

	.oib-why__card {
		padding: 28px;
		border-radius: 20px;
	}

	.oib-why__card-label {
		margin-bottom: 24px;
	}

	.oib-why__row {
		padding: 14px 0;
		font-size: 14.5px;
	}
}