/* =========================================================
 * Tech Resolve — Cinematic Growth Hero
 * Version: 2.0.0
 * ======================================================= */


/* =========================================================
 * Hero
 * ======================================================= */

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

	min-height: 860px;

	padding:
		155px
		0
		55px;

	overflow: hidden;

	background:
		#050b10;
}


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

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

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-hero__bg-orb {
	position: absolute;

	border-radius: 50%;

	pointer-events: none;
}


.tr-hero__bg-orb--green {
	top: -220px;
	right: 5%;

	width: 720px;
	height: 720px;

	background:
		radial-gradient(
			circle,
			rgba(19, 215, 112, 0.09),
			rgba(19, 215, 112, 0.025) 44%,
			transparent 70%
		);
}


.tr-hero__bg-orb--cyan {
	right: -170px;
	bottom: -330px;

	width: 720px;
	height: 720px;

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


.tr-hero__bg-grid {
	position: absolute;

	right: -4%;
	bottom: -240px;

	width: 65%;
	height: 640px;

	background-image:
		linear-gradient(
			rgba(25, 224, 120, 0.045) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.045) 1px,
			transparent 1px
		);

	background-size:
		52px
		52px;

	mask-image:
		linear-gradient(
			to top,
			#000,
			transparent 85%
		);

	transform:
		perspective(550px)
		rotateX(67deg);

	transform-origin:
		bottom;
}


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

.tr-hero__shell {
	position: relative;

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

	margin-inline: auto;
}


/* =========================================================
 * Layout
 * ======================================================= */

.tr-hero__layout {
	display: grid;

	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(540px, 1.1fr);

	align-items: center;

	gap:
		clamp(55px, 7vw, 120px);

	min-height: 650px;
}


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

.tr-hero__content {
	position: relative;
	z-index: 20;

	max-width: 690px;
}


/* =========================================================
 * Eyebrow
 * ======================================================= */

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

	margin-bottom: 23px;

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

	font-size:
		clamp(11px, 0.75vw, 13px);

	font-weight: 800;

	letter-spacing:
		0.145em;

	line-height: 1.4;

	animation:
		tr-hero-content-in
		800ms
		80ms
		var(--tr-ease)
		both;
}


.tr-hero__eyebrow-dot {
	position: relative;

	width: 7px;
	height: 7px;

	flex:
		0
		0
		7px;

	border-radius: 50%;

	background:
		var(--tr-green);

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


.tr-hero__eyebrow-dot::after {
	content: "";

	position: absolute;

	inset: -6px;

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

	border-radius: inherit;

	animation:
		tr-hero-dot-pulse
		2.1s
		ease-out
		infinite;
}


@keyframes tr-hero-dot-pulse {

	from {
		opacity: 0.75;

		transform:
			scale(0.55);
	}

	to {
		opacity: 0;

		transform:
			scale(1.6);
	}

}


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

.tr-hero__title {
	max-width: 670px;

	margin:
		0
		0
		26px;

	color:
		#f5faf8;

	font-size:
		clamp(46px, 4.5vw, 72px);

	font-weight: 780;

	line-height: 1.015;

	letter-spacing:
		-0.052em;

	text-wrap:
		balance;

	animation:
		tr-hero-content-in
		900ms
		140ms
		var(--tr-ease)
		both;
}


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

.tr-hero__description {
	max-width: 610px;

	margin:
		0
		0
		34px;

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

	font-size:
		clamp(16px, 1.05vw, 18px);

	font-weight: 430;

	line-height:
		1.72;

	animation:
		tr-hero-content-in
		900ms
		220ms
		var(--tr-ease)
		both;
}


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

@keyframes tr-hero-content-in {

	from {
		opacity: 0;

		transform:
			translate3d(0, 26px, 0);
	}

	to {
		opacity: 1;

		transform:
			translate3d(0, 0, 0);
	}

}


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

.tr-hero__actions {
	display: flex;
	align-items: center;
	gap: 15px;

	animation:
		tr-hero-content-in
		900ms
		300ms
		var(--tr-ease)
		both;
}


/* =========================================================
 * CTA
 * ======================================================= */

.tr-hero__cta {
	--tr-hero-cta-x: 50%;
	--tr-hero-cta-y: 50%;

	position: relative;
	isolation: isolate;

	display: inline-flex;
	align-items: center;
	gap: 16px;

	min-height: 62px;

	padding:
		0
		12px
		0
		27px;

	overflow: hidden;

	border:
		1px solid rgba(62, 248, 154, 0.45);

	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			#23e984,
			#0bc96a
		);

	color:
		#03170d;

	font-size: 15px;
	font-weight: 780;

	text-decoration: none;

	box-shadow:
		0 16px 40px rgba(15, 211, 106, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);

	will-change:
		transform;

	transition:
		transform 160ms ease-out,
		box-shadow 300ms ease,
		filter 300ms ease;
}


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

	position: absolute;
	z-index: 0;

	inset: 0;

	background:
		radial-gradient(
			100px circle at
			var(--tr-hero-cta-x)
			var(--tr-hero-cta-y),
			rgba(255, 255, 255, 0.44),
			rgba(255, 255, 255, 0.10) 38%,
			transparent 72%
		);

	opacity: 0;

	transition:
		opacity 220ms ease;
}


