/* Standalone landings (/landings/*.html, templates/landings/border.html); look = design option B
   "Путь к цели" of 2026-10: deep green, yellow accent, Unbounded display + Golos Text */

:root {
	--green: #0F3D3A;
	--green-ink: #0F2E2C;
	--green-soft: #F2F6F5;
	--muted: #4A6563;
	--line: #DCE6E5;
	--on-green: #D3E3E1;
	--on-green-muted: #A9C7C3;
	--accent: #F2C230;
	--wrap: 1160px;
	--display: Unbounded, system-ui, sans-serif;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #FFFFFF;
	color: var(--green-ink);
	font-family: 'Golos Text', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

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

a {
	color: var(--green);
}

h1, h2, h3 {
	margin: 0;
	line-height: 1.12;
}

h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
}

h3 {
	font-size: 21px;
	line-height: 1.25;
}

p {
	margin: 0;
}

section {
	scroll-margin-top: 16px;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 30px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}

.btn-accent {
	background: var(--accent);
	color: var(--green-ink);
}

.btn-accent:hover {
	background: #F6D25E;
	color: var(--green-ink);
}

.btn-ghost {
	border: 1px solid #4E7A76;
	color: #FFFFFF;
}

.btn-ghost:hover {
	border-color: #FFFFFF;
	color: #FFFFFF;
}

.btn-green {
	background: var(--green);
	color: #FFFFFF;
}

.btn-green:hover {
	background: #0A2725;
	color: #FFFFFF;
}

.btn-outline {
	border: 2px solid var(--green);
	color: var(--green-ink);
}

.btn-outline:hover {
	background: var(--green);
	color: #FFFFFF;
}

.btn-small {
	min-height: 44px;
	padding: 0 20px;
}

/* hero */

.hero {
	background: var(--green);
	color: #FFFFFF;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 24px;
}

.topbar .name {
	font-weight: 700;
}

.topbar .name span {
	font-weight: 400;
	color: var(--on-green-muted);
}

.hero-body {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-end;
	padding-top: 72px;
	padding-bottom: 88px;
}

.hero-text {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.eyebrow {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
}

.hero h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(38px, 6vw, 64px);
	line-height: 1.02;
	letter-spacing: -.02em;
}

.hero .lead {
	max-width: 620px;
	font-size: 20px;
	color: var(--on-green);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-photo {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 380px;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 28px 28px 28px 4px;
}

/* for whom */

.whom {
	padding: 88px 0;
}

.whom .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.whom-head {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.whom-head p {
	font-size: 19px;
	color: var(--muted);
}

.whom-list {
	flex: 2 1 520px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.whom-list li {
	padding: 22px;
	border-radius: 16px;
	background: var(--green-soft);
}

.whom-list b {
	display: block;
	margin-bottom: 4px;
}

/* route of the modules */

.route {
	padding: 88px 0;
	background: var(--green-soft);
}

.route .wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.route-head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-end;
}

.route-head p {
	max-width: 440px;
	color: var(--muted);
}

.modules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	border-top: 4px solid var(--green);
}

.module {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 28px;
	border-right: 1px solid var(--line);
}

.module:last-child {
	border-right: 0;
}

.module .num {
	font-family: var(--display);
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	color: var(--green);
}

.module .num::after {
	content: '';
	display: block;
	width: 40px;
	height: 6px;
	margin-top: 10px;
	border-radius: 3px;
	background: var(--accent);
}

.module .when {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.module p {
	font-size: 15px;
	color: var(--muted);
}

.module .dates {
	margin-top: auto;
	padding-top: 10px;
	color: var(--green-ink);
	font-weight: 600;
}

/* facts */

.facts {
	padding: 72px 0;
}

.facts .wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
}

.fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fact b {
	font-family: var(--display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
}

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

/* trainer */

.trainer {
	padding: 88px 0;
	background: var(--green-soft);
}

.trainer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}

.trainer-text {
	flex: 999 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.trainer-text .lead {
	font-size: 19px;
	color: #2C4745;
}

.trainer ul {
	margin: 0;
	padding-left: 20px;
	color: var(--muted);
}

.trainer li {
	margin: 4px 0;
}

.trainer-photo {
	flex: 1 1 280px;
	min-width: 0;
	max-width: 340px;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px 28px 28px 28px;
}

/* sign-up */

.signup {
	padding: 80px 0;
	background: var(--accent);
}

.signup .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: space-between;
}

.signup-text {
	flex: 999 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.signup h2 {
	font-weight: 800;
}

.signup-text p {
	font-size: 18px;
}

.signup .price {
	font-weight: 700;
}

.signup-actions {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer {
	background: var(--green);
	color: var(--on-green-muted);
	font-size: 14px;
}

.footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding-top: 24px;
	padding-bottom: 24px;
}

.footer a {
	color: #FFFFFF;
}

@media (max-width: 640px) {
	.hero-body, .whom, .route, .trainer {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.module {
		padding: 22px 0;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.actions .btn, .signup-actions .btn {
		width: 100%;
	}
}