/* =========================================================================
   ЦЕЙ ФАЙЛ ЗГЕНЕРОВАНО АВТОМАТИЧНО — НЕ РЕДАГУВАТИ ВРУЧНУ.

   Джерело: assets/css/src/*.css
   Перезбірка: python build-css.py  (або python build-css.py --watch)
   ========================================================================= */

/* ---------- src/01-fonts.css ---------- */
/* ==========================================================================
   Шрифти — локально, latin + cyrillic.

   УВАГА: шляхи в url() рахуються від СКОМПІЛЬОВАНОГО файлу
   (assets/css/style.css), а не від цієї папки src/ — тому '../fonts/'.

   - Raleway 400   — базовий текст (взято з теми inweb-v2, ті самі файли)
   - Unbounded 500 — заголовки (у темі inweb-v2 бемолюдше 500 — див. TODO нижче:
     потрібен саме 700/bold, якого в темі немає, поки використовуємо 500)
   - Geist (variable, 100–900) — окрема секція наприкінці лендінгу (light),
     файли взяті з landing-проєкту E:\domains\inweb-landings.loc\rebrending
   ========================================================================== */

/* raleway 400 cyrillic-ext */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway/raleway-400-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* raleway 400 cyrillic */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway/raleway-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* raleway 400 latin-ext */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway/raleway-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* raleway 400 latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway/raleway-400-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;
}

/* raleway 700 cyrillic-ext — для бігучого рядка-розділювача між секціями */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway/raleway-700-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* raleway 700 cyrillic */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway/raleway-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* raleway 700 latin-ext */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway/raleway-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* raleway 700 latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/raleway/raleway-700-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;
}

/* unbounded 500 cyrillic-ext — TODO: замінити на 700/bold, коли буде файл */
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/unbounded/unbounded-500-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* unbounded 500 cyrillic */
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/unbounded/unbounded-500-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* unbounded 500 latin-ext */
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/unbounded/unbounded-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* unbounded 500 latin */
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/unbounded/unbounded-500-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;
}

/* geist (variable font) cyrillic — лише для секції наприкінці лендінгу */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist/geist-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* geist (variable font) latin */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist/geist-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;
}

/* ---------- src/02-variables.css ---------- */
/* ==========================================================================
   CSS Custom Properties (глобальні змінні)

   Типографіка — mobile-first: у :root лежать мобільні розміри, десктопні
   (лаптоп/широкі, від 768px) підставляються оверрайдом нижче.
   ========================================================================== */
:root {
	/* Кольори бренду */
	--color-bg: #F2FEE4;
	--color-text: #000000;
	--color-brand-green: #4BB300;
	--color-brand-pink: #FF006E;
	--color-brand-blue: #0092F9;

	/* Базовий текст: Raleway regular, 16px моб. / 20px від лаптопа */
	--font-family-base: 'Raleway', system-ui, -apple-system, "Segoe UI", sans-serif;
	--fw-regular: 400;
	--font-size-base: 16px;

	/* Заголовки: Unbounded bold, 20px моб. / 30px від лаптопа.
	   TODO: у теми inweb-v2 з self-hosted ваг Unbounded є лише до 500 —
	   bold/700 файлу немає, поки рендериться як 500 (див. 01-fonts.css). */
	--font-family-display: 'Unbounded', var(--font-family-base);
	--fw-display: 700;
	--font-size-display: 20px;

	/* Geist light — лише для окремої секції наприкінці лендінгу */
	--font-family-accent: 'Geist', var(--font-family-base);
	--fw-accent-light: 300;

	--container-max-width: 1032px;

	/* Поля контейнера (gutters) по брейкпоінтах — узгоджено з лендінгом
	   E:\domains\inweb-landings.loc\rebrending (той самий патерн і ті самі
	   значення), під брейкпоінти цього проєкту (мобайл <768 / лаптоп
	   768–1199 / широкі 1200+). */
	--gutter-mobile: 30px;
	--gutter-laptop: 40px;
	--gutter-wide: 64px;

	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 80px;
	--space-8: 96px;

	--radius: 8px;
	--transition: 0.2s ease;
}

@media (min-width: 768px) {
	:root {
		--font-size-base: 20px;
		--font-size-display: 30px;
	}
}

/* ---------- src/03-base.css ---------- */
/* ==========================================================================
   Reset / базові стилі
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	font-family: var(--font-family-base);
	font-weight: var(--fw-regular);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.1;
	-webkit-font-smoothing: antialiased;
	/* clip, а не hidden: hidden на html І body разом робить body окремим
	   скрол-контейнером (overflow-y стає auto) — друга вертикальна прокрутка. */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-display);
	font-weight: var(--fw-display);
	font-size: var(--font-size-display);
	line-height: normal;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

ul,
ol {
	list-style: none;
}

/* ---------- src/04-layout.css ---------- */
/* ==========================================================================
   Layout helpers (контейнер, утиліти) — спільне для всіх секцій.

   Патерн узятий з E:\domains\inweb-landings.loc\rebrending (assets/css/src/04-layout.css):
   "секція на весь екран + контейнер всередині" — <section> тримає фон на всю
   ширину вікна, а .container всередині обмежує контент і задає бічні поля.
   ========================================================================== */

.btsb-container {
	--gutter: var(--gutter-mobile);
	width: min(var(--container-max-width), 100% - (var(--gutter) * 2));
	margin-inline: auto;
}

@media (min-width: 768px) {
	.btsb-container {
		--gutter: var(--gutter-laptop);
	}
}

@media (min-width: 1200px) {
	.btsb-container {
		--gutter: var(--gutter-wide);
	}
}

.btsb-section {
	padding-block: var(--space-6);
}

/* Окрема секція наприкінці лендінгу — шрифт Geist light (той самий, що й
   у лендінгу rebrending), решта сторінки лишається на Raleway/Unbounded. */
.btsb-section--geist {
	font-family: var(--font-family-accent);
	font-weight: var(--fw-accent-light);
}

