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

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

	padding:
		clamp(95px, 9vw, 155px)
		var(--tr-gutter)
		clamp(105px, 11vw, 175px);

	color: #fff;

	background:
		linear-gradient(
			135deg,
			#06100c,
			#091812 52%,
			#06100d
		);
}


.tr-website-hero__background,
.tr-website-hero__grid,
.tr-website-hero__glow,
.tr-website-hero__beam {
	position: absolute;

	pointer-events: none;
}


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


.tr-website-hero__grid {
	inset: 0;

	opacity: 0.18;

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

	background-size: 54px 54px;
}


.tr-website-hero__glow--green {
	top: -220px;
	right: -80px;

	width: 680px;
	height: 680px;

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


.tr-website-hero__glow--cyan {
	right: 32%;
	bottom: -320px;

	width: 640px;
	height: 640px;

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


.tr-website-hero__beam {
	top: -40%;
	right: 29%;

	width: 1px;
	height: 160%;

	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(25,224,120,.26),
			transparent
		);

	transform: rotate(28deg);
}


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

	display: grid;
	grid-template-columns:
		minmax(0,1.04fr)
		minmax(440px,.96fr);
	align-items: center;
	gap: clamp(55px,8vw,125px);

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


/* Copy */

.tr-website-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;

	margin-bottom: 24px;

	color: #19e078;

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


.tr-website-hero__eyebrow span {
	width: 8px;
	height: 8px;

	background: #19e078;

	border-radius: 50%;

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


.tr-website-hero__copy h1 {
	max-width: 820px;
	margin: 0;

	color: #fff;

	font-size: clamp(52px,6.2vw,92px);
	font-weight: 800;
	line-height: .97;
	letter-spacing: -.058em;
}


.tr-website-hero__copy > p {
	max-width: 690px;
	margin: 30px 0 0;

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

	font-size: clamp(15px,1.3vw,18px);
	line-height: 1.78;
}


.tr-website-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;

	margin-top: 38px;
}


.tr-website-hero__primary,
.tr-website-hero__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;

	min-height: 53px;
	padding: 0 22px;

	border-radius: 999px;

	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
}


.tr-website-hero__primary {
	color: #06100d;

	background: #19e078;

	border: 1px solid #19e078;
}


.tr-website-hero__primary:hover {
	color: #06100d;

	background: #35ef8d;
}


.tr-website-hero__primary svg {
	width: 17px;
	height: 17px;
}


.tr-website-hero__secondary {
	color: rgba(255,255,255,.67);

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

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


.tr-website-hero__secondary:hover {
	color: #fff;

	border-color: rgba(255,255,255,.24);
}


.tr-website-hero__micro {
	display: flex;
	align-items: center;
	gap: 13px;

	margin-top: 50px;

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

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


.tr-website-hero__micro i {
	width: 30px;
	height: 1px;

	background: rgba(255,255,255,.15);
}


/* Console */

.tr-website-hero__console {
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.052),
			rgba(255,255,255,.015)
		);

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

	box-shadow:
		0 35px 100px rgba(0,0,0,.26);
}


.tr-website-hero__console-top,
.tr-website-hero__console-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	padding: 16px 19px;

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

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


.tr-website-hero__console-top {
	border-bottom: 1px solid rgba(255,255,255,.07);
}


.tr-website-hero__console-top div {
	display: flex;
	align-items: center;
	gap: 7px;

	color: #19e078;
}


.tr-website-hero__console-top i {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;

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


/* Mock browser */

.tr-website-hero__browser {
	margin: 19px;

	background: #0b1712;

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


.tr-website-hero__browser-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;

	height: 38px;
	padding: 0 13px;

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


.tr-website-hero__browser-bar > div {
	display: flex;
	gap: 5px;
}


.tr-website-hero__browser-bar span {
	width: 5px;
	height: 5px;

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

	border-radius: 50%;
}


.tr-website-hero__browser-bar > i {
	width: 42%;
	height: 5px;

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

	border-radius: 999px;
}


.tr-website-hero__browser-layout {
	display: grid;
	grid-template-columns:
		1fr .9fr;
	gap: 18px;

	min-height: 180px;
	padding: 25px;
}


.tr-website-hero__browser-copy span {
	display: block;

	width: 34%;
	height: 5px;

	background: #19e078;

	border-radius: 999px;
}


.tr-website-hero__browser-copy strong {
	display: block;

	height: 14px;
	margin-top: 14px;

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

	border-radius: 3px;
}


.tr-website-hero__browser-copy strong:nth-child(3) {
	width: 72%;
}


.tr-website-hero__browser-copy i {
	display: block;

	width: 70px;
	height: 25px;
	margin-top: 20px;

	background: #19e078;

	border-radius: 999px;
}


.tr-website-hero__browser-art {
	position: relative;

	min-height: 125px;

	background:
		linear-gradient(
			135deg,
			rgba(25,224,120,.13),
			rgba(20,215,232,.05)
		);

	border: 1px solid rgba(25,224,120,.12);
	border-radius: 10px;
}


.tr-website-hero__browser-art span,
.tr-website-hero__browser-art i {
	position: absolute;

	border: 1px solid rgba(25,224,120,.22);
	border-radius: 50%;
}


.tr-website-hero__browser-art span {
	inset: 26px;
}


.tr-website-hero__browser-art i:nth-child(2) {
	inset: 43px;
}


.tr-website-hero__browser-art i:nth-child(3) {
	top: 50%;
	left: 50%;

	width: 9px;
	height: 9px;

	background: #19e078;
	border: 0;

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


/* Signals */

.tr-website-hero__signals {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 7px;

	padding: 0 19px 19px;
}


.tr-website-hero__signal {
	padding: 11px 12px;

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

	border: 1px solid rgba(255,255,255,.06);
	border-radius: 9px;
}


.tr-website-hero__signal-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
}


.tr-website-hero__signal-head > span {
	color: #19e078;

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


.tr-website-hero__signal-head strong {
	color: rgba(255,255,255,.67);

	font-size: 8px;
}


.tr-website-hero__signal-head small {
	color: rgba(255,255,255,.31);

	font-size: 7px;
}


.tr-website-hero__signal-bar {
	overflow: hidden;

	height: 2px;
	margin-top: 9px;

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

	border-radius: 999px;
}


.tr-website-hero__signal-bar span {
	display: block;

	width: var(--tr-website-progress);
	height: 100%;

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


.tr-website-hero__console-bottom {
	justify-content: center;

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


.tr-website-hero__console-bottom i {
	width: 22px;
	height: 1px;

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


@media (max-width: 1050px) {

	.tr-website-hero__shell {
		grid-template-columns: 1fr;
	}

}