/*
 * Hero and the partner logo row.
 *
 * Measured off the 1440px desktop frame and snapped to the spacing scale.
 */

.hero {
	position: relative;
	text-align: center;

	/* The gradient has to sit behind the navigation, so the section reaches up
	   under the sticky header rather than starting below it. */
	margin-top: calc(-1 * var(--header-height));
	padding-top: calc(var(--header-height) + var(--space-24));
	padding-bottom: var(--space-64);

	background:
		radial-gradient(60% 50% at 88% 6%, rgb(254 111 29 / 20%) 0%, transparent 62%),
		radial-gradient(55% 48% at 6% 26%, rgb(136 74 178 / 15%) 0%, transparent 64%),
		radial-gradient(70% 60% at 42% 0%, rgb(117 111 244 / 10%) 0%, transparent 72%),
		var(--color-bg-blush);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- Composition ---------------------------------------------------------- */

.hero__media {
	position: relative;
	width: 100%;
	max-width: 1220px;
	margin-bottom: var(--space-32);
}

/* Fixed ratio measured off the 1440px frame: the cards sit well outside the
   render, so the box is wider and shorter than the image itself. cqw units
   below scale type and padding with this box, not with the viewport. */
.hero-visual {
	position: relative;
	width: 100%;
	aspect-ratio: 1198 / 458;
	container-type: inline-size;
}

.hero-visual__base {
	position: absolute;
	left: 20%;
	top: 28%;
	width: 56%;
	height: auto;
}

.hero-visual__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hero-visual__wires polyline {
	fill: none;
	stroke: var(--color-primary);
	stroke-width: 2.5;
	stroke-dasharray: 2 9;
	stroke-linecap: round;
	opacity: 0.8;
}

.hero-visual__wires circle {
	fill: var(--color-primary);
}

.hero-widget {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5cqw;
	margin: 0;
	padding: 2cqw 2.4cqw;
	border-radius: var(--radius-lg);
	/* Frosted, not opaque: the gradient reads through the cards in the design. */
	background: rgb(255 255 255 / 62%);
	backdrop-filter: blur(6px);
	box-shadow: 0 12px 28px rgb(24 16 48 / 8%);
	text-align: left;
}

.hero-widget__body {
	min-width: 0;
}

.hero-widget__value {
	margin: 0 0 0.5cqw;
	font-family: var(--font-display);
	font-size: 3cqw;
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-text-heading);
	white-space: nowrap;
}

.hero-widget__label {
	font-family: var(--font-body);
	font-size: 1.55cqw;
	line-height: 1.3;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* --- Graphics beside the figure ------------------------------------------- */

.hero-widget__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.5cqw;
	width: 15cqw;
	height: 6.4cqw;
	flex: none;
}

.hero-widget__bars span {
	flex: 1;
	display: flex;
	align-items: flex-end;
	height: 100%;
	border-radius: 2px 2px 0 0;
	/* Each reading sits on its own white column, as in the design. */
	background: rgb(255 255 255 / 85%);
}

.hero-widget__bars i {
	width: 100%;
	border-radius: 2px 2px 0 0;
	background: var(--color-primary-bright);
}

.hero-widget__ring {
	width: 9.5cqw;
	height: auto;
	flex: none;
}

/* --- Placement, measured off the design ----------------------------------- */

.hero-widget--condition {
	left: 7.7%;
	top: 14.3%;
	width: 34%;
}

.hero-widget--material {
	left: 0;
	top: 55%;
	width: 30%;
}

.hero-widget--area {
	right: 3.8%;
	top: 5%;
	width: 29.5%;
}

.hero-widget--year {
	right: 1.6%;
	top: 56.5%;
	width: 28.6%;
}

/* --- Copy ----------------------------------------------------------------- */

/* Wide enough that the headline breaks after "intelligence", as designed. */
.hero__title {
	max-width: 860px;
	margin: 0 auto var(--space-16);
}

.hero__title em {
	color: var(--color-primary);
}

.hero__lead {
	max-width: 650px;
	margin: 0 auto var(--space-24);
	color: var(--color-text-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-12);
	width: 100%;
}

/* --- Circular arrow badge inside CTAs ------------------------------------- */

.btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-full);
	background: var(--color-bg-default);
	color: var(--color-primary);
	flex: none;
}

.btn-dark .btn__arrow {
	color: var(--color-surface-dark);
}

/* --- Trusted by ----------------------------------------------------------- */

.trusted {
	padding-block: var(--space-42);
	background: var(--color-bg-default);
}

.trusted__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-80);
}

.trusted__label {
	margin: 0;
	color: var(--color-text-heading);
	font-weight: 600;
	white-space: nowrap;
}

.trusted__list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Monochrome, as in the design: six brand palettes side by side compete with
   the page's own hierarchy, and the row has to stay coherent as partners come
   and go. Applied in CSS so any logo added later needs no grey variant. */
.trusted__item img {
	display: block;
	width: auto;
	max-height: 30px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.9;
}

/* A square badge among wordmarks reads far heavier at the same height. */
.trusted__item--badge img {
	max-height: 40px;
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 900px) {
	.hero-visual__wires,
	.hero-widget--desk {
		display: none;
	}
}

@media (max-width: 767px) {
	.hero {
		padding-bottom: var(--space-48);
	}

	/* The mobile design leads with the copy and puts the render underneath,
	   the reverse of desktop. */
	.hero__title {
		order: 1;
	}

	.hero__lead {
		order: 2;
		margin-bottom: var(--space-42);
	}

	.hero__media {
		order: 3;
		margin-bottom: var(--space-48);
	}

	.hero__actions {
		order: 4;
		flex-direction: column;
	}

	/* align-items: center on the column would otherwise shrink these to
	   max-content and push the copy off-screen. */
	.hero__title,
	.hero__lead {
		width: 100%;
		max-width: none;
	}

	/* Only the render survives here - the widgets and wires are already hidden,
	   so the fixed desktop ratio would just leave a band of empty space. */
	/* Two callouts survive on mobile, sitting over the render rather than
	   beside it, so the box keeps its ratio here. */
	.hero-visual {
		aspect-ratio: 358 / 300;
	}

	.hero-widget {
		padding: 3.5cqw 4cqw;
	}

	.hero-widget__value {
		font-size: 6cqw;
	}

	.hero-widget__label {
		font-size: 3.6cqw;
	}

	.hero-widget__ring {
		width: 16cqw;
	}

	.hero-widget--material {
		left: 0;
		top: 8%;
		width: 62%;
	}

	.hero-widget--year {
		left: 38%;
		top: 62%;
		width: 62%;
	}

	.hero-visual__base {
		position: absolute;
		left: 4%;
		top: 22%;
		width: 92%;
		display: block;
		width: 100%;
	}

	.hero__actions .btn {
		width: 100%;
	}

	.trusted__inner {
		flex-direction: column;
		gap: var(--space-24);
	}

	.trusted__list {
		justify-content: center;
		gap: var(--space-24);
	}

	.trusted__item img {
		max-height: 24px;
	}
}