.cols {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

@media (min-width: 768px) {
	.cols {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
	}

	.cols > * {
		flex: 1 1 474px;
		min-width: 0;
	}
}

/* Примусовий перенос рядка всередині тексту: обгорнути потрібну частину в
   <span class="...">. block — завжди; block-mobile — тільки на мобайлі
   (<768, на лаптопі/широких — inline); block-desktop — тільки від лаптопа
   (768+, на мобайлі — inline). */
.block {
	display: block;
}

.block-mobile {
	display: block;
}

.block-desktop {
	display: inline;
}

@media (min-width: 768px) {
	.block-mobile {
		display: inline;
	}

	.block-desktop {
		display: block;
	}
}

/* Нерозривний шматок: обгорнути те, що не можна ламати переносом —
   напр. дужки разом з SVG-цифрою в картці: (<img class="card__accent">). */
.nowrap {
	white-space: nowrap;
}

/* Прихований візуально, але доступний для скрінрідерів */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll — база під анімації з коментарів у Figma.
   Використання: додати атрибут data-reveal на елемент, керування — у
   initScrollReveal() в assets/js/main.js. Патерн узятий з тим-таки
   лендінгом rebrending.
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- src/05-hero.css ---------- */
/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	padding-top: 46px;
	padding-bottom: 60px;
}

@media (min-width: 768px) {
	.hero {
		padding-top: 70px;
		padding-bottom: 0;
	}
}

/* Маленьке лого inweb × BUKI зверху, по центру */
.hero__top {
	display: flex;
	justify-content: center;
	margin-bottom: 42px;
}

@media (min-width: 768px) {
	.hero__top {
		margin-bottom: 30px;
	}
}

.hero__logo {
	width: 201px;
	height: auto;
}

/* Великий SVG — на всю ширину КОНТЕЙНЕРА (не сторінки). Інлайновий (не <img>),
   щоб JS міг анімувати окремі <path> — див. assets/js/hero-svg-draw.js */
.hero__banner svg {
	display: block;
	width: 100%;
	height: auto;
	/* Зсув ліворуч на 5% своєї ширини. Саме transform, а не margin — не
	   чіпає розкладку (висоту банера й позицію плашки нижче). */
	transform: translateX(-5%);
}

/* Плашка "Дослідження українського EdTech" — текстом, не картинкою
   (нахил -3.6° і повне скруглення зняті з edtech.svg; колір і розмір —
   за правками замовника: чорна і більша).

   Лежить у потоці одразу після банера, тому центрується по контейнеру
   однаково на всіх ширинах — без прив'язки до ширини колонки й без
   абсолютного позиціювання (як було раніше).

   Нахил через --badge-tilt (не голий rotate()), бо JS-поява в
   hero-svg-draw.js переписує transform і мусить підставити той самий кут —
   інакше після анімації нахил злітає. */
.hero__badge {
	--badge-tilt: -3.6deg;

	display: block;
	max-width: 309px;
	margin: 6px auto 0 auto;
	padding: 6px 0;
	border-radius: 999px;
	background: #222; /* чорний з макета (заміряно зі скріна) */
	color: #fff;
	font-size: 17px;
	line-height: 1.2;
	text-align: center;
	transform: rotate(var(--badge-tilt));
	opacity: 0; /* показує JS — разом з домальовуванням ліній hero */
}

@media (min-width: 768px) {
	/* 70% контейнера ≈ 722px — так само, як у макеті (заміряно ~725×52px),
	   решта ширини лишається повітрям обабіч. */
	.hero__badge {
		width: 70%;
		max-width: none; /* скидаємо мобільний ліміт 309px */
		margin-top: 5px;
		padding: 5px 40px;
		font-size: 20px; /* 768–1079: проміжний кегль, повний 37px — від 1080 */
	}
}

