/* =========================================================
 * Tech Resolve — About Growth System
 * ======================================================= */

.tr-about-system {
	position: relative;
	overflow: hidden;

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

	color: #fff;

	background:
		#06100d;
}


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

.tr-about-system__background,
.tr-about-system__grid,
.tr-about-system__glow {
	position: absolute;

	pointer-events: none;
}


.tr-about-system__background {
	inset: 0;
}


.tr-about-system__grid {
	inset: 0;

	opacity: 0.16;

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

	background-size:
		52px 52px;
}


.tr-about-system__glow--green {
	top: -180px;
	right: 6%;

	width: 620px;
	height: 620px;

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


.tr-about-system__glow--cyan {
	bottom: -250px;
	left: 20%;

	width: 650px;
	height: 650px;

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


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

.tr-about-system__shell {
	position: relative;
	z-index: 2;

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


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

.tr-about-system__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(340px, 0.9fr);
	align-items: end;
	gap: clamp(50px, 8vw, 120px);

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


.tr-about-system__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #19e078;

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


.tr-about-system__header h2 {
	max-width: 880px;
	margin: 0;

	color: #fff;

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


.tr-about-system__intro > p {
	max-width: 560px;
	margin: 0;

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

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


.tr-about-system__range {
	display: flex;
	align-items: center;
	justify-content: space-between;

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

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


.tr-about-system__range span {
	color: rgba(255, 255, 255, 0.3);

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


.tr-about-system__range strong {
	color: #19e078;

	font-size: 10px;
	letter-spacing: 0.12em;
}


/* =========================================================
 * Console
 * ======================================================= */

.tr-about-system__console {
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.045),
			rgba(255, 255, 255, 0.012)
		);

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

	border-radius: 24px;

	box-shadow:
		0 40px 100px rgba(0, 0, 0, 0.25);
}


.tr-about-system__console-top,
.tr-about-system__console-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	padding: 17px 20px;

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

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


.tr-about-system__console-top {
	border-bottom:
		1px solid rgba(255, 255, 255, 0.075);
}


.tr-about-system__console-bottom {
	border-top:
		1px solid rgba(255, 255, 255, 0.075);
}


.tr-about-system__console-top > div,
.tr-about-system__console-bottom > div {
	display: flex;
	align-items: center;
	gap: 8px;

	color: #19e078;
}


.tr-about-system__console-top i,
.tr-about-system__console-bottom i {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;

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


/* =========================================================
 * Layers
 * ======================================================= */

.tr-about-system__layers {
	display: grid;
}


.tr-about-system__layer {
	display: grid;
	grid-template-columns:
		90px
		minmax(0, 1fr)
		minmax(160px, 240px)
		80px;
	align-items: center;
	gap: 28px;

	min-height: 130px;
	padding: 22px 25px;

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

	transition:
		background 180ms ease;
}


.tr-about-system__layer:last-child {
	border-bottom: 0;
}


.tr-about-system__layer:hover {
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.05),
			transparent
		);
}


/* =========================================================
 * Index
 * ======================================================= */

.tr-about-system__layer-index span {
	display: block;

	color: #19e078;

	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.04em;
}


.tr-about-system__layer-index small {
	display: block;

	margin-top: 6px;

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

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


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

.tr-about-system__layer-copy h3 {
	margin: 0;

	color: #fff;

	font-size: clamp(20px, 2vw, 27px);
	font-weight: 750;
	letter-spacing: -0.02em;
}


.tr-about-system__layer-copy p {
	max-width: 680px;
	margin: 10px 0 0;

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

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


/* =========================================================
 * Flow
 * ======================================================= */

.tr-about-system__layer-flow {
	display: grid;
	grid-template-columns:
		6px
		minmax(30px, 1fr)
		6px;
	align-items: center;
	gap: 9px;
}


.tr-about-system__layer-flow span {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;
}


.tr-about-system__layer-flow i {
	position: relative;

	height: 1px;

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


.tr-about-system__layer-flow i::after {
	content: "";

	position: absolute;
	top: -1px;
	left: 0;

	width: 35%;
	height: 3px;

	background:
		linear-gradient(
			to right,
			#19e078,
			#14d7e8
		);

	border-radius: 999px;

	transition:
		width 260ms var(--tr-ease);
}


.tr-about-system__layer:hover
.tr-about-system__layer-flow i::after {
	width: 100%;
}


/* =========================================================
 * State
 * ======================================================= */

.tr-about-system__layer-state {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;

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

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


.tr-about-system__layer-state i {
	width: 5px;
	height: 5px;

	background: #19e078;

	border-radius: 50%;
}


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

.tr-about-system__core {
	position: relative;

	display: grid;
	place-items: center;

	min-height: 330px;

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

	background:
		radial-gradient(
			circle at center,
			rgba(25, 224, 120, 0.055),
			transparent 48%
		);
}


.tr-about-system__core-orbit {
	position: absolute;

	width: 230px;
	height: 230px;
}


.tr-about-system__core-orbit span {
	position: absolute;

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

	border-radius: 50%;
}


.tr-about-system__core-orbit span:nth-child(1) {
	inset: 0;
}


.tr-about-system__core-orbit span:nth-child(2) {
	inset: 35px;

	border-color:
		rgba(20, 215, 232, 0.1);
}


.tr-about-system__core-orbit span:nth-child(3) {
	inset: 72px;

	border-color:
		rgba(255, 255, 255, 0.08);
}


.tr-about-system__core-center {
	position: relative;
	z-index: 2;

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

	color: #fff;
}


.tr-about-system__core-center > span {
	color: #19e078;

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


.tr-about-system__core-center strong {
	margin-top: 9px;

	font-size: 23px;
	letter-spacing: 0.08em;
}


.tr-about-system__core-center small {
	margin-top: 4px;

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

	font-size: 8px;
	letter-spacing: 0.15em;
}


.tr-about-system__core-label {
	position: absolute;
	bottom: 25px;

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

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


/* =========================================================
 * Responsive Base
 * ======================================================= */

@media (max-width: 980px) {

	.tr-about-system__header {
		grid-template-columns: 1fr;
	}


	.tr-about-system__layer {
		grid-template-columns:
			65px
			minmax(0, 1fr)
			60px;
	}


	.tr-about-system__layer-flow {
		display: none;
	}

}