.case-top {
	min-height: calc(86vh - 86px);
	position: relative;
	overflow: hidden;
	background-color: var(--smx-color-white);

	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(86vh - 86px);
		max-width: 720px;

		h2 {
			font-size: var(--font-title-main);
			margin: 0;
			line-height: 1.2;
			color: var(--smx-color-text-bold);

			strong {
				color: var(--smx-color-primary-contrast);
			}
		}
		h3 {
			line-height: 1.2;
			font-size: var(--font-size-lg);
			color: var(--smx-color-text-bold);
			font-weight: normal;
			margin-top: var(--space-md);
		}

		a.wp-block-button__link {
			background: linear-gradient(
				0deg,
				var(--smx-color-primary-contrast) 0%,
				var(--smx-color-primary) 100%
			);
		}
	}
}

.case-data {
	padding: var(--space-xxl) var(--space-sm);
	background-color: var(--smx-color-background-light);

	h3 {
		line-height: 1.2;
		font-size: var(--font-subtitle);
		color: var(--smx-color-text-bold);
		font-weight: bold;
		margin-top: var(--space-md);
		margin-bottom: var(--space-lg);
	}

	.is-layout-flex {
		margin: 0 auto;
		max-width: 720px;

		h2 {
			font-weight: bolder;
			font-size: calc(var(--font-title-main) * 1.86);
			background: linear-gradient(
				90deg,
				var(--smx-color-primary-tint),
				var(--smx-color-primary)
			);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			line-height: 1;

			background-clip: text;
		}

		p {
			font-size: var(--font-title-sm);
			margin: 0;
			line-height: 1.1;
			color: var(--smx-color-text-bold);
			font-weight: bold;
		}
	}
}

.case-info {
	padding: var(--space-xxl) var(--space-sm);
	background-color: var(--smx-color-white);
	
	.is-layout-grid {
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: var(--space-md);
		}
	}

	.container {
		padding: var(--space-lg) 0;
		align-items: center;
		gap: var(--space-xl);
	}

	h3 {
		font-weight: bolder;
		font-size: var(--font-title-main);
		line-height: 1.24;
		color: var(--smx-color-text-bold);
	}

	h4 {
		font-weight: bold;
		font-size: var(--font-subtitle);
		line-height: 1.24;
		color: var(--smx-color-text-bold);

		strong {
			font-weight: bolder;
			font-size: var(--font-title-main);
			background: linear-gradient(
				90deg,
				var(--smx-color-primary-contrast),
				var(--smx-color-primary)
			);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			line-height: 1;

			background-clip: text;
		}
	}

	p {
		a {
			text-decoration: none;
			color: var(--smx-color-primary-contrast);
			font-weight: bold;
		}
	}

	img {
		border-radius: var(--border-radius-lg);
	}
}

.case-software {
	padding: var(--space-xl) 0;

	.is-layout-grid {
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: var(--space-md);
		}
	}

	.card {
		position: relative;
		overflow: hidden;
		border-radius: var(--border-radius-xl);

		img {
			display: block;
		}

		.card-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 1;
			padding: var(--space-lg);
			text-align: center;
			color: var(--smx-color-white);
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.76) 16%, rgba(0, 0, 0, 0) 100%);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			margin-top: auto;
			height: 100%;

			h2 {
				font-size: var(--font-subtitle);
				font-weight: bold;

				strong {
					color: var(--smx-color-primary-tint);
				}
			}

			.is-layout-flex {
				justify-content: center;
			}

			a.wp-block-button__link {
				background-color: var(--smx-color-white);
				color: var(--smx-color-primary);
				border: 2px solid var(--smx-color-primary);
				font-weight: bold;
				@media (max-width: 768px) {
					display: block;
				}
				margin: 0 auto;
				margin-bottom: var(--space-lg);
			}
			.contact-button {
				a.wp-block-button__link {
					background: linear-gradient(
						0deg,
						var(--smx-color-primary-contrast) 0%,
						var(--smx-color-primary) 100%
					);
					color: var(--smx-color-white);
				}
			}
		}
	}
}

.case-second-hero {
	min-height: calc(64vh - 86px);
	padding: var(--space-lg) var(--space-sm);

	h2 {
		font-size: var(--font-title-md);
		color: var(--smx-color-primary-contrast);
		margin-bottom: var(--space-sm);
		strong {
			color: var(--smx-color-primary-contrast);
		}
	}

	.container {
		.is-layout-grid {
			align-items: center;

			gap: var(--space-lg);

			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				gap: var(--space-md);
			}

			.card {
				overflow: hidden;
				background: var(--smx-color-white);
				border-radius: var(--border-radius-lg);
				padding-top: var(--space-lg);
				height: 100%;
				display: flex;
				flex-direction: column;

				h4 {
					line-height: 1;
					padding: var(--space-xs) var(--space-sm);
					border-radius: var(--border-radius-sm);
					font-size: var(--font-size-sm);
					border: 1px solid rgba(var(--smx-color-text-rgb), 0.6);
					font-weight: normal;
					display: inline-block;
					margin: 0 var(--space-lg);
					text-transform: uppercase;
				}

				h3 {
					margin-top: var(--space-sm);
					margin-bottom: var(--space-md);
					font-size: var(--font-subtitle);
					color: var(--smx-color-primary-contrast);
					line-height: 1.2;
					padding: 0 var(--space-lg);
				}

				p {
					margin: 0;
					font-size: var(--font-text);
					flex: auto;
					padding: 0 var(--space-lg);
				}
			}
		}
	}
}

