/* dyadrix.com - custom theme
 * Layered on top of Bootstrap 5.3. Keeps Bootstrap's grid/utilities and only
 * adds what Bootstrap classes can't express: brand typography, the Apple-style
 * dark hero, generous spacing and subtle surface treatments.
 */

:root {
	/* Brand blues: deep navy through to a brighter accent blue. */
	--dx-navy-deep: #0c2244;
	--dx-navy: #143a73;
	--dx-blue: #1f63c4;
	--dx-accent: #2997ff;
	--dx-accent-soft: #9ecbff;

	/* Semantic tokens */
	--dx-ink: #142a4d;        /* darkest brand surface: footer, steps, stat numbers */
	--dx-ink-soft: #1c2a3f;   /* readable body text (slate-blue, not pure black) */
	--dx-surface: #f4f8fcc9;    /* cool light surface for cards */
	--dx-radius: 1.25rem;
}

html {
	scroll-behavior: smooth;
	/* Offset in-page anchors so they clear the fixed navbar. */
	scroll-padding-top: 5rem;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
		Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
	color: var(--dx-ink-soft);
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.01em;
	background-color: #fefefc;
}

/* Extra vertical rhythm: Bootstrap only ships py-1..py-5. */
.py-6 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.fs-7 {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

/* ---------- Navbar ---------- */
.site-navbar {
	background-color: rgba(1, 29, 71);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site-navbar .nav-link {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.82);
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
	color: #fff;
}

/* ---------- Hero ---------- */
.hero {
	/* Deep navy → blue diagonal wash, with a bright accent glow up top. */
	background:
		/*radial-gradient(75% 120% at 50% -20%, rgba(41, 151, 255, 0.40) 0%, rgba(41, 151, 255, 0) 60%),
		linear-gradient(160deg, var(--dx-navy-deep) 50%, var(--dx-navy) 98%, var(--dx-blue) 99%);*/
		radial-gradient(80% 130% at 50% 50%, rgba(41, 151, 255, 0.30) 0%, rgba(41, 151, 255, 0) 50%),
		linear-gradient(160deg, var(--dx-navy-deep) 0%, var(--dx-navy) 100%);
	padding: 9rem 0 7rem;
}

.hero-eyebrow {
	color: var(--dx-accent-soft);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.hero-title {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.hero-lead {
	max-width: 44rem;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	color: rgba(255, 255, 255, 0.72);
}

/* ---------- Section headings ---------- */
.section-title {
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	letter-spacing: -0.02em;
}

.section-lead {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.cta-section .section-lead {
	color: rgba(255, 255, 255, 0.78);
}

/* ---------- Problem stats ---------- */
.stat {
	font-size: clamp(1.5rem, 2rem, 2.5rem);
	color: var(--dx-ink);
	letter-spacing: -0.02em;
}

/* ---------- Feature cards ---------- */
.feature-card {
	background-color: var(--dx-surface);
	border: 1px solid rgba(8, 26, 184, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.08);
}

/* ---------- How it works ---------- */
.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--dx-blue);
	color: #fff;
	font-weight: 600;
	font-size: 1.25rem;
}

/* ---------- CTA ---------- */
.cta-section {
	/*
	background:
		radial-gradient(80% 130% at 50% 50%, rgba(41, 151, 255, 0.30) 0%, rgba(41, 151, 255, 0) 60%),
		linear-gradient(160deg, var(--dx-navy-deep) 0%, var(--dx-navy) 100%);
	*/
}

/* ---------- Footer ---------- */
.site-footer {
	background-color: var(--dx-ink);
}

.footer-links a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	line-height: 2;
}

.footer-links a:hover {
	color: #fff;
}