.home {
	min-height: 100vh;
	background: #fffaf2;
	color: #17243b;
	font-family: "DM Sans", sans-serif;
}
.home a {
	color: inherit;
	text-decoration: none;
}
.home a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}
.home-header,
.home-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	max-width: 1440px;
	margin: auto;
	padding: 24px 5vw;
}
.home-header nav,
.home-footer nav {
	display: flex;
	gap: 32px;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
}
.home-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font:
		800 23px Manrope,
		sans-serif;
	letter-spacing: -0.05em;
}
.home-brand img {
	width: 35px;
	height: 35px;
	border-radius: 9px;
}
.home-signin {
	border: 1px solid #17243b;
	border-radius: 100px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.home-signin span,
.home-cta span,
.home-control a span {
	margin-left: 12px;
}
.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	gap: 5vw;
	align-items: center;
	max-width: 1440px;
	min-height: 640px;
	margin: auto;
	padding: 50px 5vw 100px;
}
.home-intro h1 {
	margin: 0;
	font:
		800 clamp(48px, 5.3vw, 82px) / 1.08 Manrope,
		sans-serif;
	letter-spacing: -0.055em;
}
.home-intro h1 em {
	color: #e7755c;
	font-style: normal;
}
.home-intro p {
	max-width: 480px;
	margin: 30px 0 32px;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.55;
	color: #4b5870;
}
.home .home-cta {
	display: inline-flex;
	align-items: center;
	border-radius: 100px;
	padding: 17px 23px;
	background: #17243b;
	color: white;
	font-weight: 700;
}
.home-access {
	display: block;
	margin-top: 15px;
	color: #667187;
	font-size: 13px;
}
.home-product {
	overflow: hidden;
	border: 1px solid #d9dce3;
	border-radius: 18px;
	background: white;
	box-shadow: 0 30px 70px -24px #17243b40;
	transform: rotate(1.3deg);
}
.home-window {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 13px 17px;
	border-bottom: 1px solid #e7e8ee;
	background: #faf9f8;
}
.home-window span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e7aba2;
}
.home-window span:nth-child(2) {
	background: #f1d69b;
}
.home-window span:nth-child(3) {
	background: #a8d9c5;
}
.home-window strong {
	margin-left: 13px;
	font-size: 11px;
}
.home-compose {
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	min-height: 405px;
}
.home-compose-main,
.home-compose-side {
	padding: 28px;
}
.home-compose-side {
	border-left: 1px solid #ececf0;
	background: #fcfcfc;
}
.home-compose small {
	color: #667187;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.11em;
}
.home-compose-main h2 {
	max-width: 320px;
	margin: 22px 0 15px;
	font:
		800 28px / 1.17 Manrope,
		sans-serif;
	letter-spacing: -0.04em;
}
.home-compose-main p {
	max-width: 300px;
	color: #5b6677;
	font-size: 13px;
	line-height: 1.5;
}
.home-media {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 32px;
	padding: 14px;
	border: 1px dashed #bfc9d5;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
}
.home-media-sun {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: #f6bc51;
	color: #1c2b47;
	font-size: 34px;
}
.home-media small {
	display: block;
	margin-top: 3px;
	font-weight: 500;
	letter-spacing: 0;
}
.home-preview {
	max-width: 245px;
	margin: 18px auto 0;
	overflow: hidden;
	border: 1px solid #e6e8ef;
	border-radius: 12px;
	background: white;
}
.home-preview-top {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px;
	font-size: 9px;
	font-weight: 700;
}
.home-preview-top b {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f6bc51;
}
.home-preview-top span:last-child {
	margin-left: auto;
}
.home-preview-art {
	display: flex;
	align-items: flex-end;
	height: 180px;
	padding: 17px;
	background: #c6e6db;
	color: #14223c;
	font:
		800 25px / 1.1 Manrope,
		sans-serif;
	letter-spacing: -0.04em;
}
.home-preview-art i {
	color: #dc674d;
	font-style: normal;
}
.home-preview p {
	margin: 0;
	padding: 10px;
	font-size: 10px;
}
.home-preview-tabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
	color: #687383;
	font-size: 9px;
	font-weight: 700;
}
.home-flow {
	padding: 105px 5vw 110px;
	background: #18263e;
	color: white;
}
.home-section-heading,
.home-steps {
	max-width: 1260px;
	margin: auto;
}
.home-section-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 40px;
}
.home-section-heading h2,
.home-networks h2,
.home-control h2 {
	max-width: 580px;
	margin: 0;
	font:
		800 clamp(38px, 4vw, 58px) / 1.12 Manrope,
		sans-serif;
	letter-spacing: -0.045em;
}
.home-section-heading p {
	max-width: 320px;
	color: #d4dce9;
	line-height: 1.55;
}
.home-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px;
	margin-top: 90px;
}
.home-steps article {
	padding-top: 22px;
	border-top: 1px solid #728197;
}
.home-steps article span {
	color: #f3ad9b;
	font-size: 13px;
	font-weight: 700;
}
.home-steps h3 {
	margin: 30px 0 12px;
	font:
		800 24px / 1.2 Manrope,
		sans-serif;
	letter-spacing: -0.03em;
}
.home-steps p {
	max-width: 320px;
	margin: 0;
	color: #cbd5e2;
	line-height: 1.6;
}
.home-networks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10vw;
	align-items: center;
	max-width: 1440px;
	margin: auto;
	padding: 120px 5vw;
}
.home-networks p,
.home-control p {
	max-width: 520px;
	color: #4b5870;
	font-size: 18px;
	line-height: 1.65;
}
.home-networks ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 0;
	list-style: none;
}
.home-networks li {
	padding: 25px;
	border: 1px solid #d6dae0;
	border-radius: 12px;
	font:
		800 20px Manrope,
		sans-serif;
}
.home-control {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 60px;
	padding: 105px max(5vw, calc((100vw - 1296px) / 2));
	background: #e5f3ec;
}
.home-control a {
	display: inline-block;
	margin-top: 17px;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.home-control-note {
	min-width: 320px;
	padding: 32px;
	border-radius: 16px;
	background: #fffaf2;
	box-shadow: 0 20px 45px -25px #17243b55;
	transform: rotate(-3deg);
}
.home-control-note span {
	color: #da674d;
	font-size: 13px;
	font-weight: 800;
}
.home-control-note strong {
	display: block;
	margin-top: 18px;
	font:
		800 22px / 1.65 Manrope,
		sans-serif;
}
.home-footer {
	padding-top: 36px;
	padding-bottom: 36px;
}
.home-footer > span {
	color: #687383;
	font-size: 13px;
}
.home ::selection {
	background: #f1b5a5;
	color: #17243b;
}
@media (max-width: 900px) {
	.home-header nav {
		display: none;
	}
	.home-hero {
		grid-template-columns: 1fr;
		gap: 55px;
		padding-top: 60px;
	}
	.home-product {
		max-width: 700px;
		transform: none;
	}
	.home-section-heading {
		display: block;
	}
	.home-steps {
		gap: 22px;
	}
	.home-networks {
		gap: 36px;
	}
}
@media (max-width: 650px) {
	.home-header,
	.home-footer {
		padding: 20px;
	}
	.home-hero {
		padding: 60px 20px 80px;
	}
	.home-intro h1 {
		font-size: clamp(43px, 12vw, 64px);
	}
	.home-compose-main,
	.home-compose-side {
		padding: 16px;
	}
	.home-compose-main h2 {
		font-size: 20px;
	}
	.home-media {
		margin-top: 15px;
	}
	.home-preview-art {
		height: 130px;
		font-size: 19px;
	}
	.home-flow,
	.home-networks,
	.home-control {
		padding: 75px 20px;
	}
	.home-steps,
	.home-networks {
		grid-template-columns: 1fr;
	}
	.home-steps {
		margin-top: 55px;
	}
	.home-control {
		display: block;
	}
	.home-control-note {
		min-width: 0;
		margin-top: 50px;
	}
	.home-footer {
		flex-wrap: wrap;
	}
	.home-footer nav {
		width: 100%;
		gap: 22px;
	}
}