@media (min-width: 1080px) {
	.hero__badge {
		font-size: 37px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__badge {
		opacity: 1;
	}
}

/* Букви (з "плямами" — це їх власний колірний шар) — ховаємо до JS-фейду,
   щоб не блимнули видимими до анімації. */
.ls-letter {
	opacity: 0;
}

/* Декоративні лінії — ховаємо групою одразу (JS виставляє dasharray/dashoffset
   по кожному <path> синхронно, і лише тоді відкриває групу — так під час
   намальовування ніколи не мигне повністю готова лінія). */
.ls-lines {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ls-letter,
	.ls-lines {
		opacity: 1;
	}
}


.hero__cols {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 60px;
	margin-top: 85px; /* відсунуто нижче — акцент спершу на заголовку, потім на плашці */
}

@media (min-width: 400px) {
	.hero__cols {
		gap: 0;
	}
}

@media (min-width: 768px) {
	.hero__cols {
		flex-direction: row;
		justify-content: space-between;
		gap: 50px;
		margin-top: 80px; /* відсунуто нижче, щоб плашка дихала (було 40) */
	}

	.hero__cards,
	.hero__text {
		flex: 1 1 474px;
		min-width: 0;
	}
	.hero__text {
		flex: 0 1 474px;
	}	
}

.hero__text p + p {
	margin-top: var(--space-3);
}

.hero__text a {
	text-decoration: underline;
}

/* ---------- src/06-cards.css ---------- */
/* ==========================================================================
   Картки статистики (ліва колонка hero) — абсолютне позиціювання, бо картки
   навмисно виходять за краї колонки з усіх боків (як на макеті). Позиції/
   нахили — orientировочно "на око" зі скріну, підженемо після фідбеку.
   ========================================================================== */

.cards {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 0.95;
	max-width: 343px;
	margin: 0 auto;
}

.card {
	position: absolute;
	display: flex;
	align-items: center;
	padding: 18px 20px;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.1;
	transform: rotate(var(--tilt, 0deg));
}

@media (min-width: 768px) {
	.card {
		font-size: 15px;
	}
	.cards {
		max-width: none;
		margin: 0;
	}	
}
@media (min-width: 1099px) {
	.card {
		font-size: 20px;
	}
}

/* Розміри з макета (238×227 / 266×210 / 238×204) переведені у % від .cards
   (база — колонка 474px) + aspect-ratio замість фіксованих px: картки
   масштабуються разом з контейнером на будь-якій ширині (і на мобілці
   теж — той самий пропорційний вигляд), а не тримають жорсткий px-розмір,
   який ламає верстку/дає горизонтальний скрол, коли колонка вужча за 474px. */
.card--green {
	width: 57.14%; /* 196 / 343 */
	aspect-ratio: 196 / 139;
}
.card--blue {
	width: 62.4%; /* 214 / 343 */
	aspect-ratio: 214 / 137;
}

.card--orange {
	width: 61.2%; /* 210 / 343 */
	aspect-ratio: 210 / 148;
}

.card--pink {
	width: 54.5%; /* 187 / 343 */
	aspect-ratio: 187 / 156;
}

@media (min-width: 768px) {
	.card--green,
	.card--blue {
		width: 50.211%; /* 238 / 474 */
		aspect-ratio: 238 / 227;
	}

	.card--orange {
		width: 56.118%; /* 266 / 474 */
		aspect-ratio: 266 / 210;
	}

	.card--pink {
		width: 50.211%; /* 238 / 474 */
		aspect-ratio: 238 / 204;
	}	
}

/* Шари (знизу вгору): блакитна (верх-права) → зелена (верх-ліва) →
   персикова (низ-ліва) → рожева (низ-права, найвище). */
.card--blue {
	top: -4%;
	right: -15%;
	background: #D6EEFF;
	z-index: 5;
	padding-right: 36px;
}

.card--green {
	top: -8%;
	left: -6%;
	background: #CDFFA6;
	z-index: 2;
	padding-right: 36px;
}

.card--orange {
	top: 35%;
	left: -4%;
	background: #FEE2BA;
	z-index: 3;
	padding-right: 40px;
}

.card--pink {
	top: 41%;
    right: -8%;
	background: #FDF2F2;
	z-index: 4;
}


@media (min-width: 768px) {
	.card--blue {
		top: -4%;
		right: 0%;
		padding-left: 27px;
		padding-bottom: 54px;
		z-index: 1;
	}

	.card--green {
		top: -8%;
		left: 3%;
		z-index: 2;
		padding-right: 20px;
	}

	.card--orange {
		top: 39%;
		left: -4%;
		padding-right: 40px;
		z-index: 3;
	}

	.card--pink {
		top: 49%;
		right: 2%;
		z-index: 4;
	}
}

@media (min-width: 1099px) {
	.card--blue { 
		padding-left: 45px;
    	padding-bottom: 18px;
		padding-right: 20px;
	}
	.card--orange {
		padding-right: 45px;
	}	
}


/* Цифри/суми в картках — SVG рукописного шрифту (кольори вже в самих файлах) */
.card__accent {
	display: inline-block;
	height: 1.3em;
	width: auto;
	vertical-align: -0.3em;
}

.cards__deco {
	position: absolute;
	z-index: 5;
}

.cards__deco--star {
	max-width: 40%;
	top: 21%;
    left: 30%;
	transform: translate(-50%, -50%);
}

/* Ліва скріпка — без додаткового повороту, нахил такий, як у самому файлі */
.cards__deco--clip-left {
    max-width: 34%;
    top: -17%;
    left: -26%
}

.cards__deco--clip-right {
	max-width: 34%;
    top: 26%;
    right: -27%;
	transform: rotate(var(--rotate, 0deg));
}

@media (min-width: 768px) {

	.card__accent {
		display: inline-block;
		height: 1.3em;
		width: auto;
		vertical-align: -0.3em;
	}

	.cards__deco {
		position: absolute;
		z-index: 5;
	}

	.cards__deco--star {
		max-width: 29%;
		top: 27%;
		left: 40%;
		transform: translate(-50%, -50%);
	}

	.cards__deco--clip-left {
		max-width: 26%;
		top: -11%;
		left: -9%
	}

	.cards__deco--clip-right {
		max-width: 26%;
		top: 38%;
		right: -9%;
		transform: rotate(var(--rotate, 0deg));
	}

}


/* Ховаємо до "випадання" — керує assets/js/cards-fly-in.js */
.card,
.cards__deco {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.cards__deco {
		opacity: 1;
	}
}

/* ---------- src/07-marquee.css ---------- */
/* ==========================================================================
   Розділювач-стрічка між секціями — нахилена смуга з бігучим рядком.
   Модифікатор кольору: .marquee (зелений за замовч.) / .marquee--blue / .marquee--pink.

   Full-bleed (на всю ширину екрана, ламає .btsb-container) + невеликий нахил.
   Текст — суцільна нескінченна стрічка: два однакових набори підряд,
   анімація зсуває трек рівно на половину (-50%) — момент стику непомітний.
   ========================================================================== */

.marquee {
	--marquee-bg: var(--color-brand-green);
	--marquee-tilt: -2deg;

	position: relative;
	overflow: hidden;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	height: 42px;
	background: var(--marquee-bg);
	transform: rotate(var(--marquee-tilt));
	display: flex;
	align-items: center;
}

.marquee--blue {
	--marquee-bg: var(--color-brand-blue);
}

.marquee--pink {
	--marquee-bg: var(--color-brand-pink);
}

/* Нахил у інший бік (дзеркально) — і рух теж у протилежний бік:
   стрічка завжди "їде з гірки" (при -2deg — вліво, при 2deg — вправо). */
.marquee--tilt-reverse {
	--marquee-tilt: 2deg;
}

.marquee--tilt-reverse .marquee__track {
	animation-direction: reverse;
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee-scroll 22s linear infinite;
}

.marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.marquee__item {
	white-space: nowrap;
	font-family: 'Raleway', var(--font-family-base);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	padding-inline: 10px;
}

.marquee__item::after {
	content: '·';
	margin-inline-start: 20px;
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}
}

/* ---------- src/08-motives.css ---------- */
/* ==========================================================================
   "Що мотивує українців до навчання" — текст + пай-чарт.
   Колонки — спільний .cols (04-layout.css); тут лише свій внутрішній
   відступ між колонками на десктопі (15px з кожного боку).
   ========================================================================== */

.motives {
	padding-block: var(--space-6);
}

.motives__text h2 {
	color: var(--color-brand-green);
	margin-bottom: var(--space-3);
}

