/* =========================================================
 * Tech Resolve — Website Redesign Final CTA
 * ======================================================= */

.tr-redesign-final-cta {
	position: relative;
	overflow: hidden;

	padding:
		clamp(105px, 10vw, 165px)
		var(--tr-gutter)
		clamp(95px, 9vw, 145px);

	color:
		#ffffff;

	background:
		linear-gradient(
			145deg,
			#040b08,
			#07140f 55%,
			#06100d
		);
}


/* =========================================================
 * Background
 * ======================================================= */

.tr-redesign-final-cta__background,
.tr-redesign-final-cta__grid,
.tr-redesign-final-cta__glow,
.tr-redesign-final-cta__axis {
	position: absolute;

	pointer-events:
		none;
}


.tr-redesign-final-cta__background {
	inset:
		0;
}


.tr-redesign-final-cta__grid {
	inset:
		0;

	opacity:
		0.16;

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

	background-size:
		58px
		58px;
}


.tr-redesign-final-cta__glow--green {
	top:
		-230px;

	right:
		-210px;

	width:
		720px;

	height:
		720px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.12),
			transparent 68%
		);
}


.tr-redesign-final-cta__glow--cyan {
	bottom:
		-320px;

	left:
		-260px;

	width:
		720px;

	height:
		720px;

	background:
		radial-gradient(
			circle,
			rgba(20, 215, 232, 0.055),
			transparent 68%
		);
}


.tr-redesign-final-cta__axis {
	top:
		-25%;

	right:
		28%;

	width:
		1px;

	height:
		150%;

	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(25, 224, 120, 0.16),
			transparent
		);

	transform:
		rotate(17deg);
}


/* =========================================================
 * Shell
 * ======================================================= */

.tr-redesign-final-cta__shell {
	position: relative;
	z-index: 2;

	width:
		min(100%, var(--tr-container));

	margin:
		0 auto;

	overflow:
		hidden;

	border:
		1px solid rgba(255, 255, 255, 0.08);

	border-radius:
		26px;

	background:
		rgba(255, 255, 255, 0.012);

	box-shadow:
		0 45px 120px rgba(0, 0, 0, 0.24);
}


/* =========================================================
 * System Top
 * ======================================================= */

.tr-redesign-final-cta__system-top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap:
		20px;

	min-height:
		54px;

	padding:
		0
		20px;

	color:
		rgba(255, 255, 255, 0.25);

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.12em;
}


.tr-redesign-final-cta__system-top > div {
	display: flex;
	align-items: center;

	gap:
		9px;
}


.tr-redesign-final-cta__status {
	width:
		6px;

	height:
		6px;

	background:
		var(--tr-green);

	border-radius:
		50%;

	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.7);
}


.tr-redesign-final-cta__system-top > span {
	color:
		var(--tr-green);
}


/* =========================================================
 * Main
 * ======================================================= */

.tr-redesign-final-cta__main {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(460px, 0.95fr);

	align-items:
		center;

	gap:
		clamp(50px, 7vw, 100px);

	padding:
		clamp(60px, 7vw, 95px);
}


/* =========================================================
 * Copy
 * ======================================================= */

.tr-redesign-final-cta__copy {
	min-width:
		0;
}


.tr-redesign-final-cta__eyebrow {
	display: block;

	margin-bottom:
		19px;

	color:
		var(--tr-green);

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.15em;
}


.tr-redesign-final-cta__copy h2 {
	max-width:
		790px;

	margin:
		0;

	color:
		#ffffff;

	font-size:
		clamp(48px, 5.6vw, 80px);

	font-weight:
		800;

	line-height:
		0.97;

	letter-spacing:
		-0.058em;
}


.tr-redesign-final-cta__description {
	max-width:
		660px;

	margin:
		28px
		0
		0;

	color:
		rgba(255, 255, 255, 0.5);

	font-size:
		var(--tr-text-body);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-body);
}


/* =========================================================
 * Actions
 * ======================================================= */

.tr-redesign-final-cta__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap:
		11px;

	margin-top:
		34px;
}


