/*#region MARK: SHARED ****************************************************************************/

html, body {
	margin: 0;
	padding: 0;
	font: normal 100%/1.6 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	box-sizing: border-box;
	color: #fff;
	background: #0e0f14;
	overflow-x: hidden;
}

body * { box-sizing: inherit; }

a {
	color: #00c4ff;
	color: color(display-p3 0 0.736 1);
	text-decoration: none;
}
a:hover { text-decoration: underline; }


h1 { font-size: clamp(26px, 5vw, 3rem); font-weight: 200; margin: 0; }
h2 { font-size: clamp(24px, 6vw, 4rem); font-weight: 300; margin: 0; line-height: 1.4; }
h3 { font-size: clamp(18px, 2.2vw, 1.5rem);
	font-weight: 200;
	margin: 3rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #fff6;
}
p { font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.8; }

b { font-weight: 700; }

button {
	background: #00693b;
	background: color(display-p3 0 0.525 0.288 / 0.7);
	border-radius: 8px;
	border: 0;
	color: inherit;
	display: inline-block;
	font-size: 1rem;
	padding: 0.6em;
	text-decoration: none;
	box-shadow: 0 2px 0 #0006;
	-webkit-user-select: none;
	user-select: none;
}
button:active { box-shadow: 0 1px 0 #0003; transform: translateY(2px); }

/* #endregion *************************************************************************************/






/*#region MARK: HEADER ****************************************************************************/
header .inset { padding: 0; height: 4rem; }

header .inset,
footer .inset { align-items: center; }

header .download-button,
header .download-button img { display: block; }

header .logo {
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: 0.5rem;
	justify-content: start;
	height: 100%;
	color: inherit;
	text-decoration: none;
	margin-left: -0.5rem;
}

header h1 { font-weight: 200; font-size: 1.7rem; letter-spacing: 1px; margin: 0; }
header svg { height: 38px; }
header em {
	font-weight: 200;
	font-size: 0.9em;
	margin: 0 0 0 1rem;
	font-style: italic;
	color: #fff6;
}
@media screen and (max-width: 900px) {
	header h1 { letter-spacing: 0; }
}
@media screen and (max-width: 600px) {
	header .download-button { display: none; }
	header .inset {
		width: 100%;
		flex-flow: column;
		align-items: center;
		height: auto;
		padding: 1rem 0;
	}
}
@media screen and (max-width: 600px) {
	header .logo { align-items: start; }
	header .logo svg { margin-top: 5px; }
	header em { display: block; font-size: 0.7em; margin-left: -3ex; }
}
/* #endregion *************************************************************************************/






/*#region MARK: FOOTER ****************************************************************************/
footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }

nav {
	flex-flow: row;
	align-items: center;
	margin-left: -0.5rem; gap: 2rem;
	display: flex;
	justify-content: space-between;
}

nav a { padding: 0.5rem; }

.copyright { color: #fff6; }


@media screen and (max-width: 900px) {
	footer .inset { align-items: end; }
	footer nav {
		flex-flow: column;
		align-items: start;
		margin: 0;
		gap: 0;
	}
}
@media screen and (max-width: 600px) {
	footer .inset { flex-flow: column; align-items: start; padding: 2rem; }
}
/* #endregion *************************************************************************************/






/*#region MARK: SECTIONS **************************************************************************/
section { width: 100%; background: #181e28; padding: 1rem 0; }

.inset {
	display: flex;
	flex-flow: row;
	align-items: start;
	justify-content: space-between;
	margin: 0 auto;
	padding-block: 2rem;
	width: clamp(480px, 90vw, 1100px);
	gap: 1rem;
}

.block .inset { display: block; }
.block h1 { margin-bottom: 2rem; }

.block p,
.block ul { margin: 0; }


section .cards {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 3rem;
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

section .card {
	margin: 0;
	border-radius: 3px;
	display: flex;
	flex-flow: row;
	align-items: start;
	justify-content: start;
	gap: 1rem;
	font-size: 1.1rem;
}

section .card svg { width: 3em; height: 3em; flex-shrink: 0; opacity: 0.7; }


@media screen and (max-width: 600px) {
	section .inset { width: 100%; padding: 2rem; }
	section .inset .cards { grid-template-columns: 1fr; grid-template-rows: auto; }
	section .card { align-items: center; text-align: start; }
}



/* MARK: > HERO
***************************************************************************************************/
.hero { background: linear-gradient(145deg, #460095, #007e4d); }
.hero .inset { gap: 0; align-items: stretch; }
.hero .headline { flex: 1.5; z-index: 1; }
.hero .phone {
	flex: 1;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.hero .phone img {
	margin: -50px;
	margin-bottom: -100px;
	width: 210%;
	position: absolute;
}

.hero h1 { display: flex; align-items: center; opacity: 0.8; }
.hero h1 .logo { width: 1.3em; height: 1.3em; margin: 0 0.1em 0 -8px; display: inline-block; }
.hero h2 { margin-block: 0.3em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.hero .download-button { display: inline-block; }
.hero .download-button img { height: clamp(40px, 5vw, 70px); }


@media screen and (max-width: 600px) {
	.hero .phone img { width: 250%; }
	.hero .download-button { margin-top: 2rem; }
}



/* MARK: > INTRO
***************************************************************************************************/
.intro { background: linear-gradient(to top, #21284e, #282040); }
.intro .inset { gap: 3rem; }
.intro .text { flex: 3; }
.intro .image { flex: 2; }
.intro img { width: 100%; }


@media screen and (max-width: 760px) {
	.intro .inset { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; position: relative; }
	.intro .image {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		width: 350px;
		opacity: 0.3;
		position: absolute;
		align-self: center;
		justify-self: center;
	}
	.intro .text p {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		position: relative;
		z-index: 2;
		text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
	}
}


/* MARK: > FEATURES
***************************************************************************************************/
.features { background: #00170a; color: #fffd; }
.features .inset { flex-flow: column; }
.features p { margin: 0; }



/* MARK: > TESTIMONIALS
***************************************************************************************************/
.testimonials { background: linear-gradient(212deg, #20163c, #0c332c); }
.testimonials .inset { flex-flow: column; }
.testimonials .cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: auto; }
.testimonials .card { flex-flow: column; align-items: stretch; gap: 0; }
.testimonials blockquote {
	margin: 0;
	padding: 2em 0 0;
	font-style: italic;
	background: url("../img/quote.svg") no-repeat 0 0;
	background-size: 1.5em;
}
.testimonials .name { text-align: right; margin-right: 0.5rem; }

@media screen and (max-width: 600px) {
	section .inset .cards { grid-template-columns: 1fr; grid-template-rows: auto; }
	section .card { align-items: center; text-align: start; }
}
/* #endregion *************************************************************************************/






/*#region MARK: CONTACT FORM **********************************************************************/
.contact-form {
	display: grid;
	width: clamp(300px, 100%, 800px);
	margin: 2rem 0;
	padding: 0;
	grid-gap: 1rem;
	grid-template-columns: 90px 1fr;
}

.contact-form label { font-size: 1.1rem; font-weight: 200; align-self: center; }
.contact-form label[for="message"] { align-self: start; padding-top: 0.7rem; }

.contact-form input,
.contact-form textarea {
	font: inherit;
	width: auto;
	padding: 10px 15px;
	border: 1px solid #fff6;
	border-radius: 10px;
	background-color: #000;
	color: #fff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #fff6; }

.contact-form textarea { resize: vertical; min-height: 150px; }

.contact-form button { max-width: 140px; }
/* #endregion *************************************************************************************/