@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
	--cl-primary: #0EA5E9;
	--cl-primary-dark: #0369A1;
	--cl-primary-soft: #E0F2FE;
	--cl-secondary: #334155;
	--cl-heading: #18181B;
	--cl-text: #3F3F46;
	--cl-text-muted: #71717A;
	--cl-border: #E4E4E7;
	--cl-bg: #F8F9FA;
	--cl-bg-alt: #FAFAFA;
	--cl-surface: #FFFFFF;
	--cl-success: #16A34A;
	--cl-warning: #D97706;
	--cl-danger: #DC2626;
	--cl-radius-sm: 8px;
	--cl-radius: 12px;
	--cl-radius-lg: 18px;
	--cl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
	--cl-shadow: 0 10px 30px rgba(15, 23, 42, .08);
	--cl-container: 1200px;
	--cl-content: 800px;
	--cl-transition: 240ms ease;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--cl-bg);
	color: var(--cl-text);
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--cl-heading);
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 800;
	line-height: 1.2;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.625rem, 3vw, 2rem); }
h3 { font-size: clamp(1.3125rem, 2.3vw, 1.5625rem); }
h4 { font-size: clamp(1.125rem, 2vw, 1.25rem); }

a {
	color: var(--cl-primary);
	text-decoration-thickness: .08em;
	text-underline-offset: .15em;
	transition: color var(--cl-transition);
}

a:hover,
a:focus-visible {
	color: var(--cl-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--cl-primary-soft);
	color: var(--cl-heading);
}

.cl-container {
	width: min(calc(100% - 32px), var(--cl-container));
	margin-inline: auto;
}

.cl-content-width {
	width: min(100%, var(--cl-content));
	margin-inline: auto;
}

.cl-surface {
	background: var(--cl-surface);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius);
}

.cl-section {
	padding-block: clamp(48px, 7vw, 88px);
}

.cl-section--alt {
	background: var(--cl-bg-alt);
}

.cl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}