.tr-redesign-final-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap:
		10px;

	min-height:
		53px;

	padding:
		0
		21px;

	border-radius:
		999px;

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	text-decoration:
		none;

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


/* =========================================================
 * Primary
 * ======================================================= */

.tr-redesign-final-cta__button--primary {
	color:
		#06100d;

	background:
		var(--tr-green);

	border:
		1px solid var(--tr-green);

	box-shadow:
		0 17px 38px rgba(25, 224, 120, 0.11);
}


.tr-redesign-final-cta__button--primary:hover,
.tr-redesign-final-cta__button--primary:focus {
	color:
		#06100d;

	background:
		#41eb91;

	border-color:
		#41eb91;

	transform:
		translateY(-2px);
}


.tr-redesign-final-cta__button svg {
	width:
		17px;

	height:
		17px;
}


/* =========================================================
 * Secondary
 * ======================================================= */

.tr-redesign-final-cta__button--secondary {
	color:
		rgba(255, 255, 255, 0.72);

	background:
		rgba(255, 255, 255, 0.025);

	border:
		1px solid rgba(255, 255, 255, 0.12);
}


.tr-redesign-final-cta__button--secondary:hover,
.tr-redesign-final-cta__button--secondary:focus {
	color:
		#ffffff;

	background:
		rgba(255, 255, 255, 0.055);

	border-color:
		rgba(255, 255, 255, 0.22);

	transform:
		translateY(-2px);
}


/* =========================================================
 * Note
 * ======================================================= */

.tr-redesign-final-cta__note {
	max-width:
		530px;

	margin:
		20px
		0
		0;

	color:
		rgba(255, 255, 255, 0.25);

	font-size:
		var(--tr-text-card);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-card);
}


/* =========================================================
 * Visual
 * ======================================================= */

.tr-redesign-final-cta__visual {
	position: relative;

	overflow:
		hidden;

	min-width:
		0;

	border:
		1px solid rgba(255, 255, 255, 0.09);

	border-radius:
		22px;

	background:
		#08140f;

	box-shadow:
		0 30px 70px rgba(0, 0, 0, 0.24);
}


.tr-redesign-final-cta__visual::before {
	content: "";

	position: absolute;

	top:
		-160px;

	right:
		-150px;

	width:
		400px;

	height:
		400px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.11),
			transparent 68%
		);

	pointer-events:
		none;
}


/* =========================================================
 * Visual Head
 * ======================================================= */

.tr-redesign-final-cta__visual-head {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap:
		15px;

	min-height:
		49px;

	padding:
		0
		18px;

	color:
		rgba(255, 255, 255, 0.2);

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.1em;
}


.tr-redesign-final-cta__visual-head strong {
	color:
		var(--tr-green);

	font-size:
		inherit;

	font-weight:
		inherit;
}


/* =========================================================
 * Route
 * ======================================================= */

.tr-redesign-final-cta__route {
	position: relative;
	z-index: 2;

	padding:
		32px;
}


/* =========================================================
 * Route Stage
 * ======================================================= */

.tr-redesign-final-cta__route-stage {
	display: grid;

	grid-template-columns:
		43px
		minmax(0, 1fr);

	align-items:
		center;

	gap:
		16px;

	min-height:
		82px;

	padding:
		16px
		18px;

	border:
		1px solid rgba(255, 255, 255, 0.07);

	background:
		rgba(255, 255, 255, 0.018);
}


.tr-redesign-final-cta__route-stage > span {
	display: grid;

	place-items:
		center;

	width:
		35px;

	height:
		35px;

	color:
		rgba(255, 255, 255, 0.4);

	border:
		1px solid rgba(255, 255, 255, 0.12);

	border-radius:
		50%;

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);
}


.tr-redesign-final-cta__route-stage > div {
	display: grid;

	gap:
		6px;
}


.tr-redesign-final-cta__route-stage small {
	color:
		rgba(255, 255, 255, 0.18);

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.1em;
}


.tr-redesign-final-cta__route-stage strong {
	color:
		rgba(255, 255, 255, 0.64);

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.07em;
}


