.hero {
	min-height: 100vh;
	display: grid;
	align-items: end;
	padding: 130px 0 52px;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(28px, 5vw, 70px);
	align-items: end;
}

.hero__copy {
	display: grid;
	gap: var(--space-5);
}

.hero__actions,
.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

.hero__visual {
	position: relative;
}

.hero__sticker {
	position: absolute;
	right: -10px;
	top: 18%;
	z-index: 2;
	max-width: 170px;
	border: var(--border);
	border-radius: var(--radius-xs);
	background: color-mix(in srgb, var(--butter), var(--surface) 18%);
	box-shadow: var(--shadow-md);
	padding: var(--space-4);
	font-weight: 900;
	transform: rotate(7deg);
}

.category-card {
	min-height: 230px;
	display: grid;
	align-content: end;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	padding: var(--space-5);
	overflow: hidden;
	transition:
		transform var(--fast),
		box-shadow var(--fast);
}

.category-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--shadow-lg);
}

.category-card:nth-child(1) {
	background: color-mix(in srgb, var(--sage), var(--surface) 16%);
}
.category-card:nth-child(2) {
	background: var(--blue);
	color: #fffaf3;
}
.category-card:nth-child(3) {
	background: color-mix(in srgb, var(--butter), var(--surface) 12%);
}
.category-card:nth-child(4) {
	background: var(--pink);
	color: #171311;
}

[data-theme="dark"] .category-card:nth-child(1) {
	background: color-mix(in srgb, var(--sage), var(--surface) 70%);
	color: var(--ink);
}
[data-theme="dark"] .category-card:nth-child(2) {
	background: color-mix(in srgb, var(--blue), var(--surface) 55%);
	color: var(--ink);
}
[data-theme="dark"] .category-card:nth-child(3) {
	background: color-mix(in srgb, var(--butter), var(--surface) 70%);
	color: var(--ink);
}
[data-theme="dark"] .category-card:nth-child(4) {
	background: color-mix(in srgb, var(--pink), var(--surface) 55%);
	color: var(--ink);
}

.routine-band {
	border-block: var(--border);
	background: var(--surface);
}

.quiz-panel,
.newsletter-panel {
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.4rem, 5vw, 3rem);
}

[data-theme="dark"] .quiz-panel,
[data-theme="dark"] .newsletter-panel {
	background: var(--surface-strong);
	box-shadow: var(--shadow-md);
}

.newsletter-panel form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.journal-card img {
	aspect-ratio: 16 / 11;
	width: 100%;
	object-fit: cover;
	border: var(--border);
	border-radius: var(--radius-xs);
}

@media (max-width: 900px) {
	.hero {
		min-height: auto;
	}

	.hero__grid,
	.newsletter-panel form {
		grid-template-columns: 1fr;
	}
}