/* =========================================================
 * Tech Resolve — Custom Website Development Hero
 * ======================================================= */

.tr-custom-hero {
	position: relative;
	overflow: hidden;

	min-height:
		820px;

	padding:
		clamp(120px, 10vw, 175px)
		var(--tr-gutter)
		clamp(60px, 6vw, 90px);

	color:
		#fff;

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


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

.tr-custom-hero__background,
.tr-custom-hero__grid,
.tr-custom-hero__glow,
.tr-custom-hero__line {
	position: absolute;

	pointer-events: none;
}


.tr-custom-hero__background {
	inset: 0;
}


.tr-custom-hero__grid {
	inset: 0;

	opacity: .17;

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

	background-size:
		58px 58px;
}


.tr-custom-hero__glow--green {
	top: -300px;
	right: -200px;

	width: 850px;
	height: 850px;

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


.tr-custom-hero__glow--blue {
	bottom: -380px;
	left: 8%;

	width: 760px;
	height: 760px;

	background:
		radial-gradient(
			circle,
			rgba(57, 120, 255, .065),
			transparent 69%
		);
}


.tr-custom-hero__line {
	top: -40%;
	left: 56%;

	width: 1px;
	height: 180%;

	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(20, 215, 232, .16),
			transparent
		);

	transform:
		rotate(18deg);
}


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

.tr-custom-hero__shell {
	position: relative;
	z-index: 2;

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

	margin:
		0 auto;
}


/* =========================================================
 * Content
 * ======================================================= */

.tr-custom-hero__content {
	display: grid;

	grid-template-columns:
		minmax(0, .9fr)
		minmax(560px, 1.1fr);

	align-items: center;

	gap:
		clamp(60px, 7vw, 110px);
}


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

.tr-custom-hero__copy {
	min-width: 0;
}


.tr-custom-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 22px;

	color:
		var(--tr-green);

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


.tr-custom-hero__eyebrow > span {
	width: 26px;
	height: 1px;

	background:
		var(--tr-green);

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


/* =========================================================
 * Title
 * ======================================================= */

.tr-custom-hero__copy h1 {
	max-width: 840px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(52px, 5.8vw, 86px);

	font-weight: 850;
	line-height: .96;
	letter-spacing: -.062em;
}


/* =========================================================
 * Description
 * ======================================================= */

.tr-custom-hero__description {
	max-width: 670px;

	margin:
		30px
		0
		0;

	color:
		rgba(255, 255, 255, .5);

	font-size:
		clamp(14px, 1.2vw, 17px);

	line-height: 1.8;
}


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

.tr-custom-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 11px;

	margin-top: 35px;
}


.tr-custom-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 54px;
	padding:
		0 21px;

	border-radius:
		999px;

	font-size: 10px;
	font-weight: 800;
	text-decoration: none;

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


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

.tr-custom-hero .tr-custom-hero__button--primary,
.tr-custom-hero .tr-custom-hero__button--primary:hover,
.tr-custom-hero .tr-custom-hero__button--primary:focus {
	color:
		#06100d !important;

	background:
		var(--tr-green) !important;

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

	box-shadow:
		0 18px 40px rgba(25, 224, 120, .12) !important;
}


.tr-custom-hero .tr-custom-hero__button--primary:hover,
.tr-custom-hero .tr-custom-hero__button--primary:focus {
	background:
		#42eb92 !important;

	border-color:
		#42eb92 !important;

	transform:
		translateY(-2px);
}


.tr-custom-hero__button--primary svg {
	width: 17px;
	height: 17px;
}


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

.tr-custom-hero .tr-custom-hero__button--secondary,
.tr-custom-hero .tr-custom-hero__button--secondary:hover,
.tr-custom-hero .tr-custom-hero__button--secondary:focus {
	color:
		rgba(255, 255, 255, .68) !important;

	background:
		rgba(255, 255, 255, .02) !important;

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

	box-shadow:
		none !important;
}


.tr-custom-hero .tr-custom-hero__button--secondary:hover,
.tr-custom-hero .tr-custom-hero__button--secondary:focus {
	color:
		#fff !important;

	background:
		rgba(255, 255, 255, .05) !important;

	border-color:
		rgba(255, 255, 255, .2) !important;

	transform:
		translateY(-2px);
}


/* =========================================================
 * Principle
 * ======================================================= */

.tr-custom-hero__principle {
	display: grid;
	grid-template-columns:
		110px
		minmax(0, 1fr);
	gap: 18px;

	max-width: 660px;

	margin-top:
		clamp(45px, 5vw, 66px);

	padding-top: 21px;

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


.tr-custom-hero__principle > span {
	color:
		var(--tr-green);

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .11em;
}


.tr-custom-hero__principle > p {
	margin: 0;

	color:
		rgba(255, 255, 255, .32);

	font-size: 9px;
	line-height: 1.65;
}


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

.tr-custom-hero__system {
	position: relative;

	min-width: 0;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, .09);

	border-radius:
		25px;

	background:
		#08140f;

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


.tr-custom-hero__system::before {
	content: "";

	position: absolute;
	top: -170px;
	right: -170px;

	width: 430px;
	height: 430px;

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

	pointer-events: none;
}


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

.tr-custom-hero__system-top {
	position: relative;
	z-index: 2;

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

	min-height: 51px;
	padding:
		0 18px;

	color:
		rgba(255, 255, 255, .25);

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

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .11em;
}


.tr-custom-hero__system-top > div {
	display: flex;
	align-items: center;
	gap: 8px;
}


.tr-custom-hero__status {
	width: 6px;
	height: 6px;

	background:
		var(--tr-green);

	border-radius: 50%;

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


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

.tr-custom-hero__system-heading {
	position: relative;
	z-index: 2;

	padding:
		27px 28px;

	border-bottom:
		1px solid rgba(255, 255, 255, .07);
}


.tr-custom-hero__system-heading > span {
	display: block;

	margin-bottom: 8px;

	color:
		rgba(255, 255, 255, .18);

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .1em;
}


.tr-custom-hero__system-heading h2 {
	max-width: 520px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(25px, 2.7vw, 38px);

	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.04em;
}


/* =========================================================
 * Diagram
 * ======================================================= */

.tr-custom-hero__diagram {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(150px, .9fr)
		minmax(170px, .8fr)
		minmax(150px, .9fr);

	align-items: center;

	gap: 20px;

	padding:
		30px 24px;
}


/* =========================================================
 * Column
 * ======================================================= */

.tr-custom-hero__column {
	min-width: 0;
}


.tr-custom-hero__column-label {
	display: grid;
	gap: 5px;

	margin-bottom: 14px;
}


.tr-custom-hero__column-label > span {
	color:
		rgba(255, 255, 255, .16);

	font-size: 5px;
	font-weight: 800;
	letter-spacing: .1em;
}


.tr-custom-hero__column-label > strong {
	color:
		rgba(255, 255, 255, .43);

	font-size: 6px;
	font-weight: 800;
	letter-spacing: .09em;
}


/* =========================================================
 * Items
 * ======================================================= */

.tr-custom-hero__items {
	display: grid;
	gap: 7px;
}


.tr-custom-hero__item {
	position: relative;

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

	align-items: center;
	gap: 9px;

	min-height: 45px;
	padding:
		8px 10px;

	background:
		rgba(255, 255, 255, .018);

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


.tr-custom-hero__column--input .tr-custom-hero__item::after {
	content: "";

	position: absolute;
	top: 50%;
	right: -21px;

	width: 20px;
	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .08),
			rgba(25, 224, 120, .28)
		);
}


.tr-custom-hero__column--output .tr-custom-hero__item::before {
	content: "";

	position: absolute;
	top: 50%;
	left: -21px;

	width: 20px;
	height: 1px;

	background:
		linear-gradient(
			to left,
			rgba(255, 255, 255, .08),
			rgba(20, 215, 232, .25)
		);
}


.tr-custom-hero__item > span {
	display: grid;
	place-items: center;

	width: 25px;
	height: 25px;

	color:
		var(--tr-green);

	background:
		rgba(25, 224, 120, .035);

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

	border-radius:
		50%;

	font-size: 5px;
	font-weight: 850;
}


.tr-custom-hero__column--output .tr-custom-hero__item > span {
	color:
		var(--tr-spectrum-cyan);

	background:
		rgba(20, 215, 232, .025);

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


.tr-custom-hero__item > strong {
	min-width: 0;

	color:
		rgba(255, 255, 255, .51);

	font-size: 6px;
	font-weight: 750;
	line-height: 1.3;
}


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

.tr-custom-hero__core {
	position: relative;

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

	min-height: 365px;
}


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

.tr-custom-hero__core-ring {
	position: relative;

	display: grid;
	place-items: center;

	width: 144px;
	height: 144px;

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

	border-radius: 50%;

	box-shadow:
		inset 0 0 40px rgba(25, 224, 120, .025),
		0 0 55px rgba(25, 224, 120, .035);
}


.tr-custom-hero__core-ring::before,
.tr-custom-hero__core-ring::after {
	content: "";

	position: absolute;

	border-radius: 50%;
}


.tr-custom-hero__core-ring::before {
	inset: 12px;

	border:
		1px dashed rgba(255, 255, 255, .08);
}


.tr-custom-hero__core-ring::after {
	inset: 29px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, .1),
			rgba(25, 224, 120, .015) 58%,
			transparent 59%
		);

	border:
		1px solid rgba(25, 224, 120, .15);
}


.tr-custom-hero__core-ring > div {
	position: relative;
	z-index: 2;

	display: grid;
	justify-items: center;
	gap: 3px;
}


.tr-custom-hero__core-ring span,
.tr-custom-hero__core-ring small {
	color:
		rgba(255, 255, 255, .28);

	font-size: 5px;
	font-weight: 800;
	letter-spacing: .1em;
}


.tr-custom-hero__core-ring strong {
	color:
		var(--tr-green);

	font-size: 18px;
	font-weight: 850;
	letter-spacing: -.04em;
}


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

.tr-custom-hero__core-label {
	display: grid;
	justify-items: center;
	gap: 5px;

	margin-top: 19px;

	text-align: center;
}


.tr-custom-hero__core-label > span {
	color:
		rgba(255, 255, 255, .17);

	font-size: 5px;
	font-weight: 800;
	letter-spacing: .1em;
}


.tr-custom-hero__core-label > strong {
	color:
		rgba(255, 255, 255, .58);

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .08em;
}


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

.tr-custom-hero__core-signals {
	display: flex;
	align-items: center;
	gap: 7px;

	margin-top: 19px;

	color:
		rgba(255, 255, 255, .17);

	font-size: 4px;
	font-weight: 800;
	letter-spacing: .08em;
}


.tr-custom-hero__core-signals i {
	width: 11px;
	height: 1px;

	background:
		rgba(25, 224, 120, .23);
}


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

.tr-custom-hero__system-bottom {
	position: relative;
	z-index: 2;

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

	min-height: 49px;
	padding:
		0 18px;

	color:
		rgba(255, 255, 255, .17);

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

	font-size: 5px;
	font-weight: 800;
	letter-spacing: .08em;
}


.tr-custom-hero__system-bottom i {
	flex: 1;

	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .04),
			rgba(25, 224, 120, .23),
			rgba(255, 255, 255, .04)
		);
}


