/* =========================================================
 * Tech Resolve — Custom Website Development Architecture
 * System Stack
 * Version: 2.0.0
 * ======================================================= */
/* =========================================================
 * Section
 * ======================================================= */
.tr-custom-architecture {
	position: relative;
	overflow: hidden;
	padding:
		clamp(105px, 9vw, 155px)
		var(--tr-gutter);
	color: #ffffff;
	background:
		linear-gradient(
			145deg,
			#040b08,
			#07140f 55%,
			#06100d
		);
}
/* =========================================================
 * Background
 * ======================================================= */
.tr-custom-architecture__background,
.tr-custom-architecture__grid,
.tr-custom-architecture__glow,
.tr-custom-architecture__axis {
	position: absolute;
	pointer-events: none;
}
.tr-custom-architecture__background {
	inset: 0;
}
.tr-custom-architecture__grid {
	inset: 0;
	opacity: 0.11;
	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:
		62px
		62px;
}
.tr-custom-architecture__glow--green {
	top: -330px;
	right: -280px;
	width: 820px;
	height: 820px;
	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.1),
			transparent 68%
		);
}
.tr-custom-architecture__glow--violet {
	bottom: -430px;
	left: -300px;
	width: 820px;
	height: 820px;
	background:
		radial-gradient(
			circle,
			rgba(135, 87, 255, 0.055),
			transparent 69%
		);
}
.tr-custom-architecture__axis {
	top: -30%;
	left: 22%;
	width: 1px;
	height: 160%;
	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(20, 215, 232, 0.12),
			transparent
		);
	transform:
		rotate(-17deg);
}
/* =========================================================
 * Shell
 * ======================================================= */
.tr-custom-architecture__shell {
	position: relative;
	z-index: 2;
	width:
		min(100%, var(--tr-container));
	margin:
		0 auto;
}
/* =========================================================
 * Header
 * ======================================================= */
.tr-custom-architecture__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(330px, 0.75fr);
	align-items: end;
	gap:
		clamp(50px, 8vw, 120px);
	margin-bottom:
		clamp(55px, 7vw, 85px);
}
.tr-custom-architecture__eyebrow {
	display: block;
	margin-bottom: 18px;
	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-custom-architecture__heading h2 {
	max-width: 930px;
	margin: 0;
	color: #ffffff;
	font-size:
		clamp(42px, 5vw, 70px);
	font-weight: 800;
	line-height: 0.99;
	letter-spacing: -0.055em;
	text-wrap: balance;
}
.tr-custom-architecture__intro > p {
	max-width: 580px;
	margin: 0;
	color:
		rgba(255, 255, 255, 0.52);
	font-size:
		var(--tr-text-body);
	font-weight:
		var(--tr-weight-body);
	line-height:
		var(--tr-line-body);
}
.tr-custom-architecture__intro-flow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding-top: 17px;
	border-top:
		1px solid rgba(255, 255, 255, 0.08);
	color:
		rgba(255, 255, 255, 0.24);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.08em;
}
.tr-custom-architecture__intro-flow i {
	flex: 1;
	height: 1px;
	background:
		rgba(255, 255, 255, 0.08);
}
.tr-custom-architecture__intro-flow strong {
	color:
		var(--tr-green);
	font-size: inherit;
	font-weight: inherit;
}
/* =========================================================
 * Stage
 * ======================================================= */
.tr-custom-architecture__stage {
	position: relative;
	overflow: hidden;
	border-top:
		1px solid rgba(255, 255, 255, 0.09);
	border-bottom:
		1px solid rgba(255, 255, 255, 0.09);
	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.018),
			rgba(255, 255, 255, 0.006)
		);
}
.tr-custom-architecture__stage::before {
	content: "";
	position: absolute;
	top: -240px;
	right: -190px;
	width: 520px;
	height: 520px;
	pointer-events: none;
	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.08),
			transparent 68%
		);
}
/* =========================================================
 * Stage Top
 * ======================================================= */
.tr-custom-architecture__stage-top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 54px;
	padding:
		0 22px;
	border-bottom:
		1px solid rgba(255, 255, 255, 0.065);
	color:
		rgba(255, 255, 255, 0.27);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.1em;
}
.tr-custom-architecture__stage-top > div {
	display: flex;
	align-items: center;
	gap: 9px;
}
.tr-custom-architecture__stage-top > strong {
	color:
		rgba(255, 255, 255, 0.18);
	font-size: inherit;
	font-weight: inherit;
}
.tr-custom-architecture__status {
	width: 6px;
	height: 6px;
	background:
		var(--tr-green);
	border-radius: 50%;
	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.65);
}
/* =========================================================
 * Stage Grid
 * ======================================================= */
.tr-custom-architecture__stage-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns:
		minmax(250px, 0.38fr)
		minmax(0, 1fr);
}
/* =========================================================
 * Overview
 * ======================================================= */
