/* =========================================================
 * Tech Resolve — Website Business Impact
 * ======================================================= */

.tr-website-impact {
	padding:
		clamp(105px,10vw,175px)
		var(--tr-gutter);

	background: #f3f5f1;

	color: #0d1a13;
}


.tr-website-impact__shell {
	width: min(100%,var(--tr-container));
	margin: 0 auto;
}


.tr-website-impact__header {
	display: grid;
	grid-template-columns:
		minmax(0,1.15fr)
		minmax(330px,.85fr);
	align-items: end;
	gap: clamp(50px,8vw,120px);

	margin-bottom: clamp(55px,7vw,90px);
}


.tr-website-impact__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
	letter-spacing: .15em;
}


.tr-website-impact__header h2 {
	max-width: 900px;
	margin: 0;

	font-size: clamp(43px,5.2vw,74px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.053em;
}


.tr-website-impact__intro > p {
	margin: 0;

	color: #68746d;

	font-size: 14px;
	line-height: 1.78;
}


.tr-website-impact__intro > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;

	margin-top: 26px;
	padding-top: 15px;

	border-top: 1px solid #dce3df;
}


.tr-website-impact__intro span {
	color: #96a09a;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: .12em;
}


.tr-website-impact__intro strong {
	color: #08b95d;

	font-size: 9px;
	letter-spacing: .12em;
}


/* Matrix */

.tr-website-impact__matrix {
	display: grid;
	grid-template-columns:
		repeat(3,minmax(0,1fr));

	background: #fff;

	border: 1px solid #dfe5e1;
	border-radius: 23px;

	overflow: hidden;

	box-shadow:
		0 30px 80px rgba(13,30,21,.06);
}


.tr-website-impact__item {
	position: relative;

	min-height: 280px;
	padding: 28px;

	border-right: 1px solid #e4e9e6;
	border-bottom: 1px solid #e4e9e6;

	transition:
		background 180ms ease;
}


.tr-website-impact__item:nth-child(3n) {
	border-right: 0;
}


.tr-website-impact__item:nth-last-child(-n+3) {
	border-bottom: 0;
}


.tr-website-impact__item:hover {
	background:
		linear-gradient(
			145deg,
			rgba(25,224,120,.055),
			transparent
		);
}


.tr-website-impact__item-top {
	display: flex;
	align-items: center;
	gap: 12px;
}


.tr-website-impact__item-top span {
	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
}


.tr-website-impact__item-top i {
	flex: 1;

	height: 1px;

	background: #e1e6e3;
}


.tr-website-impact__item h3 {
	margin: 42px 0 0;

	font-size: clamp(20px,2vw,27px);
	line-height: 1.08;
	letter-spacing: -.025em;
}


.tr-website-impact__item p {
	margin: 15px 0 0;

	color: #6e7973;

	font-size: 11px;
	line-height: 1.72;
}


.tr-website-impact__pulse {
	position: absolute;
	right: 27px;
	bottom: 25px;
	left: 27px;

	display: flex;
	align-items: center;
	gap: 8px;
}


.tr-website-impact__pulse span {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;
}


.tr-website-impact__pulse i {
	flex: 1;

	height: 2px;

	background:
		linear-gradient(
			to right,
			#19e078 0 18%,
			#e4e9e6 18%
		);

	transition:
		background 220ms ease;
}


.tr-website-impact__item:hover
.tr-website-impact__pulse i {
	background:
		linear-gradient(
			to right,
			#19e078 0 75%,
			#e4e9e6 75%
		);
}


.tr-website-impact__statement {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-top: 13px;
	padding: 17px 20px;

	color: #8d9892;

	background: #fff;

	border: 1px solid #e0e5e2;
	border-radius: 12px;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: .13em;
}


.tr-website-impact__statement span {
	color: #08b95d;
}


@media (max-width: 980px) {

	.tr-website-impact__header {
		grid-template-columns: 1fr;
	}


	.tr-website-impact__matrix {
		grid-template-columns: 1fr;
	}


	.tr-website-impact__item,
	.tr-website-impact__item:nth-child(3n),
	.tr-website-impact__item:nth-last-child(-n+3) {
		border-right: 0;
		border-bottom: 1px solid #e4e9e6;
	}


	.tr-website-impact__item:last-child {
		border-bottom: 0;
	}

}