/* :root {
	--primary-color: #33759e;
	--secondary-color: green;
	--background-color: white;
	--typeface-color: #555555;
	--typeface-logo: 'Cardo';
	--typeface-accent: "Montserrat";
	--typeface-main: 'Montserrat', sans-serif;
} */

* :root {
	margin: 0;
	padding: 0;
/*	box-sizing: border-box; */
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	color: #333;
	margin: 0;
}

article {
	margin: 3rem;
}

footer {
	margin: 3rem;
}


/* --- Hero --- */
.hero {
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.5rem 3rem 1.5rem;
	text-align: center;
	color: #fff;
	background: linear-gradient(135deg, #418FDE 0%, #5398D6 100%);
}

.hero-content {
	max-width: 1000px;
	width: 100%;
}

.hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	margin-bottom: 0.75rem;
}

.hero p {
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	max-width: 600px;
	margin: 0 auto 2rem auto;
}

/* --- Device Images --- */

.images {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.device {
  display: block;
}

.phone {
	width: 160px;
	height: 320px;
}

.tablet {
	width: 260px;
	height: 340px;
}

/* --- Intro Section --- */
.intro {
	padding: 1.5rem;
	text-align: center;
	margin: 1rem;	
}

.intro h2 {
	font-size: 2rem;
	margin-bottom: 0.75rem;
}

.intro p {
	max-width: 650px;
	margin: 0 auto;
	font-size: 1.05rem;
}

/* --- Mobile Adjustments --- */
@media (max-width: 600px) {
	.hero {
		padding: 2.5rem 1rem;
	}

	.images {
		gap: 1.25rem;
	}

	.phone {
		width: 130px;
		height: 260px;
	}

	.tablet {
		width: 200px;
		height: 260px;
	}
}

/* --- Large Screens --- */
@media (min-width: 900px) {
	.images {
		gap: 3rem;
	}

	.phone {
		width: 180px;
		height: 360px;
	}

	.tablet {
		width: 300px;
		height: 400px;
	}
}