@font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(../fonts/quicksand-latin-var.woff2) format('woff2');
}

:root {
	--purple: #967cac;
	--purple-dark: #786a8d;
	--grey: #a0aab4;
	--icon: #9faab4;
	--footer-bg: #343b41;
	--footer-edge: #4d5a63;
	--rule: #f2f2f2;
	--display: 'Quicksand', sans-serif;
	--body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font: 14px/20px var(--body);
	color: #333;
	background: var(--footer-bg);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--footer-bg) url(../img/bg-1200.webp) center / cover no-repeat;
}

@media (min-width: 1201px), (min-resolution: 1.5dppx) and (min-width: 700px) {
	body::before { background-image: url(../img/bg-1920.webp); }
}

::selection { background: var(--purple); color: #fff; }

.container {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 20px;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-dark); }

img { max-width: 100%; height: auto; }

h1, h2 {
	font-family: var(--display);
	font-weight: 300;
	letter-spacing: -0.08em;
	line-height: 0.96;
	margin: 0;
}

h1 {
	font-size: clamp(32px, 5.5vw, 50px);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

h2 {
	font-size: clamp(30px, 5vw, 50px);
	color: var(--grey);
}

h2 span { color: var(--purple); font-weight: 400; }

p { color: var(--grey); margin: 25px 0; }

#home { padding: 0 20px; }

.hero {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	align-items: center;
	padding-block: 60px;
}

.hero h1 { grid-column: 2; grid-row: 1; }

.scroll-cue {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: center;
	width: 46px;
	color: rgba(255, 255, 255, 0.85);
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
	transition: transform 0.2s;
}

.scroll-cue:hover { color: #fff; transform: translateY(3px); }
.scroll-cue svg { display: block; width: 100%; height: auto; }

.nav-bar { padding-top: 10px; }

.nav-bar .container {
	border-bottom: 1px solid var(--rule);
	padding-bottom: 10px;
}

.nav-bar ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-bar li + li { border-left: 1px solid var(--rule); padding-left: 18px; }

.nav-bar a { color: var(--grey); padding: 10px 9px; display: inline-block; }
.nav-bar a:hover, .nav-bar a.active { color: var(--purple); }

#features {
	background: #fff;
	padding: 0 20px 10px;
}

.feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
	padding: 60px 0;
	border-bottom: 1px solid var(--rule);
}

.feature figure { margin: 0; }
.feature figure img { display: block; }

.feature.reverse figure { order: 2; }

.jump { display: flex; gap: 14px; margin-bottom: 0; }
.jump a { color: var(--icon); display: block; width: 60px; }
.jump a:hover { color: var(--purple); }
.jump svg { display: block; width: 100%; height: auto; }

.btn {
	display: inline-block;
	font: 18px/1.2 var(--body);
	background: var(--purple);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border: 0;
	border-radius: 25px;
	padding: 12px 23px;
	cursor: pointer;
}

.btn:hover { background: var(--purple-dark); color: #fff; }

#terms {
	padding: 0 20px;
	text-align: center;
}

#terms .container { padding-block: 12vh; }
#terms h1 { margin-bottom: 30px; }

.notfound { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.notfound p { color: #edf1f1; margin-bottom: 30px; }

dialog {
	width: 560px;
	max-width: calc(100% - 40px);
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	background: #fff;
}

dialog::backdrop { background: rgba(0, 0, 0, 0.8); }

.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 15px;
	border-bottom: 1px solid #eee;
}

.dialog-header h3 {
	font: 300 36px/48px var(--display);
	letter-spacing: -2px;
	color: var(--grey);
	margin: 0;
}

.dialog-x {
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: #000;
	opacity: 0.2;
	cursor: pointer;
	padding: 0 4px;
}

.dialog-x:hover { opacity: 0.4; }

.dialog-body { padding: 15px; }
.dialog-body p { margin: 0; text-align: justify; }

.dialog-footer {
	padding: 0 15px 15px;
	text-align: right;
}

.footer {
	background: var(--footer-bg);
	border-top: 5px solid var(--footer-edge);
	padding: 40px 20px;
	text-align: center;
}

.footer span {
	color: #fff;
	font: italic 400 16px/2.2 var(--display);
}

@media (max-width: 767px) {
	.hero {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero h1 { grid-column: 1; }

	.feature {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 40px 0;
	}

	.feature.reverse figure { order: 0; }

	.jump { justify-content: center; }
	.jump a { width: 50px; }

	.feature-text { text-align: center; }

	.footer span { font-size: 15px; }
}