.motives__text p + p {
	margin-top: var(--space-3);
}

.motives__chart-wrap {
	position: relative;
	max-width: 463px;
}

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

/* Позиція серця — орієнтовно з макета, підженемо після фідбеку */
.motives__chart-heart {
	position: absolute;
    top: 35%;
    right: 16%;
	width: 25%;
	height: auto;
}

@media (min-width: 768px) {
	.motives__chart-wrap {
		margin-top: var(--space-1);
	}

	.motives__text {
		padding-right: 25px;
	}

	.motives__chart {
		padding-left: 25px;
	}
}

/* ---------- src/09-demand.css ---------- */
/* ==========================================================================
   "Хто формує попит на освіту в Україні" — чарт (ліворуч) + текст (праворуч).
   Дзеркало секції "Що мотивує..." (08-motives.css): той самий .cols
   (04-layout.css), але без додаткових бічних падінгів.

   На мобілці порядок реверситься — текст першим, чарт другим (order,
   DOM лишається chart→text, щоб на десктопі було ліво→право як у макеті).
   ========================================================================== */

.demand {
	padding-top: var(--space-7);
	padding-bottom: var(--space-6);
}

.demand__text h2 {
	color: var(--color-brand-pink);
	margin-bottom: var(--space-3);
}

.demand__text p + p {
	margin-top: var(--space-3);
}

.demand__chart-img {
	display: block;
	width: 100%;
	max-width: 492px;
	height: auto;
}

.demand__text {
	position: relative;
	order: -1;
}

@media (min-width: 768px) {
	.demand__text {
		order: 0;
	}
}

.demand__bant {
	position: absolute;
    top: -57%;
    right: -12%;
}
@media (min-width: 768px) {
	.demand__bant {
		top: -45%;
	}
}

/* ---------- src/10-seasonality.css ---------- */
/* ==========================================================================
   "Коли українці найактивніше шукають репетиторів" — текст + картки
   (той самий принцип, що в hero: .card з 06-cards.css, абсолютне
   позиціювання), нижче на всю ширину контейнера — графік chart-3.svg
   (заголовок/підпис графіка вже намальовані всередині самого svg).

   Позиції карток/декору — орієнтовно з макета, підженемо після фідбеку.
   ========================================================================== */

.seasonality {
	padding-block: 0;
	padding-bottom: var(--space-7);
}
@media (min-width: 768px) {
	.seasonality {
		padding-block: 0;
		padding-bottom: 0;
	}
}

.seasonality__text p + p {
	margin-top: var(--space-3);
}

/* Обгортка-колонка (flex-дитина .cols) + внутрішній relative-бокс для
   абсолютних карток/декору — та сама двоповерхова структура, що в hero
   (.hero__cards > .cards). */
.seasonality__cluster {
	position: relative;
	width: 100%;
	max-width: 343px;
	aspect-ratio: 1 / 1.2;
}

@media (min-width: 768px) {
	.seasonality {
		padding-block: var(--space-4);
	}	
	.seasonality__cluster {
		max-width: none;
		aspect-ratio: 1 / 0.85;
	}
}

.seasonality__card--1 {
	width: 84.257%; /* 289 / 343 */
	aspect-ratio: 289 / 151;
	top: 0;
	left: 2%;
	background: #FCCFDB;
	padding: 25px 35px;
	z-index: 1;
}

.seasonality__card--2 {
	width: 72.012%; /* 247 / 343 */
	aspect-ratio: 247 / 156;
	top: 38%;
    right: 12%;
	background: #FDF2F2;
	padding: 25px 20px;
	z-index: 2;
}

@media (min-width: 768px) {
	.seasonality__card--1 {
		width: 65.401%; /* 310 / 474 */
		aspect-ratio: 310 / 200;
		padding: 25px 25px;
		top: -10%;
		right: 13%;	
		left: auto;	
		z-index: 2;
	}

	.seasonality__card--2 {
		width: 65.401%; /* 310 / 474 */
		aspect-ratio: 310 / 227;
		padding: 25px 35px;
		top: 43%;
		left: 16%;
		right: auto;
		z-index: 1;		
	}
}

.seasonality__deco {
	position: absolute;
	z-index: 3;
}

.seasonality__deco--clip-1 {
	max-width: 37%;
	top: -12%;
	left: -14%;
}

.seasonality__deco--clip-2 {
	max-width: 37%;
	top: 28%;
	left: -4%;
	transform: rotate(var(--rotate, 0deg));
}

.seasonality__deco--star-top {
	max-width: 185px;
	top: -16%;
	right: -17%;
}

.seasonality__deco--star-bottom {
	max-width: 137px;
	bottom: 3%;
	right: 50%;
	z-index: -1;
}

@media (min-width: 768px) {
	.seasonality__deco--clip-1 {
		max-width: 26%;
		top: -24%;
		left: 12%;
	}

	.seasonality__deco--clip-2 {
		max-width: 26%;
		top: 42%;
		left: 1%;
		transform: rotate(var(--rotate, 0deg));
	}

	.seasonality__deco--star-top {
		max-width: 37%;
		top: -25%;
		right: -4%;
	}

	.seasonality__deco--star-bottom {
		max-width: 28%;
        bottom: -4%;
        right: 0;
		z-index: 10;
	}
}

.seasonality__chart {
	margin-top: 20px;
}

.seasonality__chart svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.seasonality__chart {
		margin-top: 60px;
	}
}

/* Лінії графіка 2025/2026 + точки на них — домальовуються JS
   (chart-line-draw.js). Ховаємо до анімації, щоб не блимнули готовими до
   старту. Точки з'являються не одразу, а синхронно з рухом лінії — JS
   рахує, на якій довжині кривої лежить кожна точка, і показує її саме
   тієї миті. transform-box/-origin — щоб scale() у точці йшов від її
   власного центру, а не від початку координат svg. */
.chart-line,
.chart-dot {
	opacity: 0;
}

.chart-dot {
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
	.chart-line,
	.chart-dot {
		opacity: 1;
	}
}

