/* =========================================================
 * Tech Resolve — Conversion Engine
 * Version: 2.1.0
 * Compact Desktop Scale
 * ======================================================= */


/* =========================================================
 * Section
 * ======================================================= */

.tr-conversion {
	position: relative;

	padding:
		34px
		0
		62px;

	background:
		#050b10;
}


.tr-conversion__shell {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-wide)
	);

	margin-inline: auto;
}


/* =========================================================
 * Panel
 * ======================================================= */

.tr-conversion__panel {
	position: relative;
	isolation: isolate;

	min-height: 700px;

	padding:
		clamp(42px, 4.4vw, 64px);

	overflow: hidden;

	border:
		1px solid rgba(7, 40, 32, 0.08);

	border-radius:
		clamp(28px, 2.6vw, 40px);

	background:
		linear-gradient(
			135deg,
			#f7faf6 0%,
			#eef5ef 50%,
			#fbfdfb 100%
		);

	box-shadow:
		0 40px 100px rgba(0, 0, 0, 0.21),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


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

.tr-conversion__background {
	position: absolute;
	z-index: -2;

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-conversion__grid {
	position: absolute;

	inset: 0;

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

	background-size:
		46px
		46px;

	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000 22%,
			#000 82%,
			transparent
		);
}


.tr-conversion__glow {
	position: absolute;

	border-radius: 50%;
}


.tr-conversion__glow--one {
	top: -240px;
	left: -210px;

	width: 560px;
	height: 560px;

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


.tr-conversion__glow--two {
	right: -220px;
	bottom: -290px;

	width: 620px;
	height: 620px;

	background:
		radial-gradient(
			circle,
			rgba(20, 215, 232, 0.065),
			rgba(135, 87, 255, 0.022) 45%,
			transparent 72%
		);
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-conversion__header {
	position: relative;
	z-index: 10;

	max-width: 820px;

	margin-inline: auto;

	text-align: center;
}


.tr-conversion__eyebrow {
	margin-bottom: 14px;

	color:
		#0dae5e;

	font-size:
		clamp(10px, 0.7vw, 12px);

	font-weight: 820;

	letter-spacing:
		0.145em;

	line-height: 1.4;
}


.tr-conversion__title {
	max-width: 760px;

	margin:
		0
		auto
		16px;

	color:
		#101713;

	font-size:
		clamp(40px, 3.9vw, 62px);

	font-weight: 790;

	line-height: 1.01;

	letter-spacing:
		-0.052em;

	text-wrap: balance;
}


.tr-conversion__description {
	max-width: 670px;

	margin:
		0
		auto;

	color:
		#697770;

	font-size:
		clamp(14px, 0.95vw, 16px);

	line-height: 1.65;
}


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

.tr-conversion__stage {
	position: relative;

	height: 430px;

	margin-top: 30px;
}


/* =========================================================
 * Connectors
 * ======================================================= */

.tr-conversion__connectors {
	position: absolute;
	z-index: 1;

	inset: 0;

	width: 100%;
	height: 100%;

	overflow: visible;

	color:
		rgba(11, 162, 86, 0.24);

	pointer-events: none;
}


.tr-conversion__connector {
	fill: none;

	stroke: currentColor;

	stroke-width: 1.3;

	stroke-linecap: round;

	stroke-dasharray:
		0.02
		0.035;
}


.tr-conversion__connector--two {
	color:
		rgba(20, 170, 180, 0.20);
}


.tr-conversion__connector--three {
	color:
		rgba(73, 124, 200, 0.18);
}


.tr-conversion__connector--experience {
	color:
		rgba(12, 140, 76, 0.14);
}


/* =========================================================
 * Core
 * ======================================================= */

.tr-conversion__core {
	position: absolute;
	z-index: 10;

	top: 50%;
	left: 50%;

	width: 300px;
	height: 300px;

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

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(12, 41, 34, 0.055),
			transparent 68%
		);
}


.tr-conversion__core-ring {
	position: absolute;

	top: 50%;
	left: 50%;

	border-radius: 50%;

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

	pointer-events: none;
}


.tr-conversion__core-ring--outer {
	width: 300px;
	height: 300px;

	border:
		1px solid rgba(8, 86, 65, 0.11);

	animation:
		tr-conversion-ring-spin
		24s
		linear
		infinite;
}


.tr-conversion__core-ring--outer::before,
.tr-conversion__core-ring--outer::after {
	content: "";

	position: absolute;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 15px rgba(25, 224, 120, 0.45);
}


.tr-conversion__core-ring--outer::before {
	top: 20px;
	left: 65px;
}


.tr-conversion__core-ring--outer::after {
	right: 14px;
	bottom: 88px;

	background:
		var(--tr-spectrum-cyan);

	box-shadow:
		0 0 15px rgba(20, 215, 232, 0.35);
}


.tr-conversion__core-ring--middle {
	width: 244px;
	height: 244px;

	border:
		1px dashed rgba(8, 86, 65, 0.12);

	animation:
		tr-conversion-ring-spin-reverse
		30s
		linear
		infinite;
}


@keyframes tr-conversion-ring-spin {

	to {
		transform:
			translate(-50%, -50%)
			rotate(360deg);
	}

}


@keyframes tr-conversion-ring-spin-reverse {

	to {
		transform:
			translate(-50%, -50%)
			rotate(-360deg);
	}

}


/* =========================================================
 * Core Inner
 * ======================================================= */

.tr-conversion__core-inner {
	position: absolute;

	top: 50%;
	left: 50%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 198px;
	height: 198px;

	padding: 24px;

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

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#0b251e,
			#071713
		);

	color:
		#ffffff;

	text-align: center;

	box-shadow:
		0 26px 60px rgba(3, 31, 23, 0.23),
		0 0 0 9px rgba(13, 144, 82, 0.025),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);

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

	transition:
		transform 500ms var(--tr-ease),
		box-shadow 400ms ease;
}


