.tmpl-front-page {
	background-color: #000;

	.logos {
		.logo-wall {
			max-width: 1000px;
			margin: 0 auto 48px;
			overflow: hidden;
			padding: 3.2rem 0;
			mask-image: linear-gradient(
				to right,
				transparent 0%,
				#000 10%,
				#000 90%,
				transparent 100%
			);

			&-track {
				display: flex;
				align-items: center;
				gap: 6.4rem;
				width: max-content;
				animation: logo-wall-scroll 30s linear infinite;
			}

			&-item {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: none;
				border: none;
				cursor: pointer;
				padding: 0;

				img {
					display: block;
					max-height: 32px;
					width: auto;
					opacity: 1;
					transition: opacity 0.3s;
				}

				&:hover img {
					opacity: 0.5;
				}
			}
		}

		@keyframes logo-wall-scroll {
			0% {
				transform: translateX(0);
			}
			100% {
				transform: translateX(calc(var(--scroll-width, 50%) * -1));
			}
		}
	}

	.pillars {
		.block-tabs-slide__content {
			min-height: 300px;
			align-items: center;
		}
		.block-tabs-slide__content-text {
			flex: 1;
			max-width: 600px;
			h4 {
				@include media-min($medium) {
					font-size: 32px;
					margin-bottom: 32px;
				}
			}
			li + li {
				@include media-min($medium) {
					margin-top: 16px;
				}
			}
		}
		.code-box {
			flex: 1;
			width: 100%;
			max-width: 600px;
			border: 1px solid #28333e;
			background-color: #0a0d10;
			overflow: hidden;
			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 20px 60px rgba(0, 0, 0, 0.35);
			@include media-min($medium) {
				height: 410px;
			}
			.code-header {
				height: 42px;
				background: #0b1220;
				display: flex;
				align-items: center;
				padding: 0 14px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.06);
			}

			.dot {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin-right: 8px;
			}

			.dot.red {
				background: #ff5f56;
			}
			.dot.yellow {
				background: #ffbd2e;
			}
			.dot.green {
				background: #27c93f;
			}

			.title {
				margin-left: 10px;
				color: #94a3b8;
				font-size: 13px;
			}
			.code-body {
				height: calc(100% - 42px);
				overflow-y: auto;
				padding: 0px 20px;
				scroll-behavior: smooth;
			}
			.svg-body {
				display: flex;
				align-items: center;
				height: calc(100% - 42px);
				padding: 16px;
			}
			pre[class*="language-"] {
				margin: 0;
				background: transparent;
				padding: 0;
				margin: 0;
				font-size: 14px;
				line-height: 1.7;
				white-space: pre-wrap;
				word-break: break-word;
			}
			code {
				background: transparent;
				color: rgba(255, 255, 255, 0.78);
			}
			.toolbar {
				display: none;
			}
			code[data-typed="typing"]::after {
				content: "▋";
				color: #e2e8f0;
				animation: blink-cursor 0.7s step-end infinite;
			}
			@keyframes blink-cursor {
				50% {
					opacity: 0;
				}
			}
			.token.keyword,
			.token.string,
			.token.property {
				color: #dc150b;
			}
			.token.operator {
				color: #898ea4;
			}
		}

		svg {
			@keyframes p1reveal {
				0% {
					clip-path: inset(0 445px 0 0);
				}
				70%,
				100% {
					clip-path: inset(0 0px 0 0);
				}
			}
			@keyframes p1fade {
				0%,
				80% {
					opacity: 1;
				}
				88%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1tx {
				0% {
					transform: translateX(0px);
				}
				70%,
				100% {
					transform: translateX(445px);
				}
			}
			@keyframes p1to {
				0%,
				80% {
					opacity: 0.55;
				}
				88%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1live {
				0%,
				100% {
					opacity: 0.65;
				}
				50% {
					opacity: 0.95;
				}
			}

			@keyframes p1-zero-cost {
				0%,
				2% {
					opacity: 0;
				}
				2%,
				9% {
					opacity: 1;
				}
				13%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-workload {
				0%,
				26% {
					opacity: 0;
				}
				30%,
				36% {
					opacity: 1;
				}
				42%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-decrease {
				0%,
				53% {
					opacity: 0;
				}
				56%,
				63% {
					opacity: 1;
				}
				67%,
				100% {
					opacity: 0;
				}
			}

			@keyframes p1-ru10 {
				0%,
				14% {
					opacity: 0;
				}
				16%,
				19% {
					opacity: 0.7;
				}
				21%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ru0 {
				0%,
				57% {
					opacity: 0;
				}
				59%,
				79% {
					opacity: 0.7;
				}
				81%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ru20 {
				0%,
				19% {
					opacity: 0;
				}
				21%,
				32% {
					opacity: 0.7;
				}
				34%,
				46% {
					opacity: 0;
				}
				48%,
				57% {
					opacity: 0.7;
				}
				59%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ru40 {
				0%,
				32% {
					opacity: 0;
				}
				34%,
				46% {
					opacity: 0.7;
				}
				48%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-c024 {
				0%,
				14% {
					opacity: 0;
				}
				16%,
				19% {
					opacity: 0.7;
				}
				21%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-c0 {
				0%,
				57% {
					opacity: 0;
				}
				59%,
				79% {
					opacity: 0.7;
				}
				81%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-c48 {
				0%,
				19% {
					opacity: 0;
				}
				21%,
				32% {
					opacity: 0.7;
				}
				34%,
				46% {
					opacity: 0;
				}
				48%,
				57% {
					opacity: 0.7;
				}
				59%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-c192 {
				0%,
				32% {
					opacity: 0;
				}
				34%,
				46% {
					opacity: 0.7;
				}
				48%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ev1 {
				0%,
				19% {
					opacity: 0;
				}
				21%,
				30% {
					opacity: 0.6;
				}
				32%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ev2 {
				0%,
				32% {
					opacity: 0;
				}
				34%,
				44% {
					opacity: 0.6;
				}
				46%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ev3 {
				0%,
				46% {
					opacity: 0;
				}
				48%,
				55% {
					opacity: 0.6;
				}
				57%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-ev4 {
				0%,
				57% {
					opacity: 0;
				}
				59%,
				77% {
					opacity: 0.6;
				}
				79%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-sl1 {
				0%,
				19% {
					opacity: 0;
				}
				21%,
				30% {
					opacity: 0.3;
				}
				32%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-sl2 {
				0%,
				32% {
					opacity: 0;
				}
				34%,
				44% {
					opacity: 0.3;
				}
				46%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-sl3 {
				0%,
				46% {
					opacity: 0;
				}
				48%,
				55% {
					opacity: 0.3;
				}
				57%,
				100% {
					opacity: 0;
				}
			}
			@keyframes p1-sl4 {
				0%,
				57% {
					opacity: 0;
				}
				59%,
				77% {
					opacity: 0.3;
				}
				79%,
				100% {
					opacity: 0;
				}
			}

			.p1-curve {
				animation: p1reveal 12s linear infinite, p1fade 12s linear infinite;
			}
			.p1-tracker {
				animation: p1tx 12s linear infinite, p1to 12s linear infinite;
				transform-box: fill-box;
				transform-origin: 0 0;
			}
			.p1-live {
				animation: p1live 1.5s ease-in-out infinite;
			}
			.p1-zero-cost {
				animation: p1-zero-cost 12s linear infinite;
			}
			.p1-workload {
				animation: p1-workload 12s linear infinite;
			}
			.p1-decrease {
				animation: p1-decrease 12s linear infinite;
			}
			.p1-ru10 {
				animation: p1-ru10 12s linear infinite;
			}
			.p1-ru0 {
				animation: p1-ru0 12s linear infinite;
			}
			.p1-ru20 {
				animation: p1-ru20 12s linear infinite;
			}
			.p1-ru40 {
				animation: p1-ru40 12s linear infinite;
			}
			.p1-c024 {
				animation: p1-c024 12s linear infinite;
			}
			.p1-c0 {
				animation: p1-c0 12s linear infinite;
			}
			.p1-c48 {
				animation: p1-c48 12s linear infinite;
			}
			.p1-c192 {
				animation: p1-c192 12s linear infinite;
			}
			.p1-ev1 {
				animation: p1-ev1 12s linear infinite;
			}
			.p1-ev2 {
				animation: p1-ev2 12s linear infinite;
			}
			.p1-ev3 {
				animation: p1-ev3 12s linear infinite;
			}
			.p1-ev4 {
				animation: p1-ev4 12s linear infinite;
			}
			.p1-sl1 {
				animation: p1-sl1 12s linear infinite;
			}
			.p1-sl2 {
				animation: p1-sl2 12s linear infinite;
			}
			.p1-sl3 {
				animation: p1-sl3 12s linear infinite;
			}
			.p1-sl4 {
				animation: p1-sl4 12s linear infinite;
			}
		}
	}

	.intro {
		&-container {
			display: flex;
			flex-direction: column;
			gap: 32px;
			@include media-min(900px) {
				flex-direction: row;
				justify-content: space-between;
			}
			img {
				max-width: 280px;
			}
		}
	}

	.deploy {
		background: linear-gradient(180deg, #06111a 55.9%, #000000 100%);
		.contain {
			@include media-min($large) {
				padding-left: 64px;
				padding-right: 64px;
			}
		}
		h4 {
			font-size: 40px;
			font-weight: 700;
			line-height: 48px;
			color: #fff;
			@include media-min($medium) {
				font-size: 60px;
				font-weight: 700;
				line-height: 64px;
				margin: 3.2rem 0;
			}
		}
		.subtitle {
			margin-bottom: 3.2rem;
			@include media-min($medium) {
				width: 76%;
			}
			@include media-min($large) {
				width: 56%;
			}
		}
		&-cards {
			margin-top: 6.4rem;
			margin-bottom: 4rem;
			display: grid;
			gap: 6.4rem;
			grid-template-columns: repeat(1, 1fr);
			@include media-min($medium) {
				margin-top: 14rem;
				grid-template-columns: repeat(2, 1fr);
			}
			@include media-min($large) {
				gap: 4rem;
				grid-template-columns: repeat(3, 1fr);
			}
		}
		&-card {
			position: relative;
			flex: 1;
			padding: 2.4rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-decoration: none;
			transition: all var(--default-transition-params);

			&__container {
				flex: 1;
				margin-bottom: 2rem;
			}

			&__title {
				font-size: 24px;
				font-weight: 700;
				line-height: 30px;
				margin-bottom: 1.6rem;
				color: #fff;
				display: block;
			}

			&__desc {
				color: #a2adb9;
				font-weight: 300;
			}

			&:nth-of-type(1) {
				border: 1px solid #9e4ec4;
				&::after {
					content: "";
					background: url(https://static.pingcap.com/files/2024/09/10210554/serverless-icon-1.svg)
						no-repeat center center / contain;
					position: absolute;
					right: 4px;
					bottom: -50px;
					width: 76px;
					height: 117px;
				}
			}
			&:nth-of-type(2) {
				border: 1px solid #1aa8a8;
				&::after {
					content: "";
					background: url(https://static.pingcap.com/files/2024/09/10210547/dedicated-icon-2.svg)
						no-repeat center center / contain;
					position: absolute;
					right: 4px;
					bottom: -50px;
					width: 76px;
					height: 117px;
				}
			}
			&:nth-of-type(3) {
				border: 1px solid #2c80ce;
				&::after {
					content: "";
					background: url(https://static.pingcap.com/files/2024/09/10210550/self-icon-2.svg)
						no-repeat center center / contain;
					position: absolute;
					right: 4px;
					bottom: -50px;
					width: 76px;
					height: 108px;
				}
			}

			img {
				position: absolute;
				right: 0;
				bottom: -50px;
				z-index: 1;
			}

			&:hover {
				transform: translateY(-12px);
				.button-link {
					&:after {
						background-color: #fff;
						border-radius: 50%;
						color: #000;
						transform: rotate(45deg);
					}
				}
			}
		}
	}

	.testimonial {
		.wysiwyg {
			@include media-min($large) {
				display: flex;
				gap: 4.8rem;
			}
		}
		h4 {
			font-size: 40px;
			font-weight: 700;
			line-height: 48px;
			color: #fff;
			@include media-min($medium) {
				font-size: 60px;
				line-height: 64px;
			}
		}
		.embla {
			position: relative;
			--slide-spacing: 6rem;
			--slide-size: calc(100% / 1.9);
			@include media-min($large) {
				--slide-height: 26rem;
				&::after {
					content: "";
					position: absolute;
					height: 40%;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(
						180deg,
						rgba(6, 17, 26, 0.4) 50%,
						rgba(0, 0, 0, 0.8) 100%
					);
				}
			}
			.embla__pagination {
				margin-top: 6rem;
				@include media-min($large) {
					display: none;
				}
			}
			.embla__pagination-button {
				width: 12px;
				height: 12px;
				border: 1px solid #424d57;
				background-color: #000;
				&.active {
					border: 1px solid #fff;
					background-color: #fff;
				}
			}
			&__container {
				display: flex;
				touch-action: pan-x pinch-zoom;
				padding-top: calc(var(--slide-spacing) * -1);
				height: calc(var(--slide-spacing) + var(--slide-height));
				@include media-min($large) {
					flex-direction: column;
				}
			}
			&__slide {
				transform: translate3d(0, 0, 0);
				flex: 0 0 var(--slide-size);
				min-height: 0;
				margin-top: var(--slide-spacing);
			}
		}
		&-list {
			margin-top: 4.2rem;

			&__item {
				display: flex;
				flex-direction: column;
				gap: 2.4rem;
				color: #fff;
				text-decoration: none;
				cursor: pointer;
				&:hover {
					.button-link {
						&:after {
							background-color: #fff;
							border-radius: 50%;
							color: #000;
							transform: rotate(45deg);
						}
					}
				}
				@include media-min($medium) {
					flex-direction: row;
					gap: 4.8rem;
				}

				&-image {
					width: 8rem;
					height: 8rem;
					display: flex;
					align-items: center;
					img {
						max-width: 100%;
						height: 100%;
						width: auto;
					}
					@include media-min($medium) {
						justify-content: center;
						img {
							height: auto;
						}
					}
				}
				&-content {
					flex: 1;
				}
				&-desc {
					font-size: 22px;
					font-weight: 300;
					line-height: 28px;
					display: block;
				}
				&-name {
					margin: 2.4rem 0 2rem;
					font-size: 16px;
					font-weight: 300;
					line-height: 22px;
					display: block;
					span {
						color: #5d6974;
					}
				}
				.text-right {
					display: block;
				}
			}
		}
	}

	.demo {
		.hs-form-container {
			background: #000;
			padding: 0;
			border: 0;
			p {
				color: #fff;
			}
		}
		.form-columns-0 {
			display: none;
		}
		input,
		select,
		textarea {
			margin: 0;
			background-color: transparent;
			height: 6rem;
			border-radius: unset;
			color: #fff;
			border-color: #5d6974;
			&::placeholder {
				color: #fff;
			}
		}
		select {
			background-image: var(--form-select-arrow-white-img);
		}
		input[type="checkbox"],
		input[type="submit"] {
			height: auto;
		}
		a {
			color: #fff !important;
		}
		.hs-button {
			letter-spacing: 0;
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0.8rem 1.4rem;
			width: 15.8rem;
			height: 4rem;
			border: none;
			font-size: 1.6rem;
			line-height: 2.2rem;
			font-weight: 500;
			text-decoration: none;
			background: #fff;
			color: #000;
			-webkit-appearance: none;
			appearance: none;
			outline: 0;
			overflow: hidden;
			cursor: pointer;
			font-family: var(--font-moderat);
			transition: all 0.2s ease-in-out;

			span {
				position: relative;
				z-index: 1;
				color: #000;
			}

			&:hover {
				background: #dc150b;
				color: #fff;
			}
		}
	}
}