/* ======== 0. ГЛОБАЛЬНІ СТИЛІ ТА ЗМІННІ ======== */

/* --- Змінні --- */
:root {
	/* Кольори */
	--color-primary: #0a4abf; /* Глибокий синій (інновації, довіра) */
	--color-secondary: #00c2d1; /* Яскравий ціан (технології, енергія) */
	--color-accent: #ffb800; /* Теплий жовтий (увага, креатив) */
	--color-text-dark: #1d232b; /* Темний текст (майже чорний) */
	--color-text-light: #5a6370; /* Cірий текст (другорядний) */
	--color-background: #ffffff; /* Чистий білий фон */
	--color-background-light: #f4f7fb; /* Дуже світло-сірий фон (для секцій) */
	--color-border: #eaeff4; /* Колір розділювачів/рамок */

	/* Типографіка */
	--font-primary: 'Poppins', sans-serif; /* Для заголовків */
	--font-secondary: 'Lato', sans-serif; /* Для основного тексту */

	/* Інше */
	--header-height: 7rem;
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--transition-fast: 0.2s ease-in-out;
}

/* --- Скидання стилів --- */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-secondary);
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--color-text-dark);
	background-color: var(--color-background);
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--color-text-dark);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: var(--transition-fast);
}

a:hover {
	color: var(--color-secondary);
}

ul,
ol {
	list-style: none;
}

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

button {
	font-family: var(--font-primary);
	cursor: pointer;
	border: none;
	background: none;
}

/* --- Утиліта: Контейнер --- */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* ======== 1. ЛОГОТИП ======== */
.logo {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 2.2rem;
	color: var(--color-text-dark);
}

.logo:hover {
	color: var(--color-primary);
}

.logo__svg {
	color: var(--color-primary);
	transition: var(--transition-fast);
}

.logo:hover .logo__svg {
	transform: rotate(-15deg);
}

/* ======== 2. ХЕДЕР (HEADER) ======== */
.header {
	width: 100%;
	height: var(--header-height);
	background-color: var(--color-background);
	border-bottom: 1px solid var(--color-border);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transition: var(--transition-fast);
}

