/* ─── RESET ─── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--ff-body);
	background: var(--bg-0);
	color: var(--txt);
	overflow-x: hidden;
}

/* Grain overlay */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 9999;
}

/* ─── BUTTONS ─── */
.btn {
	display: inline-block;
	font-family: var(--ff-head);
	font-size: 1.05rem;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition:
		transform 0.2s,
		background 0.2s,
		color 0.2s;
	padding: 0.9rem 2.2rem;
}
.btn:hover {
	transform: translateY(-2px);
}
.btn-fill {
	background: var(--amber);
	color: var(--bg-0);
	clip-path: polygon(
		0 0,
		calc(100% - 14px) 0,
		100% 14px,
		100% 100%,
		0 100%
	);
}
.btn-fill:hover {
	background: var(--amber-hi);
}
.btn-ghost {
	border: 1px solid var(--silver-lo);
	color: var(--silver);
}
.btn-ghost:hover {
	border-color: var(--amber);
	color: var(--amber);
}

/* ─── SECTION BASE ─── */
.sec {
	position: relative;
}
.inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 6rem 3.5rem;
}
.tag {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--amber);
	margin-bottom: 0.8rem;
}
.tag::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--amber);
}
.sec-h2 {
	font-family: var(--ff-head);
	font-size: clamp(2.4rem, 4.5vw, 3.8rem);
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--txt);
	margin-bottom: 2rem;
}

/* Diagonal slice between sections */
.slice-bottom::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 70px;
	background: var(--bg-1);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.slice-bottom-2::after {
	background: var(--bg-2);
}

/* ─── SCROLL ANIMATION ─── */
.fu {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.fu.vis {
	opacity: 1;
	transform: translateY(0);
}
.fu:nth-child(1) {
	transition-delay: 0s;
}
.fu:nth-child(2) {
	transition-delay: 0.09s;
}
.fu:nth-child(3) {
	transition-delay: 0.18s;
}
.fu:nth-child(4) {
	transition-delay: 0.27s;
}
.fu:nth-child(5) {
	transition-delay: 0.36s;
}
.fu:nth-child(6) {
	transition-delay: 0.44s;
}