.vxd-ls-section {
	--vxd-ls-section-py: 96px;
	--vxd-ls-max-width: 1160px;
	--vxd-ls-col-gap: 40px;

	/* bigger stack */
	--vxd-ls-stack-width: 520px;
	--vxd-ls-stack-height: 520px;
	--vxd-ls-layer-size: 190px;
	--vxd-ls-layer-radius: 16px;
	--vxd-ls-rotate: -30deg;

	/* entrance animation */
	--vxd-ls-y1: 110px;
	--vxd-ls-y2: 110px;
	--vxd-ls-y3: 110px;
	--vxd-ls-delay1: 0ms;
	--vxd-ls-delay2: 220ms;
	--vxd-ls-delay3: 440ms;
	--vxd-ls-duration: 1000ms;
	--vxd-ls-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* right text */
	--vxd-ls-heading-size: 3.5rem;
	--vxd-ls-heading-lh: 1.08;
	--vxd-ls-heading-color: #111111;
	--vxd-ls-para-size: 1rem;
	--vxd-ls-para-lh: 1.45;
	--vxd-ls-para-color: #8f95a8;

	/* brand gradient */
	--vxd-ls-brand-color-a: #041366;
	--vxd-ls-brand-color-b: #6a35c9;
	--vxd-ls-brand-color-c: #ff3368;
}

.vxd-ls-section {
	padding-top: var(--vxd-ls-section-py);
	padding-bottom: var(--vxd-ls-section-py);
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.vxd-ls-container {
	max-width: var(--vxd-ls-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vxd-ls-col-gap);
	align-items: center;
}

.vxd-ls-left {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 560px;
}

.vxd-ls-stack {
	position: relative;
	width: var(--vxd-ls-stack-width);
	height: var(--vxd-ls-stack-height);
}

.vxd-ls-layer {
	position: absolute;
	left: 50%;
	width: var(--vxd-ls-layer-size);
	height: var(--vxd-ls-layer-size);
	transform: translateX(-50%);
	transform-origin: center center;
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.vxd-ls-layer__surface {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--vxd-ls-layer-radius);
	transform: rotate(var(--vxd-ls-rotate)) skewX(30deg) scaleY(0.86);
	transform-origin: center center;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05);
}

.vxd-ls-layer__surface::before,
.vxd-ls-layer__surface::after {
	display: none !important;
	content: none !important;
}

.vxd-ls-layer__label {
	display: none;
}

/* bottom */
.vxd-ls-layer--1 {
	bottom: 74px;
	z-index: 1;
	opacity: 0.12;
}

.vxd-ls-layer--1 .vxd-ls-layer__surface {
	background: #ccccec;
	box-shadow: 0 10px 22px rgba(17, 24, 39, 0.025);
}

/* middle */
.vxd-ls-layer--2 {
	bottom: 136px;
	z-index: 2;
	opacity: 0.20;
}

.vxd-ls-layer--2 .vxd-ls-layer__surface {
	background: #aaaab4;
	box-shadow: 0 12px 24px rgba(17, 24, 39, 0.035);
}

/* top */
.vxd-ls-layer--3 {
	bottom: 198px;
	z-index: 3;
	opacity: 1;
}

.vxd-ls-layer--3 .vxd-ls-layer__surface {
	background: linear-gradient(
		90deg,
		#041366 0%,
		#6A35C9 45%,
		#FF3368 100%
	);
	opacity: 0.45;
	box-shadow:
		0 16px 34px rgba(106, 53, 201, 0.10),
		0 8px 18px rgba(255, 51, 104, 0.08);
}

/* ground shadow */
.vxd-ls-stack::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 34px;
	width: 220px;
	height: 42px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(83, 91, 140, 0.12) 0%, rgba(83, 91, 140, 0) 72%);
	filter: blur(6px);
	pointer-events: none;
	z-index: 0;
}

/* initial state */
.vxd-ls-stack:not(.vxd-ls-animated) .vxd-ls-layer--1 {
	opacity: 0;
	transform: translateX(-50%) translateY(var(--vxd-ls-y1));
}

.vxd-ls-stack:not(.vxd-ls-animated) .vxd-ls-layer--2 {
	opacity: 0;
	transform: translateX(-50%) translateY(var(--vxd-ls-y2));
}