/* ---------- src/11-subjects.css ---------- */
/* ==========================================================================
   "Які спеціальності та предмети вивчають українці" — 2 ряди по 2 колонки:
   текст/чарт + картка з декором. Типографіка заголовків/параграфів/карток —
   та сама, що в інших секціях (.card з 06-cards.css, h2 як у motives/demand).

   Картки тут — той самий кластерний патерн, що в hero/seasonality: .cards
   (position:relative, розмір з aspect-ratio) містить абсолютно
   спозиційовану .card (rotate(--tilt)) + .cards__deco. Завдяки класу .cards
   вони автоматично підхоплюються тим самим cards-fly-in.js (випадання
   картки + поява декору), без додаткового JS.

   Позиції декору/нахили карток — орієнтовно з макета, підженемо після фідбеку.
   ========================================================================== */

.subjects {
	padding-block: var(--space-6);
	padding-bottom: 180px;
}
@media (min-width: 768px) {
	.subjects {
		padding-bottom: var(--space-5);
	}
}

.subjects__col--text h2 {
	color: var(--color-brand-green);
	margin-bottom: var(--space-3);
}

.subjects__col--text p + p {
	margin-top: var(--space-3);
}

/* Колонка з чартом — власна positioning-основа для картки, яка лежить
   ПОВЕРХ графіка (не під ним), у місці, де немає стовпчиків/лінії. */
.subjects__col--chart {
	position: relative;
}

.subjects__chart-img {
	display: block;
	width: 100%;
	max-width: 518px;
	height: auto;
}

.subjects__row2 {
	margin-top: var(--space-5);
}

@media (min-width: 768px) {
	.subjects__row2 {
		margin-top: var(--space-7);
	}
}

/* Кластер — контейнер розміру картки (aspect-ratio дає йому висоту,
   інакше абсолютні діти її не задають) + відступ від тексту/чарту вище. */
.subjects__cluster {
	position: relative;
	margin-top: var(--space-5);
}

.subjects__cluster--1 {
	width: 75.219%; /* 258 / 343 */
	aspect-ratio: 258 / 168;
	top: 0;
	left: 0;
}

/* Кластери 2–4 лежать поверх чарту в своїй колонці — абсолютні, без
   margin-top (замість нього top/bottom/left/right нижче). Позиції —
   орієнтовно з макета (там, де в графіка порожньо), підженеш руками. */
.subjects__cluster--2,
.subjects__cluster--3,
.subjects__cluster--4 {
	position: absolute;
	margin-top: 0;
	width: 59.184%; /* 203 / 343 */
	aspect-ratio: 203 / 162;
}

.subjects__cluster--2 {
	bottom: 15%;
	left: 46%;
	width: 202px;
}

.subjects__cluster--3 {
	top: 48%;
    aspect-ratio: 216 / 212;
    left: 47%;
	width: 216px;
}

.subjects__cluster--4 {
	top: 100%;
	left: 21%;
	width: 217px;
}

@media (min-width: 768px) {
	.subjects__cluster--1 {
		width: 65.401%; /* 310 / 474 */
		aspect-ratio: 310 / 190;
		top: 0;
		left: 17%;
	}

	.subjects__cluster--2 {
		width: 57.806%; /* 274 / 474 */
		aspect-ratio: 274 / 192;
		bottom: 14%;
		right: -2%;
		left: auto;
	}

	.subjects__cluster--3,
	.subjects__cluster--4 {
		width: 60.127%; /* 285 / 474 */
	}

	.subjects__cluster--3 {
		aspect-ratio: 285 / 234;
		top: 41%;
		right: -6%;
		left: auto;
	}

	.subjects__cluster--4 {
		aspect-ratio: 285 / 189;
		bottom: 25%;
		top: auto;
		right: -10%;
		left: auto;
	}
}

/* .card дає шрифт/rotate(--tilt)/flex-центрування з 06-cards.css, тут —
   заповнити кластер повністю (top:0;left:0;100%×100%) + власні фон/паддінги. */
.subjects__card {
	inset: 0;
	width: 100%;
	height: 100%;
	background: #CDFFA6;
}

.subjects__card--1 {
	padding: 25px 25px;
}

.subjects__card--2 {
	padding: 20px 15px;	
}

.subjects__card--3 {
	padding: 25px 20px;
	background: #D6EEFF;	
}

.subjects__card--4 {
	padding: 25px 30px;
	background: #FDF2F2;
}

@media (min-width: 768px) {
	.subjects__card--1 {
		padding: 25px 25px;
	}

	.subjects__card--2 {
		padding: 25px 20px;
	}

	.subjects__card--3 {
		padding: 25px 20px;
	}

	.subjects__card--4 {
		padding: 25px 30px;
	}
}

/* Декор — власний реальний розмір 1x-зображення (без % масштабування),
   поворот уже "запечений" у самих файлах, тому transform не треба. */
.subjects__deco--clip1 {
	top: -6%;
	left: -23%;
}

/* На мобілці busi.png (267px) ширший за саму картку (~258px) і повністю
   перекриває її фон — на відміну від десктопу, де картка (310px) більша
   за буси. Тому тут, на відміну від інших декорів, все ж кепаємо ширину —
   лише на мобілці; від лаптопа лишається реальний 1x-розмір, як і просив. */
.subjects__deco--busi {
	top: -32%;
	left: 52%;
	max-width: 91%;
}

.subjects__deco--clip2 {
	top: -21%;
	right: -22%;
}

.subjects__deco--clip3 {
	top: -8%;
	right: -22%;
}

.subjects__deco--star {
	top: -31%;
	right: 26%;
	z-index: -1;
}

.subjects__deco--clip4 {
	top: -24%;
	right: -19%;
}

@media (min-width: 768px) {
	.subjects__deco--clip1 {
        top: -7%;
        left: -17%;
	}

	.subjects__deco--busi {
		top: -28%;
        left: 60%;
		max-width: none;
	}

	.subjects__deco--clip2 {
		top: -12%;
		right: -15%;
	}

	.subjects__deco--clip3 {
		top: -5%;
		right: -15%;
	}

	.subjects__deco--star {
		top: 81%;
		right: -8%;
	}

	.subjects__deco--clip4 {
		top: -26%;
		right: -13%;
	}
}

