/* Главная — только первый экран.
 *
 * Всё остальное на странице — общие блоки из `bloki.css`: тарифы, форма,
 * лента работ, пункты, причины, этапы, вопросы. Здесь то, чего больше
 * нигде нет: заголовок с двумя доводами, связка ноутбука с телефоном
 * и три преимущества под ними. */

/* Первый экран главной выше обычного: он и есть лицо сайта. Поле
   сверху — шапка плюс воздух блока, как у всех, снизу поменьше:
   под ним сразу бегущие строки. */
/*
 * Воздух над словами равен воздуху под ними — от шапки до заголовка
 * столько же, сколько от кнопки до черты над преимуществами. Слова
 * стоят по центру мокапа, то есть его лишняя высота делится поровну,
 * а поле сверху и отступ черты снизу — одна величина, `--ssg-vozduh`.
 *
 * Было иначе и было криво: полное поле блока сверху и центровка дали
 * 147 px под шапкой, а прижатые к верху слова — 49 сверху и почти
 * полторы сотни снизу.
 */
.ssg .ssg__hero {
	--ssg-vozduh: clamp(24px, 3vw, 40px);

	padding-block: calc(var(--ss-header-h, 78px) + var(--ssg-vozduh)) clamp(40px, 5vw, 70px);
}

