:root {
	--bg: #ffffff;
	--fg: #1f2933;
	--muted: #6b7280;
	--border: #e5e7eb;
	--brand-main: #00246b;
	--brand-light: #47649d;

	--radius: 3px;
	--container: 1100px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Layout */
.layout-main {
	min-height: calc(100vh - 80px - 48px);
	padding: 1rem 0;
}

/* Headings */
h1,
h2,
h3 {
	margin: 0 0 0.2em;
	font-weight: 600;
	letter-spacing: -0.015em;
}

h1 {
	font-size: 2rem;
	line-height: 1.25;
}

h2 {
	font-size: 1.5rem;
	line-height: 1.3;
}

h3 {
	font-size: 1.15rem;
}

/* Text */
p {
	margin: 0 0 1rem;
}

.muted {
	color: var(--muted);
}

/* Button */
.btn {
	padding: 0.5rem 0.85rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: transparent;
	color: var(--fg);
	font: inherit;
	cursor: pointer;
}

.btn-primary {
	background: var(--brand-main);
	color: #fff;
	border-color: var(--brand-main);
}

/* Hero */
.hero {
	padding: 1.5rem 0 1rem;
}

.subtitle {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

/* Catalog */
.catalog {
	padding: 1rem 0 2rem;
}