/**
 * HLxHub — Mobile Design Review
 *
 * File:
 * assets/css/single-mobile/design-review.css
 *
 * Purpose:
 * Premium colorful Design & Build review section
 */


/* ================================================================
   ROOT
================================================================ */

.hlx-design-review {

	--design-text: #132238;
	--design-muted: #64748b;
	--design-white: #ffffff;

	--design-blue: #1769ff;
	--design-indigo: #6157ff;
	--design-purple: #8b5cf6;

	--design-cyan: #06b6d4;
	--design-green: #20bf6b;
	--design-orange: #ff8a00;
	--design-pink: #ec4899;

	--design-border: rgba(19, 34, 56, 0.08);

	position: relative;

	width: 100%;
	max-width: 100%;

	margin: 80px 0;

	padding: 42px 32px;

	box-sizing: border-box;

	color: var(--design-text);

	overflow: hidden;

	isolation: isolate;
}


/* ================================================================
   PREMIUM MAIN BACKGROUND
================================================================ */

.hlx-design-review::before {

	content: "";

	position: absolute;

	inset: 0;

	z-index: -3;

	background:

		radial-gradient(
			circle at 5% 10%,
			rgba(23, 105, 255, 0.14),
			transparent 28%
		),

		radial-gradient(
			circle at 95% 20%,
			rgba(139, 92, 246, 0.13),
			transparent 28%
		),

		radial-gradient(
			circle at 80% 95%,
			rgba(6, 182, 212, 0.10),
			transparent 25%
		),

		linear-gradient(
			145deg,
			#f8fbff 0%,
			#ffffff 42%,
			#f7f9ff 100%
		);

	border: 1px solid rgba(23, 105, 255, 0.10);

	border-radius: 28px;

	box-shadow:

		0 25px 70px rgba(31, 52, 90, 0.08),

		0 5px 18px rgba(31, 52, 90, 0.04),

		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


/* ================================================================
   DECORATIVE ORBS
================================================================ */

.hlx-design-review::after {

	content: "";

	position: absolute;

	width: 420px;
	height: 420px;

	right: -220px;
	top: 180px;

	z-index: -2;

	border-radius: 50%;

	background:

		radial-gradient(
			circle,
			rgba(139, 92, 246, 0.14) 0%,
			rgba(139, 92, 246, 0.045) 40%,
			transparent 72%
		);

	pointer-events: none;
}


/* ================================================================
   CONTAINER
================================================================ */

.hlx-design-review__container {

	position: relative;

	z-index: 2;

	width: 100%;
	max-width: 1240px;

	margin: 0 auto;

	box-sizing: border-box;
}


/* ================================================================
   HEADER
================================================================ */

.hlx-design-review__header {

	max-width: 900px;

	margin: 0 0 32px;
}


.hlx-design-review__eyebrow {

	display: inline-flex;

	align-items: center;

	gap: 9px;

	margin: 0 0 13px;

	padding: 7px 11px;

	color: var(--design-blue);

	font-size: 10px;

	font-weight: 850;

	line-height: 1;

	letter-spacing: .13em;

	text-transform: uppercase;

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

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

	border-radius: 999px;
}


.hlx-design-review__eyebrow-line {

	display: block;

	width: 22px;
	height: 2px;

	flex: 0 0 22px;

	background:

		linear-gradient(
			90deg,
			var(--design-blue),
			var(--design-purple)
		);

	border-radius: 99px;
}


.hlx-design-review__title {

	max-width: 900px;

	margin: 0 0 14px !important;

	padding: 0 !important;

	color: var(--design-text);

	font-size: clamp(31px, 4vw, 50px);

	font-weight: 850;

	line-height: 1.05;

	letter-spacing: -.045em;
}


.hlx-design-review__intro {

	max-width: 780px;

	margin: 0 !important;

	padding: 0 !important;

	color: var(--design-muted);

	font-size: 15px;

	line-height: 1.8;
}


/* ================================================================
   QUICK SPECS
================================================================ */

.hlx-design-review__specs {

	display: grid;

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

	gap: 14px;

	width: 100%;

	margin: 0 0 34px;

	padding: 0;
}


/* ================================================================
   QUICK SPEC CARD
================================================================ */

.hlx-design-review__spec {

	position: relative;

	display: flex;

	align-items: center;

	gap: 12px;

	min-width: 0;

	padding: 16px;

	box-sizing: border-box;

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

	border: 1px solid rgba(19, 34, 56, .075);

	border-radius: 17px;

	box-shadow:

		0 12px 28px rgba(31, 52, 90, .055),

		inset 0 1px 0 rgba(255, 255, 255, .95);

	backdrop-filter: blur(14px);

	-webkit-backdrop-filter: blur(14px);

	overflow: hidden;

	transition:

		transform .25s ease,

		box-shadow .25s ease;
}


.hlx-design-review__spec::before {

	content: "";

	position: absolute;

	left: 0;
	top: 0;

	width: 100%;
	height: 3px;

	background:

		linear-gradient(
			90deg,
			var(--design-blue),
			var(--design-purple)
		);

	opacity: .85;
}


.hlx-design-review__spec:nth-child(2)::before {

	background:

		linear-gradient(
			90deg,
			var(--design-purple),
			var(--design-pink)
		);
}


.hlx-design-review__spec:nth-child(3)::before {

	background:

		linear-gradient(
			90deg,
			var(--design-cyan),
			var(--design-blue)
		);
}


.hlx-design-review__spec:nth-child(4)::before {

	background:

		linear-gradient(
			90deg,
			var(--design-orange),
			var(--design-pink)
		);
}


.hlx-design-review__spec:hover {

	transform: translateY(-4px);

	box-shadow:

		0 18px 38px rgba(31, 52, 90, .09);
}


/* ================================================================
   SPEC ICON
================================================================ */

.hlx-design-review__spec-icon {

	display: grid;

	place-items: center;

	width: 42px;
	height: 42px;

	flex: 0 0 42px;

	border-radius: 13px;

	background:

		linear-gradient(
			135deg,
			rgba(23, 105, 255, .12),
			rgba(139, 92, 246, .10)
		);

	box-shadow:

		inset 0 1px 0 rgba(255,255,255,.8);
}


.hlx-design-review__spec:nth-child(2)
.hlx-design-review__spec-icon {

	background:

		linear-gradient(
			135deg,
			rgba(139, 92, 246, .13),
			rgba(236, 72, 153, .10)
		);
}


.hlx-design-review__spec:nth-child(3)
.hlx-design-review__spec-icon {

	background:

		linear-gradient(
			135deg,
			rgba(6, 182, 212, .13),
			rgba(23, 105, 255, .10)
		);
}


.hlx-design-review__spec:nth-child(4)
.hlx-design-review__spec-icon {

	background:

		linear-gradient(
			135deg,
			rgba(255, 138, 0, .13),
			rgba(236, 72, 153, .10)
		);
}


.hlx-design-review__spec-icon svg {

	width: 20px;
	height: 20px;

	stroke: var(--design-blue);

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.hlx-design-review__spec:nth-child(2)
.hlx-design-review__spec-icon svg {

	stroke: var(--design-purple);
}


.hlx-design-review__spec:nth-child(3)
.hlx-design-review__spec-icon svg {

	stroke: var(--design-cyan);
}


.hlx-design-review__spec:nth-child(4)
.hlx-design-review__spec-icon svg {

	stroke: var(--design-orange);
}


/* ================================================================
   SPEC TEXT
================================================================ */

.hlx-design-review__spec > div {

	min-width: 0;
}


.hlx-design-review__spec-label {

	display: block;

	margin: 0 0 4px !important;

	padding: 0 !important;

	color: #8994a7;

	font-size: 9px;

	font-weight: 800;

	line-height: 1.2;

	letter-spacing: .08em;

	text-transform: uppercase;
}


.hlx-design-review__spec strong {

	display: block;

	margin: 0;

	padding: 0;

	color: var(--design-text);

	font-size: 13px;

	font-weight: 800;

	line-height: 1.35;

	overflow-wrap: anywhere;
}


/* ================================================================
   MAIN GRID
================================================================ */

.hlx-design-review__grid {

	display: grid;

	grid-template-columns:

		minmax(0, 1.55fr)

		minmax(300px, .75fr);

	gap: 28px;

	width: 100%;

	align-items: start;
}


/* ================================================================
   CONTENT
================================================================ */

.hlx-design-review__content {

	min-width: 0;

	margin: 0;

	padding: 5px 0;
}


/* ================================================================
   ARTICLE
================================================================ */

.hlx-design-review__article {

	position: relative;

	display: grid;

	grid-template-columns:

		48px

		minmax(0, 1fr);

	gap: 18px;

	margin: 0 0 30px;

	padding: 0 0 30px;
}


.hlx-design-review__article:last-child {

	margin-bottom: 0;

	padding-bottom: 0;
}


.hlx-design-review__article:not(:last-child)::after {

	content: "";

	position: absolute;

	left: 23px;

	top: 50px;

	bottom: 0;

	width: 2px;

	background:

		linear-gradient(
			to bottom,
			rgba(23, 105, 255, .30),
			rgba(139, 92, 246, .16),
			transparent
		);

	border-radius: 99px;
}


/* ================================================================
   ARTICLE NUMBER
================================================================ */

.hlx-design-review__article-number {

	position: relative;

	z-index: 2;

	display: grid;

	place-items: center;

	width: 48px;
	height: 48px;

	box-sizing: border-box;

	color: #ffffff;

	font-size: 11px;

	font-weight: 850;

	background:

		linear-gradient(
			135deg,
			var(--design-blue),
			var(--design-purple)
		);

	border: 3px solid rgba(255,255,255,.9);

	border-radius: 15px;

	box-shadow:

		0 10px 25px rgba(23, 105, 255, .20);
}


/* ================================================================
   ARTICLE BODY
================================================================ */

.hlx-design-review__article-body {

	min-width: 0;

	margin: 0;

	padding: 2px 0 0;
}


.hlx-design-review__article-body h3 {

	margin: 0 0 8px !important;

	padding: 0 !important;

	color: var(--design-text);

	font-size: 21px;

	font-weight: 850;

	line-height: 1.3;

	letter-spacing: -.02em;
}


.hlx-design-review__article-body p {

	margin: 0 !important;

	padding: 0 !important;

	color: var(--design-muted);

	font-size: 14px;

	line-height: 1.85;
}


/* ================================================================
   HIGHLIGHT CARD
================================================================ */

.hlx-design-review__aside {

	min-width: 0;

	width: 100%;

	margin: 0;

	padding: 0;
}


.hlx-design-review__highlight-card {

	position: relative;

	width: 100%;

	margin: 0;

	padding: 25px;

	box-sizing: border-box;

	background:

		linear-gradient(
			145deg,
			#ffffff 0%,
			#f5f7ff 45%,
			#eef7ff 100%
		);

	border: 1px solid rgba(23, 105, 255, .12);

	border-radius: 23px;

	box-shadow:

		0 22px 55px rgba(31, 52, 90, .10),

		0 5px 15px rgba(31, 52, 90, .04);

	overflow: hidden;
}


.hlx-design-review__highlight-card::before {

	content: "";

	position: absolute;

	width: 230px;
	height: 230px;

	top: -130px;
	right: -90px;

	border-radius: 50%;

	background:

		radial-gradient(
			circle,
			rgba(139, 92, 246, .20),
			transparent 70%
		);

	pointer-events: none;
}


.hlx-design-review__highlight-card::after {

	content: "";

	position: absolute;

	width: 160px;
	height: 160px;

	left: -100px;
	bottom: -90px;

	border-radius: 50%;

	background:

		radial-gradient(
			circle,
			rgba(6, 182, 212, .12),
			transparent 70%
		);

	pointer-events: none;
}


/* ================================================================
   HIGHLIGHT TOP
================================================================ */

.hlx-design-review__highlight-top {

	position: relative;

	z-index: 2;

	display: flex;

	align-items: center;

	gap: 13px;

	margin: 0;

	padding: 0 0 20px;

	border-bottom: 1px solid rgba(23, 105, 255, .09);
}


.hlx-design-review__highlight-icon {

	display: grid;

	place-items: center;

	width: 46px;
	height: 46px;

	flex: 0 0 46px;

	background:

		linear-gradient(
			135deg,
			var(--design-blue),
			var(--design-purple)
		);

	border-radius: 14px;

	box-shadow:

		0 10px 25px rgba(23, 105, 255, .24);
}


.hlx-design-review__highlight-icon svg {

	width: 21px;
	height: 21px;

	stroke: #ffffff;

	stroke-width: 1.7;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.hlx-design-review__highlight-top span {

	display: block;

	margin: 0 0 4px !important;

	padding: 0 !important;

	color: #8994a7;

	font-size: 9px;

	font-weight: 800;

	line-height: 1.3;

	letter-spacing: .08em;

	text-transform: uppercase;
}


.hlx-design-review__highlight-top strong {

	display: block;

	margin: 0;

	padding: 0;

	color: var(--design-text);

	font-size: 17px;

	font-weight: 850;

	line-height: 1.3;
}


/* ================================================================
   HIGHLIGHTS
================================================================ */

.hlx-design-review__highlights {

	position: relative;

	z-index: 2;

	display: grid;

	gap: 12px;

	list-style: none !important;

	margin: 0 !important;

	padding: 20px 0 !important;
}


.hlx-design-review__highlights li {

	display: flex;

	align-items: flex-start;

	gap: 10px;

	margin: 0 !important;

	padding: 0 !important;

	color: #526078;

	font-size: 12px;

	line-height: 1.65;

	list-style: none !important;
}


.hlx-design-review__check {

	display: grid;

	place-items: center;

	width: 21px;
	height: 21px;

	flex: 0 0 21px;

	margin-top: 1px;

	background:

		linear-gradient(
			135deg,
			rgba(32,191,107,.15),
			rgba(6,182,212,.10)
		);

	border: 1px solid rgba(32,191,107,.10);

	border-radius: 50%;
}


.hlx-design-review__check svg {

	width: 12px;
	height: 12px;

	stroke: var(--design-green);

	stroke-width: 2.5;

	stroke-linecap: round;

	stroke-linejoin: round;
}


/* ================================================================
   MATERIALS
================================================================ */

.hlx-design-review__materials {

	position: relative;

	z-index: 2;

	display: grid;

	grid-template-columns:

		repeat(2, minmax(0, 1fr));

	gap: 9px;

	margin: 0;

	padding: 17px 0 0;

	border-top: 1px solid rgba(23, 105, 255, .09);
}


.hlx-design-review__materials > div {

	min-width: 0;

	margin: 0;

	padding: 12px;

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

	border: 1px solid rgba(23, 105, 255, .07);

	border-radius: 13px;

	box-shadow:

		inset 0 1px 0 rgba(255,255,255,.9);
}


.hlx-design-review__materials > div:nth-child(1) {

	background:

		linear-gradient(
			135deg,
			rgba(23,105,255,.06),
			rgba(255,255,255,.75)
		);
}


.hlx-design-review__materials > div:nth-child(2) {

	background:

		linear-gradient(
			135deg,
			rgba(139,92,246,.06),
			rgba(255,255,255,.75)
		);
}


.hlx-design-review__materials span {

	display: block;

	margin: 0 0 5px !important;

	padding: 0 !important;

	color: #929bad;

	font-size: 9px;

	font-weight: 800;

	line-height: 1.3;

	letter-spacing: .07em;

	text-transform: uppercase;
}


.hlx-design-review__materials strong {

	display: block;

	margin: 0;

	padding: 0;

	color: var(--design-text);

	font-size: 11px;

	font-weight: 800;

	line-height: 1.4;

	overflow-wrap: anywhere;
}


/* ================================================================
   VERDICT
================================================================ */

.hlx-design-review__verdict {

	display: grid;

	grid-template-columns:

		48px

		minmax(0, 1fr);

	gap: 17px;

	width: 100%;

	margin: 38px 0 0;

	padding: 23px 25px;

	box-sizing: border-box;

	background:

		linear-gradient(
			110deg,
			rgba(23,105,255,.09),
			rgba(139,92,246,.065),
			rgba(255,255,255,.88)
		);

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

	border-radius: 20px;

	box-shadow:

		0 12px 35px rgba(31,52,90,.055);
}


.hlx-design-review__verdict-mark {

	display: grid;

	place-items: center;

	width: 48px;
	height: 48px;

	background:

		linear-gradient(
			135deg,
			var(--design-blue),
			var(--design-purple)
		);

	border-radius: 14px;

	box-shadow:

		0 10px 24px rgba(23,105,255,.18);
}


.hlx-design-review__verdict-mark svg {

	width: 20px;
	height: 20px;

	stroke: #ffffff;

	stroke-width: 2;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.hlx-design-review__verdict-content {

	min-width: 0;

	margin: 0;

	padding: 0;
}


.hlx-design-review__verdict-label {

	display: block;

	margin: 0 0 6px !important;

	padding: 0 !important;

	color: var(--design-blue);

	font-size: 10px;

	font-weight: 850;

	line-height: 1.3;

	letter-spacing: .09em;

	text-transform: uppercase;
}


.hlx-design-review__verdict-content p {

	margin: 0 !important;

	padding: 0 !important;

	color: #59667d;

	font-size: 13px;

	line-height: 1.75;
}


/* ================================================================
   TABLET
================================================================ */

@media (max-width: 1024px) {

	.hlx-design-review {

		margin: 65px 0;

		padding: 35px 24px;
	}


	.hlx-design-review__container {

		max-width: 920px;
	}


	.hlx-design-review__specs {

		grid-template-columns:

			repeat(2, minmax(0, 1fr));
	}


	.hlx-design-review__grid {

		grid-template-columns:

			minmax(0, 1fr)

			minmax(0, 1fr);

		gap: 20px;
	}


	.hlx-design-review__highlight-card {

		padding: 20px;
	}


	.hlx-design-review__article-body p {

		font-size: 13px;
	}
}


/* ================================================================
   SMALL TABLET
================================================================ */

@media (max-width: 800px) {

	.hlx-design-review__grid {

		grid-template-columns: 1fr;
	}


	.hlx-design-review__aside {

		max-width: none;
	}


	.hlx-design-review__highlight-card {

		width: 100%;
	}
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 640px) {

	.hlx-design-review {

		margin: 50px 0;

		padding: 28px 14px;

		border-radius: 0;
	}


	.hlx-design-review::before {

		border-radius: 20px;
	}


	.hlx-design-review__container {

		width: 100%;
	}


	.hlx-design-review__header {

		margin-bottom: 25px;
	}


	.hlx-design-review__eyebrow {

		font-size: 9px;

		padding: 6px 9px;
	}


	.hlx-design-review__title {

		font-size: clamp(27px, 8vw, 36px);

		line-height: 1.1;
	}


	.hlx-design-review__intro {

		font-size: 13px;

		line-height: 1.75;
	}


	/* Quick Specs */

	.hlx-design-review__specs {

		grid-template-columns:

			repeat(2, minmax(0, 1fr));

		gap: 9px;

		margin-bottom: 26px;
	}


	.hlx-design-review__spec {

		gap: 9px;

		padding: 13px 11px;

		border-radius: 14px;
	}


	.hlx-design-review__spec-icon {

		width: 34px;
		height: 34px;

		flex-basis: 34px;

		border-radius: 10px;
	}


	.hlx-design-review__spec-icon svg {

		width: 17px;
		height: 17px;
	}


	.hlx-design-review__spec-label {

		font-size: 8px;
	}


	.hlx-design-review__spec strong {

		font-size: 11px;
	}


	/* Articles */

	.hlx-design-review__article {

		grid-template-columns:

			38px

			minmax(0, 1fr);

		gap: 12px;

		margin-bottom: 25px;

		padding-bottom: 25px;
	}


	.hlx-design-review__article:not(:last-child)::after {

		left: 18px;

		top: 42px;
	}


	.hlx-design-review__article-number {

		width: 38px;
		height: 38px;

		border-radius: 12px;

		font-size: 9px;
	}


	.hlx-design-review__article-body h3 {

		font-size: 17px;

		margin-bottom: 7px !important;
	}


	.hlx-design-review__article-body p {

		font-size: 12.5px;

		line-height: 1.75;
	}


	/* Highlight */

	.hlx-design-review__highlight-card {

		padding: 18px;

		border-radius: 18px;
	}


	.hlx-design-review__highlight-icon {

		width: 40px;
		height: 40px;

		flex-basis: 40px;

		border-radius: 12px;
	}


	.hlx-design-review__highlight-icon svg {

		width: 18px;
		height: 18px;
	}


	.hlx-design-review__highlight-top strong {

		font-size: 15px;
	}


	.hlx-design-review__highlights {

		gap: 11px;

		padding: 17px 0 !important;
	}


	.hlx-design-review__highlights li {

		font-size: 11.5px;
	}


	/* Materials */

	.hlx-design-review__materials {

		grid-template-columns:

			repeat(2, minmax(0, 1fr));
	}


	/* Verdict */

	.hlx-design-review__verdict {

		grid-template-columns:

			40px

			minmax(0, 1fr);

		gap: 12px;

		margin-top: 27px;

		padding: 17px;

		border-radius: 17px;
	}


	.hlx-design-review__verdict-mark {

		width: 40px;
		height: 40px;

		border-radius: 12px;
	}


	.hlx-design-review__verdict-mark svg {

		width: 17px;
		height: 17px;
	}


	.hlx-design-review__verdict-content p {

		font-size: 11.5px;

		line-height: 1.7;
	}
}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 390px) {

	.hlx-design-review {

		padding: 24px 10px;

		margin: 45px 0;
	}


	.hlx-design-review__title {

		font-size: 27px;
	}


	.hlx-design-review__specs {

		grid-template-columns: 1fr;
	}


	.hlx-design-review__spec {

		padding: 12px;
	}


	.hlx-design-review__highlight-card {

		padding: 16px;
	}


	.hlx-design-review__materials {

		grid-template-columns: 1fr;
	}
}


/* ================================================================
   REDUCED MOTION
================================================================ */

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

	.hlx-design-review *,
	.hlx-design-review *::before,
	.hlx-design-review *::after {

		transition: none !important;

		animation: none !important;
	}
}