/* =========================================================
 * Active Stage
 * ======================================================= */

.tr-redesign-final-cta__route-stage--active {
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.07),
			rgba(25, 224, 120, 0.015)
		);

	border-color:
		rgba(25, 224, 120, 0.2);
}


.tr-redesign-final-cta__route-stage--active > span {
	color:
		#06100d;

	background:
		var(--tr-green);

	border-color:
		var(--tr-green);

	box-shadow:
		0 0 20px rgba(25, 224, 120, 0.22);
}


.tr-redesign-final-cta__route-stage--active strong {
	color:
		var(--tr-green);
}


/* =========================================================
 * Connector
 * ======================================================= */

.tr-redesign-final-cta__connector {
	display: grid;

	justify-items:
		center;

	height:
		54px;
}


.tr-redesign-final-cta__connector i {
	width:
		1px;

	flex:
		1;

	background:
		rgba(255, 255, 255, 0.08);
}


.tr-redesign-final-cta__connector span {
	width:
		6px;

	height:
		6px;

	background:
		var(--tr-green);

	border-radius:
		50%;

	box-shadow:
		0 0 10px rgba(25, 224, 120, 0.5);
}


/* =========================================================
 * Visual Bottom
 * ======================================================= */

.tr-redesign-final-cta__visual-bottom {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;

	gap:
		9px;

	min-height:
		49px;

	padding:
		0
		18px;

	color:
		rgba(255, 255, 255, 0.18);

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.08em;
}


.tr-redesign-final-cta__visual-bottom i {
	flex:
		1;

	height:
		1px;

	background:
		rgba(255, 255, 255, 0.07);
}


.tr-redesign-final-cta__visual-bottom strong {
	color:
		var(--tr-green);

	font-size:
		inherit;

	font-weight:
		inherit;
}


/* =========================================================
 * Footer Line
 * ======================================================= */

.tr-redesign-final-cta__footer-line {
	display: flex;
	align-items: center;

	gap:
		15px;

	min-height:
		55px;

	padding:
		0
		25px;

	color:
		rgba(255, 255, 255, 0.17);

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

	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.11em;
}


.tr-redesign-final-cta__footer-line i {
	flex:
		1;

	height:
		1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 0.04),
			rgba(25, 224, 120, 0.22),
			rgba(255, 255, 255, 0.04)
		);
}


.tr-redesign-final-cta__footer-line strong {
	color:
		var(--tr-green);

	font-size:
		inherit;

	font-weight:
		inherit;
}


/* =========================================================
 * Tablet
 * Basic fallback only
 * ======================================================= */

@media (max-width: 1080px) {

	.tr-redesign-final-cta__main {
		grid-template-columns:
			1fr;
	}


	.tr-redesign-final-cta__copy {
		max-width:
			850px;
	}


	.tr-redesign-final-cta__visual {
		width:
			min(100%, 760px);
	}

}


/* =========================================================
 * Mobile
 * Basic fallback only
 * ======================================================= */

@media (max-width: 720px) {

	.tr-redesign-final-cta {
		padding:
			80px
			16px
			90px;
	}


	.tr-redesign-final-cta__system-top > span {
		display:
			none;
	}


	.tr-redesign-final-cta__main {
		gap:
			50px;

		padding:
			45px
			22px;
	}


	.tr-redesign-final-cta__copy h2 {
		font-size:
			clamp(41px, 11vw, 59px);
	}


	.tr-redesign-final-cta__actions {
		align-items:
			stretch;

		flex-direction:
			column;
	}


	.tr-redesign-final-cta__button {
		width:
			100%;
	}


	.tr-redesign-final-cta__route {
		padding:
			22px
			18px;
	}


	.tr-redesign-final-cta__visual-bottom {
		display:
			none;
	}


	.tr-redesign-final-cta__footer-line {
		justify-content:
			center;

		padding:
			0
			18px;
	}


	.tr-redesign-final-cta__footer-line i {
		display:
			none;
	}

}


/* =========================================================
 * Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.tr-redesign-final-cta__button {
		transition:
			none;
	}

}