.header.header--scrolled {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header__container {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* --- Навігація (Mobile-First) --- */
.header__nav {
	position: fixed;
	top: var(--header-height);
	right: -100%; /* Сховано за екраном */
	width: 100%;
	height: calc(100vh - var(--header-height));
	background-color: var(--color-background);
	border-left: 1px solid var(--color-border);
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
	padding: 2rem;
	transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow-y: auto;
}

.header__nav--open {
	right: 0; /* Показати меню */
}

.nav__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.nav__link {
	font-family: var(--font-primary);
	font-size: 1.8rem;
	font-weight: 500;
	color: var(--color-text-dark);
	padding: 0.5rem;
	display: block;
}

.nav__link:hover {
	color: var(--color-primary);
}

/* Спеціальний стиль для CTA-посилання в меню */
.nav__link--cta {
	background-color: var(--color-primary);
	color: #fff;
	padding: 1rem 1.5rem;
	border-radius: var(--border-radius-md);
	text-align: center;
}

.nav__link--cta:hover {
	background-color: #083c9a; /* Темніший синій */
	color: #fff;
}

/* --- Кнопка-бургер --- */
.header__toggle {
	font-size: 0; /* Прибирає пробіл від тексту */
	color: var(--color-text-dark);
	display: block; /* Завжди показуємо на мобільних */
}

.header__toggle-icon {
	width: 28px;
	height: 28px;
}

/* --- Адаптація хедера для десктопу --- */
@media (min-width: 992px) {
	.header__toggle {
		display: none; /* Ховаємо бургер */
	}

	.header__nav {
		position: static; /* Повертаємо в потік */
		width: auto;
		height: auto;
		background-color: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
		right: 0;
	}

	.nav__list {
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}

	.nav__link {
		font-size: 1.6rem;
		padding: 0.5rem;
	}

	.nav__link--cta {
		padding: 0.8rem 2rem;
		margin-left: 1rem;
	}
}

/* ======== 3. ФУТЕР (FOOTER) ======== */
.footer {
	background-color: var(--color-background-light);
	color: var(--color-text-light);
	padding-top: 6rem;
	border-top: 1px solid var(--color-border);
}

/* Grid-розкладка для футера (mobile-first: 1 колонка) */
.footer__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

.footer__col--logo .logo {
	color: var(--color-text-dark); /* Робимо логотип темним у футері */
}
.footer__col--logo .logo:hover {
	color: var(--color-primary);
}

.footer__description {
	font-size: 1.4rem;
	margin-top: 1.5rem;
	max-width: 300px;
}

.footer__col-title {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--color-text-dark);
	margin-bottom: 2rem;
}

.footer__list {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.footer__link {
	font-size: 1.5rem;
	color: var(--color-text-light);
}

.footer__link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Колонка контактів */
.footer__list--contact {
	gap: 1.5rem;
}

.footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 1.5rem;
	line-height: 1.5;
}

.footer__contact-icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

/* Копірайт */
.footer__bottom {
	border-top: 1px solid var(--color-border);
	margin-top: 4rem;
	padding: 2rem 0;
}

.footer__bottom-container {
	text-align: center;
}

.footer__copyright {
	font-size: 1.4rem;
	color: var(--color-text-light);
}

/* --- Адаптація футера для десктопу --- */
@media (min-width: 768px) {
	/* 2 колонки для планшетів */
	.footer__container {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 4rem;
	}
}

@media (min-width: 1024px) {
	/* 4 колонки для десктопу */
	.footer__container {
		grid-template-columns: 1.5fr 1fr 1fr 1.5fr; /* Різна ширина колонок */
		gap: 3rem;
	}
}

/* ======== 4. СЕКЦІЯ HERO ======== */
.hero {
	padding: calc(var(--header-height) + 4rem) 0 6rem 0; /* Відступ від фіксованого хедера */
	background-color: var(--color-background);
	overflow: hidden; /* Важливо для анімацій */
}

.hero__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

.hero__content {
	text-align: center; /* Mobile-first: текст по центру */
}

.hero__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-primary);
	display: block;
	margin-bottom: 1.5rem;
}

