/*
  MentalRevision marketing site (static).
  No external fonts, trackers, or JavaScript required.
*/

:root {
	color-scheme: light dark;

	/* Base */
	--bg: #070b14;
	--panel: rgba(255, 255, 255, 0.06);
	--panel-2: rgba(255, 255, 255, 0.09);
	--text: #e8eefc;
	--muted: rgba(232, 238, 252, 0.72);
	--border: rgba(255, 255, 255, 0.12);
	--shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	--radius: 18px;

	/* Brand */
	--accent: #60a5fa; /* electric blue */
	--accent-2: #34d399; /* progress green */
	--danger: #fb7185;

	/* Layout */
	--container: 1040px;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f8fafc;
		--panel: rgba(15, 23, 42, 0.05);
		--panel-2: rgba(15, 23, 42, 0.08);
		--text: #0b1220;
		--muted: rgba(11, 18, 32, 0.72);
		--border: rgba(15, 23, 42, 0.12);
		--shadow: 0 16px 40px rgba(2, 6, 23, 0.12);
	}
}

* { box-sizing: border-box; }

html, body {
	padding: 0;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	line-height: 1.55;
}

img, svg { display: block; }

a {
	color: inherit;
	text-decoration: none;
}

a:hover, a:focus-visible {
	text-decoration: underline;
	text-decoration-color: rgba(96, 165, 250, 0.65);
	text-underline-offset: 3px;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 28px 18px 72px;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.brand {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-weight: 900;
	letter-spacing: 0.2px;
}

.brand .mark {
	width: 34px;
	height: 34px;
}

.brand .name {
	font-size: 16px;
}

.nav {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}

.nav a {
	display: inline-block;
	padding: 8px 10px;
	border-radius: 12px;
	color: var(--muted);
}

.nav a[aria-current="page"] {
	color: var(--text);
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	text-decoration: none;
}

.hero {
	position: relative;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) + 6px);
	box-shadow: var(--shadow);
	padding: 26px 22px;
	overflow: hidden;
	background:
		radial-gradient(900px 380px at 10% 0%, rgba(96, 165, 250, 0.22), transparent 60%),
		radial-gradient(740px 420px at 90% 30%, rgba(52, 211, 153, 0.18), transparent 55%),
		var(--panel);
}

.badge {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.04);
	color: var(--muted);
	font-size: 13px;
}

.badge .dot {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

h1 {
	margin: 12px 0 10px;
	font-size: clamp(30px, 4.3vw, 46px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.lead {
	margin: 0;
	color: var(--muted);
	font-size: 16px;
	max-width: 62ch;
}

.ctaRow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font-weight: 700;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
	text-decoration: none;
}

.btn:hover, .btn:focus-visible {
	background: rgba(255, 255, 255, 0.05);
	text-decoration: none;
}

.btn.primary {
	border-color: rgba(96, 165, 250, 0.45);
	background: linear-gradient(180deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.10));
}

.btn.secondary {
	border-color: rgba(52, 211, 153, 0.40);
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.08));
}

.btn.disabled,
.btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.card {
	grid-column: span 12;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 18px 18px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

@media (min-width: 860px) {
	.card.third { grid-column: span 4; }
	.card.half { grid-column: span 6; }
}

.card h2 {
	margin: 0 0 8px;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.card p { margin: 8px 0 0; color: var(--muted); }

.list {
	margin: 10px 0 0;
	padding-left: 18px;
	color: var(--muted);
}

.kicker {
	margin-top: 26px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	color: rgba(96, 165, 250, 0.85);
}

.footer {
	margin-top: 22px;
	color: var(--muted);
	font-size: 13px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.footer a { color: var(--muted); }
.footer a:hover, .footer a:focus-visible { color: var(--text); }

.notice {
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 12px 14px;
	background: rgba(96, 165, 250, 0.08);
	color: var(--muted);
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.95em;
}