/* =========================================================
 * Tech Resolve — Signal Footer
 * Version: 1.0.0
 * ======================================================= */


/* =========================================================
 * Footer
 * ======================================================= */

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

	padding:
		58px
		0
		24px;

	overflow: hidden;

	background:
		#040a0f;

	color:
		#ffffff;
}


.tr-footer__shell {
	position: relative;

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

	margin-inline: auto;
}


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

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

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-footer__grid {
	position: absolute;

	inset: 0;

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

	background-size:
		54px
		54px;

	mask-image:
		linear-gradient(
			to bottom,
			#000,
			transparent 90%
		);
}


.tr-footer__glow {
	position: absolute;

	border-radius: 50%;
}


.tr-footer__glow--green {
	top: -430px;
	left: -230px;

	width: 760px;
	height: 760px;

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


.tr-footer__glow--cyan {
	top: 10%;
	right: -330px;

	width: 760px;
	height: 760px;

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


.tr-footer__glow--violet {
	right: 17%;
	bottom: -520px;

	width: 800px;
	height: 800px;

	background:
		radial-gradient(
			circle,
			rgba(135, 87, 255, 0.045),
			transparent 72%
		);
}


/* =========================================================
 * Contact Rail
 * ======================================================= */

.tr-footer__contacts {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

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

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


.tr-footer__contact {
	position: relative;

	display: grid;

	grid-template-columns:
		52px
		1fr
		30px;

	align-items: center;

	gap: 15px;

	min-height: 105px;

	padding:
		18px
		22px;

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

	color:
		#ffffff;

	text-decoration: none;

	transition:
		background 350ms ease;
}


.tr-footer__contact:last-child {
	border-right: 0;
}


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

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			110deg,
			rgba(25, 224, 120, 0.085),
			rgba(20, 215, 232, 0.025),
			transparent
		);

	opacity: 0;

	transition:
		opacity 320ms ease;
}


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


.tr-footer__contact-icon,
.tr-footer__contact-copy,
.tr-footer__contact-arrow {
	position: relative;
	z-index: 2;
}


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

	width: 52px;
	height: 52px;

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

	border-radius: 16px;

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

	color:
		var(--tr-green);

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


.tr-footer__contact:hover
.tr-footer__contact-icon {
	background:
		rgba(25, 224, 120, 0.12);

	transform:
		rotate(-5deg)
		scale(1.05);
}


.tr-footer__contact-icon svg {
	width: 23px;
	height: 23px;
}


.tr-footer__contact-copy {
	display: grid;

	gap: 5px;
}


.tr-footer__contact-copy small {
	color:
		rgba(207, 224, 217, 0.35);

	font-size: 8px;

	font-weight: 800;

	letter-spacing:
		0.14em;

	text-transform:
		uppercase;
}


.tr-footer__contact-copy strong {
	color:
		rgba(245, 250, 248, 0.87);

	font-size:
		13px;

	font-weight: 650;

	line-height:
		1.35;
}


.tr-footer__contact-arrow {
	display: grid;
	place-items: center;

	width: 30px;
	height: 30px;

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

	border-radius: 50%;

	color:
		rgba(226, 238, 233, 0.36);

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


.tr-footer__contact-arrow svg {
	width: 15px;
	height: 15px;
}


.tr-footer__contact:hover
.tr-footer__contact-arrow {
	color:
		#03170d;

	background:
		var(--tr-green);

	transform:
		rotate(7deg);
}


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

.tr-footer__main {
	display: grid;

	grid-template-columns:
		minmax(280px, 0.8fr)
		minmax(390px, 1.25fr)
		minmax(250px, 0.65fr);

	gap:
		clamp(40px, 6vw, 95px);

	padding:
		64px
		0
		55px;

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


/* =========================================================
 * Brand
 * ======================================================= */

.tr-footer__logo {
	display: inline-flex;

	max-width:
		190px;

	margin-bottom:
		25px;
}


.tr-footer__logo-image {
	display: block;

	width: auto;
	height: auto;

	max-width:
		190px;

	max-height:
		72px;
}


.tr-footer__logo-fallback {
	color:
		#ffffff;

	font-size:
		24px;

	font-weight:
		800;
}


.tr-footer__brand-description {
	max-width:
		420px;

	margin:
		0
		0
		28px;

	color:
		rgba(210, 225, 219, 0.55);

	font-size:
		13px;

	line-height:
		1.72;
}


.tr-footer__brand-status {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	color:
		rgba(204, 222, 215, 0.28);

	font-size:
		8px;

	font-weight:
		800;

	letter-spacing:
		0.13em;
}


.tr-footer__brand-status span {
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background:
		var(--tr-green);

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


/* =========================================================
 * Navigation
 * ======================================================= */

.tr-footer__nav-label,
.tr-footer__cta-label {
	display: block;

	margin-bottom:
		20px;

	color:
		rgba(204, 222, 215, 0.30);

	font-size:
		8px;

	font-weight:
		800;

	letter-spacing:
		0.14em;
}


.tr-footer__nav-grid {
	display: grid;

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

	column-gap: 30px;
}


.tr-footer__nav-link {
	position: relative;

	display: grid;

	grid-template-columns:
		30px
		1fr;

	align-items: center;

	gap: 8px;

	min-height:
		50px;

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

	color:
		rgba(231, 241, 237, 0.65);

	font-size:
		12px;

	font-weight:
		630;

	text-decoration:
		none;

	transition:
		color 300ms ease,
		padding-left 400ms var(--tr-ease);
}


.tr-footer__nav-link:hover {
	color:
		#ffffff;

	padding-left:
		5px;
}


.tr-footer__nav-number {
	color:
		rgba(25, 224, 120, 0.46);

	font-size:
		8px;

	font-weight:
		820;

	letter-spacing:
		0.10em;
}


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

.tr-footer__cta-title {
	max-width:
		330px;

	margin:
		0
		0
		25px;

	color:
		#ffffff;

	font-size:
		clamp(24px, 2vw, 32px);

	font-weight:
		750;

	line-height:
		1.08;

	letter-spacing:
		-0.035em;
}


.tr-footer__cta-button {
	display: inline-flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	width: 100%;

	min-height:
		58px;

	padding:
		0
		10px
		0
		20px;

	border:
		1px solid rgba(61, 247, 152, 0.42);

	border-radius:
		16px;

	background:
		linear-gradient(
			135deg,
			#22ea83,
			#0bc96a
		);

	color:
		#03170d;

	font-size:
		12px;

	font-weight:
		780;

	text-decoration:
		none;

	box-shadow:
		0 18px 42px rgba(15, 211, 106, 0.16);

	transition:
		transform 400ms var(--tr-ease),
		box-shadow 300ms ease;
}


.tr-footer__cta-button:hover {
	color:
		#021209;

	transform:
		translateY(-4px);

	box-shadow:
		0 24px 52px rgba(15, 211, 106, 0.26);
}


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

	width: 39px;
	height: 39px;

	border-radius:
		12px;

	background:
		rgba(1, 35, 17, 0.13);

	transition:
		transform 400ms var(--tr-ease);
}


.tr-footer__cta-button:hover
.tr-footer__cta-icon {
	transform:
		translateX(4px)
		rotate(-5deg);
}


.tr-footer__cta-icon svg {
	width: 17px;
	height: 17px;
}


/* =========================================================
 * Giant Wordmark
 * ======================================================= */

.tr-footer__wordmark {
	margin:
		22px
		0
		28px;

	color:
		transparent;

	font-size:
		clamp(72px, 11.7vw, 182px);

	font-weight:
		860;

	line-height:
		0.75;

	letter-spacing:
		-0.075em;

	white-space:
		nowrap;

	text-align:
		center;

	-webkit-text-stroke:
		1px
		rgba(255, 255, 255, 0.075);

	user-select:
		none;
}


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

.tr-footer__bottom {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	padding-top:
		5px;
}


.tr-footer__bottom p {
	margin: 0;

	color:
		rgba(208, 224, 218, 0.36);

	font-size:
		10px;
}


.tr-footer__legal {
	display: flex;

	align-items: center;

	gap: 28px;
}


.tr-footer__legal a {
	color:
		rgba(223, 235, 230, 0.54);

	font-size:
		10px;

	text-decoration:
		none;

	transition:
		color 300ms ease;
}


.tr-footer__legal a:hover {
	color:
		var(--tr-green);
}


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

@media (max-width: 1050px) {

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


	.tr-footer__contact {
		border-right: 0;

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


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


	.tr-footer__main {
		grid-template-columns:
			1fr
			1.2fr;

	}


	.tr-footer__cta {
		grid-column:
			1
			/
			3;
	}


	.tr-footer__cta-button {
		max-width:
			330px;
	}

}


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

@media (max-width: 700px) {

	.tr-footer {
		padding:
			30px
			0
			22px;
	}


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


	.tr-footer__contact {
		grid-template-columns:
			46px
			1fr
			28px;

		min-height:
			88px;

		padding:
			14px
			10px;
	}


	.tr-footer__contact-icon {
		width:
			46px;

		height:
			46px;

		border-radius:
			14px;
	}


	.tr-footer__contact-copy strong {
		font-size:
			12px;
	}


	.tr-footer__main {
		display: block;

		padding:
			46px
			0
			38px;
	}


	.tr-footer__brand {
		margin-bottom:
			42px;
	}


	.tr-footer__nav {
		margin-bottom:
			42px;
	}


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


	.tr-footer__cta-button {
		max-width: none;
	}


	.tr-footer__wordmark {
		margin:
			18px
			0
			28px;

		font-size:
			17.5vw;
	}


	.tr-footer__bottom {
		display: grid;

		gap: 17px;
	}


	.tr-footer__legal {
		flex-wrap: wrap;

		gap:
			12px
			22px;
	}

}