.hero__title {
	font-size: 3.8rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.hero__text {
	font-size: 1.8rem;
	color: var(--color-text-light);
	margin-bottom: 3rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.hero__actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}

.hero__button {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	padding: 1.4rem 3rem;
	border-radius: var(--border-radius-md);
	transition: var(--transition-fast);
	width: 100%;
	max-width: 300px;
}

.hero__button--primary {
	background-color: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
}

.hero__button--primary:hover {
	background-color: #083c9a;
	border-color: #083c9a;
	transform: translateY(-2px);
}

.hero__button--secondary {
	background-color: #fff;
	color: var(--color-primary);
	border: 2px solid var(--color-border);
}

.hero__button--secondary:hover {
	background-color: var(--color-background-light);
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.hero__image-wrapper {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.hero__image {
	width: 100%;
	border-radius: var(--border-radius-md);
	/* Можна додати легку тінь для об'єму */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

/* --- Адаптація Hero для планшетів і десктопу --- */
@media (min-width: 768px) {
	.hero {
		padding: calc(var(--header-height) + 6rem) 0 8rem 0;
	}

	.hero__actions {
		flex-direction: row;
		width: auto;
	}

	.hero__button {
		width: auto;
	}

	.hero__title {
		font-size: 4rem;
	}
}

@media (min-width: 992px) {
	.hero {
		/* Можна зробити на весь екран, але так гнучкіше */
		padding: calc(var(--header-height) + 8rem) 0;
	}

	.hero__container {
		grid-template-columns: 1fr 1fr; /* Дві колонки */
		gap: 6rem;
	}

	.hero__content {
		text-align: left; /* Вирівнювання по лівому краю */
	}

	.hero__text {
		margin-left: 0;
		margin-right: 0;
	}

	.hero__actions {
		justify-content: flex-start;
	}

	.hero__image-wrapper {
		order: 1; /* Змінюємо порядок на десктопі, якщо потрібно */
	}
}

/* ======== 5. СЕКЦІЯ "О ПЛАТФОРМЕ" (ABOUT) ======== */
.about {
	padding: 6rem 0;
	background-color: var(--color-background-light); /* Чергуємо фон */
	overflow: hidden;
}

.about__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

.about__image-wrapper {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

.about__image {
	width: 100%;
	border-radius: var(--border-radius-md);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.about__content {
	text-align: center; /* Mobile-first: текст по центру */
}

.about__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-primary);
	display: block;
	margin-bottom: 1rem;
}

.about__title {
	font-size: 3.2rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.about__text {
	font-size: 1.7rem;
	color: var(--color-text-light);
	margin-bottom: 3rem;
}

.about__features {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 3.5rem;
}

.about__feature-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	text-align: left; /* Вирівнюємо текст в пунктах по лівому краю */
}

.about__feature-icon {
	width: 22px;
	height: 22px;
	color: var(--color-secondary); /* Використовуємо акцентний колір */
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.about__feature-item span {
	font-size: 1.6rem;
	color: var(--color-text-dark);
}

.about__button {
	/* Використовуємо стиль вторинної кнопки з Hero */
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	padding: 1.4rem 3rem;
	border-radius: var(--border-radius-md);
	transition: var(--transition-fast);
	background-color: #fff;
	color: var(--color-primary);
	border: 2px solid var(--color-border);
	display: inline-block; /* Щоб кнопка не була на всю ширину */
}

.about__button:hover {
	background-color: var(--color-background);
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

/* --- Адаптація "About" для планшетів і десктопу --- */
@media (min-width: 768px) {
	.about {
		padding: 8rem 0;
	}

	.about__title {
		font-size: 3.6rem;
	}
}

@media (min-width: 992px) {
	.about__container {
		grid-template-columns: 1fr 1.1fr; /* Дві колонки, текст трохи ширший */
		gap: 6rem;
	}

	/* На десктопі міняємо колонки місцями для динаміки */
	.about__image-wrapper {
		order: 2;
	}

	.about__content {
		order: 1;
		text-align: left; /* Вирівнювання по лівому краю */
	}
}

/* ======== 6. СЕКЦІЯ "ТЕХНОЛОГІЇ" (TECH) ======== */
.tech {
	padding: 6rem 0;
	background-color: var(--color-background); /* Чергуємо фон (білий) */
	overflow: hidden;
}

/* Заголовок секції */
.tech__header {
	max-width: 700px;
	margin: 0 auto 5rem auto;
	text-align: center;
}

.tech__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-primary);
	display: block;
	margin-bottom: 1rem;
}

.tech__title {
	font-size: 3.2rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.tech__description {
	font-size: 1.7rem;
	color: var(--color-text-light);
}

/* Сітка карток */
.tech__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

/* Стилі для картки */
.tech-card {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	padding: 3rem;
	text-align: center;
	transition: transform var(--transition-fast),
		box-shadow var(--transition-fast);
}

.tech-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

.tech-card__icon-wrapper {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 2rem auto;
	transition: background-color var(--transition-fast);
}

.tech-card__icon {
	width: 28px;
	height: 28px;
}

.tech-card:hover .tech-card__icon-wrapper {
	background-color: var(--color-secondary);
}

.tech-card__title {
	font-size: 2.2rem;
	margin-bottom: 1rem;
}

.tech-card__text {
	font-size: 1.6rem;
	color: var(--color-text-light);
	margin-bottom: 2.5rem;
	min-height: 7rem; /* Щоб картки мали однакову висоту тексту */
}

.tech-card__link {
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.tech-card__link::after {
	/* Додаємо стрілку для hover-ефекту */
	content: '→';
	transition: transform var(--transition-fast);
	transform: translateX(-2px);
	opacity: 0;
}

.tech-card__link:hover::after {
	transform: translateX(2px);
	opacity: 1;
}

/* --- Адаптація "Tech" для планшетів і десктопу --- */
@media (min-width: 768px) {
	.tech {
		padding: 8rem 0;
	}

	.tech__title {
		font-size: 3.6rem;
	}

	.tech__grid {
		/* 2 колонки на планшеті */
		grid-template-columns: repeat(2, 1fr);
	}

	/* На планшеті, якщо 3 картки, остання розтягнеться. 
       Щоб цього уникнути, можна залишити 1 колонку, 
       або так (для 3 карток): */
	.tech__grid {
		grid-template-columns: 1fr; /* Повертаємо 1 колонку */
		max-width: 500px; /* ...але обмежуємо ширину */
		margin: 0 auto;
	}
}

@media (min-width: 992px) {
	.tech__grid {
		/* 3 колонки на десктопі */
		grid-template-columns: repeat(3, 1fr);
		max-width: 100%; /* Скидаємо обмеження */
	}
}

/* ======== 7. СЕКЦІЯ "КУРСИ" (COURSES) ======== */
.courses {
	padding: 6rem 0;
	background-color: var(--color-background-light); /* Чергуємо фон */
	overflow: hidden;
}

/* Заголовок секції */
.courses__header {
	max-width: 700px;
	margin: 0 auto 5rem auto;
	text-align: center;
}

.courses__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-primary);
	display: block;
	margin-bottom: 1rem;
}

.courses__title {
	font-size: 3.2rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.courses__description {
	font-size: 1.7rem;
	color: var(--color-text-light);
}

/* Акордеон */
.courses__accordion {
	max-width: 800px;
	margin: 0 auto;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	overflow: hidden; /* Для заокруглення кутів */
}

.accordion__item {
	background-color: #fff;
	/* Розділювач між елементами */
	border-bottom: 1px solid var(--color-border);
}

.accordion__item:last-child {
	border-bottom: none;
}

.accordion__header {
	width: 100%;
	padding: 2rem 2.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	background-color: #fff;
	transition: background-color var(--transition-fast);
}

.accordion__header:hover {
	background-color: var(--color-background-light);
}

.accordion__title {
	font-family: var(--font-primary);
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-text-dark);
}

.accordion__icon {
	width: 24px;
	height: 24px;
	color: var(--color-primary);
	transition: transform var(--transition-fast);
	flex-shrink: 0;
	margin-left: 1.5rem;
}

/* Стилі для контенту, що розкривається */
.accordion__content {
	max-height: 0; /* За замовчуванням приховано */
	overflow: hidden;
	transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.accordion__content-inner {
	padding: 0 2.5rem 2.5rem 2.5rem;
	color: var(--color-text-light);
	font-size: 1.6rem;
}

.accordion__content-inner p {
	margin-bottom: 2rem;
	line-height: 1.7;
}

.accordion__list {
	list-style-type: disc;
	padding-left: 2rem;
	margin-bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.accordion__cta {
	/* Використовуємо стиль вторинної кнопки */
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.5rem;
	padding: 1rem 2rem;
	border-radius: var(--border-radius-md);
	transition: var(--transition-fast);
	background-color: var(--color-background-light);
	color: var(--color-primary);
	border: 2px solid var(--color-border);
	display: inline-block;
}

.accordion__cta:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	transform: translateY(-2px);
}

/* Стан "Активний" (відкрито) */
.accordion__item--active .accordion__icon {
	transform: rotate(180deg);
}

.accordion__item--active .accordion__header {
	background-color: var(--color-background-light);
}

/* --- Адаптація "Courses" --- */
@media (min-width: 768px) {
	.courses {
		padding: 8rem 0;
	}

	.courses__title {
		font-size: 3.6rem;
	}

	.accordion__title {
		font-size: 2.2rem;
	}
}

/* ======== 8. СЕКЦІЯ "FAQ" ======== */
.faq {
	padding: 6rem 0;
	background-color: var(--color-background); /* Чергуємо фон (білий) */
	overflow: hidden;
}

/* Заголовок секції */
.faq__header {
	max-width: 700px;
	margin: 0 auto 5rem auto;
	text-align: center;
}

.faq__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-primary);
	display: block;
	margin-bottom: 1rem;
}

.faq__title {
	font-size: 3.2rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.faq__description {
	font-size: 1.7rem;
	color: var(--color-text-light);
}

/* FAQ Акордеон */
.faq__accordion {
	max-width: 800px;
	margin: 0 auto;
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
	border-top: 1px solid var(--color-border);
}

.faq-item__header {
	width: 100%;
	padding: 2.5rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	background-color: transparent;
}

.faq-item__header:hover .faq-item__title {
	color: var(--color-primary);
}

.faq-item__title {
	font-family: var(--font-primary);
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--color-text-dark);
	transition: color var(--transition-fast);
	padding-right: 1.5rem; /* Щоб текст не наїжджав на іконку */
}

.faq-item__icon {
	width: 24px;
	height: 24px;
	color: var(--color-primary);
	transition: transform 0.3s ease-in-out;
	flex-shrink: 0;
}

.faq-item__content {
	max-height: 0; /* Приховано */
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}

.faq-item__content-inner {
	padding: 0 2rem 2.5rem 2rem;
	color: var(--color-text-light);
	font-size: 1.6rem;
	line-height: 1.7;
}

/* Стан "Активний" (відкрито) */
.faq-item--active .faq-item__icon {
	transform: rotate(45deg); /* Обертаємо "плюс" у "хрестик" */
}

.faq-item--active .faq-item__header .faq-item__title {
	color: var(--color-primary);
}

/* --- Адаптація "FAQ" --- */
@media (min-width: 768px) {
	.faq {
		padding: 8rem 0;
	}

	.faq__title {
		font-size: 3.6rem;
	}

	.faq-item__title {
		font-size: 2rem;
	}
}

/* ======== 9. СЕКЦІЯ "КОНТАКТИ" (CONTACT) ======== */
.contact {
	padding: 6rem 0;
	background-color: var(--color-background-light); /* Чергуємо фон */
	overflow: hidden;
}

.contact__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5rem;
}

/* Контент (ліва колонка) */
.contact__content {
	text-align: center; /* Mobile-first */
}

.contact__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-primary);
	display: block;
	margin-bottom: 1rem;
}