.tr-custom-hero__system-bottom strong {
	color:
		var(--tr-green);

	font-size: inherit;
	font-weight: inherit;
}


/* =========================================================
 * Bottom Rail
 * ======================================================= */

.tr-custom-hero__rail {
	display: grid;

	grid-template-columns:
		auto
		1fr
		auto
		1fr
		auto
		1fr
		auto
		1fr
		auto;

	align-items: center;

	gap: 14px;

	margin-top:
		clamp(65px, 7vw, 95px);

	padding-top: 22px;

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


.tr-custom-hero__rail > div {
	display: flex;
	align-items: center;
	gap: 7px;
}


.tr-custom-hero__rail > div span {
	color:
		rgba(255, 255, 255, .17);

	font-size: 5px;
	font-weight: 800;
}


.tr-custom-hero__rail > div strong {
	color:
		rgba(255, 255, 255, .37);

	font-size: 5px;
	font-weight: 800;
	letter-spacing: .09em;
}


.tr-custom-hero__rail > i {
	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .035),
			rgba(25, 224, 120, .23),
			rgba(255, 255, 255, .035)
		);
}


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

@media (max-width: 1150px) {

	.tr-custom-hero__content {
		grid-template-columns: 1fr;

		gap: 70px;
	}


	.tr-custom-hero__copy {
		max-width: 900px;
	}


	.tr-custom-hero__system {
		width:
			min(100%, 900px);
	}

}


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

