/* =========================================================
   FYNIXIUM — BUILDER SAMPLE
   Northline Construction
   ========================================================= */

.builder-page {
	--builder-accent: #c7a46a;
	--builder-accent-soft: rgba(199, 164, 106, 0.12);
}


	/* Hero */

	.builder-page .project-browser {
		background: linear-gradient( 135deg, rgba(199, 164, 106, 0.08), transparent 50% ), #0b0e13;
	}

	.builder-page .project-browser-copy > span {
		color: var(--builder-accent);
	}

	.builder-page .mock-button {
		background: var(--builder-accent);
	}


/* Browser */

.builder-browser {
	position: relative;
	background: linear-gradient( 120deg, #0b0e13, #13110d );
}

	.builder-browser::after {
		content: "CRAFTED";
		position: absolute;
		right: 5rem;
		top: 5rem;
		padding: 0.8rem 1.2rem;
		color: var(--builder-accent);
		background: var(--builder-accent-soft);
		border: 1px solid rgba(199, 164, 106, 0.25);
		border-radius: 4px;
		font-family: "Space Grotesk", sans-serif;
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.15em;
	}


/* Project accent */

.builder-page .project-category {
	color: var(--builder-accent);
}


/* Construction project stats */

.builder-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 4rem;
}

.builder-stat {
	padding: 2rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
}

	.builder-stat span {
		display: block;
		margin-bottom: 0.75rem;
		color: var(--builder-accent);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.08em;
	}

	.builder-stat h3 {
		margin: 0;
		font-family: "Space Grotesk", sans-serif;
	}


/* Mobile */

@media (max-width: 700px) {

	.builder-browser::after {
		right: 1.5rem;
		top: 4rem;
		font-size: 0.6rem;
	}

	.builder-stats {
		grid-template-columns: 1fr;
	}
}