/* Лендинг doli-finance.ru. Размеры, цвета и отступы — из макета Figma
   (узел 5:154, ширина 1440). Значения, зависящие от ширины, заданы через
   clamp так, чтобы на 1440 совпадать с макетом до пикселя, а ниже — сжиматься
   пропорционально. */

/* Inter вместо SF Pro из макета: лицензия Apple не пускает SF Pro в веб.
   Переменное начертание 400–700 покрывает все веса лендинга. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #f6f8fa;
	--ink: #1b1b1b;
	--ink-muted: #717171;
	--ink-faint: #8e8e8e;
	--on-dark: #ffffff;

	/* 80px на 1440 и ниже — пропорционально ширине окна. */
	--gutter: clamp(20px, 5.556vw, 80px);
	/* Вертикальные поля секции — 96px на 1440. */
	--section-padding: clamp(48px, 6.667vw, 96px);
	/* Просвет между колонками секции — 64px на 1440. */
	--column-gap: clamp(32px, 4.444vw, 64px);
	--page-width: 1440px;
	/* Размеры макета телефона — из Figma, до долей пикселя. */
	--phone-width: 308.215px;
	--phone-height: 604.466px;
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

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

/* Ссылок на сайте пока нет: пункты меню и футера — заглушки до появления
   страниц и сборок в сторах. */
.stub {
	cursor: default;
}

/* Шапка */

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 96px;
	max-width: var(--page-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.brand__icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
}

.brand__text {
	display: flex;
	flex-direction: column;
}

.brand__name {
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: var(--ink);
}

.brand__tagline {
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ink-faint);
}

.brand--dark .brand__name {
	color: var(--on-dark);
}

.nav {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: 18px;
	line-height: 21px;
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}

.cta {
	flex-shrink: 0;
	height: 48px;
	padding-inline: 24px;
	border: 0;
	border-radius: 12px;
	background: var(--ink);
	color: var(--on-dark);
	font-family: inherit;
	font-size: 18px;
	line-height: 21px;
	font-weight: 500;
	white-space: nowrap;
	cursor: default;
	opacity: 1;
}

/* Секции */

.hero {
	display: flex;
	align-items: center;
	gap: var(--column-gap);
	max-width: var(--page-width);
	margin-inline: auto;
	padding: var(--section-padding) var(--gutter);
}

.hero--reversed {
	flex-direction: row-reverse;
}

.hero__text {
	flex: 1 1 0;
	min-width: 0;
}

.hero__title {
	margin: 0;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.1389;
	font-weight: 700;
	color: var(--ink);
	overflow-wrap: break-word;
}

.hero__subtitle {
	margin: 16px 0 0;
	font-size: clamp(20px, 2.5vw, 36px);
	line-height: 1.1944;
	font-weight: 400;
	color: var(--ink-muted);
	overflow-wrap: break-word;
}

.hero__mockup {
	display: flex;
	flex: 1 1 0;
	justify-content: center;
	min-width: 0;
}

/* picture — только обёртка над источниками, размеры задаёт картинка. */
.hero__mockup picture {
	display: contents;
}

.hero__mockup img {
	width: var(--phone-width);
	height: var(--phone-height);
}

/* Футер */

.footer {
	background: var(--ink);
	color: var(--on-dark);
}

.footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--column-gap);
	max-width: var(--page-width);
	margin-inline: auto;
	padding: clamp(40px, 4.444vw, 64px) var(--gutter);
}

.footer__columns {
	display: flex;
	gap: 64px;
	font-size: 18px;
	line-height: 21px;
	font-weight: 500;
}

.footer__column {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
	min-width: 300px;
}

/* Макета под узкие экраны нет: раскладка ниже 1100px собрана по логике
   десктопной сетки — колонки складываются, кегль и поля сжимаются. */

@media (max-width: 1100px) {
	.hero,
	.hero--reversed {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(32px, 4.444vw, 64px);
	}

	.hero__text,
	.hero__mockup {
		width: 100%;
		flex: none;
	}

	.hero__title {
		font-size: clamp(40px, 6.5vw, 64px);
	}

	.hero__subtitle {
		font-size: clamp(20px, 3.2vw, 32px);
	}

	/* В макете колонки футера шириной 300; на этой ширине столько места уже
	   нет, поэтому колонку задаёт содержимое. */
	.footer__column {
		min-width: 0;
	}
}

@media (max-width: 900px) {
	.footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.footer__columns {
		flex-direction: column;
		gap: 24px;
	}

	.footer__column {
		align-items: flex-start;
	}
}

@media (max-width: 760px) {
	.header {
		height: 80px;
	}

	/* Пункты меню — заглушки, на узком экране они только мешают шапке:
	   остаются логотип и кнопка. */
	.nav {
		display: none;
	}
}

@media (max-width: 520px) {
	.header {
		height: 72px;
		gap: 12px;
	}

	.brand__icon {
		width: 44px;
		height: 44px;
		border-radius: 14px;
	}

	.brand__name {
		font-size: 18px;
		line-height: 22px;
	}

	.brand__tagline {
		font-size: 16px;
		line-height: 20px;
	}

	.cta {
		height: 40px;
		padding-inline: 16px;
		font-size: 15px;
	}

	.hero__title {
		font-size: clamp(32px, 9vw, 40px);
		line-height: 1.15;
	}

	.hero__subtitle {
		margin-top: 12px;
		font-size: clamp(17px, 4.8vw, 20px);
		line-height: 1.3;
	}

	.hero__mockup img {
		width: min(var(--phone-width), 72vw);
		height: auto;
	}

	.footer__columns {
		font-size: 16px;
		line-height: 20px;
	}
}

/* Совсем узкие экраны (320px и уже): логотип и кнопка в одну строку уже не
   помещаются — кнопка переезжает вниз, лишь бы не появился горизонтальный
   скролл. */
@media (max-width: 340px) {
	.header {
		height: auto;
		flex-wrap: wrap;
		padding-block: 16px;
		row-gap: 12px;
	}

	.cta {
		width: 100%;
	}
}