@media (max-width: 720px) {

	.tr-custom-hero {
		min-height: 0;

		padding:
			100px
			16px
			70px;
	}


	.tr-custom-hero__content {
		gap: 55px;
	}


	.tr-custom-hero__copy h1 {
		font-size:
			clamp(45px, 12vw, 62px);
	}


	.tr-custom-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}


	.tr-custom-hero__button {
		width: 100%;
	}


	.tr-custom-hero__principle {
		grid-template-columns: 1fr;
		gap: 9px;
	}


	.tr-custom-hero__system-heading {
		padding:
			25px 20px;
	}


	.tr-custom-hero__diagram {
		grid-template-columns: 1fr;

		gap: 25px;

		padding:
			24px 18px;
	}


	.tr-custom-hero__column--input .tr-custom-hero__item::after,
	.tr-custom-hero__column--output .tr-custom-hero__item::before {
		display: none;
	}


	.tr-custom-hero__core {
		min-height: 250px;

		padding:
			15px 0;
	}


	.tr-custom-hero__core-ring {
		width: 128px;
		height: 128px;
	}


	.tr-custom-hero__system-bottom {
		display: none;
	}


	.tr-custom-hero__rail {
		grid-template-columns:
			repeat(5, auto);

		justify-content: space-between;

		gap: 8px;

		overflow-x: auto;
	}


	.tr-custom-hero__rail > i {
		display: none;
	}


	.tr-custom-hero__rail > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}

}