/* --- 22. Final CTA Section                             --- */
final-cta {
	display: flex;
	justify-content: center;
	padding: 4em 2em 8em 2em;
	max-width: 80em;
	margin: 0 auto;

	cta-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.5em;
		width: 100%;
		padding: 5em 3em;

		border-radius: 1.5em;
		background: var(--glass-bg);
		border: var(--glass-border);
		box-shadow: var(--glass-shadow);
		backdrop-filter: blur(2em);

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

		p {
			margin: 0;
			font-size: 1.15rem;
			line-height: 1.6;
			color: var(--text-muted);
			max-width: 32em;
		}

		install-actions {
			display: flex;
			align-items: center;
			gap: 1em;

			& img {
				height: 2lh;
			}
		}
	}
}

/* --- 23. Site Footer                                   --- */
footer {
	display: flex;
	flex-direction: column;
	gap: 4em;
	padding: 6em 4em 3em 4em;

	background: light-dark(hsla(0, 0%, 100%, 0.4), hsla(220, 20%, 4%, 0.4));
	backdrop-filter: blur(10px), saturate(120%);
	border-top: var(--glass-border);

	footer-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 3em;
		max-width: 80em;
		width: 100%;
		margin: 0 auto;

		footer-group {
			display: flex;
			flex-direction: column;
			gap: 1.2em;

			h4 {
				margin: 0;
				font-size: 0.85rem;
				font-weight: 700;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				color: var(--text-main);
			}

			nav {
				display: flex;
				flex-direction: column;
				gap: 0.8em;

				a {
					font-size: 0.95rem;
					text-decoration: none;
					color: var(--text-muted);
					transition: color 0.2s;

					&:hover {
						color: var(--text-main);
					}
				}
			}
		}
	}

	footer-meta {
		display: flex;
		flex-direction: column;
		gap: 1.2em;
		max-width: 80em;
		width: 100%;
		margin: 0 auto;
		padding-top: 2.5em;
		border-top: var(--glass-border);

		meta-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			brand-logo {
				img,
				span {
					vertical-align: middle;
				}
			}

			social-links {
				display: flex;
				align-items: center;
				gap: 1em;

				a {
					display: inline-flex;
					color: var(--text-muted);
					transition:
						color 0.2s,
						scale 0.2s;

					&:hover {
						color: var(--brand-violet-text);
						scale: 1.1;
					}

					svg {
						width: 1.3em;
						height: 1.3em;
					}
				}
			}
		}

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

		p.disclaimer {
			margin: 0;
			font-size: 0.8rem;
			line-height: 1.5;
			color: var(--text-muted);
			opacity: 0.8;
			max-width: 48em;
		}
	}
}

/* --- 25. SVG Path Injections (Phase 6)                 --- */
site-footer svg {
	&.github path {
		d: path(
			"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"
		);
	}
	&.twitter path {
		d: path(
			"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
		);
	}
}