/* =========================================================
 * Tech Resolve — Website Build Paths
 * ======================================================= */

.tr-website-paths {
	position: relative;
	overflow: hidden;

	padding:
		clamp(110px,11vw,180px)
		var(--tr-gutter);

	color: #fff;

	background: #06100d;
}


.tr-website-paths__background,
.tr-website-paths__grid,
.tr-website-paths__glow {
	position: absolute;
	pointer-events: none;
}


.tr-website-paths__background {
	inset: 0;
}


.tr-website-paths__grid {
	inset: 0;

	opacity: .15;

	background-image:
		linear-gradient(
			rgba(255,255,255,.04) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,.04) 1px,
			transparent 1px
		);

	background-size: 52px 52px;
}


.tr-website-paths__glow {
	top: -220px;
	left: 25%;

	width: 700px;
	height: 700px;

	background:
		radial-gradient(
			circle,
			rgba(25,224,120,.1),
			transparent 69%
		);
}


.tr-website-paths__shell {
	position: relative;
	z-index: 2;

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


/* Header */

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

	margin-bottom: 65px;
}


.tr-website-paths__eyebrow {
	display: block;

	margin-bottom: 17px;

	color: #19e078;

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


.tr-website-paths__header h2 {
	max-width: 850px;
	margin: 0;

	color: #fff;

	font-size: clamp(44px,5.4vw,76px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.055em;
}


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

	color: rgba(255,255,255,.5);

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


/* Routes */

.tr-website-paths__routes {
	display: grid;
	grid-template-columns:
		repeat(3,minmax(0,1fr));
	gap: 11px;
}


.tr-website-paths__route {
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.046),
			rgba(255,255,255,.014)
		);

	border: 1px solid rgba(255,255,255,.08);
	border-radius: 19px;

	transition:
		transform 190ms var(--tr-ease),
		border-color 190ms ease;
}


.tr-website-paths__route:hover {
	border-color: rgba(25,224,120,.25);

	transform: translateY(-5px);
}


.tr-website-paths__route-top {
	display: flex;
	justify-content: space-between;

	padding: 16px 18px;

	color: rgba(255,255,255,.28);

	border-bottom: 1px solid rgba(255,255,255,.07);

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


.tr-website-paths__route-top > span {
	color: #19e078;
}


/* Visual */

.tr-website-paths__visual {
	display: grid;
	place-items: center;

	height: 235px;

	background:
		radial-gradient(
			circle at center,
			rgba(25,224,120,.05),
			transparent 55%
		);
}


.tr-website-paths__wordpress,
.tr-website-paths__redesign,
.tr-website-paths__custom {
	position: relative;

	width: 145px;
	height: 145px;
}


.tr-website-paths__wordpress {
	display: grid;
	place-items: center;

	border: 1px solid rgba(25,224,120,.2);
	border-radius: 50%;
}


.tr-website-paths__wordpress::before {
	content: "";

	position: absolute;
	inset: 19px;

	border: 1px solid rgba(20,215,232,.11);
	border-radius: 50%;
}


.tr-website-paths__wordpress strong {
	position: relative;
	z-index: 2;

	color: #fff;

	font-size: 46px;
}


.tr-website-paths__wordpress span {
	position: absolute;
	top: 50%;
	left: -4px;

	width: 8px;
	height: 8px;

	background: #19e078;
	border-radius: 50%;
}


/* Redesign */

.tr-website-paths__redesign span {
	position: absolute;
	top: 25px;

	width: 73px;
	height: 95px;

	border: 1px solid rgba(255,255,255,.11);
	border-radius: 9px;
}


.tr-website-paths__redesign span:first-child {
	left: 0;

	background: rgba(255,255,255,.02);

	transform: rotate(-8deg);
}


.tr-website-paths__redesign span:nth-child(2) {
	right: 0;

	background:
		linear-gradient(
			145deg,
			rgba(25,224,120,.13),
			rgba(20,215,232,.04)
		);

	border-color: rgba(25,224,120,.19);

	transform: rotate(8deg);
}


.tr-website-paths__redesign i {
	position: absolute;
	top: 61px;
	left: 50%;
	z-index: 3;

	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	color: #06100d;

	background: #19e078;

	border-radius: 50%;

	font-style: normal;

	transform: translateX(-50%);
}


/* Custom */

.tr-website-paths__custom span {
	position: absolute;

	width: 43px;
	height: 43px;

	border: 1px solid rgba(25,224,120,.18);
	border-radius: 8px;
}


.tr-website-paths__custom span:nth-child(1) {
	top: 5px;
	left: 5px;
}


.tr-website-paths__custom span:nth-child(2) {
	top: 5px;
	right: 5px;
}


.tr-website-paths__custom span:nth-child(3) {
	bottom: 5px;
	left: 5px;
}


.tr-website-paths__custom span:nth-child(4) {
	right: 5px;
	bottom: 5px;
}


.tr-website-paths__custom strong {
	position: absolute;
	top: 50%;
	left: 50%;

	display: grid;
	place-items: center;

	width: 56px;
	height: 56px;

	color: #06100d;

	background: #19e078;

	border-radius: 50%;

	font-size: 13px;

	transform: translate(-50%,-50%);
}


/* Copy */

.tr-website-paths__copy {
	padding: 0 22px 25px;
}


.tr-website-paths__copy h3 {
	margin: 0;

	color: #fff;

	font-size: clamp(22px,2.2vw,30px);
	line-height: 1.08;
	letter-spacing: -.03em;
}


.tr-website-paths__copy p {
	min-height: 86px;
	margin: 17px 0 0;

	color: rgba(255,255,255,.46);

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


.tr-website-paths__copy a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;

	margin-top: 27px;
	padding-top: 17px;

	color: #19e078;
	text-decoration: none;

	border-top: 1px solid rgba(255,255,255,.08);

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


.tr-website-paths__copy a svg {
	width: 17px;
	height: 17px;

	transition:
		transform 170ms var(--tr-ease);
}


.tr-website-paths__copy a:hover svg {
	transform: translateX(4px);
}


/* Footer */

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

	margin-top: 12px;
	padding: 16px 18px;

	color: rgba(255,255,255,.28);

	background: rgba(255,255,255,.02);

	border: 1px solid rgba(255,255,255,.07);
	border-radius: 11px;

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


.tr-website-paths__footer div {
	display: flex;
	align-items: center;
	gap: 8px;
}


.tr-website-paths__footer i {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;
}


@media (max-width: 980px) {

	.tr-website-paths__header,
	.tr-website-paths__routes {
		grid-template-columns: 1fr;
	}

}