/* Systical — Hero Card Swap (stacked bundle over the headline) */

.sys-hero {
	--sys-accent: #9afd0d;
	/* declared here (not on .sys-hero__cards) so the headline gap and the
	   cards read the same width, and Elementor's control can override it */
	--stack-w: 190px;
	--slot-gap: 26px;
	--sys-swap-duration: 800ms;
	--sys-swap-easing: cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 100vh;
	padding: 120px 24px;
	background-color: #070707;
	isolation: isolate;
}

/* ---------- content ---------- */

.sys-hero__content {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}

.sys-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sys-accent);
}

.sys-hero__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(30px, 5.2vw, 74px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #fff;
}

.sys-hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Italic glyphs lean past their inline box; the reveal mask would shear
	   their top-right corners. Pad the clip box out and pull the layout back
	   with a matching negative margin so spacing is untouched. */
	padding-right: 0.14em;
	margin-right: -0.14em;
	padding-left: 0.04em;
	margin-left: -0.04em;
}

/* Once the reveal has played the mask has no job left — drop it entirely so
   nothing can clip, whatever font or style is set later. */
.sys-hero.words-revealed .sys-hero__word {
	overflow: visible;
}

.sys-hero__word-inner {
	display: inline-block;
}

.sys-hero__word.is-highlight .sys-hero__word-inner {
	color: var(--sys-accent);
}

.sys-hero__word.is-italic .sys-hero__word-inner {
	font-style: italic;
}

.sys-hero__break {
	display: block;
	width: 100%;
	height: 0;
}

/* reserved inline gap the card bundle drops into (from a ## in the headline) */
.sys-hero__slot {
	display: inline-block;
	width: calc(var(--stack-w, 260px) + var(--slot-gap, 24px));
	height: 1em;
	vertical-align: middle;
}

/* word reveal */
.sys-hero--reveal .sys-hero__word-inner {
	transform: translateY(110%);
	opacity: 0;
	transition:
		transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 700ms ease;
	transition-delay: calc(var(--i, 0) * 70ms);
}

.sys-hero--reveal.is-visible .sys-hero__word-inner,
.elementor-editor-active .sys-hero--reveal .sys-hero__word-inner {
	transform: translateY(0);
	opacity: 1;
}

.sys-hero__subtext {
	max-width: 640px;
	margin: 26px auto 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(15px, 1.4vw, 20px);
	line-height: 1.6;
	color: #929292;
}

/* ---------- the card bundle ---------- */

.sys-hero__cards {
	--stack-x: 50%;
	--stack-y: 50%;
	--off-x: 10px;
	--off-y: 8px;
	--rot-step: 4deg;
	--scale-step: 0.04;
	--fade-step: 0;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* bundle sits on top of the headline */
.sys-hero--cards-front .sys-hero__cards {
	z-index: 3;
}

.sys-hero__card {
	position: absolute;
	left: var(--stack-x);
	top: var(--stack-y);
	width: var(--stack-w);
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 18px;
	background: #151515;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
	/* depth 0 = front of the bundle */
	z-index: calc(100 - var(--depth, 0));
	opacity: calc(1 - var(--depth, 0) * var(--fade-step));
	transform:
		translate(-50%, -50%)
		translate(
			calc(var(--depth, 0) * var(--off-x)),
			calc(var(--depth, 0) * var(--off-y))
		)
		rotate(calc(var(--depth, 0) * var(--rot-step)))
		scale(calc(1 - var(--depth, 0) * var(--scale-step)));
	transition:
		transform var(--sys-swap-duration) var(--sys-swap-easing),
		opacity var(--sys-swap-duration) var(--sys-swap-easing);
	will-change: transform;
}

.sys-hero__card-inner {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
}

.sys-hero__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* clickable front card */
.sys-hero--clickable .sys-hero__card[style*="--depth:0"],
.sys-hero--clickable .sys-hero__card.is-front {
	pointer-events: auto;
	cursor: pointer;
}

/* idle float on the whole bundle */
.sys-hero--float .sys-hero__cards {
	animation: sys-float 7s ease-in-out infinite;
}

@keyframes sys-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

/* ---------- leaving-card animations (inner element, so the outer
     depth transform keeps working independently) ---------- */

.sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-duration: var(--sys-swap-duration);
	animation-timing-function: var(--sys-swap-easing);
	animation-fill-mode: both;
}

/* arc */
.sys-hero--mode-arc .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-arc-right;
}

.sys-hero--mode-arc.sys-hero--dir-left .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-arc-left;
}

.sys-hero--mode-arc.sys-hero--dir-up .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-arc-up;
}

