:root {
	--navy: #071b35;
	--blue: #1769aa;
	--sky: #e8f3fb;
	--paper: #f6f8fb;
	--white: #fff;
	--ink: #172638;
	--muted: #5b6b7f;
	--line: #d6dee8;
	--green: #178354;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 15px/1.55 "Segoe UI", Inter, system-ui, sans-serif;
}

a { color: inherit; }

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	padding: 0 max(24px, calc((100vw - 1180px) / 2));
	background: var(--navy);
	color: var(--white);
}

.brand {
	font-size: 21px;
	font-weight: 750;
	letter-spacing: -.02em;
	text-decoration: none;
}

.brand span { color: #7bc4ed; }

.top-login {
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px solid #7bc4ed;
}

main { overflow: hidden; }

.hero,
.section,
.cta {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr);
	gap: 70px;
	align-items: center;
	min-height: 620px;
	padding: 76px 0;
}

.eyebrow {
	margin: 0 0 12px;
	color: var(--blue);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .11em;
	text-transform: uppercase;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
	margin-bottom: 22px;
	font-size: clamp(38px, 5.2vw, 70px);
	line-height: 1.02;
	letter-spacing: -.045em;
}

h2 {
	margin-bottom: 28px;
	font-size: clamp(27px, 3vw, 42px);
	line-height: 1.12;
	letter-spacing: -.03em;
}

.lead {
	max-width: 760px;
	color: var(--muted);
	font-size: 18px;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 14px;
}

.primary,
.secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--blue);
	border-radius: 3px;
}

.primary { background: var(--blue); color: var(--white); }
.secondary { color: var(--blue); }
.micro { color: var(--muted); font-size: 12px; }

.hero-model {
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--navy);
	color: var(--white);
	box-shadow: 24px 24px 0 var(--sky);
}

.hero-model strong { font-size: 18px; }
.hero-model span { color: #b9c9da; }
.hero-model i { margin: 16px 0; color: #7bc4ed; font-style: normal; }

.section { padding: 78px 0; }

.levels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.levels article {
	display: flex;
	flex-direction: column;
	min-height: 360px;
	padding: 26px;
	background: var(--white);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.levels article.featured { background: var(--navy); color: var(--white); }
.level-no { color: var(--blue); font-size: 12px; font-weight: 800; }
.featured .level-no { color: #7bc4ed; }
.levels h3 { margin: 28px 0 8px; font-size: 22px; }
.price { margin-bottom: 25px; font-size: 23px; font-weight: 750; }
.price small { color: var(--muted); font-size: 12px; font-weight: 500; }
.featured .price small, .featured p { color: #b9c9da; }
.levels p { color: var(--muted); }
.levels strong { margin-top: auto; color: var(--green); font-size: 13px; }
.featured strong { color: #7bc4ed; }

.learning {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 80px;
}

.learning ol { margin: 0; padding: 0; list-style: none; }
.learning li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.learning li:last-child { border-bottom: 1px solid var(--line); }
.learning li > span { color: var(--blue); font-weight: 800; }
.learning li p { margin: 4px 0 0; color: var(--muted); }

.cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 48px;
	padding: 46px;
	background: var(--sky);
}

.cta h2 { margin-bottom: 0; }
.cta .primary { flex: 0 0 auto; }

footer {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
	padding: 42px 0;
	color: var(--muted);
	font-size: 12px;
}

@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; min-height: auto; }
	.hero-model { max-width: 520px; }
	.levels { grid-template-columns: repeat(2, 1fr); }
	.learning { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
	.hero, .section, .cta, footer { width: min(100% - 30px, 1180px); }
	.hero { padding: 52px 0; gap: 38px; }
	.levels { grid-template-columns: 1fr; }
	.levels article { min-height: 300px; }
	.cta { align-items: flex-start; flex-direction: column; padding: 28px; }
	.actions a { width: 100%; }
}