/* ---------- src/12-pricing.css ---------- */
/* ==========================================================================
   "Скільки коштує навчання" — ряд 1: чарт (ліворуч) + текст (праворуч).
   Той самий .cols (04-layout.css). На мобілці порядок реверситься — текст
   першим, чарт другим (order, DOM лишається чарт→текст, як у desktop).
   ========================================================================== */

.pricing {
	padding-block: var(--space-7);
	padding-bottom: var(--space-6);
}

.pricing__col--text h2 {
	color: var(--color-brand-pink);
	margin-bottom: var(--space-3);
}

.pricing__col--text p + p {
	margin-top: var(--space-3);
}

.pricing__chart-img {
	display: block;
	width: 100%;
	max-width: 517px;
	height: auto;
}

.pricing__col--text {
	order: -1;
}

@media (min-width: 768px) {
	.pricing {
		padding-block: var(--space-7);
		padding-bottom: var(--space-7);
	}	
	.pricing__col--text {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
   Ряд 2: текст+картка (ліворуч, картка на мобілці ЙДЕ ПЕРШОЮ — не сама
   колонка, а вміст усередині неї) + чарт (праворуч, порядок колонок не
   міняється — зліва направо однаково на мобілці й десктопі).
   -------------------------------------------------------------------------- */
.pricing__row2 {
	margin-top: var(--space-5);
	gap: 40px;
}
@media (min-width: 768px) {
	.pricing__row2 {
		margin-top: var(--space-5);
		gap: 50px;
	}
}

.pricing__col-body h2 {
	color: var(--color-brand-pink);
	margin-bottom: var(--space-3);
}

.pricing__col-body p + p {
	margin-top: var(--space-3);
}

/* flex-колонка: gap однаковий незалежно від order (на відміну від margin,
   якому довелось би міняти сторону разом з переставленням картки/тексту). */
.pricing__col--text2 {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* На мобілці картка йде ПЕРШОЮ (order:-1), DOM лишається текст→картка. */
.pricing__cluster {
	order: -1;
	align-self: center; /* мобілка — по центру колонки */
	position: relative;
	width: 191px; /* фіксована ширина на мобілці, не % */
	aspect-ratio: 191 / 171;
}

@media (min-width: 768px) {
	.pricing__col--text2 {
		gap: var(--space-5);
	}	
	.pricing__cluster {
		order: 0;
		align-self: flex-end; /* десктоп — притиснута до правого краю колонки */
		width: 50.211%; /* 238 / 474 */
		aspect-ratio: 238 / 227;
		margin-top: -35px;
	}
}

.pricing__card {
	inset: 0;
	width: 100%;
	height: 100%;
	background: #FDF2F2;
	padding: 30px;
}

@media (min-width: 768px) {
	.pricing__card {
		padding: 40px;
	}
}

/* Декор — реальний 1x-розмір, без % масштабування (як завжди); позиції —
   орієнтовно з макета. */
.pricing__deco--clip {
	top: -23%;
	right: -15%;
    width: 90px;
}
.pricing__deco--star {
	bottom: -41%;
    left: -32%;
    width: 150px;
}
@media (min-width: 768px) {
	.pricing__deco--clip {
		top: -19%;
		right: -13%;
		width: auto
	}	
	.pricing__deco--star {
		bottom: -30%;
		left: -34%;
		width: auto;
	}
}

/* ---------- src/13-conclusions.css ---------- */
/* ==========================================================================
   "Висновки з дослідження" — синій заголовок по центру + 5 карток поверх
   сітки grid.svg.

   Картки тут — готові SVG цілком (нахил запечений у файлі), тому .card
   служить лише обгорткою для позиціювання й ефекту випадання: візуальну
   базу з 06-cards.css (padding/border-radius/flex) знімаємо.

   Клас .cards на сцені потрібен, щоб cards-fly-in.js підхопив кластер —
   картки випадають, декор з'являється після них, як в інших секціях.

   Позиції карток/декору — орієнтовно з макета, підженемо після фідбеку.
   ========================================================================== */

.conclusions {
	padding-block: var(--space-5);
	padding-bottom: 200px;
}


.conclusions__title {
	color: var(--color-brand-blue);
	text-align: center;
	margin-bottom: var(--space-5);
}

/* Сцена: grid.svg рівно в ширину контейнера (1032), решта — абсолютно
   поверх. Перебиваємо розміри .cards з 06-cards.css (там max-width:343px
   і свій aspect-ratio під hero-кластер). */
.conclusions__stage {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	aspect-ratio: 370 / 1200;
}

@media (max-width: 767px) {
	.conclusions .btsb-container {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.conclusions {
		padding-block: var(--space-6);
		padding-bottom: 200px;
	}

	.conclusions__title {
		color: var(--color-brand-blue);
		text-align: center;
		margin-bottom: var(--space-5);
	}	
	.conclusions__stage {
		aspect-ratio: 1032 / 872;
	}
}

/* Сітка — фон сцени, під картками.

   Мобілка: два окремих файли (grid-1_m 402×584 і grid-2_m 402×830) один під
   одним з гепом 20px, на всю ширину сцени і в своїх пропорціях (height:auto,
   без object-fit) — тому клітинки не розтягуються. */
.conclusions__grid-stack {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.conclusions__grid-stack img {
	display: block;
	width: 100%;
	height: auto;
}

/* Десктопна сітка — одна на всю сцену */
.conclusions__grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	display: none;
}

@media (min-width: 768px) {
	.conclusions__grid-stack {
		display: none;
	}

	.conclusions__grid {
		display: block;
	}
}

/* Знімаємо візуальну базу .card — тут це просто обгортка картинки */
.conclusions__card {
	padding: 0;
	border-radius: 0;
	display: block;
	z-index: 1;
}

.conclusions__card img {
	display: block;
	width: 100%;
	height: auto;
}

/* Мобільні розміри — пропорції з _m-файлів (найширший 402 = 95% сцени) */
.conclusions__card--1 {
	width: 88.9%; /* 376 / 402 */
	top: 0;
	left: 4%;
	z-index: 15;
}

.conclusions__card--2 {
	width: 95%; /* 402 / 402 */
	top: 19%;
	left: 2%;
	z-index: 20;
}

/* У 3_m і 4_m нахилена картка виходила за viewBox і обрізалась — viewBox
   розширено в самих файлах, тому тут ширина/left перераховані так, щоб
   сама картка лишилась того самого розміру й на тому самому місці. */
.conclusions__card--3 {
	width: 98.54%; /* 95% × 417 / 402 */
	top: 39%;
	left: 1.05%; /* 2% − 4 × (95% / 402) */
	z-index: 25;
}

.conclusions__card--4 {
	width: 103.74%; /* 95% × 439 / 402 */
	top: 62%;
	left: -2.96%; /* 2% − 21 × (95% / 402) */
	z-index: 30;
}

.conclusions__card--5 {
	width: 93.1%; /* 394 / 402 */
	top: 89%;
	left: 3%;
	z-index: 32;
	
}

/* Десктоп — точні пропорції з макета: ширина SVG / 1032 (ширина grid.svg,
   вона ж ширина контейнера), тобто картки в тому самому масштабі, що й сітка. */
@media (min-width: 768px) {
	.conclusions__card--1 {
		width: 50.581%; /* 522 / 1032 */
		top: -2%;
		left: -3%;
	}

	.conclusions__card--2 {
		width: 51.357%; /* 530 / 1032 */
		top: -3%;
		right: -4%;
		left: auto;
	}

	.conclusions__card--3 {
		width: 54.360%; /* 561 / 1032 */
		top: 31%;
		left: -6%;
	}

	.conclusions__card--4 {
		width: 55.523%; /* 573 / 1032 */
		top: 33%;
		right: -6%;
		left: auto;
	}

	.conclusions__card--5 {
		width: 59.981%; /* 619 / 1032 */
		top: 74%;
		left: 17%;
		z-index: 5;
	}
}

/* Декор — реальний 1x-розмір (без % масштабування), поверх карток */
.conclusions__deco--clip1 {
    top: -4%;
    left: 70%;
	z-index: 35;
}

.conclusions__deco--clip2 {
    top: 18%;
    right: 74%;
	z-index: 35;
}

.conclusions__deco--clip3 {
	top: 37%;
	left: 66%;
	z-index: 35;
}

.conclusions__deco--clip4 {
	top: 58%;
	right: 71%;
	z-index: 35;
	width: 139px; /* 116 × 1.2 */
	height: auto;
}

.conclusions__deco--clip5 {
	top: 87%;
	right: 0;
	z-index: 35;
}

.conclusions__deco--bant {
	bottom: 1%;
	left: -12%;
	z-index: 31;
}
.conclusions__deco--star1 {
    top: -4%;
    left: -7%;
    z-index: 10;
}
.conclusions__deco--star2 {
	top: 14%;
	right: -6%;
	z-index: 35;
}

.conclusions__deco--star3 {
    bottom: -15%;
    right: 1%;
    z-index: 2;
    width: 50%;
}

.conclusions__deco--heart {
	bottom: 28%;
	right: -3%;
	z-index: 35;
}

@media (min-width: 768px) {
	.conclusions__deco--clip1 {
		top: -4%;
		left: -6%;
	}

	.conclusions__deco--clip2 {
		top: -4%;
		right: -1%;
	}

	.conclusions__deco--clip3 {
		top: 29%;
		left: 31%;
	}

	.conclusions__deco--clip4 {
		top: 31%;
		left: 52%;
	}

	.conclusions__deco--clip5 {
		top: 71%;
		left: 17%;
		right: auto;
	}

	.conclusions__deco--bant {
		bottom: -12%;
		left: -10%;
		z-index: 35;
	}
	.conclusions__deco--star1 {
		top: 21%;
		left: 40%;
		z-index: 35;
	}
	.conclusions__deco--star2 {
		top: 31%;
		left: -10%;
	}

	.conclusions__deco--star3 {
		bottom: -25%;
		right: 12%;
		width: auto;
	}
	.conclusions__deco--heart {
		bottom: 4%;
		right: -4%;
		z-index: 35;
	}	
}

/* ---------- src/14-footer.css ---------- */
/* ==========================================================================
   Фінальний блок-контакти (<footer>) — 1:1 з лендінгу rebrending
   (E:/domains/inweb-landings.loc/rebrending: 20-footer.css + механіка
   .icon-float з 04-layout.css). Шрифт — Geist, як там.

   Відмінності від rebrending: немає косої плашки-фону (блок лежить прямо
   на фоні сторінки), кнопки "Залишити заявку" і посилання на менеджера.
   ========================================================================== */

.footer {
	/* Локальні токени з rebrending (02-variables.css там) */
	--footer-text: #1c1c1c;
	--footer-brand: #013e29;
	--footer-muted: #989797;
	--footer-media: #ff006e;
	--footer-stage-max: 1160px; /* 1032 + 64 × 2 — --hero-stage-max там */


	position: relative;
	margin-bottom: 70px;
	margin-top: 70px;
	font-family: var(--font-family-accent);
	font-weight: var(--fw-accent-light);
	font-size: 16px;
	line-height: normal;
	color: var(--footer-text);
}

.footer .btsb-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 60px;
}

@media (min-width: 768px) {
	.footer {
		margin-bottom: 130px;
		margin-top: 130px;
	}

	.footer .btsb-container {
		padding-top: 100px;
	}
}

/* --------------------------------------------------------------------------
   Плаваючі монети — механіка .icon-float з rebrending (04-layout.css):
   "гойдання" — CSS-анімація на обгортці, масштаб при наведенні
   (--hover-scale, initFloatingIcons у main.js) — на вкладеному img.
   -------------------------------------------------------------------------- */
.icon-float-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	.icon-float-decor {
		left: 50%;
		right: auto;
		width: min(var(--footer-stage-max), 100%);
		transform: translateX(-50%);
	}
}

.icon-float {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--size);
	animation: var(--float-name, iconFloat1) var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
}

.icon-float-img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(var(--hover-scale, 1)) rotate(var(--icon-rotate, 0deg));
	transition: transform 0.6s ease-out;
	will-change: transform;
}