.tr-hero__cta:hover::before {
	opacity: 1;
}


.tr-hero__cta:hover {
	color:
		#021209;

	filter:
		saturate(1.07)
		brightness(1.04);

	box-shadow:
		0 22px 55px rgba(15, 211, 106, 0.26),
		0 0 36px rgba(25, 224, 120, 0.11),
		inset 0 1px 0 rgba(255, 255, 255, 0.32);
}


.tr-hero__cta-label,
.tr-hero__cta-icon {
	position: relative;
	z-index: 2;
}


.tr-hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	border-radius: 13px;

	background:
		rgba(0, 40, 20, 0.13);

	transition:
		transform 300ms var(--tr-ease),
		background 260ms ease;
}


.tr-hero__cta-icon svg {
	width: 18px;
	height: 18px;
}


.tr-hero__cta:hover .tr-hero__cta-icon {
	transform:
		translateX(4px)
		rotate(-4deg);

	background:
		rgba(0, 40, 20, 0.19);
}


/* =========================================================
 * Visual
 * ======================================================= */

.tr-hero__visual {
	position: relative;

	min-height: 650px;

	perspective: 1600px;
}


/* =========================================================
 * Scene
 * ======================================================= */

.tr-hero__scene {
	--tr-scene-rx: 0deg;
	--tr-scene-ry: 0deg;

	position: absolute;

	top: 50%;
	left: 50%;

	width:
		min(100%, 690px);

	height: 590px;

	transform:
		translate3d(-50%, -50%, 0)
		rotateX(var(--tr-scene-rx))
		rotateY(var(--tr-scene-ry));

	transform-style:
		preserve-3d;

	will-change:
		transform;

	animation:
		tr-hero-scene-in
		1100ms
		180ms
		var(--tr-ease)
		both;
}


@keyframes tr-hero-scene-in {

	from {
		opacity: 0;

		transform:
			translate3d(-46%, -47%, 0)
			scale(0.94);
	}

	to {
		opacity: 1;

		transform:
			translate3d(-50%, -50%, 0)
			scale(1);
	}

}


/* =========================================================
 * Orbits
 * ======================================================= */

.tr-hero__orbit {
	position: absolute;

	top: 50%;
	left: 52%;

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

	border-radius: 50%;

	pointer-events: none;
}


.tr-hero__orbit--large {
	width: 590px;
	height: 590px;

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

	box-shadow:
		inset 0 0 80px rgba(25, 224, 120, 0.025);
}


