/* =========================================================
 * Tech Resolve — Website Performance Stack
 * Version: 1.0.0
 * ======================================================= */


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

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

	padding:
		88px
		0
		92px;

	overflow: hidden;

	background:
		#050b10;
}


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

	margin-inline: auto;
}


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

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

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-included__grid {
	position: absolute;

	inset: 0;

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

	background-size:
		52px
		52px;

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


.tr-included__glow {
	position: absolute;

	border-radius: 50%;
}


.tr-included__glow--green {
	top: -320px;
	left: -240px;

	width: 720px;
	height: 720px;

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


.tr-included__glow--cyan {
	right: -300px;
	bottom: -380px;

	width: 760px;
	height: 760px;

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


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

.tr-included__header {
	margin-bottom:
		48px;
}


.tr-included__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;

	margin-bottom: 18px;

	color:
		rgba(176, 255, 218, 0.77);

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

	font-weight: 820;

	letter-spacing:
		0.15em;
}


.tr-included__eyebrow-dot {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

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


.tr-included__heading-row {
	display: grid;

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

	align-items: end;

	gap: 40px;
}


.tr-included__title {
	max-width: 900px;

	margin: 0;

	color:
		#f5faf8;

	font-size:
		clamp(44px, 4.7vw, 74px);

	font-weight: 790;

	line-height:
		1.01;

	letter-spacing:
		-0.052em;

	text-wrap: balance;
}


.tr-included__range {
	color:
		transparent;

	font-size:
		clamp(55px, 6vw, 92px);

	font-weight: 850;

	line-height:
		0.76;

	letter-spacing:
		-0.065em;

	-webkit-text-stroke:
		1px
		rgba(25, 224, 120, 0.18);
}


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

.tr-included__system {
	position: relative;

	display: grid;

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

	align-items: start;

	gap:
		clamp(28px, 4vw, 60px);
}


/* =========================================================
 * Monitor
 * ======================================================= */

.tr-included__monitor {
	position: sticky;

	top: 125px;

	padding:
		21px;

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

	background:
		linear-gradient(
			145deg,
			rgba(11, 27, 33, 0.95),
			rgba(6, 15, 20, 0.97)
		);

	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.23),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);

	clip-path:
		polygon(
			0 0,
			calc(100% - 18px) 0,
			100% 18px,
			100% 100%,
			18px 100%,
			0 calc(100% - 18px)
		);
}


/* =========================================================
 * Monitor Top
 * ======================================================= */

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

	margin-bottom: 28px;
}


.tr-included__monitor-status {
	color:
		rgba(209, 225, 219, 0.42);

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

	letter-spacing:
		0.13em;
}


.tr-included__monitor-dot {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 13px rgba(25, 224, 120, 0.65);
}


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

.tr-included__monitor-main {
	display: flex;
	align-items: flex-end;
	gap: 15px;

	margin-bottom: 30px;
}


.tr-included__monitor-number {
	color:
		transparent;

	font-size: 74px;
	font-weight: 860;

	line-height: 0.72;

	letter-spacing:
		-0.08em;

	-webkit-text-stroke:
		1px
		rgba(25, 224, 120, 0.38);
}


.tr-included__monitor-copy {
	display: grid;
	gap: 5px;
}


.tr-included__monitor-copy strong {
	color:
		#ffffff;

	font-size: 13px;
	font-weight: 720;

	line-height: 1.25;
}


.tr-included__monitor-copy span {
	color:
		rgba(211, 226, 220, 0.34);

	font-size: 7px;
	font-weight: 800;

	letter-spacing:
		0.12em;
}


/* =========================================================
 * Monitor Bars
 * ======================================================= */

.tr-included__monitor-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;

	height: 52px;
}


.tr-included__monitor-bars span {
	display: block;

	flex: 1;

	border-radius:
		3px
		3px
		1px
		1px;

	background:
		linear-gradient(
			to top,
			rgba(25, 224, 120, 0.12),
			var(--tr-green)
		);

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

	transition:
		height 550ms var(--tr-ease);
}


.tr-included__monitor-bars span:nth-child(1) {
	height: 30%;
}


.tr-included__monitor-bars span:nth-child(2) {
	height: 48%;
}


.tr-included__monitor-bars span:nth-child(3) {
	height: 63%;
}


.tr-included__monitor-bars span:nth-child(4) {
	height: 78%;
}


.tr-included__monitor-bars span:nth-child(5) {
	height: 100%;
}


/* =========================================================
 * Stack
 * ======================================================= */

.tr-included__stack {
	position: relative;

	display: grid;
	gap: 10px;

	padding-left: 34px;
}


/* =========================================================
 * Spine
 * ======================================================= */

