:root {
	--rf-navy-950: #07111f;
	--rf-navy-900: #0b1728;
	--rf-navy-800: #122238;
	--rf-surface: #f5f7f8;
	--rf-white: #ffffff;
	--rf-text-dark: #101820;
	--rf-text-muted: #53606c;
	--rf-text-on-dark: #f5f7f8;
	--rf-text-muted-on-dark: rgba(245, 247, 248, 0.7);
	--rf-accent: #2f6fed;
	--rf-accent-hover: #255ccd;
	--rf-signal: #1a9b94;
	--rf-metal: #8f9aa8;
	--rf-border: #d7dee5;
	--rf-border-subtle: rgba(143, 154, 168, 0.22);
	--rf-border-strong: rgba(47, 111, 237, 0.42);
	--rf-border-dark: rgba(232, 237, 242, 0.16);
	--rf-surface-raised: #ffffff;
	--rf-surface-depth: #eef3f6;
	--rf-shadow-sm: 0 8px 18px rgba(7, 17, 31, 0.08);
	--rf-shadow-card: 0 18px 42px rgba(7, 17, 31, 0.1);
	--rf-shadow-dark: 0 22px 52px rgba(0, 0, 0, 0.22);
	--rf-transition-fast: 160ms ease;
	--rf-transition-med: 220ms ease;
	--rf-radius-card: 10px;
	--rf-radius-btn: 7px;
	--rf-container: 1320px;
	--rf-section-y: 104px;
	--rf-section-y-mobile: 72px;
	--rf-header-h: 82px;
	--rf-font-heading: "Manrope", system-ui, sans-serif;
	--rf-font-body: "Source Sans 3", system-ui, sans-serif;
	--rf-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--rf-font-body);
	font-size: 1.0625rem; /* 17px — comfortable desktop body */
	line-height: 1.6;
	color: var(--rf-text-dark);
	background: var(--rf-white);
}

h1,
h2,
h3,
h4,
.rf-heading {
	font-family: var(--rf-font-heading);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--rf-text-dark);
}

.rf-mono,
.rf-tech-tags,
.rf-eyebrow {
	font-family: var(--rf-font-mono);
}

.rf-container {
	width: min(100% - 2.5rem, var(--rf-container));
	margin-inline: auto;
}

.rf-section {
	position: relative;
	padding-block: var(--rf-section-y);
	width: 100%;
}

.rf-section--surface {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
		var(--rf-surface);
	border-block: 1px solid rgba(143, 154, 168, 0.16);
}

.rf-section--navy {
	background:
		radial-gradient(circle at 12% 8%, rgba(47, 111, 237, 0.13), transparent 32rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 100%),
		var(--rf-navy-900);
	background-size: auto, 24px 24px, auto;
	color: var(--rf-text-on-dark);
	border-block: 1px solid rgba(143, 154, 168, 0.18);
}

.rf-section--navy-alt {
	background:
		radial-gradient(circle at 88% 15%, rgba(26, 155, 148, 0.11), transparent 30rem),
		linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 100%),
		var(--rf-navy-950);
	background-size: auto, 28px 28px, auto;
}

/* Dark-section typography — shared pattern, not one-off patches */
.rf-section--navy .rf-section-heading h2,
.rf-section--navy h2,
.rf-section--navy .rf-heading,
.rf-cta-band h2,
.entry-content .rf-section--navy h2,
.entry-content .rf-cta-band h2 {
	color: var(--rf-text-on-dark);
}

.rf-section--navy h3,
.entry-content .rf-section--navy h3 {
	color: var(--rf-text-dark);
}

.rf-eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rf-accent);
}

.rf-section--navy .rf-eyebrow,
.rf-cta-band .rf-eyebrow,
.entry-content .rf-section--navy .rf-eyebrow {
	color: var(--rf-signal);
}

.rf-lead {
	max-width: 40rem;
	margin: 0.75rem 0 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--rf-text-muted);
}

.rf-section--navy .rf-lead,
.rf-cta-band .rf-lead,
.entry-content .rf-section--navy .rf-lead,
.entry-content .rf-cta-band .rf-lead {
	color: var(--rf-text-muted-on-dark);
}

.rf-section--navy .rf-text-link {
	color: #7eb0ff;
}

.rf-section--navy .rf-text-link:hover,
.rf-section--navy .rf-text-link:focus-visible {
	color: var(--rf-white);
}

.rf-texture-grid {
	background-image:
		linear-gradient(rgba(143, 154, 168, 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 154, 168, 0.11) 1px, transparent 1px);
	background-size: 28px 28px;
}

.metric,
.rf-metric {
	display: grid;
	gap: 0.25rem;
	padding: 1rem;
	border: 1px solid var(--rf-border-subtle);
	border-radius: var(--rf-radius-card);
	background: var(--rf-surface-raised);
}

.metric__value,
.rf-metric__value {
	font-family: var(--rf-font-heading);
	font-size: clamp(1.5rem, 2vw, 2rem);
	font-weight: 700;
	line-height: 1;
	color: var(--rf-text-dark);
}

.metric__label,
.metric__source,
.rf-metric__label,
.rf-metric__source {
	margin: 0;
	font-size: 0.84rem;
	color: var(--rf-text-muted);
}

@media (max-width: 768px) {
	.rf-section {
		padding-block: var(--rf-section-y-mobile);
	}

	.rf-container {
		width: min(100% - 1.5rem, var(--rf-container));
	}
}