.vxd-ls-stack:not(.vxd-ls-animated) .vxd-ls-layer--3 {
	opacity: 0;
	transform: translateX(-50%) translateY(var(--vxd-ls-y3));
}

/* animated */
.vxd-ls-stack.vxd-ls-animated .vxd-ls-layer--1 {
	animation: vxd-ls-rise-1 var(--vxd-ls-duration) var(--vxd-ls-ease) var(--vxd-ls-delay1) forwards;
}

.vxd-ls-stack.vxd-ls-animated .vxd-ls-layer--2 {
	animation: vxd-ls-rise-2 var(--vxd-ls-duration) var(--vxd-ls-ease) var(--vxd-ls-delay2) forwards;
}

.vxd-ls-stack.vxd-ls-animated .vxd-ls-layer--3 {
	animation: vxd-ls-rise-3 var(--vxd-ls-duration) var(--vxd-ls-ease) var(--vxd-ls-delay3) forwards;
}

@keyframes vxd-ls-rise-1 {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(var(--vxd-ls-y1));
	}
	to {
		opacity: 0.12;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes vxd-ls-rise-2 {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(var(--vxd-ls-y2));
	}
	to {
		opacity: 0.20;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes vxd-ls-rise-3 {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(var(--vxd-ls-y3));
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* right side */
.vxd-ls-right {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-left: 20px;
}

.vxd-ls-heading {
	font-size: var(--vxd-ls-heading-size);
	line-height: var(--vxd-ls-heading-lh);
	font-weight: 700;
	color: var(--vxd-ls-heading-color);
	margin: 0;
	letter-spacing: -0.04em;
	max-width: 620px;
}

.vxd-ls-brand {
	display: inline;
	background: linear-gradient(
		90deg,
		var(--vxd-ls-brand-color-a) 0%,
		var(--vxd-ls-brand-color-b) 45%,
		var(--vxd-ls-brand-color-c) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.vxd-ls-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 6px;
}

.vxd-ls-para {
	font-size: var(--vxd-ls-para-size);
	line-height: var(--vxd-ls-para-lh);
	color: var(--vxd-ls-para-color);
	margin: 0;
	max-width: 420px;
}

@media (max-width: 1024px) {
	.vxd-ls-section {
		--vxd-ls-heading-size: 2.8rem;
		--vxd-ls-col-gap: 56px;
		--vxd-ls-stack-width: 420px;
		--vxd-ls-stack-height: 420px;
		--vxd-ls-layer-size: 156px;
	}

	.vxd-ls-left {
		min-height: 470px;
	}

	.vxd-ls-layer--1 {
		bottom: 58px;
	}

	.vxd-ls-layer--2 {
		bottom: 110px;
	}

	.vxd-ls-layer--3 {
		bottom: 162px;
	}
}

@media (max-width: 768px) {
	.vxd-ls-container {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.vxd-ls-section {
		--vxd-ls-section-py: 56px;
		--vxd-ls-heading-size: 1.95rem;
		--vxd-ls-stack-width: 400px;
		--vxd-ls-stack-height: 400px;
		--vxd-ls-layer-size: 128px;
	}

	.vxd-ls-left {
		order: 1;
		min-height: 360px;
	}

	.vxd-ls-right {
		order: 2;
		padding-left: 0;
	}

	.vxd-ls-layer--1 {
		bottom: 42px;
	}

	.vxd-ls-layer--2 {
		bottom: 80px;
	}

	.vxd-ls-layer--3 {
		bottom: 118px;
	}

	.vxd-ls-para,
	.vxd-ls-heading {
		max-width: 100%;
	}
}

@media (max-width: 580px) {
	.vxd-ls-section {
		--vxd-ls-section-py: 48px;
		--vxd-ls-heading-size: 1.6rem;
		--vxd-ls-stack-width: 300px;
		--vxd-ls-stack-height: 300px;
		--vxd-ls-layer-size: 98px;
	}

	.vxd-ls-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.vxd-ls-left {
		min-height: 270px;
	}

	.vxd-ls-layer--1 {
		bottom: 30px;
	}

	.vxd-ls-layer--2 {
		bottom: 58px;
	}

	.vxd-ls-layer--3 {
		bottom: 86px;
	}
}