.contact__title {
	font-size: 3.2rem;
	line-height: 1.2;
	margin-bottom: 2rem;
}

.contact__text {
	font-size: 1.7rem;
	color: var(--color-text-light);
	margin-bottom: 3rem;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.contact__info {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	max-width: 400px;
	margin: 0 auto; /* Центрування на мобілці */
	text-align: left;
}

.contact__info-item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.contact__info-icon {
	width: 28px;
	height: 28px;
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 0.5rem;
}

.contact__info-item h4 {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.contact__info-link {
	font-size: 1.6rem;
	color: var(--color-text-light);
}
.contact__info-link:hover {
	color: var(--color-primary);
}

/* Форма (права колонка) */
.contact__form-wrapper {
	background-color: #fff;
	padding: 3rem;
	border-radius: var(--border-radius-md);
	border: 1px solid var(--color-border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact__form-title {
	font-size: 2.4rem;
	text-align: center;
	margin-bottom: 2.5rem;
}

.form__group {
	margin-bottom: 2rem;
}

.form__label {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 0.8rem;
}

.form__input {
	width: 100%;
	padding: 1.4rem;
	font-size: 1.6rem;
	font-family: var(--font-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	transition: border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.form__input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(10, 74, 191, 0.1);
}

/* Чекбокс */
.form__checkbox-group {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.form__checkbox {
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.4rem;
	flex-shrink: 0;
}

.form__checkbox-label {
	font-size: 1.4rem;
	color: var(--color-text-light);
}

.form__checkbox-label a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Кнопка відправки */
.form__submit-btn {
	/* Стиль як у головної кнопки */
	width: 100%;
	background-color: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 1.6rem;
	padding: 1.4rem 3rem;
	border-radius: var(--border-radius-md);
	transition: var(--transition-fast);
	cursor: pointer;
}

.form__submit-btn:hover {
	background-color: #083c9a;
	border-color: #083c9a;
	transform: translateY(-2px);
}

/* Повідомлення про успіх */
.form__success-message {
	display: none; /* ПРИХОВАНО */
	padding: 1.5rem;
	background-color: #e6f9f0;
	color: #0d6a41;
	border: 1px solid #b6e9d5;
	border-radius: var(--border-radius-sm);
	margin-bottom: 2rem;
	text-align: center;
	font-size: 1.5rem;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

/* Клас для показу повідомлення */
.form__success-message--active {
	display: flex;
}

/* --- Адаптація "Contact" --- */
@media (min-width: 768px) {
	.contact {
		padding: 8rem 0;
	}

	.contact__title {
		font-size: 3.6rem;
	}
}

@media (min-width: 992px) {
	.contact__container {
		grid-template-columns: 1fr 1fr; /* Дві колонки */
		gap: 6rem;
		align-items: center;
	}

	.contact__content {
		text-align: left; /* Вирівнювання по лівому краю */
	}

	.contact__info {
		margin: 0; /* Скидаємо центрування */
	}
}

.cookie-popup {
	position: fixed;
	bottom: -100%; /* Початково сховано */
	left: 0;
	width: 100%;
	background-color: var(--color-text-dark);
	color: #fff;
	padding: 2rem 0;
	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
	z-index: 1100;
	transition: bottom 0.5s ease-in-out;
}

/* Стан "активний" (показано) */
.cookie-popup--active {
	bottom: 0;
}

.cookie-popup__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.cookie-popup__text {
	font-size: 1.5rem;
}

.cookie-popup__link {
	color: #fff;
	text-decoration: underline;
	font-weight: 600;
}
.cookie-popup__link:hover {
	color: var(--color-secondary);
}

.cookie-popup__btn {
	/* Стиль як у головної кнопки, але менший */
	background-color: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 1.5rem;
	padding: 0.8rem 2.5rem;
	border-radius: var(--border-radius-md);
	transition: var(--transition-fast);
}

.cookie-popup__btn:hover {
	background-color: #083c9a;
	border-color: #083c9a;
}

/* --- Адаптація Cookie Pop-up --- */
@media (min-width: 768px) {
	.cookie-popup__container {
		flex-direction: row; /* В рядок на десктопі */
		justify-content: space-between;
		text-align: left;
	}
}

/* Загальний контейнер секції */
.pages {
	padding: calc(var(--header-height) + 4rem) 0 6rem 0; /* Відступ від фіксованого хедера */
	background-color: var(--color-background);
	color: var(--color-text-dark);
}

/* Обмеження ширини контенту для кращої читабельності */
.pages .container {
	max-width: 800px;
}

/* Головний заголовок сторінки */
.pages h1 {
	font-size: 3.8rem;
	line-height: 1.2;
	margin-bottom: 3rem;
	color: var(--color-text-dark);
}

/* Підзаголовки */
.pages h2 {
	font-size: 2.8rem;
	line-height: 1.3;
	margin-top: 4rem;
	margin-bottom: 2rem;
	color: var(--color-text-dark);
}

/* Підзаголовки H3 (якщо знадобляться) */
.pages h3 {
	font-size: 2.2rem;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
	color: var(--color-text-dark);
}

/* Базовий текст (абзаци) */
.pages p {
	font-size: 1.7rem;
	line-height: 1.7;
	color: var(--color-text-light);
	margin-bottom: 2rem;
}

/* Посилання в тексті */
.pages a {
	color: var(--color-primary);
	text-decoration: underline;
}

.pages a:hover {
	color: var(--color-secondary);
	text-decoration: none;
}

/* Списки */
.pages ul,
.pages ol {
	font-size: 1.7rem;
	line-height: 1.7;
	color: var(--color-text-light);
	margin: 2rem 0;
	padding-left: 2.5rem;
}

.pages ul {
	list-style-type: disc;
}

.pages ol {
	list-style-type: decimal;
}

.pages li {
	margin-bottom: 1.2rem;
}

/* Виділення жирним */
.pages strong {
	font-weight: 700;
	color: var(--color-text-dark); /* Робимо жирний текст темнішим */
}

/* --- Адаптація .pages --- */
@media (min-width: 768px) {
	.pages {
		padding: calc(var(--header-height) + 6rem) 0 8rem 0;
	}

	.pages h1 {
		font-size: 4.2rem;
	}

	.pages h2 {
		font-size: 3rem;
	}
}