@keyframes iconFloat1 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50%      { transform: translate(3%, -4%) rotate(3deg); }
}

@keyframes iconFloat3 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50%      { transform: translate(3%, 4%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
	.icon-float {
		animation: none;
	}

	.icon-float-img {
		transition: none;
	}
}

/* --y лівої монети (icon--2) підняли з 37%/50% до 46%/68% після того, як
   з футера прибрали кнопку CTA й посилання на менеджера: блок став нижчим,
   а --y рахується у % від його висоти — монета заїжджала на заголовок. */
.footer__icon--1 { --x: 70%; --y: 0%;  --size: 30.6vw;  --float-name: iconFloat3; --dur: 10s; --delay: -2s; }
.footer__icon--2 { --x: -8%; --y: 46%; --size: 28.42vw; --float-name: iconFloat1; --dur: 12s; --delay: -6s; }

.footer__icon--2 .icon-float-img {
	--icon-rotate: -20deg;
}

@media (min-width: 768px) {
	.footer__icon--1 { --x: 77%; --y: -4%; --size: 30.73%; }
	.footer__icon--2 { --x: -2%; --y: 68%; --size: 21.51%; }
}

/* --------------------------------------------------------------------------
   Лого + заголовок + підзаголовок
   -------------------------------------------------------------------------- */
.footer__logo {
	width: 75px;
	height: auto;
}

/* Перебиваємо базовий h2 цієї сторінки (Unbounded) — тут Geist Extra Bold */
.footer__title {
	max-width: 975px;
	margin-top: 30px;
	font-family: var(--font-family-accent);
	font-size: min(30px, 5.8vw);
	font-weight: 800;
	line-height: 1;
	text-align: center;
}

.footer__subtitle {
	max-width: 620px;
	margin-top: 27px;
	font-size: 20px;
	font-weight: var(--fw-accent-light);
}

/* Розрив рядка лише від 1160px (--footer-stage-max), як у rebrending */
.line-break-desktop {
	display: inline;
}

@media (min-width: 1160px) {
	.line-break-desktop {
		display: block;
	}
}

@media (min-width: 768px) {
	.footer__logo {
		width: 187px;
	}

	.footer__title {
		margin-top: 54px;
		font-size: min(70px, 6.03vw);
	}

	.footer__subtitle {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
   Соцмережі — фіксований розмір, переносяться flex-wrap'ом
   -------------------------------------------------------------------------- */
.footer__socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	/* було 65px, коли вище стояли кнопка CTA + посилання на менеджера;
	   без них такий відступ від підзаголовка завеликий */
	margin-top: 40px;
}

.footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 169px;
	height: 30px;
	color: var(--footer-muted);
	font-size: 20px;
	border: 1px solid currentColor;
	border-radius: 999px;
	transition: color 0.2s ease;
}

.footer__social:hover {
	color: var(--footer-brand);
}

.footer__social-icon {
	display: inline-flex;
}

.footer__social-icon svg {
	display: block;
	color: currentColor;
}

@media (min-width: 768px) {
	.footer__socials {
		column-gap: 23px;
		row-gap: 12px;
		margin-top: 50px;
	}
}

/* --------------------------------------------------------------------------
   Плашка-посилання на медіа Inweb (ширина = рядок з 3 соцкнопок)
   -------------------------------------------------------------------------- */
.footer__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(169px * 3 + 14px * 2);
	max-width: 260px;
	min-height: 30px;
	padding-inline: 16px;
	margin-top: 16px;
	color: var(--footer-media);
	font-size: 16px;
	background-color: transparent;
	border: 1px solid var(--footer-media);
	border-radius: 999px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.footer__media:hover {
	color: #ffffff;
	background-color: var(--footer-media);
}

@media (min-width: 768px) {
	.footer__media {
		width: calc(169px * 3 + 23px * 2);
		max-width: none;
		font-size: 20px;
	}
}

/* ---------- src/15-chart-zoom.css ---------- */
/* ==========================================================================
   Збільшення діаграм/таблиць по кліку (assets/js/chart-zoom.js).
   Лише від лаптопа (768+) — на мобілці ні курсора-лупи, ні оверлею.
   ========================================================================== */

.chart-zoom {
	--zoom-duration: 380ms; /* тримати в парі з DURATION у chart-zoom.js */

	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	background: rgba(20, 30, 10, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: zoom-out;
	opacity: 0;
}

.chart-zoom.is-open {
	display: block;
	animation: chart-zoom-fade var(--zoom-duration) ease forwards;
}

.chart-zoom.is-closing {
	animation: chart-zoom-fade-out var(--zoom-duration) ease forwards;
}

/* Збільшена картинка — позиція/розмір задаються з JS (вписати в 92vw × 88vh).
   Світла "картка" під нею, бо SVG діаграм прозорі й губляться на темному. */
.chart-zoom__img {
	position: fixed;
	box-sizing: border-box;
	max-width: none;
	padding: 24px;
	background: var(--color-bg);
	border-radius: 16px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	object-fit: contain;
	transform-origin: 0 0; /* для FLIP: translate/scale рахуються від лівого верхнього кута */
}

.chart-zoom__close {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.chart-zoom__close:hover,
.chart-zoom__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	transform: rotate(90deg);
}

.chart-zoom__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Поки відкрито — сторінка не скролиться, а мініатюра "ховається"
   (вона ніби перелетіла в оверлей) */
.chart-zoom-lock {
	overflow: hidden;
}

.is-zoom-source {
	visibility: hidden;
}

@keyframes chart-zoom-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes chart-zoom-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@media (min-width: 768px) {
	.is-zoomable {
		cursor: zoom-in;
		transition: transform 0.25s ease;
	}

	.is-zoomable:hover {
		transform: scale(1.02);
	}

	.is-zoomable:focus-visible {
		outline: 2px solid var(--color-brand-blue);
		outline-offset: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chart-zoom.is-open,
	.chart-zoom.is-closing {
		animation: none;
		opacity: 1;
	}

	.is-zoomable:hover {
		transform: none;
	}
}