/* A2 — Progress Animation. HTML and CSS only, no JavaScript.
   The bar is driven by a CSS scroll timeline: the animation runs from 0% to 100%
   as the document scrolls from the top to the bottom. */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Segoe UI', system-ui, sans-serif;
	color: #21262e;
	background: #f6f4ef;
	line-height: 1.7;
}

/* --- progress bar ------------------------------------------------------- */

.progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background: #e0dcd2;
	z-index: 10;
}

.progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #ff7a45, #e0574a);

	animation: fill-progress linear;
	animation-timeline: scroll(root);
}

@keyframes fill-progress {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

/* --- page --------------------------------------------------------------- */

.hero {
	padding: 96px 24px 64px;
	text-align: center;
	background: #21262e;
	color: #f6f4ef;
}

.hero h1 {
	margin: 0 0 12px;
	font-size: 46px;
	letter-spacing: -0.5px;
}

.hero p {
	margin: 0;
	opacity: 0.7;
}

.article {
	max-width: 680px;
	margin: 0 auto;
	padding: 56px 24px;
}

.article section {
	margin-bottom: 56px;
}

.article h2 {
	font-size: 26px;
	margin: 0 0 12px;
}

.article p {
	margin: 0 0 18px;
}

.foot {
	padding: 48px 24px 96px;
	text-align: center;
	color: #6c7480;
	border-top: 1px solid #e0dcd2;
}