.ssg .ssg__hero-setka {
	align-items: center;
	display: grid;
	gap: clamp(24px, 4vw, 60px);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ssg .ssg__h1 {
	color: var(--ss-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(26px, 3.5vw, 50px);
	font-weight: 700;
	letter-spacing: -0.03em;
	/* Капс без выносных элементов, и 1.05 слеплял строки вплотную,
	   1.15 — всё ещё тесно. Отношением, а не em: считается от кегля
	   на каждой ширине. */
	line-height: 1.25;
	margin: 0;
	/* Капсом и 700, как заголовки разделов. Капс в Unbounded широк:
	   «САЙТОВ ПОД КЛЮЧ» кеглем 56 занимает 699 px при колонке 657,
	   и заголовок падал в три строки. Две держит кегль до 52 —
	   отсюда 50 с запасом. Колонке слов и так отдано больше, чем мокапу. */
	text-transform: uppercase;
}

/* Два довода со значком — готовой галочкой в светящемся круге из
   медиатеки, той же, что стояла в Elementor. */
.ssg .ssg__punkty {
	display: grid;
	gap: 18px 28px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	padding: 0;
}

.ssg .ssg__punkty li {
	align-items: start;
	color: rgba(255, 255, 255, 0.86);
	display: grid;
	gap: 14px;
	grid-template-columns: 44px minmax(0, 1fr);
	line-height: 1.45;
}

/* Свечение позади галочки — фирменной бирюзой, двумя слоями: плотное
   у края круга и широкое, растворяющееся в фоне. Тенью, а не картинкой:
   круг значка и есть форма свечения. */
.ssg .ssg__punkt-znak {
	block-size: 44px;
	border-radius: 50%;
	box-shadow:
		0 0 18px rgba(37, 203, 194, 0.6),
		0 0 44px rgba(26, 255, 211, 0.3);
	display: block;
	inline-size: 44px;
	object-fit: contain;
}

.ssg .ssg__deystvie {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 22px;
	margin-block-start: clamp(26px, 3vw, 40px);
}

/* Главная кнопка первого экрана — крупнее прочих: это первое действие
   на сайте, и оно должно быть заметно раньше мокапа. */
.ssg .ssg__knopka {
	--ss-cta-krug: 50px;

	font-size: 17px;
	min-block-size: 66px;
	padding-block: 8px;
	padding-inline-start: 38px;
}

.ssg .ssg__podpis {
	align-items: center;
	color: var(--ss-dark-muted);
	display: flex;
	font-size: var(--ss-small);
	gap: 10px;
	line-height: 1.35;
	margin: 0;
	max-inline-size: 28ch;
}

/* Будильник вдвое крупнее прежнего. Ширина закреплена с обеих сторон:
   без этого строка рядом ужимала его до сорока пикселей в ширину,
   и картинка, вписанная в коробку, выходила вдвое мельче заданного. */
.ssg .ssg__podpis-znak {
	block-size: 68px;
	flex: 0 0 68px;
	inline-size: 68px;
	max-inline-size: none;
	min-inline-size: 68px;
	object-fit: contain;
}

/* Ноутбук и телефон внахлёст: телефон стоит у правого нижнего угла
   ноутбука и чуть выходит за него. */
.ssg .ssg__mokap {
	position: relative;
}

.ssg .ssg__noutbuk {
	block-size: auto;
	display: block;
	inline-size: 88%;
}

.ssg .ssg__telefon {
	block-size: auto;
	inset-block-end: -4%;
	inset-inline-end: 0;
	inline-size: 26%;
	position: absolute;
}

/* ------------------------------------------------------------ преимущества */

.ssg .ssg__preimushchestva {
	border-block-start: 1px solid var(--ss-dark-line);
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: var(--ssg-vozduh) 0 0;
	padding: clamp(22px, 2.6vw, 32px) 0 0;
}

.ssg .ssg__preimushchestva li {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 92px minmax(0, 1fr);
}

.ssg .ssg__pr-kartinka {
	block-size: 92px;
	inline-size: 92px;
	object-fit: contain;
}

/* Переносы расставляет `ssc_nb()` на выводе; здесь — чтобы последняя
   строка не выходила огрызком в одно слово. */
.ssg .ssg__preimushchestva p {
	text-wrap: pretty;
}

.ssg .ssg__preimushchestva p {
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.45;
	margin: 0;
}

/* Выделенные слова — «1 месяц», «в подарок!» — акцентом, как были. */
.ssg .ssg__preimushchestva em {
	color: var(--ss-accent);
	font-style: normal;
	font-weight: 500;
}

/* ---------------------------------------------------------- уже 1024 */

@media (max-width: 1024px) {
	/* В одну колонку шкала от ширины окна давала 24 px на планшете
	   и 18 на телефоне — заголовок прижимался к шапке. */
	.ssg .ssg__hero {
		--ssg-vozduh: 40px;
	}

	.ssg .ssg__hero-setka {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Колонка теперь во всю ширину — заголовок растёт от ширины окна
	   заново, но так, чтобы и на 360 оставаться в две строки. */
	.ssg .ssg__h1 {
		font-size: clamp(24px, 6.6vw, 48px);
	}

	.ssg .ssg__mokap {
		margin-inline: auto;
		max-inline-size: 560px;
	}

	.ssg .ssg__preimushchestva {
		grid-template-columns: minmax(0, 1fr);
		max-inline-size: 520px;
	}
}

/* ----------------------------------------------------------- уже 767 */

@media (max-width: 767px) {
	/* На телефоне две строки капсом давали кегль 26 — заголовок
	   не читался. Разрешаем три («РАЗРАБОТКА / САЙТОВ ПОД / КЛЮЧ»):
	   самое длинное слово кеглем 8.8vw на 360 занимает 263 px из 320. */
	.ssg .ssg__h1 {
		font-size: clamp(30px, 8.8vw, 40px);
		max-inline-size: none;
		text-wrap: balance;
	}

	.ssg .ssg__punkty {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Галочки мельче: рядом с текстом кеглем 16 круг в 44 px спорил
	   с заголовком за внимание. */
	.ssg .ssg__punkty li {
		gap: 12px;
		grid-template-columns: 34px minmax(0, 1fr);
	}

	.ssg .ssg__punkt-znak {
		block-size: 34px;
		inline-size: 34px;
	}

	.ssg .ssg__knopka {
		inline-size: 100%;
	}

	/*
	 * Порядок на телефоне: заголовок, пункты, мокап, а кнопка с будильником
	 * — под мокапом и поверх его низа. Первый экран становится короче
	 * на высоту кнопки, и действие стоит там, куда палец доходит после
	 * картинки. Колонка слов растворяется (`display: contents`), чтобы
	 * её части встали в сетку вперемешку с мокапом.
	 */
	.ssg .ssg__hero-setka {
		gap: 0;
	}

	.ssg .ssg__slova {
		display: contents;
	}

	.ssg .ssg__h1 {
		order: 1;
	}

	.ssg .ssg__punkty {
		order: 2;
	}

	.ssg .ssg__mokap {
		margin-block-start: 20px;
		order: 3;
	}

	.ssg .ssg__deystvie {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
		margin-block-start: -64px;
		order: 4;
		position: relative;
		z-index: 1;
	}

	/* Будильник с подписью — по центру под кнопкой, будильник мельче. */
	.ssg .ssg__podpis {
		align-self: center;
		max-inline-size: none;
	}

	.ssg .ssg__podpis-znak {
		block-size: 44px;
		flex-basis: 44px;
		inline-size: 44px;
		min-inline-size: 44px;
	}

	/* Значки преимуществ на телефоне того же размера, что на ПК, 92 px:
	   при 72 номер в картинке становился неразличим. */
	.ssg .ssg__preimushchestva li {
		gap: 14px;
	}

	/* Между пунктами — ноль: у картинок-значков снизу своё прозрачное
	   поле, и промежуток в 20 px выглядел вдвое больше. */
	.ssg .ssg__preimushchestva {
		row-gap: 0;
	}
}