.industries-advantage {
	min-height: calc(64vh - 86px);
	padding: var(--space-xl) var(--space-sm);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		background-image: url(../../images/industries/digital-energy.webp);
		inset: -50px 0;
		background-size: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 1;
		z-index: -1;
		will-change: transform;
		transform: translateY(var(--parallax-offset, 0));

		@media (max-width: 767px) {
			background-size: cover;
			background-position: center center;
		}
	}
	.is-layout-grid {
		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			gap: var(--space-md);
		}
	}

	.container {
		z-index: 1;

		h2 {
			font-size: var(--font-title-md);

			strong {
				color: var(--smx-color-primary-contrast);
			}
		}
	}

	.card {
		overflow: hidden;
		border-radius: var(--border-radius-lg);
		padding: var(--space-lg);
		height: 100%;
		display: flex;
		flex-direction: column;
		backdrop-filter: blur(2.4rem);

		h3 {
			margin-top: var(--space-sm);
			margin-bottom: var(--space-md);
			font-size: var(--font-subtitle);
			color: var(--smx-color-primary-tint);
			line-height: 1.2;
		}

		p {
			margin: 0;
			font-size: var(--font-text);
			color: var(--smx-color-background-light);

			em {
				display: inline-block;
				font-style: normal;
				font-weight: bold;
				color: var(--smx-color-white);
				background-color: var(--smx-color-primary-contrast);
				padding: var(--space-xs) var(--space-sm);
				line-height: 1;
				border-radius: var(--border-radius-full);
			}
		}
	}

	.case-accelerate {
		a.wp-block-button__link {
			background: linear-gradient(
				0deg,
				var(--smx-color-primary-contrast) 0%,
				var(--smx-color-primary) 100%
			);
		}

		p {
			font-size: var(--font-subtitle);
		}
	}
}

.case-results {
	min-height: calc(64vh - 86px);
	padding: var(--space-xl) var(--space-sm);
	position: relative;
	overflow: hidden;
	background: var(--smx-color-white);
	
	.is-layout-grid {
		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: var(--space-md);
		}
	}

	h2 {
		font-size: var(--font-title-md);
		color: var(--smx-color-text-bold);
	}

	h3 {
		margin-top: var(--space-sm);
		margin-bottom: var(--space-md);
		font-size: var(--font-subtitle);
		color: var(--smx-color-primary-tint);
		line-height: 1.2;
	}

	.is-layout-flex {
		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			gap: var(--space-md);
			display: grid;
		}
	}

	.card {
		text-align: center;

		h4 {
			line-height: 1.2;
			font-size: var(--font-title-md);
			font-weight: bold;

			background: linear-gradient(
				90deg,
				var(--smx-color-primary-contrast),
				var(--smx-color-primary)
			);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

			background-clip: text;
			color: transparent;
			strong {
				font-size: var(--font-title-lg);
			}
		}
		p {
			font-size: var(--z-index-base);
			margin-top: var(--space-md);
			font-weight: bold;
			color: var(--smx-color-text-bold);
		}
	}
}

.case-cit {
	padding: var(--space-xl) var(--space-sm);

	h2 {
		font-size: 8rem;
		line-height: 0.86;
		font-weight: bold;

		background: linear-gradient(
			90deg,
			var(--smx-color-primary-contrast),
			var(--smx-color-primary)
		);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		background-clip: text;
		color: transparent;
		strong {
			font-size: var(--font-title-lg);
		}
	}
	h3 {
		font-size: var(--font-subtitle);
		font-weight: normal;
		color: var(--smx-color-text-bold);
	}
	
	.is-horizontal.is-layout-flex{
		align-items: flex-start;
	}
}

.case-financial {
	.case-hero-top {
		&::before {
			background-image: url(../../images/industries/financial.webp);
		}
	}
	.case-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/financial-cta.webp);
			}
		}
	}
}

.case-industrial {
	.case-hero-top {
		&::before {
			background-image: url(../../images/industries/industrial.webp);
			background-position: top left;
		}
		.container {
			h3,
			h4 {
				color: var(--smx-color-text-bold);
			}
		}
	}
	.case-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/support-car.webp);
				background-position: bottom right;
			}
		}
	}

	.case-second-hero {
		.is-layout-grid {
			max-width: 760px;
			margin: 0 auto;
		}
	}
}

.case-healthcare {
	.case-hero-top {
		&::before {
			background-image: url(../../images/industries/healthcare.webp);
			background-position: center center;
		}

		.container {
			h4 {
				color: var(--smx-color-text-bold);
				background: rgba(var(--smx-color-white-rgb), 0.4);
			}
		}
	}

	.case-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/healthcare-pc.webp);
				background-position: top center;
			}
		}
	}
	.case-results {
		.card {
			h4 {
				font-size: calc(var(--font-title-lg) * 1.24);
			}
		}

		img {
			max-width: 720px;
			margin: 0 auto;
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

.case-telecom {
	.case-hero-top {
		&::before {
			background-image: url(../../images/industries/telecom.webp);
		}

		.container {
			h3,
			h4 {
				color: var(--smx-color-text-bold);
			}
		}
	}
	.case-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/telecom-cta.webp);
			}
		}
	}
}

.case-retail {
	.case-hero-top {
		&::before {
			background-image: url(../../images/industries/retail.webp);
		}

		.container {
			h3,
			h4 {
				color: var(--smx-color-text-bold);
			}
		}
	}
	.case-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/retail-cta.webp);
			}
		}
	}

	.case-results {
		.card {
			h4 {
				font-size: calc(var(--font-title-lg) * 1.24);
			}
		}
	}
}

@keyframes toColor {
	to {
		filter: grayscale(0%);
	}
}