.page {
	.hero {
		height: calc(84vh - 86px);
		min-height: 400px;
		position: relative;

		.smx-video-bg {
			height: calc(84vh - 86px);
			min-height: 400px;
			background: transparent;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				bottom: 1px;
				right: 0;
				top: 0;
				opacity: 0.5;
				background: black;
				z-index: 0;
			}
		}

		&:before {
			content: '';
			position: absolute;
			background-image: url(../../images/bg-main-m.webp);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			background-color: var(--smx-color-primary-contrast);

			z-index: 0;
		}
		@media (max-width: 1024px) {
			border-bottom: 2px solid var(--smx-color-background-light);
		}
	}
	.smx-video-content {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: calc(84vh - 86px);
		min-height: 400px;
		max-width: none;

		h2.wp-block-heading {
			font-size: var(--font-title-main);
		}
		h3.wp-block-heading {
			font-size: var(--font-subtitle);
			font-weight: normal;
		}

		p {
			max-width: 720px;
			margin: var(--space-lg) 0;
		}

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;

			width: 0;
			height: 0;

			border-top: 80px solid transparent;
			border-bottom: 0 solid transparent;
			border-left: 50vw solid var(--smx-color-background-light);
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;

			width: 0;
			height: 0;

			border-top: 80px solid transparent;
			border-bottom: 0 solid transparent;
			border-right: 50vw solid var(--smx-color-background-light);
		}
	}

	.intelligente_platform {
		padding-bottom: var(--space-xl);

		h4 {
			height: calc(20vh - var(--space-xl));
			align-items: center;
			display: flex;
			color: var(--smx-color-text);
			max-width: 960px;
			margin: 0 auto;
		}

		h2.wp-block-heading {
			font-size: var(--font-title-md);
			margin-bottom: 0;
		}
		p {
			font-size: var(--font-size-base);
		}

		canvas {
			mix-blend-mode: darken;
		}

		h3 {
			color: var(--smx-color-text-bold);
			font-size: var(--font-subtitle);
		}

		.platform-description {
			min-height: calc(85vh - 86px);
			display: flex;
			flex-direction: column;
			justify-content: center;

			p {
				font-size: 0.96em;
			}
		}

		@media (max-width: 1024px) {
			padding-left: var(--space-md);
			padding-right: var(--space-md);

			h4 {
				font-size: var(--font-size-base);
				line-height: 1.2;
				font-weight: normal;
				color: var(--smx-color-text-bold);
				padding-top: var(--space-lg);
				padding-bottom: var(--space-lg);
				min-height: 20vh;
			}
		}

		.platform {
			position: relative;

			.row {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;
				justify-content: center;
				align-items: flex-start;
				margin: 0 auto;

				&.row-1 {
					grid-template-columns: 0.2fr 1fr 0.2fr;
				}

				.diamond-wrapper {
					padding: var(--space-md);
					padding-top: 0;
					mix-blend-mode: darken;
					overflow: visible;
					max-height: 10rem;

					@media (max-width: 768px) {
						padding-top: 0;
						padding-bottom: 0;
						height: 14rem;
						margin-top: -4.86rem;
					}
				}

				.platform-card {
					margin: 0 auto;
					position: relative;
					overflow: visible;
					background: var(--smx-color-white);
					border-radius: var(--border-radius-lg);
					padding: var(--space-lg);
					display: flex;
					flex-direction: column;
					justify-content: center;
					height: 100%;

					@media (min-width: 769px) {
						&::before {
							content: ' ';
							position: absolute;
							z-index: 1;
							width: 64px;
							height: 12px;
							left: -54px;
							top: 50%;
							background-image: url(../../images/hook_h.svg);
							background-position: center center;
							background-repeat: no-repeat;
							background-size: contain;
						}
					}

					@media (max-width: 768px) {
						margin-bottom: 0.5rem;
					}

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

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

				@media (min-width: 768.1px) {
					.platform-card.card-1 {
						text-align: center;
						grid-column: 2;

						&::before {
							width: 12px;
							height: 64px;
							left: calc(50% - 6px);
							top: auto;
							bottom: -54px;
							background-image: url(../../images/hook_v.svg);
						}

						h3 {
							&::before {
								left: 0;
							}
						}
					}
					.platform-card.card-2 {
						text-align: right;

						&::before {
							right: -54px;
							left: auto;
						}
					}
					.platform-card.card-2 h3::before {
						left: auto;
						right: -24px;
					}
					.platform-card.card-2,
					.platform-card.card-3 {
						padding-top: var(--space-lg);
					}
				}
			}
		}
		@media (min-width: 768.1px) {
			.row.row-2 {
				margin-top: var(--space-lg);
			}
		}
		@media (max-width: 768px) {
			.platform {
				display: grid;
				grid-template-columns: 1fr;
				gap: 0.64rem;
				.platform-card {
					padding-left: 30px;
					padding-right: var(--space-sm);

					h3 {
						&::before {
							width: 12px;
							height: 12px;
						}
					}
				}
				.row {
					grid-template-columns: 1fr;
					&.row-1 {
						grid-template-columns: 1fr;
						gap: 0.64rem;
					}
					&.row-2 {
						padding-bottom: 12.6rem;

						.diamond-wrapper {
							position: absolute;
							z-index: -1;
							bottom: 0;
							mix-blend-mode: darken;
							max-height: 14rem;
						}
					}
				}
			}
		}

		.partners-container {
			background: var(--smx-color-white);
			margin: 0 auto;
			position: relative;
			overflow: visible;
			background: var(--smx-color-white);
			border-radius: var(--border-radius-lg);
			padding: var(--space-lg);
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			max-width: 730px;
			margin-top: var(--space-md);

			&::before {
				width: 12px;
				height: 64px;
				left: calc(50% - 6px);
				bottom: auto;
				top: -54px;
				background-image: url(../../images/hook_v.svg);

				content: ' ';
				position: absolute;
				z-index: 1;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;

				@media (max-width: 768px) {
					display: none;
				}
			}

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

			p {
				margin-top: 0;
				font-size: var(--font-text);
			}
		}
	}

	.partners-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		flex-wrap: wrap;
		gap: 1rem;

		justify-content: center;
		text-align: center;
		max-width: 860px;

		.partner {
			img {
				max-height: 32px;
				max-width: 100%;
				height: auto;
				width: auto;
				display: block;
				margin: 0 auto;
				mix-blend-mode: darken;
				--webkit-mix-blend-mode: darken;
				filter: grayscale(1) contrast(0.7) brightness(1.2);
				transition: filter 0.4s ease-out;

				&:hover {
					filter: none;
				}
			}

			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	/* Tablet */
	@media (max-width: 1024px) {
		.partners-list {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* Mobile */
	@media (max-width: 768px) {
		.partners-list {
			display: flex;
			gap: 0;
			.partner {
				padding: var(--space-sm);
				width: calc(100% / 4);
			}
		}
	}

	.our-numbers {
		padding: var(--space-xl) var(--space-md);
		@media (max-width: 1024px) {
			padding-left: var(--space-md);
			padding-right: var(--space-md);
		}

		h2.wp-block-heading {
			font-size: var(--font-size-xl);
			margin-bottom: 0;
			color: var(--smx-color-primary-contrast);
		}
		> p {
			font-size: var(--font-size-base);
		}

		.swiper {
			padding: var(--space-md) 0;
			overflow: visible;

			.card {
				user-select: none;
				background: var(--smx-color-white);
				border-radius: var(--border-radius-lg);
				max-width: 360px;
				text-align: right;
				overflow: hidden;
				min-height: 467px;

				display: flex;
				flex-direction: column;
				justify-content: space-between;

				@media (max-width: 768px) {
					max-width: 320px;
				}

				h4 {
					font-size: var(--font-title-xl);
					font-weight: bolder;
					color: var(--smx-color-primary);
					margin: var(--space-lg);
					margin-bottom: 0;
				}
				p {
					margin: 0 var(--space-lg);
					font-size: var(--font-subtitle);
					line-height: 1.2;
				}
			}

			.swiper-pagination {
				background: var(--smx-color-white);
				border-radius: var(--border-radius-lg);
				display: inline-block;
				width: auto;
				padding: var(--space-sm) var(--space-lg);
				margin-bottom: -2rem;
				display: flex;
				gap: 1.6rem;

				@media (max-width: 768px) {
					gap: 0.86rem;
				}
			}

			.swiper-pagination-bullet {
				display: block;
			}

			.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
			.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
				width: 4rem;
				min-height: 0.48rem;
				border-radius: var(--border-radius-lg);

				@media (max-width: 768px) {
					width: 2.68rem;
					min-height: 0.24rem;
				}
			}
		}
	}

	.module_evolution {
		margin-top: var(--space-xl);
		position: relative;
		overflow: hidden;
		padding: var(--space-xl) 0;

		@media (max-width: 1024px) {
			padding-left: var(--space-md);
			padding-right: var(--space-md);
		}

		&::before {
			content: '';
			position: absolute;

			inset: -50px 0;
			background-image: url('../../images/bg-lightpath.webp');
			background-size: 100%;
			background-position: top center;
			z-index: -1;
			will-change: transform;
			transform: translateY(var(--parallax-offset, 0));

			@media (max-width: 768px) {
				background-size: cover;
			}
		}

		.container {
			margin: var(--space-lg) auto;
			color: var(--smx-color-background-light);
			max-width: var(--container-max);

			h2 {
				font-size: var(--font-title-main);
				font-weight: bold;
				@media (max-width: 768px) {
					margin-bottom: var(--space-md);
				}

				b {
					color: var(--smx-color-primary);
					font-weight: bold;
				}
			}

			.module-grid {
				display: grid;
				grid-template-columns: 1fr;
				gap: 1.5rem;

				/* Tablet + Desktop */
				@media (min-width: 768px) {
					grid-template-columns: repeat(4, 1fr);
				}

				.module-grid-col {
					.module-evolution-card {
						padding: var(--space-md);
						border-radius: var(--border-radius-md);
						backdrop-filter: var(--backdrop-blur-lg);

						h3 {
							border-bottom-width: 2px;
							border-bottom-style: solid;
							margin-bottom: var(--space-sm);
							padding-bottom: var(--space-sm);
							margin-top: 0;
							font-size: var(--font-subtitle);
							line-height: 1.2;
							text-align: left;
						}
					}
				}
				.module-grid-col:nth-child(1) {
					@media (min-width: 768px) {
						padding-top: 16rem;
					}
					.module-evolution-card {
						box-shadow: inset 0 0 0.64rem #ff0068;
						h3 {
							border-bottom-color: #ff0068;
						}
					}
				}
				.module-grid-col:nth-child(2) {
					@media (min-width: 768px) {
						padding-top: 10rem;
					}
					.module-evolution-card {
						box-shadow: inset 0 0 0.64rem #ba01d4;
						h3 {
							border-bottom-color: #ba01d4;
						}
					}
				}
				.module-grid-col:nth-child(3) {
					@media (min-width: 768px) {
						padding-top: 6rem;
					}
					.module-evolution-card {
						box-shadow: inset 0 0 0.64rem #8600d2;
						h3 {
							border-bottom-color: #8600d2;
						}
					}
				}
				.module-grid-col:nth-child(4) {
					@media (min-width: 768px) {
						padding-top: 0rem;
					}
					.module-evolution-card {
						box-shadow: inset 0 0 0.64rem #6b00f6;
						h3 {
							border-bottom-color: #6b00f6;
						}
					}
				}
			}

			h3 {
				text-align: center;
				margin: var(--space-md) auto;
				font-size: var(--font-subtitle);
			}

			.cta_button {
				margin: 0 auto;
				display: block;
			}
		}
	}
	.home-cert {
		padding: var(--space-lg) 0;

		@media (max-width: 768px) {
			padding: var(--space-lg) var(--space-sm);
		}
	}
	.certs-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-md);
		padding-left: var(--space-md);
		padding-right: var(--space-md);

		/* Tablet */
		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Mobile */
		@media (max-width: 768px) {
			grid-template-columns: repeat(1, 1fr);
		}

		.card {
			background: var(--smx-color-white);
			border-radius: var(--border-radius-lg);
			padding: var(--space-lg);

			font-size: var(--font-text);
			a {
				text-decoration: none;
				color: var(--font-text);

				display: grid;

				img {
					width: auto;
					height: auto;
					max-height: 64px;
				}

				h3 {
					color: var(--smx-color-primary-contrast);
					font-size: var(--font-size-lg);
					margin-top: var(--space-md);
					line-height: 1.21;
				}
			}
		}
	}

	.home-solutions {
		background: linear-gradient(
			0deg,
			var(--smx-color-background-light) 0%,
			var(--smx-color-primary-tint) 100%
		);
		padding: var(--space-xxl) 0;

		h2 {
			font-size: var(--font-title-sm);
			margin: 0;
		}
		h3 {
			font-size: var(--font-subtitle);
			margin: 0;
			display: flex;
			align-items: center;
			gap: 0.86rem;

			&:after {
				content: '';
				flex: auto;
				display: inline-block;
				height: 1.5px;
				background: var(--smx-color-primary);
				margin-top: 0.36rem;
			}
		}

		.wp-block-button__link {
			background: linear-gradient(
				to bottom,
				var(--smx-color-primary) 0%,
				var(--smx-color-primary-contrast) 100%
			);
			box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.16);
			font-weight: 400;
		}

		.card {
			user-select: none;
			background: var(--smx-color-white);
			border-radius: var(--border-radius-lg);
			line-height: 1.2;
			padding: var(--space-md);

			figure {
				max-width: 36px;
				height: auto;
			}

			h4 {
				font-size: var(--font-size-base);
				color: var(--smx-color-primary);
				margin: var(--space-md) 0;
			}
			p {
				margin-top: 0;
				font-size: var(--font-text);
			}
		}

		@media (max-width: 768px) {
			.is-layout-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
	}

	.home-certs {
		padding: var(--space-lg) 0;
	}

	.smx-map,
	.smx-map .container {
		min-height: 630px;

		@media (max-width: 768px) {
			min-height: 100px;
		}
	}
	.smx-map .container {
		@media (max-width: 768px) {
			padding-top: 22rem;
		}
	}

	.smx-map .container-mobile {
		height: 50vh;
	}

	.solutions-resume {
		padding: var(--space-xl) 0;
		position: relative;
		overflow: hidden;
		background-color: transparent;

		.smx-hero-video__bg {
			position: absolute;
			top: 12%;
			left: 50%;
			transform: translateX(-50%);

			width: 50%;
			max-width: 612px;

			height: auto;

			pointer-events: none;
			object-fit: cover;
			z-index: 0;

			mix-blend-mode: lighten;

			@media (max-width: 768px) {
				top: 0;
				width: 100%;
			}
		}

		.hero__content {
			position: relative;
			z-index: 1;

			@media (max-width: 768px) {
				padding-top: calc(var(--space-xxl) * 3);
			}

			h2 {
				font-size: var(--font-title-sm);
				@media (max-width: 768px) {
					font-size: var(--font-title-md);
				}
			}

			.is-layout-grid {
				margin-top: 0;
				align-items: center;
				position: relative;

				@media (max-width: 768px) {
					grid-template-columns: auto auto auto;
				}

				h3 {
					margin: 0;
					font-size: var(--font-subtitle);
				}
				p {
					height: 1.5px;
					display: block;
					background: var(--smx-color-primary-tint);
				}

				&:nth-child(1) {
					column-gap: 33%;
					margin: var(--space-md) 0;

					@media (max-width: 768px) {
						grid-template-columns: 1fr;
					}
				}

				.card {
					position: relative;
					border: 1.5px solid var(--smx-color-primary-contrast);
					box-shadow: inset -134px 0 115px 0 rgba(138, 56, 254, 0.16);
					border-radius: var(--border-radius-lg);
					padding: var(--space-lg);
					background-color: transparent !important;
					backdrop-filter: blur(1.2rem);

					&:nth-child(even) {
						box-shadow: inset 134px 0 115px 0 rgba(138, 56, 254, 0.16);
					}

					p {
						height: auto;
						background: transparent;
					}

					&:before {
						content: ' ';
						background-image: url('../../images/purple-hook.svg');
						background-size: contain;
						background-repeat: no-repeat;
						position: absolute;
						top: 25%;
						right: -4.6rem;
						width: 5rem;
						height: 5rem;

						@media (max-width: 768px) {
							display: none;
						}
					}

					&:nth-child(2) {
						&:before {
							transform: scaleX(-1);
							right: auto;
							left: -4.6rem;
						}
					}
					&:nth-child(3) {
						&:before {
							transform: scaleY(-1);
						}
					}
					&:nth-child(4) {
						&:before {
							transform: scaleY(-1) scaleX(-1);
							right: auto;
							left: -4.6rem;
						}
					}
				}
			}

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

			.evolution-model {
				margin-top: var(--space-md);
				gap: 0;
				align-items: end;
				flex-direction: column;
				justify-content: end;
				min-height: 12rem;
				padding: var(--space-md) 0;

				@media (max-width: 768px) {
					flex-direction: column;
					display: flex;
					align-items: start;
				}

				.wp-block-group {
					background: var(--smx-color-primary);
					padding: var(--space-md);
					box-shadow: inset 0 -2rem 4rem rgba(0, 0, 0, 0.55);

					h5 {
						margin: 0;
						border-bottom: 1px solid rgba(var(--smx-color-primary-tint-rgb), 0.8);
						font-size: var(--font-size-base);
						margin-bottom: var(--space-sm);
						padding-bottom: var(--space-sm);
					}

					p {
						height: auto;
						background: transparent;
						font-size: var(--font-text);
						margin-top: 0;
					}

					&:nth-child(1) {
						background: #cc008c !important;
						height: 72%;
						border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
						@media (max-width: 768px) {
							border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
						}
					}
					&:nth-child(2) {
						height: 86%;
						border-radius: var(--border-radius-md) 0 0 0;
						background: #bd00cc !important;
						@media (max-width: 768px) {
							border-radius: 0 var(--border-radius-md) 0 0;
						}
					}
					&:nth-child(3) {
						height: 100%;
						border-radius: var(--border-radius-md) 0 0 0;
						background: #bb38fe !important;

						@media (max-width: 768px) {
							border-radius: 0 var(--border-radius-md) 0 0;
						}
					}
					&:nth-child(4) {
						height: 112%;
						border-radius: var(--border-radius-md) var(--border-radius-md)
							var(--border-radius-md) 0;
						background: var(--smx-color-primary) !important;

						@media (max-width: 768px) {
							border-radius: 0 var(--border-radius-md) var(--border-radius-md)
								var(--border-radius-md);
						}
					}
				}
			}

			/**ANIM support**/
			.evolution-model .wp-block-group {
				opacity: 0;
				transform-origin: bottom;
				transform: scaleY(0);
				transition:
					transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
					opacity 0.4s;
			}

			/* Mobile*/
			@media (max-width: 768px) {
				.evolution-model .wp-block-group {
					transform-origin: left;
					transform: scaleX(0);
				}
			}

			/* Active */
			.evolution-model.is-visible .wp-block-group {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.cta-footer {
		background-image: url('../../images/bg-cta-2.webp');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		min-height: 50vh;
		@media (max-width: 768px) {
			min-height: 320px;
		}

		.container {
			min-height: 50vh;
			@media (max-width: 768px) {
				gap: 0;
				min-height: 320px;
				position: relative;
				grid-template-columns: 1fr;
			}
			.photo {
				position: relative;
				overflow: hidden;
				&::before {
					content: '';
					position: absolute;

					inset: -50px 0;
					background-image: url('../../images/woman-laptop.webp');
					background-size: contain;
					background-position: bottom left;
					background-repeat: no-repeat;
					z-index: 1;
					will-change: transform;
					transform: translateY(var(--parallax-offset, 0));

					@media (max-width: 768px) {
						background-size: contain;
						background-position: bottom left;
					}
				}
			}

			.square {
				border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
				width: 64%;
				margin: 0 auto;
				position: absolute;
				top: calc(var(--space-lg) * 2);
				bottom: 0;
				z-index: 0;
				min-width: 164px;
				background: linear-gradient(
					0deg,
					var(--smx-color-primary-contrast) 0%,
					var(--smx-color-primary) 100%
				);
				opacity: 0.86;
			}

			.details {
				display: flex;
				align-items: center;

				@media (max-width: 768px) {
					position: absolute;
					z-index: 1;
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
					padding: var(--space-lg);
					align-items: end;
				}

				.is-layout-flow {
					@media (max-width: 768px) {
						width: 100%;
						text-align: right;
					}
				}

				h3 {
					font-size: var(--font-title-md);
					line-height: 1.2;
					color: var(--smx-color-white);
					@media (max-width: 768px) {
						padding-left: 50%;
					}

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

			@media (max-width: 768px) {
				min-height: 320px;
			}
		}
	}
}

/** ANIM **/
.smx-video-content h2.wp-block-heading {
	opacity: 0;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
.smx-video-content h2.wp-block-heading:nth-of-type(1) {
	animation-name: slideInLeft;
}
.smx-video-content h2.wp-block-heading:nth-of-type(2) {
	animation-name: slideInRight;
}
@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}