@charset "utf-8";

.section-hero {
	padding-block: 27rem;
	text-align: center;
	background: #b7bec0 url("/assets/images/home/hero-bg-mob.webp") no-repeat 50% 30% / cover;
	@media (width >= 768px) {
		background-image: url("/assets/images/home/hero-bg-pc.webp");
	}
	.container {
		display: grid;
		@media (width >= 768px) {
			grid-template-columns: 1fr auto 1fr;
		}
	}
	.logo {
		display: block;
		width: clamp(145rem, calc(190 / var(--container) * 100vw), 190rem);
		height: auto;
		@media (width < 768px) {
			margin: 0 auto 27rem;
		}
	}
	.content {
		padding: clamp(30rem, calc(45 / var(--container) * 100vw), 45rem) clamp(16rem, calc(65 / var(--container) * 100vw), 65rem) clamp(25rem, calc(38 / var(--container) * 100vw), 38rem);
		background: #fff;
	}
	.heading {
		font: clamp(32rem, calc(46 / var(--container) * 100vw), 46rem) / 1.42 var(--font-lexd);
		letter-spacing: 0.3ch;
	}
	.visual {
		aspect-ratio: 799 / 436;
		margin-inline: auto;
		background: url("/assets/images/home/hero-visual.webp") no-repeat 50% / contain;
	}
	.description {
		max-width: 43ch;
		margin: 8rem auto 0;
		font: var(--font-size-13) / 1.38461538 var(--font-sans);
	}
	.cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1ch;
		width: 11.5em;
		max-width: 230rem;
		margin-top: 1.1em;
		padding: 1em 2ch;
		font: 700 var(--font-size-20) var(--font-sans);
		color: #fff;
		text-transform: capitalize;
		background: #a2e200;
		border-radius: 5em;
		&::before {
			display: block;
			width: 1em;
			aspect-ratio: 1;
			background: url("/assets/images/home/hero-arrow-down.webp") no-repeat 50% / contain;
			content: "";
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		.content[data-se] {
			opacity: 1;
		}
		[data-se]:not(.content) {
			filter: blur(5px);
			opacity: 0;
		}
		.se-visible [data-se] {
			filter: blur(0);
			opacity: 1;
		}
		.heading {
			transition-delay: 0.1s;
		}
		.visual {
			transition-delay: 0.2s;
		}
		.description {
			transition-delay: 0.3s;
		}
		.cta {
			transition-delay: 0.4s;
		}
	}
}

.section-mobility {
	contain: none;
	padding-block: 60rem;
	scroll-margin-top: var(--header-height);
	.container {
		display: grid;
		gap: 60rem;
	}
	.column {
		display: grid;
		gap: 40rem clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
		@media (width >= 1280px) {
			&.column--1 {
				grid-template-columns: 611fr 674fr;
			}
			&.column--2 {
				grid-template-columns: 674fr 611fr;
			}
			&.column--2 video {
				order: 1;
			}
		}
	}
	video {
		display: block;
		width: 100%;
		max-width: 611rem;
		height: auto;
		margin-inline: auto;
	}
	.heading {
		margin-bottom: 1em;
		font: 700 var(--font-size-30) / 1.5 var(--font-sans);
		text-wrap: balance;
	}
	.subheading {
		margin-bottom: 1em;
		font: var(--font-size-18) / 1.5 var(--font-sans);
	}
	.list {
		padding-left: 2.5ch;
		font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
		list-style: disc;
	}
	.description-block {
		position: relative;
		max-width: 96ch;
		margin-inline: auto;
		font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
		text-align: center;
		isolation: isolate;
		@media (width >= 1280px) {
			margin-top: 60rem;
		}
		&::before {
			position: absolute;
			top: 50%;
			left: 0;
			z-index: -1;
			width: clamp(150rem, calc(253 / var(--container) * 100vw), 253rem);
			aspect-ratio: 253 / 185;
			background: url("/assets/images/home/decoration-1.svg") no-repeat 50% / contain;
			translate: -50%;
			opacity: 0.27;
			content: "";
		}
	}
}

.section-technology {
	padding-block: 60rem;
	&.has-bg {
		position: relative;
		&::before {
			position: absolute;
			top: 0;
			right: 0;
			width: clamp(100rem, calc(189 / var(--container) * 100vw), 189rem);
			aspect-ratio: 189 / 208;
			background: url("/assets/images/home/decoration-2.webp") no-repeat 50% / contain;
			translate: -10rem -40%;
			opacity: 0.41;
			content: "";
		}
	}
	.text-right-tab {
		@media (width >= 768px) {
			text-align: right;
		}
	}
	.container {
		display: grid;
		gap: 60rem;
	}
	.column {
		display: grid;
		@media (width >= 1280px) {
			grid-template-columns: 611fr 674fr;
			align-items: center;
			gap: 0 clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
			&.column--small-video {
				grid-template-columns: 465fr auto;
				video {
					max-width: 465rem;
				}
			}
			.order-1 {
				order: 1;
			}
		}
	}
	video {
		display: block;
		width: 100%;
		max-width: 611rem;
		height: auto;
		margin-inline: auto;
	}
	.content {
		max-width: 674rem;
	}
	.heading {
		margin-bottom: 1em;
		font: 700 var(--font-size-28) / 1.5 var(--font-sans);
		@media (width < 1280px) {
			margin-top: 1em;
		}
	}
	.subheading {
		margin-bottom: 1em;
		font: var(--font-size-18) / 1.5 var(--font-sans);
	}
	.description {
		font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
	}
	.list {
		padding-left: 2.5ch;
		font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
		list-style: disc;
	}
}