* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
}

body {
	background-color: #252626;
	color: #333;
}

.container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

header {
	background-image: url('../img/bg-head.png');
	background-repeat: repeat-x;
	background-position: top left;
	height: 88px;
	margin-bottom: -10px;
	position: relative;
	z-index: 10;

	& > .container {
		height: calc(100% - 10px);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	nav {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;

		a {
			font-weight: 600;
			text-decoration: none;
			color: #333;
			font-size: 1.25rem;

			&:hover {
				color: #F37335;
			}
		}
	}

	.logo img {
		height: 48px;
	}
}

footer {
	width: 100%;
	height: 96px;
	background-image: url('../img/bg-footer.png');
	background-repeat: repeat-x;
	background-position: top left;
	color: white;

	& > .container {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: url('../img/bg-footer-fade.png');
		background-repeat: no-repeat;
		background-position: center top;
	}

	nav {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;

		a {
			font-weight: 600;
			text-decoration: none;
			color: white;

			&:hover {
				color: #F37335;
			}
		}
	}
}

.hero {
	padding: 4rem 0 6rem;
	background: #FDC830;
	background: -webkit-radial-gradient(center top, circle, #FDC830, #F37335);
	background: radial-gradient(circle at center top, #FDC830, #F37335);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 50% 100%, 0 calc(100% - 2rem));

	h2 {
		font-size: 5rem;
		font-weight: 700;
		text-align: center;
		margin-bottom: 1rem;
		font-style: italic;
		color: rgb(241, 241, 241);
		text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
		font-family: 'Vodka Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
	}

	.subhead {
		max-width: 42rem;
		margin: 0 auto 2rem;
		font-size: 1.35rem;
		line-height: 1.5;
		font-style: italic;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.hero__graph {
		display: block;
		width: min(32rem, 80%);
		height: 5rem;
		margin: 0 auto 1.75rem;
		overflow: visible;
		filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18));
	}

	.hero__graph-area {
		fill: url(#hero-graph-fill);
	}

	.hero__graph-line {
		fill: none;
		stroke: rgba(255, 255, 255, 0.95);
		stroke-width: 3;
		stroke-linejoin: round;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
	}

	.hero__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}

	.btn {
		position: relative;
		display: block;
		width: fit-content;
		margin: 0 auto;
		padding: 0.85rem 2.25rem;
		overflow: hidden;
		border: 1px solid #143d73;
		border-radius: 0.25rem;
		background: linear-gradient(to bottom left, #12AEF5, #2253B6);
		color: #fff;
		font-size: 1.25rem;
		font-weight: 700;
		font-style: italic;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		text-decoration: none;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.5) inset,
			0 -1px 3px rgba(0, 0, 0, 0.25) inset,
			0 3px 6px rgba(0, 0, 0, 0.2);
		transform: skewX(-6deg);
		transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;

		&::before {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			height: 50%;
			border-radius: 0.25rem 0.25rem 0 0;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
			content: '';
			pointer-events: none;
		}

		&::after {
			position: absolute;
			top: 0;
			left: -80%;
			width: 55%;
			height: 100%;
			background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent);
			transform: skewX(-20deg);
			content: '';
			pointer-events: none;
		}

		&:hover {
			transform: translateY(-2px) skewX(-6deg);
			filter: brightness(1.06);
			box-shadow:
				0 1px 0 rgba(255, 255, 255, 0.6) inset,
				0 -1px 3px rgba(0, 0, 0, 0.25) inset,
				0 6px 12px rgba(0, 0, 0, 0.25);
		}

		&:hover::after {
			animation: btn-sheen 0.75s ease;
		}

		&:active {
			transform: translateY(1px) skewX(-6deg);
			box-shadow:
				0 1px 2px rgba(0, 0, 0, 0.4) inset,
				0 1px 2px rgba(0, 0, 0, 0.3);
		}
	}

	/* In the two-button row the auto side margins would spread the buttons apart,
	   so reset them and let the flex gap handle spacing. */
	.hero__actions .btn {
		margin: 0;
	}

	/* Gray variant used for the secondary "Get Started" action so the blue
	   "Download" button reads as the primary call to action. */
	.btn--gray {
		border-color: #2b2d31;
		background: linear-gradient(to bottom left, #9aa0a8, #44474c);
	}
}

@keyframes btn-sheen {
	from {
		left: -80%;
	}

	to {
		left: 130%;
	}
}

/* Version badge: a small pill in the hero that surfaces the current framework
   version. Sits on the orange hero, so it's a translucent light pill. */
.badge {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	margin: 0 auto 1.25rem;
	padding: 0.3rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;

	svg {
		width: 0.9em;
		height: 0.9em;
		fill: currentColor;
		filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
	}

	&:hover {
		background: rgba(255, 255, 255, 0.28);
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
}

.features {
	padding: 4rem 0;

	& > .container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}

.feature {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	color: #e9e9e9;

	h3 {
		margin: 0 0 0.5rem;
		font-size: 1.35rem;
		font-weight: 700;
		font-style: italic;
	}

	p {
		font-size: 1rem;
		line-height: 1.5;
		color: #b8b8b8;
	}
}

.feature__icon {
	display: block;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	fill: url(#icon-gradient);
}

/* Small caption under the hero download button (file size + date). */
.hero__meta {
	margin: 1rem auto 0;
	text-align: center;
	font-size: 0.95rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Inert state for the download button when the package hasn't been built yet. */
.btn.is-disabled {
	cursor: default;
	opacity: 0.55;
	pointer-events: none;
	filter: grayscale(0.35);
}

/* The "what's inside / requirements" block below the download hero. */
.download {
	padding: 4rem 0;

	.download__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.download__card {
		color: #e9e9e9;

		h3 {
			margin: 0 0 0.5rem;
			font-size: 1.25rem;
			font-weight: 700;
			font-style: italic;
		}

		p {
			font-size: 1rem;
			line-height: 1.5;
			color: #b8b8b8;
		}

		code {
			font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
			font-size: 0.9em;
			color: #f1f1f1;
		}

		a {
			color: #F37335;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

@media (max-width: 960px) {
	/* Below the container's max-width the box spans the full viewport, so it needs
	   side padding to keep content off the screen edges. At >=960px the max-width
	   already leaves gutters, so no padding is applied. */
	.container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

@media (max-width: 768px) {
	/* Tablet: pull the oversized hero type down to something readable. Container
	   side padding is handled by the 960px breakpoint above. */
	.features > .container {
		grid-template-columns: 1fr;
	}

	.download .download__grid {
		grid-template-columns: 1fr;
	}

	.hero {
		padding: 3rem 0 4.5rem;
	}

	.hero h2 {
		font-size: 3.25rem;
	}

	.hero .subhead {
		font-size: 1.15rem;
	}
}

@media (max-width: 480px) {
	/* Phone: shrink the hero headline further, tighten the header/footer nav so the
	   logo and links stop crowding, and pull container padding in a touch. */
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	header > .container {
		gap: 0.75rem;
	}

	header nav {
		gap: 0.75rem;
	}

	header nav a {
		font-size: 1rem;
	}

	.hero {
		padding: 2.5rem 0 4rem;
	}

	.hero h2 {
		font-size: 2.4rem;
	}

	footer > .container {
		gap: 0.75rem;
	}

	footer nav {
		gap: 0.75rem;
	}

	footer,
	footer nav a {
		font-size: 0.9rem;
	}
}