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

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

	padding:
		clamp(115px, 11vw, 185px)
		var(--tr-gutter);

	color:
		#fff;

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


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

.tr-custom-integrations__background,
.tr-custom-integrations__grid,
.tr-custom-integrations__glow {
	position: absolute;

	pointer-events: none;
}


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


.tr-custom-integrations__grid {
	inset: 0;

	opacity: .13;

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

	background-size:
		66px 66px;
}


.tr-custom-integrations__glow--cyan {
	top: -260px;
	left: -240px;

	width: 760px;
	height: 760px;

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


.tr-custom-integrations__glow--green {
	right: -270px;
	bottom: -380px;

	width: 800px;
	height: 800px;

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


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

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

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

	margin:
		0 auto;
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-custom-integrations__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(330px, .75fr);

	align-items: end;

	gap:
		clamp(50px, 8vw, 120px);

	margin-bottom:
		clamp(65px, 8vw, 105px);
}


.tr-custom-integrations__eyebrow {
	display: block;

	margin-bottom: 19px;

	color:
		var(--tr-green);

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


.tr-custom-integrations__header h2 {
	max-width: 920px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(44px, 5.2vw, 75px);

	font-weight: 800;
	line-height: .99;
	letter-spacing: -.055em;
}


.tr-custom-integrations__intro > p {
	max-width: 580px;

	margin: 0;

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

	font-size: 14px;
	line-height: 1.82;
}


/* =========================================================
 * Intro Meta
 * ======================================================= */

.tr-custom-integrations__intro-meta {
	display: flex;
	align-items: center;
	gap: 9px;

	margin-top: 28px;
	padding-top: 16px;

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

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

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


.tr-custom-integrations__intro-meta i {
	flex: 1;

	height: 1px;

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


.tr-custom-integrations__intro-meta strong {
	color:
		var(--tr-green);

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


/* =========================================================
 * Network
 * ======================================================= */

.tr-custom-integrations__network {
	overflow: hidden;

	background:
		#08140f;

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

	border-radius:
		25px;

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


/* =========================================================
 * Network Top
 * ======================================================= */

.tr-custom-integrations__network-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

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

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

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

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


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


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

	background:
		var(--tr-green);

	border-radius:
		50%;

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


/* =========================================================
 * Network Heading
 * ======================================================= */

.tr-custom-integrations__network-heading {
	display: grid;

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

	align-items: center;

	gap: 35px;

	min-height: 126px;

	padding:
		30px 36px;

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


.tr-custom-integrations__network-heading > span {
	color:
		rgba(255, 255, 255, .18);

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


.tr-custom-integrations__network-heading h3 {
	max-width: 780px;

	margin: 0;

	color:
		#fff;

	font-size:
		clamp(27px, 3vw, 41px);

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


/* =========================================================
 * Map
 * ======================================================= */

.tr-custom-integrations__map {
	display: grid;

	grid-template-columns:
		110px
		1fr
		145px
		180px
		145px
		1fr
		110px;

	align-items: center;

	gap: 14px;

	min-height: 310px;

	padding:
		38px 30px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .008),
			rgba(255, 255, 255, .016)
		);

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


/* =========================================================
 * Map Side
 * ======================================================= */

.tr-custom-integrations__map-side {
	display: grid;
	gap: 12px;
}


.tr-custom-integrations__map-side span {
	display: grid;
	place-items: center;

	min-height: 42px;
	padding:
		0 9px;

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

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

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

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

	text-align: center;
}


/* =========================================================
 * Map Lines
 * ======================================================= */

.tr-custom-integrations__map-lines {
	display: grid;
	gap: 53px;
}


.tr-custom-integrations__map-lines i {
	height: 1px;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .04),
			rgba(20, 215, 232, .34)
		);
}


.tr-custom-integrations__map-lines--right i {
	background:
		linear-gradient(
			to left,
			rgba(255, 255, 255, .04),
			rgba(25, 224, 120, .34)
		);
}


/* =========================================================
 * Map Contract
 * ======================================================= */

.tr-custom-integrations__map-contract {
	display: grid;
	gap: 15px;

	padding:
		18px;

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

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


.tr-custom-integrations__map-contract > span {
	color:
		var(--tr-spectrum-cyan);

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


.tr-custom-integrations__map-contract > div {
	display: flex;
	align-items: center;
	gap: 6px;
}


.tr-custom-integrations__map-contract small {
	color:
		rgba(255, 255, 255, .25);

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


.tr-custom-integrations__map-contract i {
	flex: 1;

	height: 1px;

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


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

.tr-custom-integrations__map-core {
	display: grid;
	place-items: center;
}


.tr-custom-integrations__map-core > div {
	display: grid;
	place-items: center;
	gap: 5px;

	width: 165px;
	height: 165px;

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

	border-radius:
		50%;

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

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


.tr-custom-integrations__map-core span {
	color:
		rgba(255, 255, 255, .22);

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


.tr-custom-integrations__map-core strong {
	color:
		var(--tr-green);

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


.tr-custom-integrations__map-core small {
	max-width: 110px;

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

	font-size: 5px;
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: .08em;

	text-align: center;
}


/* =========================================================
 * Connections
 * ======================================================= */

.tr-custom-integrations__connections {
	background:
		#08140f;
}


/* =========================================================
 * Connection
 * ======================================================= */

.tr-custom-integrations__connection {
	display: grid;

	grid-template-columns:
		110px
		minmax(190px, .65fr)
		minmax(260px, 1fr)
		minmax(280px, 1.1fr);

	align-items: stretch;

	gap: 24px;

	min-height: 150px;

	padding:
		25px 30px;

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

	transition:
		background 180ms ease;
}


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


.tr-custom-integrations__connection:hover {
	background:
		linear-gradient(
			90deg,
			rgba(20, 215, 232, .018),
			rgba(25, 224, 120, .012),
			transparent 75%
		);
}


/* =========================================================
 * Connection ID
 * ======================================================= */

.tr-custom-integrations__connection-id {
	display: grid;
	align-content: start;
	gap: 7px;
}


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

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


.tr-custom-integrations__connection-id > strong {
	color:
		var(--tr-spectrum-cyan);

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


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

.tr-custom-integrations__connection-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}


.tr-custom-integrations__connection-title h3 {
	margin: 0;

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

	font-size:
		clamp(17px, 1.55vw, 21px);

	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}


/* =========================================================
 * Direction
 * ======================================================= */

.tr-custom-integrations__direction {
	display: inline-flex;
	align-items: center;
	gap: 7px;

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

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


.tr-custom-integrations__direction i {
	width: 7px;
	height: 7px;

	border-radius:
		50%;
}


.tr-custom-integrations__direction--both i {
	background:
		var(--tr-green);
}


.tr-custom-integrations__direction--in i {
	background:
		var(--tr-spectrum-cyan);
}


.tr-custom-integrations__direction--out i {
	background:
		var(--tr-spectrum-orange);
}


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

.tr-custom-integrations__connection-copy {
	padding-left: 21px;

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


.tr-custom-integrations__connection-copy > span {
	display: block;

	margin-bottom: 8px;

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

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


.tr-custom-integrations__connection-copy--boundary > span {
	color:
		var(--tr-green);
}


.tr-custom-integrations__connection-copy p {
	max-width: 560px;

	margin: 0;

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

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


.tr-custom-integrations__connection-copy--boundary p {
	color:
		rgba(255, 255, 255, .48);
}


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

.tr-custom-integrations__principle {
	display: grid;

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

	align-items: center;

	gap:
		clamp(38px, 6vw, 80px);

	padding:
		clamp(42px, 5vw, 66px);

	color:
		#07120e;

	background:
		var(--tr-green);

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


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

.tr-custom-integrations__principle-visual {
	display: grid;
	gap: 15px;
}


.tr-custom-integrations__principle-visual > div {
	display: grid;

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

	align-items: center;

	gap: 9px;
}


.tr-custom-integrations__principle-visual span,
.tr-custom-integrations__principle-visual strong {
	display: grid;
	place-items: center;

	width: 42px;
	height: 42px;

	color:
		rgba(6, 16, 13, .48);

	border:
		1px solid rgba(6, 16, 13, .18);

	border-radius:
		50%;

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


.tr-custom-integrations__principle-visual strong {
	width: 50px;
	height: 50px;

	color:
		var(--tr-green);

	background:
		#06100d;

	border-color:
		#06100d;
}


.tr-custom-integrations__principle-visual i {
	height: 1px;

	background:
		rgba(6, 16, 13, .22);
}


.tr-custom-integrations__principle-visual small {
	color:
		rgba(6, 16, 13, .45);

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


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

.tr-custom-integrations__principle-copy > span {
	display: block;

	margin-bottom: 12px;

	color:
		rgba(6, 16, 13, .5);

	font-size: 7px;
	font-weight: 900;
	letter-spacing: .11em;
}


.tr-custom-integrations__principle-copy h3 {
	max-width: 770px;

	margin: 0;

	color:
		#06100d;

	font-size:
		clamp(28px, 3.2vw, 44px);

	font-weight: 850;
	line-height: 1.04;
	letter-spacing: -.043em;
}


.tr-custom-integrations__principle-copy p {
	max-width: 720px;

	margin:
		18px
		0
		0;

	color:
		rgba(6, 16, 13, .66);

	font-size: 10px;
	line-height: 1.72;
}


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

@media (max-width: 1120px) {

	.tr-custom-integrations__map {
		grid-template-columns:
			95px
			1fr
			155px
			1fr
			95px;
	}


	.tr-custom-integrations__map-contract {
		display: none;
	}


	.tr-custom-integrations__connection {
		grid-template-columns:
			85px
			minmax(180px, .6fr)
			minmax(0, 1fr);
	}


	.tr-custom-integrations__connection-copy--boundary {
		grid-column:
			2 / 4;

		padding:
			16px 0 0;

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

		border-left:
			0;
	}

}


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

@media (max-width: 720px) {

	.tr-custom-integrations {
		padding:
			90px
			16px;
	}


	.tr-custom-integrations__header {
		grid-template-columns: 1fr;
		gap: 30px;

		margin-bottom: 50px;
	}


	.tr-custom-integrations__header h2 {
		font-size:
			clamp(40px, 11vw, 58px);
	}


	.tr-custom-integrations__intro-meta {
		display: none;
	}


	.tr-custom-integrations__network-heading {
		grid-template-columns: 1fr;
		gap: 10px;

		padding:
			28px 22px;
	}


	.tr-custom-integrations__map {
		grid-template-columns:
			1fr
			125px
			1fr;

		gap: 10px;

		min-height: 240px;

		padding:
			28px 18px;
	}


	.tr-custom-integrations__map-lines {
		display: none;
	}


	.tr-custom-integrations__map-side span {
		min-height: 36px;

		font-size: 4px;
	}


	.tr-custom-integrations__map-core > div {
		width: 120px;
		height: 120px;
	}


	.tr-custom-integrations__connection {
		grid-template-columns:
			58px
			minmax(0, 1fr);

		gap:
			14px 16px;

		min-height: 0;

		padding:
			24px 20px;
	}


	.tr-custom-integrations__connection-id {
		grid-row:
			1 / 4;
	}


	.tr-custom-integrations__connection-title,
	.tr-custom-integrations__connection-copy,
	.tr-custom-integrations__connection-copy--boundary {
		grid-column:
			2;
	}


	.tr-custom-integrations__connection-copy,
	.tr-custom-integrations__connection-copy--boundary {
		padding:
			14px 0 0;

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

		border-left:
			0;
	}


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

		gap: 28px;

		padding:
			36px 24px;
	}

}