@layer components {
	.home-section {
		padding-block: var(--space-8);
	}

	.home-section__inner {
		max-width: var(--content-wide);
		margin-inline: auto;
		padding-inline: var(--space-3);
	}

	.home-section h2 {
		margin-bottom: var(--space-4);
	}

	/* Hero (spec 9.2) */
	.hero {
		background: var(--color-bg-subtle);
		min-height: 460px;
		display: flex;
		align-items: center;
	}

	.hero__inner {
		max-width: var(--content-wide);
		margin-inline: auto;
		padding-inline: var(--space-3);
		width: 100%;
	}

	.hero__lead {
		margin-top: var(--space-3);
		max-width: var(--content-reading);
	}

	.hero__actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin-top: var(--space-4);
	}

	.hero__search {
		margin-top: var(--space-4);
	}

	.hero__search input[type="search"] {
		width: 100%;
		min-height: 44px;
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-sm);
	}

	/* Buttons */
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: var(--space-2) var(--space-4);
		border-radius: var(--radius-sm);
		font-size: var(--font-size-button);
		font-weight: 600;
		text-decoration: none;
	}

	.button--primary {
		background: var(--color-primary-600);
		color: var(--color-bg-surface);
	}

	.button--primary:hover,
	.button--primary:focus-visible {
		background: var(--color-primary-700);
		color: var(--color-bg-surface);
	}

	.button--secondary {
		background: transparent;
		color: var(--color-primary-600);
		border: 1px solid var(--color-primary-600);
	}

	.button--secondary:hover,
	.button--secondary:focus-visible {
		background: var(--color-bg-subtle);
	}

	/* Featured categories */
	.category-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}

	.category-card a {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: var(--space-4);
		min-height: 44px;
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-md);
		text-decoration: none;
		color: var(--color-text-heading);
	}

	.category-card a:hover,
	.category-card a:focus-visible {
		border-color: var(--color-primary-600);
	}

	.category-card__name {
		font-weight: 700;
	}

	/* Roadmap */
	.home-roadmap {
		background: var(--color-bg-subtle);
	}

	.home-roadmap .button {
		margin-top: var(--space-3);
	}

	/* Follow links */
	.sns-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.sns-list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-sm);
		text-decoration: none;
		color: var(--color-text-heading);
	}

	.sns-list a:hover,
	.sns-list a:focus-visible {
		border-color: var(--color-primary-600);
		color: var(--color-primary-600);
	}

	@media (min-width: 768px) {
		.hero {
			min-height: 500px;
		}

		.hero__content {
			max-width: 650px;
		}

		.hero__actions {
			flex-direction: row;
		}

		.category-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.hero {
			min-height: 560px;
		}

		.hero__content {
			max-width: 720px;
		}

		.hero__search input[type="search"] {
			max-width: 640px;
		}

		.category-grid {
			grid-template-columns: repeat(6, 1fr);
		}
	}
}