value-props {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4em;
	padding: 6em 2em;
	max-width: 80em;
	margin: 0 auto;

	header.section-header {
		text-align: center;
		max-width: 40em;

		h2 {
			margin: 0 0 0.4em 0;
			font-size: 2.5rem;
			font-weight: 800;
			letter-spacing: -0.02em;
			color: var(--text-main);
			text-wrap: balance;
		}

		p {
			margin: 0;
			font-size: 1.15rem;
			color: var(--text-muted);
		}
	}
}

/* 3-Column Grid Layout */
value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
	width: 100%;
}

value-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	padding: 2em;

	/* Elegant Glassmorphism Cards */
	border-radius: 1em;
	background: var(--glass-bg);
	border: var(--glass-border);
	box-shadow:
		var(--card),
		inset 0 0 10px 5px light-dark(rgb(182, 181, 181), rgb(69, 69, 69));
	backdrop-filter: blur(1.5em);

	/* Subtle interactive lift */
	translate: 0 0;
	transition:
		translate 0.3s ease-out,
		border-color 0.3s ease-out;

	&:hover {
		translate: 0 -0.4em;
		border-color: light-dark(hsla(281, 100%, 50%, 0.4), hsla(281, 100%, 75%, 0.4));

		card-icon {
			background: var(--brand-violet);
			color: hsl(0, 0%, 100%);
			box-shadow: 0 8px 16px hsla(281, 100%, 50%, 0.3);
			scale: 1.05;
		}
	}

	card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.8em;
		border-radius: 0.8em;

		/* Neumorphic inset well default state */
		background: light-dark(hsla(220, 20%, 8%, 0.5), hsla(0, 0%, 100%, 0.8));
		color: var(--brand-violet-text);
		box-shadow: var(--neu-pressed);

		transition:
			background-color 0.3s ease,
			color 0.3s ease,
			scale 0.3s ease,
			box-shadow 0.3s ease;

		svg {
			width: 1.6em;
			height: 1.6em;
			fill: currentColor;
		}
	}

	h3 {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--text-main);
	}

	p {
		margin: 0;
		font-size: 0.95rem;
		line-height: 1.6;
		color: var(--text-muted);
	}
}

value-grid svg {
	&.sliders path {
		d: path("M4 21v-7m0-4V3m8 18v-9m0-4V3m8 18v-5m0-4V3M1 14h6M9 8h6m2 8h6");
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}
	&.layout path {
		d: path("M3 3h18v18H3V3zm18 6H3m6 12V9");
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}
	&.sidebar path {
		d: path("M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm5 0v18");
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}
}