.tr-hero__orbit--small {
	width: 440px;
	height: 440px;

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

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


/* =========================================================
 * Sparks
 * ======================================================= */

.tr-hero__spark {
	position: absolute;
	z-index: 3;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 17px rgba(25, 224, 120, 0.80);

	animation:
		tr-hero-spark
		3.5s
		ease-in-out
		infinite;
}


.tr-hero__spark--one {
	top: 14%;
	left: 24%;
}


.tr-hero__spark--two {
	top: 32%;
	right: 1%;

	animation-delay:
		0.8s;
}


.tr-hero__spark--three {
	right: 13%;
	bottom: 7%;

	animation-delay:
		1.4s;
}


.tr-hero__spark--four {
	left: 12%;
	bottom: 21%;

	animation-delay:
		2s;
}


@keyframes tr-hero-spark {

	0%,
	100% {
		opacity: 0.35;

		transform:
			scale(0.75);
	}

	50% {
		opacity: 1;

		transform:
			scale(1.25);
	}

}


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

.tr-hero__layer {
	position: absolute;

	overflow: hidden;

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

	background:
		linear-gradient(
			145deg,
			#101d25,
			#071017
		);

	box-shadow:
		0 36px 80px rgba(0, 0, 0, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);

	backface-visibility:
		hidden;

	transform-style:
		preserve-3d;
}


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

.tr-hero__layer--code {
	z-index: 5;

	top: 24%;
	left: 1%;

	width: 280px;
	height: 340px;

	padding: 21px;

	border-radius: 25px;

	transform:
		translateZ(-80px)
		rotateY(14deg)
		rotateZ(-5deg);

	animation:
		tr-hero-float-code
		6.8s
		ease-in-out
		infinite;
}


@keyframes tr-hero-float-code {

	0%,
	100% {
		translate:
			0
			-5px;
	}

	50% {
		translate:
			0
			7px;
	}

}


.tr-hero__code-head {
	display: flex;
	gap: 6px;

	margin-bottom: 38px;
}


.tr-hero__code-head span {
	width: 6px;
	height: 6px;

	border-radius: 50%;

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


.tr-hero__code-head span:first-child {
	background:
		var(--tr-green);
}


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

	width: 51px;
	height: 51px;

	margin-bottom: 30px;

	border:
		1px solid rgba(20, 215, 232, 0.13);

	border-radius: 16px;

	background:
		rgba(20, 215, 232, 0.055);

	color:
		var(--tr-spectrum-cyan);
}


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


.tr-hero__code-lines {
	display: grid;
	gap: 12px;
}


.tr-hero__code-lines span {
	display: block;

	height: 7px;

	border-radius: 20px;

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


.tr-hero__code-lines span:nth-child(1) {
	width: 83%;
}


.tr-hero__code-lines span:nth-child(2) {
	width: 58%;

	background:
		rgba(25, 224, 120, 0.15);
}


.tr-hero__code-lines span:nth-child(3) {
	width: 91%;
}


.tr-hero__code-lines span:nth-child(4) {
	width: 69%;

	background:
		rgba(20, 215, 232, 0.11);
}


.tr-hero__code-lines span:nth-child(5) {
	width: 48%;
}


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

.tr-hero__layer--main {
	z-index: 10;

	top: 12%;
	right: 5%;

	width: 480px;
	height: 430px;

	border-radius: 30px;

	transform:
		translateZ(45px)
		rotateY(-7deg)
		rotateZ(1.5deg);

	animation:
		tr-hero-float-main
		7.4s
		ease-in-out
		infinite;
}


@keyframes tr-hero-float-main {

	0%,
	100% {
		translate:
			0
			-7px;
	}

	50% {
		translate:
			0
			7px;
	}

}


/* =========================================================
 * Screen Top
 * ======================================================= */

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

	height: 57px;

	padding:
		0
		19px;

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

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


.tr-hero__screen-brand {
	display: flex;
	align-items: center;
	gap: 9px;
}


.tr-hero__screen-mark {
	width: 18px;
	height: 18px;

	border-radius: 5px;

	background:
		linear-gradient(
			135deg,
			var(--tr-green),
			#0a9250
		);

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


.tr-hero__screen-brand-line {
	width: 56px;
	height: 6px;

	border-radius: 20px;

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


.tr-hero__screen-actions {
	display: flex;
	gap: 7px;
}


.tr-hero__screen-actions span {
	width: 7px;
	height: 7px;

	border-radius: 50%;

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


/* =========================================================
 * Screen Layout
 * ======================================================= */

.tr-hero__screen-layout {
	display: grid;

	grid-template-columns:
		62px
		1fr;

	height:
		calc(100% - 57px);
}


.tr-hero__screen-sidebar {
	display: grid;
	align-content: start;
	gap: 16px;

	padding:
		25px
		15px;

	border-right:
		1px solid rgba(255, 255, 255, 0.055);

	background:
		rgba(0, 0, 0, 0.08);
}


.tr-hero__screen-sidebar span {
	display: block;

	width: 31px;
	height: 31px;

	border-radius: 10px;

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


.tr-hero__screen-sidebar span.is-active {
	background:
		linear-gradient(
			135deg,
			rgba(25, 224, 120, 0.18),
			rgba(20, 215, 232, 0.07)
		);

	box-shadow:
		inset 0 0 0 1px rgba(25, 224, 120, 0.10);
}


/* =========================================================
 * Screen Main Content
 * ======================================================= */

.tr-hero__screen-content {
	display: grid;

	grid-template-columns:
		1fr
		145px;

	gap: 20px;

	align-items: center;

	padding:
		31px
		28px
		18px;
}


.tr-hero__screen-copy {
	display: grid;
	gap: 10px;
}


.tr-hero__screen-copy span {
	display: block;

	border-radius: 20px;
}


.tr-hero__screen-kicker {
	width: 36%;
	height: 5px;

	background:
		var(--tr-green);

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


.tr-hero__screen-title {
	width: 94%;
	height: 15px;

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


.tr-hero__screen-title--short {
	width: 70%;
}


.tr-hero__screen-text {
	width: 82%;
	height: 6px;

	margin-top: 4px;

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


.tr-hero__screen-text--short {
	width: 63%;
}


.tr-hero__screen-button {
	width: 85px;
	height: 29px;

	margin-top: 12px;

	border-radius: 9px !important;

	background:
		linear-gradient(
			135deg,
			var(--tr-green),
			#0ac267
		);
}


/* =========================================================
 * Screen Art
 * ======================================================= */

.tr-hero__screen-art {
	position: relative;

	display: grid;
	place-items: center;

	width: 145px;
	height: 145px;
}


.tr-hero__screen-art-ring {
	position: absolute;

	inset: 0;

	border:
		1px solid rgba(20, 215, 232, 0.18);

	border-radius: 50%;

	box-shadow:
		inset 0 0 35px rgba(20, 215, 232, 0.04);
}


.tr-hero__screen-art-ring::before {
	content: "";

	position: absolute;

	inset: 20px;

	border:
		1px solid rgba(135, 87, 255, 0.13);

	border-radius: 50%;
}


.tr-hero__screen-art-core {
	position: relative;
	z-index: 2;

	display: grid;
	place-items: center;

	width: 65px;
	height: 65px;

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

	border-radius: 21px;

	background:
		linear-gradient(
			145deg,
			rgba(25, 224, 120, 0.13),
			rgba(20, 215, 232, 0.055)
		);

	color:
		var(--tr-green);

	box-shadow:
		0 0 30px rgba(25, 224, 120, 0.07);
}


.tr-hero__screen-art-core svg {
	width: 31px;
	height: 31px;
}


/* =========================================================
 * Screen Cards
 * ======================================================= */

.tr-hero__screen-cards {
	grid-column:
		1 / -1;

	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	gap: 10px;

	padding:
		0
		27px
		23px
		89px;
}


.tr-hero__screen-cards span {
	height: 58px;

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

	border-radius: 14px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.018)
		);
}


.tr-hero__screen-cards span:nth-child(2) {
	background:
		linear-gradient(
			145deg,
			rgba(25, 224, 120, 0.10),
			rgba(255, 255, 255, 0.018)
		);
}


.tr-hero__screen-cards span:nth-child(3) {
	background:
		linear-gradient(
			145deg,
			rgba(20, 215, 232, 0.08),
			rgba(255, 255, 255, 0.018)
		);
}


.tr-hero__screen-cards span:nth-child(4) {
	background:
		linear-gradient(
			145deg,
			rgba(135, 87, 255, 0.08),
			rgba(255, 255, 255, 0.018)
		);
}


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

.tr-hero__layer--analytics {
	z-index: 13;

	right: -2%;
	bottom: 7%;

	width: 210px;
	height: 230px;

	padding: 26px;

	border-radius: 26px;

	transform:
		translateZ(90px)
		rotateY(-10deg)
		rotateZ(5deg);

	animation:
		tr-hero-float-analytics
		6.2s
		ease-in-out
		infinite;
}


@keyframes tr-hero-float-analytics {

	0%,
	100% {
		translate:
			0
			6px;
	}

	50% {
		translate:
			0
			-7px;
	}

}


.tr-hero__analytics-ring {
	position: relative;

	width: 105px;
	height: 105px;

	margin:
		0
		auto
		25px;

	border:
		1px solid rgba(20, 215, 232, 0.16);

	border-radius: 50%;
}


.tr-hero__analytics-ring::before {
	content: "";

	position: absolute;

	inset: 14px;

	border:
		7px solid rgba(255, 255, 255, 0.045);

	border-top-color:
		var(--tr-spectrum-cyan);

	border-right-color:
		var(--tr-green);

	border-radius: 50%;

	transform:
		rotate(28deg);
}


.tr-hero__analytics-ring span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 22px;
	height: 22px;

	border-radius: 7px;

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

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


.tr-hero__analytics-bars {
	display: flex;
	align-items: end;
	gap: 8px;

	height: 49px;
}


.tr-hero__analytics-bars i {
	display: block;

	flex: 1;

	border-radius:
		5px
		5px
		2px
		2px;

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


.tr-hero__analytics-bars i:nth-child(1) {
	height: 35%;
}


.tr-hero__analytics-bars i:nth-child(2) {
	height: 53%;
}


.tr-hero__analytics-bars i:nth-child(3) {
	height: 74%;
}


.tr-hero__analytics-bars i:nth-child(4) {
	height: 100%;
}


/* =========================================================
 * Floating Elements
 * ======================================================= */

.tr-hero__floating {
	position: absolute;
	z-index: 25;

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

	background:
		linear-gradient(
			145deg,
			#112029,
			#071017
		);

	box-shadow:
		0 28px 60px rgba(0, 0, 0, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);

	backface-visibility:
		hidden;
}


/* =========================================================
 * Search Floating
 * ======================================================= */

.tr-hero__floating--search {
	top: 18%;
	left: 7%;

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

	width: 205px;

	padding:
		13px;

	border-radius: 19px;

	transform:
		rotate(-5deg);

	animation:
		tr-hero-floating-search
		5.6s
		ease-in-out
		infinite;
}


@keyframes tr-hero-floating-search {

	0%,
	100% {
		translate:
			0
			-5px;
	}

	50% {
		translate:
			0
			7px;
	}

}


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

	width: 45px;
	height: 45px;

	flex:
		0
		0
		45px;

	border-radius: 13px;

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

	color:
		var(--tr-green);
}


.tr-hero__floating-icon svg {
	width: 20px;
	height: 20px;
}


.tr-hero__floating-lines {
	display: grid;
	gap: 7px;

	flex: 1;
}


.tr-hero__floating-lines i {
	display: block;

	width: 100%;
	height: 7px;

	border-radius: 20px;

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


.tr-hero__floating-lines i:last-child {
	width: 62%;

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


/* =========================================================
 * Growth Floating
 * ======================================================= */

.tr-hero__floating--growth {
	right: -4%;
	bottom: 25%;

	width: 180px;

	padding: 17px;

	border-radius: 22px;

	color:
		var(--tr-green);

	transform:
		rotate(6deg);

	animation:
		tr-hero-floating-growth
		6.4s
		ease-in-out
		infinite;
}


.tr-hero__floating--growth svg {
	display: block;

	width: 100%;
	height: auto;
}


@keyframes tr-hero-floating-growth {

	0%,
	100% {
		translate:
			0
			6px;
	}

	50% {
		translate:
			0
			-8px;
	}

}


/* =========================================================
 * Cursor Floating
 * ======================================================= */

.tr-hero__floating--cursor {
	left: 21%;
	bottom: 6%;

	display: grid;
	place-items: center;

	width: 70px;
	height: 70px;

	border-radius: 21px;

	color:
		var(--tr-spectrum-cyan);

	transform:
		rotate(-7deg);

	animation:
		tr-hero-floating-cursor
		5.1s
		ease-in-out
		infinite;
}


.tr-hero__floating--cursor svg {
	width: 27px;
	height: 27px;
}


@keyframes tr-hero-floating-cursor {

	0%,
	100% {
		translate:
			0
			-4px;
	}

	50% {
		translate:
			0
			8px;
	}

}


/* =========================================================
 * Visual Hover
 * ======================================================= */

.tr-hero__visual:hover
.tr-hero__layer--main {
	box-shadow:
		0 44px 95px rgba(0, 0, 0, 0.38),
		0 0 55px rgba(25, 224, 120, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


.tr-hero__visual:hover
.tr-hero__layer--analytics {
	border-color:
		rgba(20, 215, 232, 0.17);
}


.tr-hero__visual:hover
.tr-hero__floating--search {
	border-color:
		rgba(25, 224, 120, 0.18);
}


.tr-hero__visual:hover
.tr-hero__floating--growth {
	border-color:
		rgba(25, 224, 120, 0.20);
}


/* =========================================================
 * Scroll Cue
 * ======================================================= */

.tr-hero__scroll-cue {
	position: relative;

	display: flex;
	justify-content: center;

	margin-top: -18px;
}


.tr-hero__scroll-cue span {
	position: relative;

	display: block;

	width: 26px;
	height: 39px;

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

	border-radius: 14px;
}


.tr-hero__scroll-cue span::before {
	content: "";

	position: absolute;

	top: 8px;
	left: 50%;

	width: 4px;
	height: 7px;

	border-radius: 20px;

	background:
		var(--tr-green);

	transform:
		translateX(-50%);

	animation:
		tr-hero-scroll-dot
		1.7s
		ease-in-out
		infinite;
}


@keyframes tr-hero-scroll-dot {

	0% {
		opacity: 0;

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

	30% {
		opacity: 1;
	}

	100% {
		opacity: 0;

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

}


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

@media (max-width: 1180px) {

	.tr-hero {
		padding-top: 135px;
	}


	.tr-hero__layout {
		grid-template-columns: 1fr;

		gap: 20px;

		min-height: auto;
	}


	.tr-hero__content {
		max-width: 760px;

		padding-top: 60px;
	}


	.tr-hero__visual {
		width:
			min(100%, 760px);

		min-height: 650px;

		margin-inline: auto;
	}

}


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

@media (max-width: 700px) {

	.tr-hero {
		min-height: auto;

		padding:
			112px
			0
			32px;
	}


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


	.tr-hero__content {
		padding-top: 40px;
	}


	.tr-hero__eyebrow {
		margin-bottom: 18px;

		font-size: 10px;

		letter-spacing: 0.10em;
	}


	.tr-hero__title {
		font-size:
			clamp(39px, 11vw, 52px);

		line-height: 1.03;
	}


	.tr-hero__description {
		font-size: 16px;

		line-height: 1.65;
	}


	.tr-hero__cta {
		width: 100%;

		justify-content: space-between;
	}


	.tr-hero__visual {
		min-height: 470px;

		margin-top: 40px;
	}


	.tr-hero__scene {
		width: 520px;
		height: 450px;

		transform:
			translate3d(-50%, -50%, 0)
			scale(0.75);

		transform-origin:
			center;
	}


	.tr-hero__scroll-cue {
		display: none;
	}

}


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

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

	.tr-hero__eyebrow,
	.tr-hero__title,
	.tr-hero__description,
	.tr-hero__actions,
	.tr-hero__scene,
	.tr-hero__layer,
	.tr-hero__floating,
	.tr-hero__spark,
	.tr-hero__eyebrow-dot::after,
	.tr-hero__scroll-cue span::before {
		animation: none;
	}

}