/* =========================================================
 * Tech Resolve — Website Architecture
 * ======================================================= */

.tr-website-architecture {
	padding:
		clamp(105px, 10vw, 175px)
		var(--tr-gutter);

	color: #0c1912;

	background: #f4f6f3;
}


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


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

.tr-website-architecture__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(330px, .9fr);
	align-items: end;
	gap: clamp(50px, 8vw, 120px);

	margin-bottom: clamp(55px, 7vw, 90px);
}


.tr-website-architecture__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #08b95d;

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


.tr-website-architecture__header h2 {
	max-width: 850px;
	margin: 0;

	font-size: clamp(43px, 5.2vw, 74px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.053em;
}


.tr-website-architecture__intro > p {
	margin: 0;

	color: #69756e;

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


.tr-website-architecture__intro > div {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-top: 26px;
	padding-top: 15px;

	border-top: 1px solid #dce3df;
}


.tr-website-architecture__intro span {
	color: #95a09a;

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


.tr-website-architecture__intro strong {
	color: #08b95d;

	font-size: 9px;
}


/* =========================================================
 * Console
 * ======================================================= */

.tr-website-architecture__console {
	display: grid;
	grid-template-columns:
		minmax(270px, .65fr)
		minmax(0, 1.35fr);

	overflow: hidden;

	background: #fff;

	border: 1px solid #dde4df;
	border-radius: 24px;

	box-shadow:
		0 30px 90px rgba(10, 27, 18, .07);
}


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

.tr-website-architecture__rail {
	background: #07120e;
}


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

	padding: 18px 20px;

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

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

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


.tr-website-architecture__rail-head i {
	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

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


.tr-website-architecture__trigger {
	display: grid !important;
	grid-template-columns:
		34px
		minmax(0,1fr)
		7px;
	align-items: center;
	gap: 12px;

	width: 100% !important;
	min-height: 76px !important;
	padding: 0 20px !important;

	color: rgba(255,255,255,.5) !important;
	text-align: left !important;

	background: transparent !important;

	border: 0 !important;
	border-bottom: 1px solid rgba(255,255,255,.07) !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	cursor: pointer;
}


.tr-website-architecture__trigger:hover,
.tr-website-architecture__trigger.is-active {
	color: #fff !important;

	background:
		linear-gradient(
			90deg,
			rgba(25,224,120,.09),
			transparent
		) !important;
}


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

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


.tr-website-architecture__trigger strong {
	font-size: 11px;
	font-weight: 650;
}


.tr-website-architecture__trigger > i {
	width: 6px;
	height: 6px;

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

	border-radius: 50%;
}


.tr-website-architecture__trigger.is-active > i {
	background: #19e078;

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


/* =========================================================
 * Stage
 * ======================================================= */

.tr-website-architecture__stage {
	min-width: 0;
}


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

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

	color: #909b95;

	background: #fafbfa;

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


.tr-website-architecture__stage-top {
	border-bottom: 1px solid #e3e8e5;
}


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

	color: #08b95d;
}


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

	background: #19e078;

	border-radius: 50%;
}


/* Panels */

.tr-website-architecture__panels {
	position: relative;

	min-height: 430px;
}


.tr-website-architecture__panel {
	position: absolute;
	inset: 0;

	display: grid;
	grid-template-columns:
		minmax(0,1fr)
		minmax(280px,.85fr);
	align-items: center;
	gap: 50px;

	padding: clamp(32px,5vw,65px);

	opacity: 0;
	visibility: hidden;

	transform: translateY(12px);

	transition:
		opacity 220ms ease,
		transform 220ms var(--tr-ease),
		visibility 220ms ease;
}


.tr-website-architecture__panel.is-active {
	position: relative;

	opacity: 1;
	visibility: visible;

	transform: translateY(0);
}


.tr-website-architecture__panel-index {
	color: #08b95d;

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


.tr-website-architecture__panel-copy h3 {
	margin: 17px 0 0;

	font-size: clamp(31px,3.5vw,52px);
	line-height: 1;
	letter-spacing: -.045em;
}


.tr-website-architecture__panel-copy p {
	max-width: 590px;
	margin: 20px 0 0;

	color: #68746d;

	font-size: 13px;
	line-height: 1.75;
}


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

	max-width: 430px;
	margin-top: 35px;
	padding-top: 15px;

	border-top: 1px solid #dee5e1;
}


.tr-website-architecture__metric span {
	color: #9aa39e;

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


.tr-website-architecture__metric strong {
	color: #08b95d;

	font-size: 11px;
	letter-spacing: .1em;
}


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

.tr-website-architecture__visual {
	display: grid;
	place-items: center;

	min-height: 270px;

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


/* UX */

.tr-website-architecture__ux {
	position: relative;

	width: 220px;
	height: 180px;
}


.tr-website-architecture__ux span {
	position: absolute;

	width: 62px;
	height: 46px;

	background: #fff;

	border: 1px solid #cfe0d6;
	border-radius: 9px;

	box-shadow:
		0 10px 25px rgba(12,30,20,.06);
}


.tr-website-architecture__ux span:nth-child(1) {
	top: 0;
	left: 79px;
}


.tr-website-architecture__ux span:nth-child(2) {
	bottom: 0;
	left: 0;
}


.tr-website-architecture__ux span:nth-child(3) {
	right: 0;
	bottom: 0;
}


.tr-website-architecture__ux span:nth-child(4) {
	top: 75px;
	left: 79px;
}


.tr-website-architecture__ux i {
	position: absolute;
	top: 24px;
	left: 109px;

	width: 1px;
	height: 130px;

	background: #19e078;
}


/* Responsive */

.tr-website-architecture__devices {
	position: relative;

	width: 250px;
	height: 190px;
}


.tr-website-architecture__devices span {
	position: absolute;

	background: #0b1912;

	border: 2px solid #264535;

	box-shadow:
		0 18px 40px rgba(12,30,20,.12);
}


.tr-website-architecture__devices .is-desktop {
	top: 12px;
	left: 10px;

	width: 190px;
	height: 115px;

	border-radius: 10px;
}


.tr-website-architecture__devices .is-tablet {
	right: 8px;
	bottom: 15px;

	width: 78px;
	height: 108px;

	border-radius: 10px;
}


.tr-website-architecture__devices .is-mobile {
	bottom: 0;
	left: 40px;

	width: 48px;
	height: 85px;

	border-radius: 9px;
}


/* Speed */

.tr-website-architecture__speed {
	position: relative;

	display: grid;
	place-items: center;

	width: 210px;
	height: 210px;

	border: 1px solid rgba(8,185,93,.2);
	border-radius: 50%;
}


.tr-website-architecture__speed::before {
	content: "";

	position: absolute;
	inset: 26px;

	border: 8px solid #e6ece8;
	border-top-color: #19e078;
	border-right-color: #19e078;
	border-radius: 50%;

	transform: rotate(35deg);
}


.tr-website-architecture__speed > div {
	position: relative;
	z-index: 2;

	text-align: center;
}


.tr-website-architecture__speed strong {
	display: block;

	font-size: 52px;
	line-height: 1;
}


.tr-website-architecture__speed small {
	display: block;

	margin-top: 8px;

	color: #08b95d;

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


/* SEO */

.tr-website-architecture__seo {
	position: relative;

	width: 220px;
	height: 170px;
}


.tr-website-architecture__seo span {
	position: absolute;
	left: 0;

	height: 26px;

	background: #fff;

	border: 1px solid #d8e3dc;
	border-radius: 6px;
}


.tr-website-architecture__seo .is-one {
	top: 10px;
	width: 94%;
}


.tr-website-architecture__seo .is-two {
	top: 61px;
	width: 75%;
}


.tr-website-architecture__seo .is-three {
	top: 112px;
	width: 57%;
}


.tr-website-architecture__seo i {
	position: absolute;
	right: 5px;
	bottom: 4px;

	width: 82px;
	height: 82px;

	border: 7px solid rgba(25,224,120,.15);
	border-top-color: #19e078;
	border-radius: 50%;
}


/* Shield */

.tr-website-architecture__shield {
	position: relative;

	width: 160px;
	height: 190px;

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

	clip-path:
		polygon(
			50% 0,
			92% 16%,
			86% 67%,
			50% 100%,
			14% 67%,
			8% 16%
		);
}


.tr-website-architecture__shield span {
	position: absolute;
	top: 44%;
	left: 50%;

	width: 22px;
	height: 12px;

	border-left: 3px solid #08b95d;
	border-bottom: 3px solid #08b95d;

	transform:
		translate(-50%,-50%)
		rotate(-45deg);
}


/* Servers */

.tr-website-architecture__servers {
	display: grid;
	gap: 10px;

	width: 220px;
}


.tr-website-architecture__servers span {
	height: 50px;

	background: #0b1912;

	border: 1px solid #244433;
	border-radius: 8px;

	box-shadow:
		inset 22px 0 0 rgba(25,224,120,.06);
}


/* Bottom */

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

	border-top: 1px solid #e3e8e5;
}


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

	background: #cdd7d1;
}


@media (max-width: 980px) {

	.tr-website-architecture__header,
	.tr-website-architecture__console {
		grid-template-columns: 1fr;
	}


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

}