/* ElevenCode home page: hero copy, steps, features, the example gallery and the closing CTA. The prompt-to-site demo itself is in demo.css. Mobile-first; all colours, sizes
   and radii come from the tokens in tokens.css / theme.css. */

.hero {
	display: grid;
	gap: var(--space-10);
	padding-block: clamp(48px, 7vw, 88px) var(--band);
}

.hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.hero__title {
	max-inline-size: 18ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.hero__note {
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* Scroll reveal. The script turns data-scroll-reveal="on" on the root only when
   the visitor allows motion, so a browser without script never hides anything. */

html[data-scroll-reveal="on"] [data-reveal] {
	transition:
		opacity 420ms ease,
		transform 420ms ease;
}

html[data-scroll-reveal="on"] [data-reveal]:not([data-revealed]) {
	opacity: 0;
	transform: translateY(12px);
}

html[data-scroll-reveal="on"] [data-reveal-order="2"] {
	transition-delay: 60ms;
}

html[data-scroll-reveal="on"] [data-reveal-order="3"] {
	transition-delay: 120ms;
}

html[data-scroll-reveal="on"] [data-reveal-order="4"] {
	transition-delay: 180ms;
}

html[data-scroll-reveal="on"] [data-reveal-order="5"] {
	transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
	html[data-scroll-reveal="on"] [data-reveal] {
		transition: none;
	}

	html[data-scroll-reveal="on"] [data-reveal]:not([data-revealed]) {
		opacity: 1;
		transform: none;
	}
}

@media print {
	html[data-scroll-reveal="on"] [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* Sections */

.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-inline-size: 62ch;
	margin-block-end: var(--space-8);
}

.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.step {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

.step__number {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.step__title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

.step__text {
	color: var(--text-secondary);
}

.cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.feature {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

.feature__icon {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text);
}

.feature__title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

.feature__text {
	color: var(--text-secondary);
}

/* The Mac app: the product itself, a quiet card between the steps and the examples. */
.macapp {
	display: grid;
	align-items: center;
	gap: var(--space-8);
	padding: clamp(24px, 4vw, 40px);
}

.macapp__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.macapp__text {
	max-inline-size: 52ch;
	color: var(--text-secondary);
}

.macapp__points {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.macapp__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.macapp__points .icon {
	color: var(--text-secondary);
}

/* Example gallery: real pictures of work ElevenCode made. The frame keeps one height for
   every card and shows the whole picture (never cropped), on a quiet surface. */
.gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.example {
	padding: var(--space-4);
}

.example__figure {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
}

.example__image {
	display: block;
	inline-size: 100%;
	block-size: clamp(220px, 24vw, 320px);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
	object-fit: contain;
}

.example__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.example__title {
	font-weight: var(--weight-semibold);
}

.example__kind {
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* Closing call to action: an ink block on light, a raised card on dark (never a light slab). */
.cta-band {
	padding-block-end: 0;
}

.cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	padding: clamp(32px, 5vw, 56px);
	border: 1px solid light-dark(transparent, var(--border));
	border-radius: var(--radius-card);
	background: light-dark(var(--ink), var(--surface));
	color: light-dark(var(--on-ink), var(--text));
}

.cta__title {
	max-inline-size: 22ch;
}

/* The closing action is always the inverse of its card: a white pill on the ink card in light,
   a near-white pill on the dark card in dark, so it never sinks into the surface. */
.cta .btn {
	border-color: transparent;
	background: light-dark(var(--surface), var(--ink));
	color: light-dark(var(--text), var(--on-ink));
}

.cta .btn:hover {
	background: light-dark(var(--surface-hover), var(--ink));
}

.cta__text {
	max-inline-size: 52ch;
	opacity: 0.75;
}

@media (min-width: 761px) {
	.hero {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

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

	.macapp {
		grid-template-columns: 1.2fr 1fr;
	}

	.cards--four {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1101px) {
	.cards--four {
		grid-template-columns: repeat(4, 1fr);
	}
}