/* ===== B2B Landing Page - Start ===== */

/* Макет: 1920 `471:35237`, 1480 `476:57391`, 375 `471:40879`.

   Ритм сторінки однаковий у всіх секціях: між секціями 160 / 150 / 80,
   від заголовка до вмісту 80 / 60 / 40, від карток до кнопки 60.

   Сітки лягають на тему: `.auto-cols` з `data-cols` — шість колонок умов і п'ять карток,
   на 1279 обидві стають по дві. Ширини сходяться з макетом самі: 5×360 + 4×20 = 1880
   на 1920 і 5×272 + 4×20 = 1440 на 1480. */

/* B2B Hero - Start */
/* Смуга на всю ширину: ліворуч текст, праворуч фото до самого краю.
   Тло смуги — `--light-gray` (#fcf9f3), світліше за кремове тло сторінок. */
.b2b-page .b2b-hero {
	position: relative;
	overflow: hidden;
}

/* Декоративні завитки — тонка векторна графіка з макета (`Vector 7` і `Vector 8`).
   Координати від верхнього лівого кута смуги; те, що в макеті виходить за її межі,
   обрізає `overflow: hidden` секції. */
.b2b-page .b2b-swirl {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.b2b-page .b2b-swirl-1 {
	left: -154px;
	top: -55px;
	width: 550px;
	height: 430px;
}

.b2b-page .b2b-swirl-2 {
	left: 538px;
	top: 388px;
	width: 617px;
	height: 532px;
}

.b2b-page .b2b-hero .container {
	position: relative;
	z-index: 1;
}

.b2b-page .b2b-hero-content {
	justify-content: flex-end;
	gap: 24px;
	padding: 0 60px 60px;
}

/* Кегль першого екрана свій, більший за шкалу теми (Forum 90/81 у макеті) —
   такий самий кастом, як hero Головної. На 1279 повертаємось до коробкових 34/31. */
.b2b-page .b2b-hero-content h1 {
	font-size: 90px;
	line-height: 81px;
}

.b2b-page .b2b-hero-actions {
	margin-top: 0;
}

/* Пропорція фото знята з макета (947×580 на 1920, 730×448 на 1480 — та сама 1.63),
   тому висота смуги йде за шириною екрана і не стрибає між тирами. */
.b2b-page .b2b-hero-media {
	aspect-ratio: 947 / 580;
}

.b2b-page .b2b-hero-image,
.b2b-page .b2b-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.b2b-page .b2b-hero-image img {
	object-fit: cover;
}
/* B2B Hero - End */

/* B2B Sections - Start */
.b2b-page .b2b-section {
	padding-top: 160px;
}

.b2b-page .b2b-become-section {
	padding-bottom: 160px;
}

/* Інтерліньяж заголовків секцій у макеті 1.16, а не коробковий 0.9 (`Умови співпраці`
   56/65). Ставимо контекстним правилом сторінки — саме так база й передбачає. */
.b2b-page .b2b-section-title {
	line-height: 65px;
	margin-bottom: 80px;
}
/* B2B Sections - End */

/* B2B Terms - Start */
/* Шість колонок з тонкими вертикальними лініями між ними. Лінія — межа комірки,
   тому вона сама тягнеться на всю висоту ряду, як у макеті (`Line 50`, 1px чорного 16%). */
.b2b-page .b2b-term {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 0 10px;
}

.b2b-page .b2b-term:not(:nth-child(6n)) {
	border-right: 1px solid rgb(0 0 0 / 16%);
}

.b2b-page .b2b-term-icon {
	width: 32px;
	height: 32px;
}
/* B2B Terms - End */

/* B2B Steps - Start */
/* Біла квадратна картка: номер угорі, текст притиснутий до низу (макет 360×360 і 272×272). */
.b2b-page .b2b-step {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1;
	padding: 24px;
	background: var(--white);
}

.b2b-page .b2b-cta {
	margin-top: 60px;
}
/* B2B Steps - End */

@media (max-width: 1680px) {
	.b2b-page .b2b-swirl-1 {
		left: -119px;
		top: -43px;
		width: 424px;
		height: 331px;
	}

	.b2b-page .b2b-swirl-2 {
		left: 415px;
		top: 299px;
		width: 475px;
		height: 410px;
	}

	.b2b-page .b2b-hero-content {
		gap: 16px;
		padding: 0 20px 20px;
	}

	.b2b-page .b2b-hero-content h1 {
		font-size: 70px;
		line-height: 63px;
	}

	.b2b-page .b2b-section {
		padding-top: 150px;
	}

	.b2b-page .b2b-become-section {
		padding-bottom: 150px;
	}

	.b2b-page .b2b-section-title {
		line-height: 56px;
		margin-bottom: 60px;
	}
}

@media (max-width: 1279px) {
	.b2b-page .b2b-swirl-1 {
		left: -76px;
		top: -44px;
		width: 292px;
		height: 228px;
	}

	.b2b-page .b2b-swirl-2 {
		left: 247px;
		top: 279px;
		width: 186px;
		height: 160px;
	}

	/* Перший екран стає стовпчиком: текст, під ним фото на всю ширину.
	   Великий відступ згори — місце під завиток, як у макеті (текст починається з 178). */
	.b2b-page .b2b-hero-content {
		gap: 20px;
		padding: 180px 10px 24px;
	}

	.b2b-page .b2b-hero-content h1 {
		font-size: 34px;
		line-height: 31px;
	}

	.b2b-page .b2b-hero-media {
		aspect-ratio: 375 / 253;
	}

	.b2b-page .b2b-section {
		padding-top: 80px;
	}

	.b2b-page .b2b-become-section {
		padding-bottom: 80px;
	}

	.b2b-page .b2b-section-title {
		line-height: 31px;
		margin-bottom: 40px;
	}

	/* Сітка умов стає два на три. Вертикальні й горизонтальні лінії — межі комірок;
	   вертикальні відступи комірки дають крок рядів 170, як у макеті. */
	.b2b-page .b2b-terms-section .b2b-section-title {
		margin-bottom: 16px;
	}

	.b2b-page .b2b-term {
		gap: 32px;
		padding: 24px 10px;
	}

	.b2b-page .b2b-term:not(:nth-child(6n)) {
		border-right: 0;
	}

	.b2b-page .b2b-term:nth-child(odd) {
		border-right: 1px solid rgb(0 0 0 / 16%);
	}

	.b2b-page .b2b-term:not(:nth-last-child(-n + 2)) {
		border-bottom: 1px solid rgb(0 0 0 / 16%);
	}

	.b2b-page .b2b-term-icon {
		width: 24px;
		height: 24px;
	}

	/* Квадрат тримаємо тільки там, де картка вузька, як у макеті (174 на 375).
	   На планшеті колонка ширша — жорстка пропорція роздувала б картку до 490×490,
	   тому нижче 1280 висоту задає вміст, а 173 лишається мінімумом. */
	.b2b-page .b2b-step {
		aspect-ratio: auto;
		min-height: 173px;
		padding: 12px;
	}
}
/* ===== B2B Landing Page - End ===== */