section.hero {
	background: var(--accent-primary);
	display: flex;
	color: black;
}

.hero .intro {
	flex: 1;
	padding: 20px;
	font-size: 1rem;
}

.hero .intro h1 { font-size: 2.3rem; }
.hero .intro h3 {
	font-size: 1.5rem;
	margin-bottom: 20px;
}
.hero .intro p {
	font-size: 1.2rem;
	margin-bottom: 50px;
}

.actions {
	display: flex;
	gap: 20px;
	width: 100%;
}

.actions button,
.actions a {
	flex: 1;
	text-align: center;
}

.hero .showcase {
	flex: 1;
}

.showcase img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.features {
	padding: 20px;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.card {
	background: var(--background-secondary);
	border-radius: 8px;
	padding: 10px;
}

h2, h4 {
	margin-bottom: 10px;
}
h2 { color: var(--accent-primary) }
h4 { color: var(--accent-secondary) }