/* Systical — Process Tabs */

.sys-pr {
	--pr-accent: #9afd0d;
	--pr-max: 1320px;
	--pr-left: 38%;
	--pr-col-gap: 70px;
	--pr-ratio: 16 / 11;
	--pr-radius: 22px;
	--pr-frame: #1c1c1c;
	--pr-frame-pad: 14px;

	--pr-tab-fg: #8e8e8e;
	--pr-tab-on: #fff;
	--pr-underline: #9afd0d;
	--pr-underline-h: 2px;

	--pr-speed: 620ms;
	--pr-rise: 40px;

	position: relative;
	padding: 100px 0 110px;
	background: #070707;
}

.sys-pr__inner {
	display: grid;
	grid-template-columns: var(--pr-left) minmax(0, 1fr);
	gap: var(--pr-col-gap);
	align-items: center;
	max-width: var(--pr-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- columns ---------- */

/* Grid items default to min-width:auto, so the no-wrap tab strip would set the
   column's floor at its own full width and push the page sideways. */
.sys-pr__left,
.sys-pr__right {
	min-width: 0;
}

.sys-pr__left {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.sys-pr__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	padding: 8px 16px;
	border-radius: 40px;
	background: #1a1a1a;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.sys-pr__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pr-accent);
}

.sys-pr__title {
	margin: 0 0 20px;
	font-size: clamp(37.5px, 4.9vw, 70px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: #fff;
}

.sys-pr__text {
	max-width: 46ch;
	margin: 0;
	color: #b4b4b4;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

/* ---------- step switcher ---------- */

.sys-pr__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: safe flex-end;
	gap: 28px;
	margin-bottom: 26px;
}

.sys-pr__tab {
	position: relative;
	padding: 0 0 10px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--pr-tab-fg);
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Restated because Hello Elementor's reset paints `button:hover` pink and
   would otherwise win over the base rule for anything left unset here. */
.sys-pr__tab:hover,
.sys-pr__tab:focus {
	background: none;
	color: var(--pr-tab-on);
}

.sys-pr__tab:focus-visible {
	outline: 2px solid var(--pr-accent);
	outline-offset: 4px;
}

/* The bar is on every tab and scales from nothing, so it wipes in rather than
   appearing — cheaper than moving a shared indicator and it survives wrapping. */
.sys-pr__tab::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--pr-underline-h);
	border-radius: 2px;
	background: var(--pr-underline);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-pr__tab.is-active {
	color: var(--pr-tab-on);
}

.sys-pr__tab.is-active::after {
	transform: scaleX(1);
}

/* ---------- stage ---------- */

.sys-pr__stage {
	position: relative;
	aspect-ratio: var(--pr-ratio);
	overflow: hidden;
	border-radius: var(--pr-radius);
	background: #0d0d0d;
}

.sys-pr--framed .sys-pr__stage {
	padding: var(--pr-frame-pad);
	background: var(--pr-frame);
}

.sys-pr__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	border-radius: calc(var(--pr-radius) - 6px);
	opacity: 0;
	/* Starts low and rises into place — that travel is what reads as
	   direction rather than a plain cross-fade. */
	transform: translateY(var(--pr-rise));
	transition: opacity var(--pr-speed) ease, transform var(--pr-speed) cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.sys-pr--framed .sys-pr__panel {
	inset: var(--pr-frame-pad);
}

.sys-pr__panel.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* The one leaving drifts up and out, so the two never cross in the same place. */
.sys-pr__panel.is-leaving {
	opacity: 0;
	transform: translateY(calc(var(--pr-rise) * -0.45));
}

.sys-pr img.sys-pr__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-pr {
		--pr-col-gap: 40px;
		padding: 80px 0 88px;
	}

	.sys-pr__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.sys-pr__tabs {
		justify-content: safe flex-start;
	}
}

@media (max-width: 767px) {
	.sys-pr {
		--pr-radius: 16px;
		--pr-frame-pad: 8px;
		--pr-rise: 26px;
		padding: 64px 0 70px;
	}

	.sys-pr__inner {
		gap: 30px;
		padding: 0 18px;
	}

	.sys-pr__title {
		margin-bottom: 14px;
	}

	.sys-pr__text {
		font-size: 15px;
	}

	/* One line that scrolls sideways — wrapping six steps eats the screen. */
	.sys-pr__tabs {
		flex-wrap: nowrap;
		gap: 20px;
		margin-bottom: 18px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sys-pr__tabs::-webkit-scrollbar {
		display: none;
	}

	.sys-pr__tab {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sys-pr__panel,
	.sys-pr__tab::after {
		transition: none;
	}

	.sys-pr__panel {
		transform: none;
	}
}