@keyframes sys-arc-right {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	45% {
		transform: translate(62%, -16%) rotate(13deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

@keyframes sys-arc-left {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	45% {
		transform: translate(-62%, -16%) rotate(-13deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

@keyframes sys-arc-up {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	45% {
		transform: translate(0, -68%) rotate(6deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* slide */
.sys-hero--mode-slide .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-slide-right;
}

.sys-hero--mode-slide.sys-hero--dir-left .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-slide-left;
}

.sys-hero--mode-slide.sys-hero--dir-up .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-slide-up;
}

@keyframes sys-slide-right {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(115%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes sys-slide-left {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-115%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes sys-slide-up {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-115%);
	}
	100% {
		transform: translateY(0);
	}
}

/* fade */
.sys-hero--mode-fade .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-fade-through;
}

@keyframes sys-fade-through {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* flip */
.sys-hero--mode-flip .sys-hero__card.is-leaving .sys-hero__card-inner {
	animation-name: sys-flip;
}

@keyframes sys-flip {
	0% {
		transform: perspective(900px) rotateY(0deg);
	}
	50% {
		transform: perspective(900px) rotateY(90deg);
	}
	100% {
		transform: perspective(900px) rotateY(0deg);
	}
}

/* ---------- footer row ---------- */

.sys-hero__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 28px;
	margin-top: 40px;
}

.sys-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 60px;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
}

.sys-hero__badge-img {
	display: block;
	width: auto;
	max-height: 22px;
}

.sys-hero__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--sys-accent);
	font-size: 14px;
	line-height: 1;
}

.sys-hero__badge-text {
	font-size: 14px;
	color: #e7e7e7;
	white-space: nowrap;
}

/* logo strip beside the button */
.sys-hero__tools {
	--tool-size: 52px;
	--tool-overlap: 10px;
	display: inline-flex;
	align-items: center;
}

.sys-hero__tools-strip {
	display: block;
	width: auto;
	height: var(--tool-size);
	max-width: 100%;
	object-fit: contain;
}

.sys-hero__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tool-size);
	height: var(--tool-size);
	border-radius: 50%;
	overflow: hidden;
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 240ms ease;
}

.sys-hero__tool + .sys-hero__tool {
	margin-left: calc(var(--tool-overlap) * -1);
}

.sys-hero__tool:hover {
	transform: translateY(-3px);
	z-index: 2;
}

.sys-hero__tool img {
	display: block;
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.sys-hero__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 34px;
	border-radius: 60px;
	background: var(--sys-accent);
	color: #070707;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 260ms ease,
		transform 260ms ease;
}

.sys-hero__button:hover {
	background: #fff;
	transform: translateY(-2px);
}

.sys-hero__button-icon {
	display: inline-flex;
	transition: transform 260ms ease;
}

.sys-hero__button-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.sys-hero__button:hover .sys-hero__button-icon {
	transform: translateX(4px);
}

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

@media (max-width: 1024px) {
	.sys-hero {
		--stack-w: 140px;
		--slot-gap: 18px;
	}
}

@media (max-width: 767px) {
	.sys-hero {
		min-height: auto;
		/* The floating header is ~84px tall on a phone including its offset, and
		   it sits over the hero rather than in the flow — so the top padding has
		   to clear it or the headline starts behind the pill. */
		padding: 108px 18px 44px;
	}

	/* The bundle is dropped on mobile — there is no room for it to sit over
	   the headline without burying the words. */
	.sys-hero__cards {
		display: none;
	}

	/* ...and with the bundle gone the reserved gaps have to close, or the
	   headline is left with holes punched through it. */
	.sys-hero__slot {
		display: none;
	}

	/* With the card bundle dropped the headline is the whole hero on a phone,
	   so it carries the weight the cards do on desktop. */
	.sys-hero__title {
		font-size: clamp(34px, 10.5vw, 46px);
	}

	.sys-hero__subtext {
		margin-top: 16px;
		font-size: 14px;
	}

	.sys-hero__footer {
		flex-wrap: nowrap;
		gap: 12px;
		margin-top: 24px;
	}

	.sys-hero__button {
		padding: 14px 22px;
		font-size: 15px;
	}

	.sys-hero__tools {
		--tool-size: 34px;
		--tool-overlap: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sys-hero__card,
	.sys-hero__card-inner,
	.sys-hero__word-inner,
	.sys-hero__button,
	.sys-hero__cards {
		transition: none !important;
		animation: none !important;
	}

	.sys-hero--reveal .sys-hero__word-inner {
		transform: none;
		opacity: 1;
	}
}