.tr-conversion__core:hover
.tr-conversion__core-inner {
	transform:
		translate(-50%, -50%)
		scale(1.04);

	box-shadow:
		0 32px 72px rgba(3, 31, 23, 0.28),
		0 0 0 13px rgba(13, 144, 82, 0.035),
		0 0 42px rgba(25, 224, 120, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


.tr-conversion__core-icon {
	display: grid;
	place-items: center;

	width: 43px;
	height: 43px;

	margin-bottom: 12px;

	border:
		1px solid rgba(25, 224, 120, 0.17);

	border-radius: 14px;

	background:
		linear-gradient(
			145deg,
			rgba(25, 224, 120, 0.13),
			rgba(20, 215, 232, 0.04)
		);

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


.tr-conversion__core-icon svg {
	width: 22px;
	height: 22px;
}


.tr-conversion__core-inner h3 {
	margin:
		0
		0
		7px;

	color:
		#ffffff;

	font-size: 19px;
	font-weight: 760;

	letter-spacing:
		-0.03em;
}


.tr-conversion__core-inner p {
	margin: 0;

	color:
		rgba(225, 239, 234, 0.62);

	font-size: 10.5px;

	line-height: 1.48;
}


/* =========================================================
 * Nodes
 * ======================================================= */

.tr-conversion__node {
	position: absolute;
	z-index: 12;

	display: flex;
	align-items: center;
	gap: 11px;

	width: 235px;
	min-height: 68px;

	padding:
		10px
		14px
		10px
		10px;

	border:
		1px solid rgba(7, 54, 42, 0.08);

	border-radius: 18px;

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

	box-shadow:
		0 16px 38px rgba(7, 42, 33, 0.085),
		inset 0 1px 0 rgba(255, 255, 255, 0.86);

	transition:
		transform 450ms var(--tr-ease),
		box-shadow 350ms ease,
		border-color 300ms ease;
}


.tr-conversion__node::before {
	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	background:
		radial-gradient(
			150px circle at 20% 50%,
			rgba(25, 224, 120, 0.09),
			transparent 70%
		);

	opacity: 0;

	transition:
		opacity 300ms ease;

	pointer-events: none;
}


.tr-conversion__node:hover {
	border-color:
		rgba(16, 190, 103, 0.17);

	box-shadow:
		0 22px 50px rgba(7, 42, 33, 0.12),
		0 0 24px rgba(25, 224, 120, 0.055),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
}


.tr-conversion__node:hover::before {
	opacity: 1;
}


.tr-conversion__node--one {
	top: 8%;
	left: 2%;

	transform:
		rotate(-3deg);

	animation:
		tr-conversion-node-one
		6s
		ease-in-out
		infinite;
}


.tr-conversion__node--two {
	top: 8%;
	right: 1%;

	transform:
		rotate(3deg);

	animation:
		tr-conversion-node-two
		6.8s
		ease-in-out
		infinite;
}


.tr-conversion__node--three {
	right: 4%;
	bottom: 2%;

	transform:
		rotate(-2deg);

	animation:
		tr-conversion-node-three
		6.3s
		ease-in-out
		infinite;
}


@keyframes tr-conversion-node-one {

	0%,
	100% {
		translate: 0 -3px;
	}

	50% {
		translate: 0 5px;
	}

}


@keyframes tr-conversion-node-two {

	0%,
	100% {
		translate: 0 5px;
	}

	50% {
		translate: 0 -4px;
	}

}


@keyframes tr-conversion-node-three {

	0%,
	100% {
		translate: 0 4px;
	}

	50% {
		translate: 0 -5px;
	}

}


.tr-conversion__node--one:hover,
.tr-conversion__node--two:hover,
.tr-conversion__node--three:hover {
	transform:
		translateY(-4px)
		rotate(0deg)
		scale(1.025);
}


/* =========================================================
 * Node Icon
 * ======================================================= */

.tr-conversion__node-icon {
	position: relative;
	z-index: 2;

	display: grid;
	place-items: center;

	width: 42px;
	height: 42px;

	flex:
		0
		0
		42px;

	border:
		1px solid rgba(14, 170, 93, 0.10);

	border-radius: 13px;

	background:
		#e6f6ec;

	color:
		#0caf60;
}


.tr-conversion__node--two
.tr-conversion__node-icon {
	background:
		#e6f5f5;

	color:
		#119ba5;
}


.tr-conversion__node--three
.tr-conversion__node-icon {
	background:
		#edf0f8;

	color:
		#477cc4;
}


.tr-conversion__node-icon svg {
	width: 19px;
	height: 19px;
}


.tr-conversion__node-text {
	position: relative;
	z-index: 2;

	color:
		#24312b;

	font-size: 11.5px;
	font-weight: 650;

	line-height: 1.4;
}


/* =========================================================
 * Node Signal
 * ======================================================= */

.tr-conversion__node-signal {
	position: absolute;

	top: 50%;
	right: -4px;

	width: 8px;
	height: 8px;

	border:
		2px solid #ffffff;

	border-radius: 50%;

	background:
		var(--tr-green);

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

	transform:
		translateY(-50%);
}


.tr-conversion__node--two
.tr-conversion__node-signal,
.tr-conversion__node--three
.tr-conversion__node-signal {
	right: auto;
	left: -4px;
}


.tr-conversion__node--two
.tr-conversion__node-signal {
	background:
		var(--tr-spectrum-cyan);
}


/* =========================================================
 * Experience
 * ======================================================= */

.tr-conversion__experience {
	position: absolute;
	z-index: 5;

	left: 3%;
	bottom: 0;

	display: flex;
	align-items: flex-end;
	gap: 11px;

	color:
		#0c2c22;
}


.tr-conversion__experience strong {
	display: block;

	color:
		transparent;

	font-size:
		clamp(82px, 8vw, 120px);

	font-weight: 860;

	line-height: 0.72;

	letter-spacing:
		-0.08em;

	-webkit-text-stroke:
		1.3px
		rgba(9, 70, 53, 0.17);

	transition:
		-webkit-text-stroke 400ms ease,
		transform 500ms var(--tr-ease);
}


.tr-conversion__experience:hover strong {
	-webkit-text-stroke:
		1.3px
		rgba(10, 167, 91, 0.37);

	transform:
		translateY(-4px);
}


.tr-conversion__experience span {
	max-width: 82px;

	padding-bottom: 1px;

	color:
		#61736b;

	font-size: 8px;
	font-weight: 820;

	line-height: 1.3;

	letter-spacing:
		0.11em;
}


/* =========================================================
 * Decorative Signals
 * ======================================================= */

.tr-conversion__signal {
	position: absolute;
	z-index: 3;

	width: 4px;
	height: 4px;

	border-radius: 50%;

	background:
		var(--tr-green);

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


.tr-conversion__signal--one {
	top: 19%;
	left: 36%;
}


.tr-conversion__signal--two {
	top: 22%;
	right: 31%;

	background:
		var(--tr-spectrum-cyan);

	box-shadow:
		0 0 12px rgba(20, 215, 232, 0.40);
}


.tr-conversion__signal--three {
	right: 25%;
	bottom: 19%;

	background:
		#6d8ed4;

	box-shadow:
		0 0 12px rgba(109, 142, 212, 0.35);
}


/* =========================================================
 * JS Reveal
 * ======================================================= */

.tr-has-conversion-js
.tr-conversion__header,
.tr-has-conversion-js
.tr-conversion__core,
.tr-has-conversion-js
.tr-conversion__node,
.tr-has-conversion-js
.tr-conversion__experience {
	opacity: 0;
}


.tr-has-conversion-js
.tr-conversion__header {
	transform:
		translateY(22px);
}


.tr-has-conversion-js
.tr-conversion__core {
	transform:
		translate(-50%, -46%)
		scale(0.94);
}


.tr-has-conversion-js
.tr-conversion__node--one {
	transform:
		translate3d(-24px, 12px, 0)
		rotate(-3deg);
}


.tr-has-conversion-js
.tr-conversion__node--two {
	transform:
		translate3d(24px, 12px, 0)
		rotate(3deg);
}


.tr-has-conversion-js
.tr-conversion__node--three {
	transform:
		translate3d(24px, 16px, 0)
		rotate(-2deg);
}


.tr-has-conversion-js
.tr-conversion__experience {
	transform:
		translateY(20px);
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__header,
.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__core,
.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__node,
.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__experience {
	opacity: 1;

	transition:
		opacity 800ms ease,
		transform 950ms var(--tr-ease);
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__header {
	transform:
		translateY(0);

	transition-delay: 60ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__core {
	transform:
		translate(-50%, -50%)
		scale(1);

	transition-delay: 180ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__node--one {
	transform:
		rotate(-3deg);

	transition-delay: 330ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__node--two {
	transform:
		rotate(3deg);

	transition-delay: 430ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__node--three {
	transform:
		rotate(-2deg);

	transition-delay: 530ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__experience {
	transform:
		translateY(0);

	transition-delay: 620ms;
}


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

.tr-has-conversion-js
.tr-conversion__connector {
	stroke-dasharray: 1;

	stroke-dashoffset: 1;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__connector {
	animation:
		tr-conversion-path-in
		1.4s
		var(--tr-ease)
		forwards;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__connector--one {
	animation-delay: 400ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__connector--two {
	animation-delay: 500ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__connector--three {
	animation-delay: 600ms;
}


.tr-has-conversion-js
.tr-conversion.is-inview
.tr-conversion__connector--experience {
	animation-delay: 700ms;
}


@keyframes tr-conversion-path-in {

	to {
		stroke-dashoffset: 0;
	}

}


/* =========================================================
 * Large Tablet
 * ======================================================= */

@media (max-width: 1100px) {

	.tr-conversion__panel {
		min-height: 760px;
	}


	.tr-conversion__stage {
		height: 485px;
	}


	.tr-conversion__core {
		width: 280px;
		height: 280px;
	}


	.tr-conversion__core-ring--outer {
		width: 280px;
		height: 280px;
	}


	.tr-conversion__core-ring--middle {
		width: 230px;
		height: 230px;
	}


	.tr-conversion__core-inner {
		width: 190px;
		height: 190px;
	}


	.tr-conversion__node {
		width: 215px;
	}


	.tr-conversion__node--one {
		top: 5%;
		left: 0;
	}


	.tr-conversion__node--two {
		top: 5%;
		right: 0;
	}


	.tr-conversion__node--three {
		right: 0;
		bottom: 3%;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 700px) {

	.tr-conversion {
		padding:
			24px
			0
			42px;
	}


	.tr-conversion__shell {
		width:
			calc(100% - 24px);
	}


	.tr-conversion__panel {
		min-height: 0;

		padding:
			40px
			20px
			32px;

		border-radius: 26px;
	}


	.tr-conversion__header {
		text-align: left;
	}


	.tr-conversion__eyebrow {
		margin-bottom: 12px;
	}


	.tr-conversion__title {
		font-size:
			clamp(36px, 10vw, 48px);

		margin-bottom: 15px;
	}


	.tr-conversion__description {
		margin-inline: 0;

		font-size: 15px;
	}


	.tr-conversion__stage {
		display: flex;
		flex-direction: column;
		gap: 12px;

		height: auto;

		margin-top: 34px;
	}


	.tr-conversion__connectors,
	.tr-conversion__signal {
		display: none;
	}


	.tr-conversion__core {
		position: relative;

		top: auto;
		left: auto;

		order: 1;

		width: 100%;
		height: auto;

		transform: none;

		border-radius: 22px;

		background: none;
	}


	.tr-conversion__core-ring {
		display: none;
	}


	.tr-conversion__core-inner {
		position: relative;

		top: auto;
		left: auto;

		width: 100%;
		height: auto;

		padding:
			26px
			22px;

		border-radius: 22px;

		transform: none;
	}


	.tr-conversion__core-icon {
		width: 46px;
		height: 46px;

		margin-bottom: 13px;
	}


	.tr-conversion__core-inner h3 {
		font-size: 20px;
	}


	.tr-conversion__core-inner p {
		font-size: 12px;
	}


	.tr-conversion__node {
		position: relative;

		top: auto;
		right: auto;
		bottom: auto;
		left: auto;

		width: 100%;
		min-height: 64px;

		transform: none !important;

		animation: none;
	}


	.tr-conversion__node-text {
		font-size: 12px;
	}


	.tr-conversion__node--one {
		order: 2;
	}


	.tr-conversion__node--two {
		order: 3;
	}


	.tr-conversion__node--three {
		order: 4;
	}


	.tr-conversion__node-signal {
		display: none;
	}


	.tr-conversion__experience {
		position: relative;

		left: auto;
		bottom: auto;

		order: 5;

		margin-top: 10px;
	}


	.tr-conversion__experience strong {
		font-size: 90px;
	}


	.tr-has-conversion-js
	.tr-conversion__core {
		transform:
			translateY(18px)
			scale(0.97);
	}


	.tr-has-conversion-js
	.tr-conversion.is-inview
	.tr-conversion__core {
		transform:
			translateY(0)
			scale(1);
	}

}


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

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

	.tr-conversion__core-ring,
	.tr-conversion__node,
	.tr-conversion__connector {
		animation: none !important;
	}


	.tr-has-conversion-js
	.tr-conversion__header,
	.tr-has-conversion-js
	.tr-conversion__core,
	.tr-has-conversion-js
	.tr-conversion__node,
	.tr-has-conversion-js
	.tr-conversion__experience {
		opacity: 1;

		transform: none;

		transition: none;
	}

}