/* --- 15. How It Works Section                          --- */
how-it-works {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4em;
	padding: 6em 2em;
	max-width: 80em;
	margin: 0 auto;
}

steps-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
	width: 100%;
}

step-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.2em;
	padding: 2.2em 2em;

	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);

	translate: 0 0;
	transition:
		translate 0.3s ease-out,
		border-color 0.3s ease-out,
		background-color 0.3s ease-out;

	&:hover {
		translate: 0 -0.3em;
		border-color: light-dark(hsla(281, 100%, 50%, 0.35), hsla(281, 100%, 75%, 0.35));
		background: light-dark(hsla(220, 20%, 98%, 0.9), hsla(220, 20%, 15%, 0.8));

		step-badge {
			background: var(--brand-violet);
			color: hsl(0, 0%, 100%);
			box-shadow: 0 4px 12px hsla(281, 100%, 50%, 0.4);
			scale: 1.05;
		}
	}

	step-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.2em;
		height: 2.2em;
		border-radius: 50%;

		font-size: 1.1rem;
		font-weight: 800;
		line-height: 1;

		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);

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

	h3 {
		margin: 0;
		font-size: 1.2rem;
		font-weight: 700;
		color: var(--text-main);
		line-height: 1.35;
	}

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

/* --- 16. Use Cases Section                             --- */
use-cases {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4em;
	padding: 6em 2em;
	max-width: 80em;
	margin: 0 auto;
}

case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
	width: 100%;
}

case-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.2em;
	padding: 2.2em 2em;

	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);

	translate: 0 0;
	transition:
		translate 0.3s ease-out,
		border-color 0.3s ease-out,
		background-color 0.3s ease-out;

	&:hover {
		translate: 0 -0.3em;
		border-color: light-dark(hsla(45, 100%, 50%, 0.35), hsla(45, 100%, 65%, 0.35));
		background: light-dark(hsla(220, 20%, 98%, 0.9), hsla(220, 20%, 15%, 0.8));

		card-icon {
			background: var(--brand-gold);
			color: hsl(0, 0%, 10%);
			box-shadow: 0 4px 12px hsla(45, 100%, 50%, 0.4);
			scale: 1.05;
		}
	}

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

		background: light-dark(hsla(220, 20%, 8%, 0.5), hsla(0, 0%, 100%, 0.8));
		color: var(--text-main);
		box-shadow: var(--neu-pressed);

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

		svg {
			width: 1.5em;
			height: 1.5em;
			fill: none;
			stroke: currentColor;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}
	}

	h3 {
		margin: 0;
		font-size: 1.2rem;
		font-weight: 700;
		color: var(--text-main);
		line-height: 1.35;
	}

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

case-grid svg {
	&.academic path {
		d: path("M22 10v6M2 10l10-5 10 5-10 5z M6 12v5c3 3 9 3 12 0v-5");
	}
	&.terminal path {
		d: path("M4 17l6-6-6-6 M12 19h8");
	}
	&.book-open path {
		d: path("M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z");
	}
}