.tr-custom-architecture__overview {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding:
		clamp(34px, 4vw, 48px);
	border-right:
		1px solid rgba(255, 255, 255, 0.065);
	background:
		rgba(0, 0, 0, 0.08);
}
.tr-custom-architecture__overview-label {
	display: block;
	margin-bottom: 14px;
	color:
		var(--tr-green);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.11em;
}
.tr-custom-architecture__overview h3 {
	max-width: 420px;
	margin: 0;
	color: #ffffff;
	font-size:
		clamp(28px, 3vw, 42px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.043em;
}
/* =========================================================
 * Depth
 * ======================================================= */
.tr-custom-architecture__depth {
	display: grid;
	grid-template-columns:
		auto
		1fr
		auto;
	align-items: center;
	gap: 14px;
	margin-top:
		clamp(50px, 6vw, 76px);
}
.tr-custom-architecture__depth > div {
	display: grid;
	gap: 6px;
}
.tr-custom-architecture__depth > div:last-child {
	text-align: right;
}
.tr-custom-architecture__depth span {
	color:
		rgba(255, 255, 255, 0.22);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
}
.tr-custom-architecture__depth strong {
	color:
		rgba(255, 255, 255, 0.44);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.08em;
}
.tr-custom-architecture__depth > i {
	height: 1px;
	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 0.06),
			rgba(25, 224, 120, 0.38),
			rgba(20, 215, 232, 0.24)
		);
}
/* =========================================================
 * Dependencies
 * ======================================================= */
.tr-custom-architecture__dependencies {
	margin-top: auto;
	padding-top: 42px;
}
.tr-custom-architecture__dependencies > span {
	display: block;
	margin-bottom: 12px;
	color:
		rgba(255, 255, 255, 0.22);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.1em;
}
.tr-custom-architecture__dependencies > div {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.tr-custom-architecture__dependencies strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 31px;
	padding:
		0 11px;
	color:
		var(--tr-spectrum-cyan);
	border:
		1px solid rgba(20, 215, 232, 0.12);
	background:
		rgba(20, 215, 232, 0.025);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.08em;
}
/* =========================================================
 * Stack
 * ======================================================= */
.tr-custom-architecture__stack {
	position: relative;
	min-width: 0;
	padding:
		24px
		30px;
}
.tr-custom-architecture__stack-line {
	position: absolute;
	top: 38px;
	bottom: 38px;
	left: 55px;
	width: 1px;
	background:
		linear-gradient(
			to bottom,
			rgba(25, 224, 120, 0.32),
			rgba(255, 255, 255, 0.07),
			rgba(135, 87, 255, 0.26)
		);
}
/* =========================================================
 * Layer
 * ======================================================= */
.tr-custom-architecture__layer {
	position: relative;
	display: grid;
	grid-template-columns:
		88px
		minmax(180px, 0.7fr)
		minmax(160px, 0.48fr)
		minmax(220px, 1fr)
		34px;
	align-items: center;
	gap: 22px;
	min-height: 92px;
	margin-left: calc(var(--tr-layer-offset, 0) * 8px);
	padding:
		14px
		18px;
	border:
		1px solid rgba(255, 255, 255, 0.065);
	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.025),
			rgba(255, 255, 255, 0.009)
		);
	transition:
		transform 180ms var(--tr-ease),
		border-color 180ms ease,
		background 180ms ease;
}
.tr-custom-architecture__layer + .tr-custom-architecture__layer {
	margin-top: 8px;
}
.tr-custom-architecture__layer:nth-child(2) {
	--tr-layer-offset: 0;
}
.tr-custom-architecture__layer:nth-child(3) {
	--tr-layer-offset: 1;
}
.tr-custom-architecture__layer:nth-child(4) {
	--tr-layer-offset: 2;
}
.tr-custom-architecture__layer:nth-child(5) {
	--tr-layer-offset: 3;
}
.tr-custom-architecture__layer:nth-child(6) {
	--tr-layer-offset: 4;
}
.tr-custom-architecture__layer:nth-child(7) {
	--tr-layer-offset: 5;
}
.tr-custom-architecture__layer:hover {
	border-color:
		rgba(25, 224, 120, 0.18);
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.045),
			rgba(255, 255, 255, 0.012)
		);
	transform:
		translateX(4px);
}
/* =========================================================
 * Layer Meta
 * ======================================================= */
.tr-custom-architecture__layer-meta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
}
.tr-custom-architecture__layer-meta > span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color:
		rgba(255, 255, 255, 0.28);
	border:
		1px solid rgba(255, 255, 255, 0.11);
	border-radius: 50%;
	background: #08140f;
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
}
.tr-custom-architecture__layer:hover .tr-custom-architecture__layer-meta > span {
	color:
		var(--tr-green);
	border-color:
		rgba(25, 224, 120, 0.25);
}
.tr-custom-architecture__layer-meta > strong {
	color:
		var(--tr-green);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.08em;
}
/* =========================================================
 * Layer Main
 * ======================================================= */