.tr-included__spine {
	position: absolute;

	top: 26px;
	bottom: 26px;
	left: 6px;

	width: 1px;

	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(25, 224, 120, 0.32),
			rgba(20, 215, 232, 0.25),
			transparent
		);

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


/* =========================================================
 * Layer
 * ======================================================= */

.tr-included__layer {
	position: relative;

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


.tr-included__layer:nth-child(3) {
	margin-left: 26px;
}


.tr-included__layer:nth-child(4) {
	margin-left: 52px;
}


.tr-included__layer:nth-child(5) {
	margin-left: 26px;
}


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

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

	position: absolute;

	top: 50%;
	left: -34px;

	width: 27px;
	height: 1px;

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

	transform:
		translateY(-50%);

	transition:
		background 350ms ease,
		box-shadow 350ms ease;
}


.tr-included__layer::after {
	content: "";

	position: absolute;

	top: 50%;
	left: -38px;

	width: 9px;
	height: 9px;

	border:
		2px solid #050b10;

	border-radius: 50%;

	background:
		#274239;

	transform:
		translateY(-50%);

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


.tr-included__layer.is-active::before {
	background:
		var(--tr-green);

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


.tr-included__layer.is-active::after {
	background:
		var(--tr-green);

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

	transform:
		translateY(-50%)
		scale(1.15);
}


/* =========================================================
 * Layer Button
 * ======================================================= */

.tr-included__layer-button,
.tr-included__layer-button:hover,
.tr-included__layer-button:focus,
.tr-included__layer-button:active {
	position: relative;
	isolation: isolate;

	display: grid;

	grid-template-columns:
		65px
		58px
		minmax(0, 1fr)
		90px
		42px;

	align-items: center;

	gap: 17px;

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

	padding:
		16px
		18px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.065) !important;

	background:
		linear-gradient(
			105deg,
			rgba(255, 255, 255, 0.035),
			rgba(255, 255, 255, 0.012)
		) !important;

	color:
		#ffffff;

	text-align: left;

	cursor: pointer;

	clip-path:
		polygon(
			0 0,
			calc(100% - 18px) 0,
			100% 18px,
			100% 100%,
			18px 100%,
			0 calc(100% - 18px)
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.03);

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


.tr-included__layer-button::before {
	content: "";

	position: absolute;
	z-index: -1;

	inset: 0;

	background:
		radial-gradient(
			380px circle at 18% 50%,
			rgba(25, 224, 120, 0.12),
			transparent 68%
		);

	opacity: 0;

	transition:
		opacity 350ms ease;
}


.tr-included__layer.is-active
.tr-included__layer-button {
	border-color:
		rgba(25, 224, 120, 0.17) !important;

	background:
		linear-gradient(
			105deg,
			rgba(25, 224, 120, 0.07),
			rgba(255, 255, 255, 0.018) 48%,
			rgba(20, 215, 232, 0.025)
		) !important;

	box-shadow:
		0 22px 55px rgba(0, 0, 0, 0.16),
		0 0 30px rgba(25, 224, 120, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);

	transform:
		translateX(14px);
}


.tr-included__layer.is-active
.tr-included__layer-button::before {
	opacity: 1;
}


/* =========================================================
 * Number
 * ======================================================= */

.tr-included__layer-number {
	color:
		transparent;

	font-size: 44px;
	font-weight: 850;

	line-height: 0.8;

	letter-spacing:
		-0.07em;

	-webkit-text-stroke:
		1px
		rgba(255, 255, 255, 0.17);

	transition:
		-webkit-text-stroke 350ms ease;
}


.tr-included__layer.is-active
.tr-included__layer-number {
	-webkit-text-stroke:
		1px
		rgba(25, 224, 120, 0.53);
}


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

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

	width: 58px;
	height: 58px;

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

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

	color:
		rgba(222, 235, 230, 0.55);

	clip-path:
		polygon(
			0 0,
			calc(100% - 12px) 0,
			100% 12px,
			100% 100%,
			12px 100%,
			0 calc(100% - 12px)
		);

	transition:
		color 350ms ease,
		background 350ms ease,
		transform 500ms var(--tr-ease);
}


.tr-included__layer-icon svg {
	width: 27px;
	height: 27px;
}


.tr-included__layer.is-active
.tr-included__layer-icon {
	color:
		var(--tr-green);

	background:
		rgba(25, 224, 120, 0.09);

	transform:
		rotate(-5deg)
		scale(1.05);
}


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

.tr-included__layer-copy {
	display: grid;
	gap: 7px;

	min-width: 0;
}


.tr-included__layer-copy strong {
	color:
		#f4faf7;

	font-size:
		clamp(16px, 1.25vw, 20px);

	font-weight: 740;

	letter-spacing:
		-0.025em;
}


.tr-included__layer-copy span {
	max-width: 670px;

	color:
		rgba(211, 225, 220, 0.53);

	font-size: 12.5px;

	line-height:
		1.58;
}


/* =========================================================
 * Status
 * ======================================================= */

.tr-included__layer-status {
	display: flex;
	align-items: center;
	gap: 7px;

	justify-self: end;

	color:
		rgba(211, 226, 220, 0.35);

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

	letter-spacing:
		0.12em;
}


.tr-included__layer-status-dot {
	display: block;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background:
		#40564e;

	transition:
		background 350ms ease,
		box-shadow 350ms ease;
}


.tr-included__layer.is-active
.tr-included__layer-status {
	color:
		rgba(176, 255, 218, 0.72);
}


.tr-included__layer.is-active
.tr-included__layer-status-dot {
	background:
		var(--tr-green);

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


/* =========================================================
 * Arrow
 * ======================================================= */

.tr-included__layer-arrow {
	display: grid;
	place-items: center;

	width: 42px;
	height: 42px;

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

	border-radius: 50%;

	color:
		rgba(215, 229, 223, 0.38);

	transition:
		color 350ms ease,
		background 350ms ease,
		transform 450ms var(--tr-ease);
}


.tr-included__layer-arrow svg {
	width: 18px;
	height: 18px;
}


.tr-included__layer.is-active
.tr-included__layer-arrow {
	color:
		#03170d;

	background:
		var(--tr-green);

	transform:
		rotate(-35deg);
}


/* =========================================================
 * Entrance
 * ======================================================= */

.tr-has-included-js
.tr-included__header,
.tr-has-included-js
.tr-included__monitor,
.tr-has-included-js
.tr-included__stack {
	opacity: 0;

	transform:
		translateY(24px);
}


.tr-has-included-js
.tr-included.is-inview
.tr-included__header,
.tr-has-included-js
.tr-included.is-inview
.tr-included__monitor,
.tr-has-included-js
.tr-included.is-inview
.tr-included__stack {
	opacity: 1;

	transform:
		translateY(0);

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


.tr-has-included-js
.tr-included.is-inview
.tr-included__monitor {
	transition-delay:
		100ms;
}


.tr-has-included-js
.tr-included.is-inview
.tr-included__stack {
	transition-delay:
		170ms;
}


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

@media (max-width: 1050px) {

	.tr-included__system {
		grid-template-columns:
			220px
			minmax(0, 1fr);

		gap: 30px;
	}


	.tr-included__layer-button {
		grid-template-columns:
			52px
			50px
			minmax(0, 1fr)
			40px;
	}


	.tr-included__layer-status {
		display: none;
	}


	.tr-included__layer-icon {
		width: 50px;
		height: 50px;
	}

}


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

@media (max-width: 720px) {

	.tr-included {
		padding:
			58px
			0
			62px;
	}


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


	.tr-included__heading-row {
		display: block;
	}


	.tr-included__title {
		font-size:
			clamp(38px, 10.5vw, 51px);
	}


	.tr-included__range {
		display: none;
	}


	.tr-included__system {
		display: block;
	}


	.tr-included__monitor {
		position: relative;

		top: auto;

		margin-bottom: 20px;
	}


	.tr-included__stack {
		padding-left: 22px;
	}


	.tr-included__layer,
	.tr-included__layer:nth-child(3),
	.tr-included__layer:nth-child(4),
	.tr-included__layer:nth-child(5) {
		margin-left: 0;
	}


	.tr-included__layer-button,
	.tr-included__layer-button:hover,
	.tr-included__layer-button:focus {
		grid-template-columns:
			40px
			42px
			1fr
			34px;

		gap: 10px;

		min-height: 88px;

		padding:
			12px;
	}


	.tr-included__layer.is-active
	.tr-included__layer-button {
		transform:
			translateX(5px);
	}


	.tr-included__layer-number {
		font-size: 30px;
	}


	.tr-included__layer-icon {
		width: 42px;
		height: 42px;
	}


	.tr-included__layer-icon svg {
		width: 21px;
		height: 21px;
	}


	.tr-included__layer-copy strong {
		font-size: 15px;
	}


	.tr-included__layer-copy span {
		display: none;
	}


	.tr-included__layer-arrow {
		width: 34px;
		height: 34px;
	}


	.tr-included__layer::before {
		left: -22px;

		width: 15px;
	}


	.tr-included__layer::after {
		left: -27px;
	}

}


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

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

	.tr-included__layer,
	.tr-included__layer-button,
	.tr-included__layer-icon,
	.tr-included__layer-arrow,
	.tr-included__monitor-bars span {
		transition: none;
	}


	.tr-has-included-js
	.tr-included__header,
	.tr-has-included-js
	.tr-included__monitor,
	.tr-has-included-js
	.tr-included__stack {
		opacity: 1;

		transform: none;

		transition: none;
	}

}