/* --------------------------------------------------------------------------
   iSaive — design tokens, reset, typography
   -------------------------------------------------------------------------- */

:root {
	--isaive-navy: #001a33;
	--isaive-navy-mid: #002d58;
	--isaive-navy-soft: #0a3d66;
	--isaive-blue: #0071bc;
	--isaive-cyan: #00aeef;
	--isaive-green: #00aeef;
	--isaive-green-dark: #0071bc;
	--isaive-green-soft: #e4f6fd;
	--isaive-bg: #f3f7fb;
	--isaive-bg-muted: #e8f1f8;
	--isaive-white: #ffffff;
	--isaive-text: #0c2138;
	--isaive-muted: #567089;
	--isaive-border: rgba(0, 26, 51, 0.08);
	--isaive-header: 4.75rem;
	--isaive-radius: 1.35rem;
	--isaive-radius-sm: 0.9rem;
	--isaive-shadow: 0 18px 50px rgba(0, 26, 51, 0.16);
	--isaive-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
	--isaive-container: 72rem;
	--isaive-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--isaive-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--isaive-text);
	background: var(--isaive-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea {
	font: inherit;
}

h1,
h2,
h3,
h4 {
	line-height: 1.15;
	letter-spacing: -0.035em;
	margin: 0 0 0.75rem;
	font-weight: 800;
	color: var(--isaive-text);
}

h1 {
	font-size: clamp(2.4rem, 6vw, 4.4rem);
}

h2 {
	font-size: clamp(1.85rem, 3.6vw, 3rem);
}

h3 {
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

p {
	margin: 0 0 1rem;
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.container {
	width: min(100% - 2rem, var(--isaive-container));
	margin-inline: auto;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 200;
	background: var(--isaive-blue);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 999px;
}

.skip-link:focus {
	top: 1rem;
}

.eyebrow {
	display: inline-block;
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--isaive-cyan);
}

.eyebrow--on-light {
	color: var(--isaive-blue);
}

.section__lead,
.hero__lead,
.vision__lead {
	font-size: 1.125rem;
	color: var(--isaive-muted);
	max-width: 40rem;
}

.section--dark .section__lead,
.section--dark .vision__lead {
	color: rgba(255, 255, 255, 0.78);
}

.section--dark h2,
.section--dark h3,
.hero h1 {
	color: var(--isaive-white);
}

.reveal {
	opacity: 0;
	transform: translateY(1.4rem);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--isaive-ease), transform 0.7s var(--isaive-ease);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}
