/* Оформление приложения по гайдлайну GORA Academy: светлая база, синий акцент,
   крупные заголовки, большие скругления, много воздуха. Мокап — design/landing.html,
   вёрстка ниже повторяет его 1-в-1. */

:root {
	--blue: #3C9DF2;
	--blue-bright: #2015FF;
	--coral: #FF8562;
	--black: #000000;
	--white: #FFFFFF;
	--gray: #EEEEEE;
	--text-muted: #5A5A5A;
	--container: 1200px;
	--radius-card: 28px;
	--radius-btn: 30px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--black);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

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

/* Лендинг занимает всю ширину окна — обычные страницы остаются в узкой колонке. */
main.full { max-width: none; padding: 0; }

/* индикатор прокрутки */
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--blue); z-index: 20; }

/* ---------- полноэкранные обложки ---------- */
.cover {
	position: relative; min-height: 100vh; display: flex; align-items: center;
	background-size: cover; background-position: center;
}
.cover::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
/* Текст обложки прижат к левому краю окна, чтобы не наезжать на человека в кадре. */
.cover .container {
	position: relative; z-index: 2; padding-top: 120px; padding-bottom: 120px;
	margin-left: 0; max-width: 720px; padding-left: 64px;
}
.preheader {
	font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--white); opacity: .75; margin: 0 0 20px;
}
.cover h1 { font-size: 56px; line-height: 1.05; font-weight: 700; color: var(--white); margin: 0; max-width: 620px; }
.cover h1 span { color: var(--blue); display: block; }
.cover .lead { font-size: 20px; line-height: 1.5; color: var(--white); opacity: .85; margin: 20px 0 0; max-width: 560px; }
.btn {
	display: inline-flex; align-items: center; justify-content: center; height: 56px;
	padding: 0 32px; border-radius: var(--radius-btn); background: var(--blue); color: var(--white);
	font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid var(--blue);
	transition: background .2s ease, color .2s ease; margin-top: 32px; cursor: pointer;
}
.btn:hover { background: var(--white); color: var(--blue); }
.scroll-hint {
	position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2; text-align: center;
	color: var(--white); opacity: .7; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.scroll-hint svg { display: block; margin: 10px auto 0; }

.cover-final { text-align: center; }
/* Финальный экран остаётся по центру — влево уезжает только обложка. */
.cover-final .container { margin: 0 auto; max-width: var(--container); padding-left: 20px; }
.cover-final h2 { font-size: 56px; line-height: 1.05; font-weight: 700; color: var(--white); margin: 0; }
.cover-final p { font-size: 20px; color: var(--white); opacity: .8; margin: 20px 0 0; }

/* ---------- секции способов ---------- */
.ways { padding: 96px 0 40px; }
.ways-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.ways-head h2 { font-size: 44px; line-height: 1.1; font-weight: 700; margin: 0; }
.ways-head p { font-size: 20px; line-height: 1.5; color: var(--text-muted); margin: 20px 0 0; }

.way { display: grid; grid-template-columns: 6fr 6fr; gap: 40px; align-items: center; padding: 56px 0; }
.way + .way { border-top: 1px solid var(--gray); }
.way .photo { border-radius: var(--radius-card); overflow: hidden; background: var(--gray); aspect-ratio: 4/3; }
.way .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.way.reverse .photo { order: 2; }
.way.reverse .text { order: 1; }
.num {
	display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 20px;
	background: var(--blue); color: var(--white); font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.way h3 { font-size: 36px; line-height: 1.15; font-weight: 700; margin: 0; }
.way .divider { width: 64px; height: 3px; background: var(--blue); border-radius: 2px; margin: 20px 0; }
.way p { font-size: 18px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 560px; }

.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; max-width: 560px; }
.pills li { background: var(--gray); border-radius: 24px; padding: 10px 18px; font-size: 15px; font-weight: 400; }
.pills li.accent { font-weight: 700; }

/* ---------- служебные страницы (вход, регистрация, пароль, настройки) ----------
   Те же цвета, скругления и типографика, что на лендинге. */
.auth { max-width: 440px; margin: 0 auto; }
.auth .brand {
	display: block; font-size: 14px; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--text-muted); text-decoration: none; margin-bottom: 24px;
}
.auth h1, main h1 { font-size: 36px; line-height: 1.15; font-weight: 700; margin: 0 0 24px; }
main h2 { font-size: 26px; font-weight: 700; margin: 0 0 16px; }
main form { display: flex; flex-direction: column; gap: 8px; }
main label { font-size: 14px; font-weight: 600; margin-top: 8px; }
main input[type="email"], main input[type="password"], main input[type="text"] {
	height: 52px; padding: 0 18px; font-size: 16px; font-family: inherit;
	border: 1px solid var(--gray); border-radius: var(--radius-btn); background: var(--white);
	transition: border-color .2s ease;
}
main input:focus { outline: none; border-color: var(--blue); }
main button, main input[type="submit"] {
	height: 56px; margin-top: 20px; padding: 0 32px; border: 1px solid var(--blue);
	border-radius: var(--radius-btn); background: var(--blue); color: var(--white);
	font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
main button:hover, main input[type="submit"]:hover { background: var(--white); color: var(--blue); }
main a { color: var(--blue); }
main p { color: var(--text-muted); }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
	.cover .container { padding-top: 72px; padding-bottom: 72px; padding-left: 16px; }
	.cover-final .container { padding-left: 16px; }
	.cover h1, .cover-final h2 { font-size: 32px; }
	.cover .lead, .cover-final p { font-size: 16px; }
	.ways { padding: 64px 0 24px; }
	.ways-head { margin-bottom: 40px; }
	.ways-head h2 { font-size: 26px; }
	.ways-head p { font-size: 16px; }
	.way { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
	.way.reverse .photo { order: 0; }
	.way.reverse .text { order: 1; }
	.way h3 { font-size: 24px; }
	.way p { font-size: 16px; }
	.container { padding: 0 16px; }
	.auth h1, main h1 { font-size: 26px; }
}