.tr-custom-architecture__layer-main {
	min-width: 0;
}
.tr-custom-architecture__layer-main h3 {
	margin: 0;
	color:
		rgba(255, 255, 255, 0.82);
	font-size: 19px;
	font-weight:
		var(--tr-weight-bold);
	line-height: 1.12;
	letter-spacing: -0.025em;
}
.tr-custom-architecture__layer-main p {
	max-width: 560px;
	margin:
		7px
		0
		0;
	color:
		rgba(255, 255, 255, 0.37);
	font-size:
		var(--tr-text-card);
	font-weight:
		var(--tr-weight-body);
	line-height:
		var(--tr-line-card);
}
/* =========================================================
 * Layer Role
 * ======================================================= */
.tr-custom-architecture__layer-role {
	min-width: 0;
	padding-left: 18px;
	border-left:
		1px solid rgba(255, 255, 255, 0.06);
}
.tr-custom-architecture__layer-role > span {
	display: block;
	margin-bottom: 6px;
	color:
		rgba(255, 255, 255, 0.2);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.09em;
}
.tr-custom-architecture__layer-role > strong {
	display: block;
	color:
		rgba(255, 255, 255, 0.52);
	font-size:
		var(--tr-text-card);
	font-weight:
		var(--tr-weight-body);
	line-height:
		var(--tr-line-card);
}
/* =========================================================
 * Layer Port
 * ======================================================= */
.tr-custom-architecture__layer-port {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.tr-custom-architecture__layer-port > i {
	width: 18px;
	height: 1px;
	background:
		rgba(25, 224, 120, 0.25);
}
.tr-custom-architecture__layer-port > span {
	width: 7px;
	height: 7px;
	border:
		1px solid var(--tr-green);
	border-radius: 50%;
	background: #08140f;
	box-shadow:
		0 0 10px rgba(25, 224, 120, 0.24);
}
/* =========================================================
 * Stage Bottom
 * ======================================================= */
.tr-custom-architecture__stage-bottom {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
	padding:
		0 22px;
	border-top:
		1px solid rgba(255, 255, 255, 0.065);
	color:
		rgba(255, 255, 255, 0.21);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing: 0.08em;
}
.tr-custom-architecture__stage-bottom i {
	flex: 1;
	height: 1px;
	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 0.04),
			rgba(25, 224, 120, 0.23),
			rgba(255, 255, 255, 0.04)
		);
}
.tr-custom-architecture__stage-bottom strong {
	color:
		var(--tr-green);
	font-size: inherit;
	font-weight: inherit;
}
/* =========================================================
 * Tablet
 * ======================================================= */
@media (max-width: 1120px) {
	.tr-custom-architecture__stage-grid {
		grid-template-columns:
			1fr;
	}
	.tr-custom-architecture__overview {
		min-height: 330px;
		border-right: 0;
		border-bottom:
			1px solid rgba(255, 255, 255, 0.065);
	}
	.tr-custom-architecture__dependencies {
		margin-top: 45px;
	}
	.tr-custom-architecture__layer {
		grid-template-columns:
			78px
			minmax(180px, 0.75fr)
			minmax(150px, 0.5fr)
			minmax(0, 1fr);
		margin-left: 0;
	}
	.tr-custom-architecture__layer-port {
		display: none;
	}
}
/* =========================================================
 * Mobile
 * ======================================================= */
@media (max-width: 720px) {
	.tr-custom-architecture {
		padding:
			90px
			16px;
	}
	.tr-custom-architecture__header {
		grid-template-columns:
			1fr;
		gap: 28px;
		margin-bottom: 48px;
	}
	.tr-custom-architecture__heading h2 {
		font-size:
			clamp(39px, 10.5vw, 55px);
	}
	.tr-custom-architecture__intro-flow {
		display: none;
	}
	.tr-custom-architecture__stage-top > strong {
		display: none;
	}
	.tr-custom-architecture__overview {
		min-height: 0;
		padding:
			30px
			22px;
	}
	.tr-custom-architecture__overview h3 {
		font-size:
			clamp(28px, 8.5vw, 39px);
	}
	.tr-custom-architecture__depth {
		margin-top: 40px;
	}
	.tr-custom-architecture__stack {
		padding:
			18px;
	}
	.tr-custom-architecture__stack-line {
		display: none;
	}
	.tr-custom-architecture__layer {
		grid-template-columns:
			54px
			minmax(0, 1fr);
		gap:
			12px
			14px;
		min-height: 0;
		margin-left: 0;
		padding:
			20px
			16px;
	}
	.tr-custom-architecture__layer-meta {
		grid-row:
			1 / 3;
		flex-direction: column;
		align-items: flex-start;
	}
	.tr-custom-architecture__layer-main,
	.tr-custom-architecture__layer-role {
		grid-column:
			2;
	}
	.tr-custom-architecture__layer-role {
		padding:
			13px 0 0;
		border-top:
			1px solid rgba(255, 255, 255, 0.06);
		border-left: 0;
	}
	.tr-custom-architecture__stage-bottom {
		display: none;
	}
}
/* =========================================================
 * Reduced Motion
 * ======================================================= */
@media (prefers-reduced-motion: reduce) {
	.tr-custom-architecture__layer {
		transition: none;
	}
}