/* ==========================================================================
   Секції головної. Значення зняті з борда «▣ Desktop 1440 — Landing».
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Hero — 1440×880 (62:248)
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 880px;
	background: var(--s-dark-alt);
	color: var(--t-on-dark);
	isolation: isolate;
	overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__tint {
	position: absolute; inset: 0;
	background: rgba(11, 33, 21, .34);
	mix-blend-mode: multiply;
}
.hero__scrim { position: absolute; left: 0; right: 0; }

/* 62:250 — лівий скрим, фото має дихати */
.hero__scrim--left {
	top: 0; bottom: 0;
	background: linear-gradient(90deg,
		rgba(4, 18, 10, .94) 0%,
		rgba(6, 23, 14, .8) 36%,
		rgba(6, 23, 14, .34) 66%,
		rgba(6, 23, 14, .1) 100%);
}
/* 62:251 — верхній скрим під шапку, 180px */
.hero__scrim--top {
	top: 0; height: 180px;
	background: linear-gradient(180deg, rgba(4, 13, 7, .7) 0%, rgba(4, 13, 7, 0) 100%);
}
/* 62:252 — нижній скрим, розчинення у світлу секцію 02; 300px від y=580 */
.hero__scrim--bottom {
	bottom: 0; height: 300px;
	background: linear-gradient(180deg,
		rgba(6, 23, 14, 0) 0%,
		rgba(58, 53, 36, .45) 45%,
		rgba(216, 203, 178, .86) 78%,
		rgb(242, 234, 217) 100%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	min-height: 880px;
}

.hero__content {
	width: 560px;
	padding-top: 178px;
}

.hero__title { color: #F7F2E6; }

.hero__subtitle {
	margin-top: 12px;
	max-width: 470px;
	font: 600 20px/1.35 var(--f-display);
	letter-spacing: -.08px;
	color: #F0B838;
}
.hero__lead { margin-top: 20px; max-width: 520px; color: #F2EFE6; }
.hero__text { margin-top: 12px; max-width: 500px; color: #D3E4D8; }

/* 62:262 — нотатка про сумісність, ліва риска 2.5px */
.hero__note {
	margin-top: 20px;
	max-width: 500px;
	padding-left: 16px;
	border-left: 2.5px solid rgba(121, 212, 155, .75);
	color: #DDEAE1;
}

.hero__cta { display: flex; align-items: center; gap: 14px; margin-top: 26px; }

.hero__stores-title {
	margin-top: 22px;
	font: 400 15px/22px var(--f-body);
	color: rgba(233, 228, 214, .85);
}
.hero__stores { display: flex; align-items: center; gap: 14px; margin-top: 12px; }

/* 298:238 — планшет із реальним скріншотом застосунку.
   Габарит 625.175×410.117 — це описаний прямокутник; сам планшет 588×341,
   повернутий на -7°, вирівняний по центру габариту. */
.hero__device {
	position: absolute;
	top: 380.34px;
	right: calc(var(--grid-margin) - 95.175px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 625.175px;
	height: 410.117px;
	z-index: 1;
}
.device--tablet {
	display: flex;
	flex-direction: column;
	width: 588px;
	height: 341px;
	flex: none;
	padding: 11px;
	background: #0A0F0C;
	border: 1.5px solid rgba(255, 255, 255, .16);
	border-radius: 22px;
	box-shadow: var(--e-03);
	transform: rotate(-7deg);
}
.device__screen {
	display: block;
	width: 100%;
	height: 100%;
	flex: 1 0 0;
	min-height: 0;
	object-fit: cover;
	border-radius: 13px;
}

/* --- Адаптив hero (макета немає — авторська адаптація) ------------------- */
@media (max-width: 1439px) {
	/* Планшет масштабуємо цілком, щоб зберегти кут і пропорції. */
	.hero__device {
		right: calc(var(--grid-margin) - 40px);
		width: 46vw;
		max-width: 625.175px;
		height: auto;
		aspect-ratio: 625.175 / 410.117;
	}
	.device--tablet {
		width: 94.05%;   /* 588 / 625.175 */
		height: auto;
		aspect-ratio: 588 / 341;
	}
}

@media (max-width: 1279px) {
	.hero { min-height: 800px; }
	.hero__inner { min-height: 800px; }
	.hero__content { width: 52%; min-width: 420px; padding-top: 150px; }
	.hero__device { top: auto; bottom: 40px; width: 44vw; }
}

@media (max-width: 1023px) {
	.hero, .hero__inner { min-height: 0; }
	.hero__content { width: 100%; min-width: 0; max-width: 640px; padding-top: 140px; padding-bottom: 40px; }
	.hero__subtitle, .hero__lead, .hero__text, .hero__note { max-width: none; }
	.hero__scrim--left {
		background: linear-gradient(180deg, rgba(4, 18, 10, .9) 0%, rgba(6, 23, 14, .82) 55%, rgba(6, 23, 14, .5) 100%);
	}
	.hero__device {
		position: static;
		width: 100%;
		max-width: 560px;
		height: auto;
		margin: 0 0 56px;
	}
	.device--tablet { transform: none; width: 100%; }
}

@media (max-width: 767px) {
	.hero__content { padding-top: 108px; padding-bottom: 28px; }
	.hero__cta { flex-direction: column; align-items: stretch; }
	.hero__cta .btn { width: 100%; }
	.hero__stores { flex-wrap: wrap; gap: 10px; }
	.hero__scrim--bottom { height: 200px; }
	.hero__device { margin-bottom: 40px; }
	.device--tablet { padding: 8px; border-radius: 16px; }
	.device__screen { border-radius: 10px; }
}

/* --------------------------------------------------------------------------
   Надзаголовок секції (197:190) — риска 22×2 + текст
   -------------------------------------------------------------------------- */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow__marker { width: 22px; height: 2px; flex: none; background: #1E8A4C; }
.eyebrow__text { color: #17663B; }
.eyebrow--on-dark .eyebrow__marker { background: var(--c-green-500); }
.eyebrow--on-dark .eyebrow__text { color: var(--t-accent); }

/* --------------------------------------------------------------------------
   02 · Як працює система — 1440×1067 (18:29), блок 1200×879 (173:193)
   -------------------------------------------------------------------------- */
.how {
	background: #F2EAD9;
	padding-block: 96px 92px;
}

/* Обводку малюємо всередину (inset), як у Figma: там штрих не збільшує кадр. */
.how__card {
	background: #FBF7EE;
	border-radius: 30px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .15), var(--e-01);
	overflow: hidden;
}

/* --- Інтро --------------------------------------------------------------- */
.how__intro { display: flex; align-items: center; gap: 56px; padding: 48px; }
.how__text { width: 560px; flex: none; }
.how__title { margin-top: 18px; color: #0E1F15; }
.how__lead { margin-top: 20px; color: #2C3E34; }

.how__hairline { display: block; height: 1px; margin-top: 16px; background: rgba(14, 31, 21, .14); }

.how__check { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: #2C3E34; }
.how__check-ring {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; flex: none;
	border: 1.5px solid rgba(46, 125, 70, .5);
	border-radius: 13px;
	color: #2E7D46;
}

.how__photo { position: relative; width: 500px; height: 384px; flex: none; border-radius: 20px; overflow: hidden; }
.how__photo-img { width: 100%; height: 100%; object-fit: cover; }
.how__photo-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11, 33, 21, 0) 0%, rgba(11, 33, 21, .38) 100%);
}

/* --- Схема з кроків (331:47) --------------------------------------------- */
.how__flow { --steps: 4; position: relative; height: 399px; }

.how__flow-card {
	position: absolute;
	top: 36px; left: 0; right: 0;
	height: 363px;
	display: grid;
	grid-template-columns: repeat(var(--steps), 1fr);
	background: #FBF8F1;
	border-radius: 20px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .1);
}

.how__step { position: relative; padding: 52px 26px 34px; min-width: 0; }
.how__step-num {
	font: 800 26px/30px var(--f-display);
	letter-spacing: -.26px;
	color: #2E7D46;
}
.how__step-title { margin-top: 10px; color: #0E1F15; }
.how__step-sub { margin-top: 4px; color: #2E7D46; }
.how__bullets { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.how__bullet { position: relative; padding-left: 15px; color: #445647; }
.how__bullet::before {
	content: "";
	position: absolute;
	left: 0; top: 11.5px;
	width: 5px; height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: rgba(46, 125, 70, .75);
}

.how__sep {
	position: absolute;
	top: 31px;
	left: calc(100% / var(--steps) * var(--i));
	width: 1px; height: 299px;
	background: rgba(14, 31, 21, .09);
}

.how__connector {
	position: absolute;
	top: 35px;
	left: calc(100% / var(--steps) / 2);
	width: calc(100% - 100% / var(--steps));
	height: 2px;
	background: rgba(46, 125, 70, .3);
}

.how__arrow {
	position: absolute;
	top: 29px;
	left: calc(100% / var(--steps) * var(--i) - 7px);
	width: 14px; height: 14px;
	color: #2E7D46;
}

/* Кільце живе всередині кроку, але на десктопі виноситься на верхню межу
   картки: -32px від її краю, тобто top 4px у координатах усієї схеми. */
.how__ring {
	position: absolute;
	top: -32px;
	left: calc(50% - 32px);
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px;
	background: #FBF8F1;
	border: 1.5px solid rgba(46, 125, 70, .3);
	border-radius: 32px;
	color: #2E7D46;
}
.how__ring-icon { width: 28px; height: 28px; }

/* --- Адаптив (макета немає — авторська адаптація) ------------------------ */
@media (max-width: 1279px) {
	.how__intro { gap: 40px; padding: 36px; }
	.how__text { width: 52%; }
	.how__photo { width: 44%; height: 340px; }
	.how__step { padding: 48px 20px 28px; }
}

@media (max-width: 1023px) {
	.how { padding-block: 64px; }
	.how__intro { flex-direction: column; align-items: stretch; }
	.how__text, .how__photo { width: 100%; }
	.how__photo { height: 300px; }

	.how__flow { height: auto; }
	.how__flow-card {
		position: static;
		height: auto;
		grid-template-columns: repeat(2, 1fr);
		margin: 0 36px 36px;
	}
	.how__sep, .how__connector, .how__arrow { display: none; }
	.how__ring { position: static; margin-bottom: 14px; }
	.how__step { padding: 26px 20px; display: flex; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
	.how { padding-block: 48px; }
	.how__card { border-radius: 22px; }
	.how__intro { padding: 22px; gap: 24px; }
	.how__photo { height: 220px; }
	.how__flow-card { grid-template-columns: 1fr; margin: 0 22px 22px; }
	.how__step + .how__step { border-top: 1px solid rgba(14, 31, 21, .09); }
}

/* --------------------------------------------------------------------------
   Фотосмуги-переходи
   02b — 1440×330 (19:45): фото + верхнє розчинення 190 + хвиля 150 знизу
   03b — 1440×260 (66:228): фото + розчинення зверху 110 і знизу 120
   -------------------------------------------------------------------------- */
.band { position: relative; overflow: hidden; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__fade { position: absolute; left: 0; right: 0; }

.band--02b { height: 330px; background: #F2EAD9; }
.band--02b .band__fade--top {
	top: 0; height: 190px;
	background: linear-gradient(180deg, #F2EAD9 0%, rgba(242, 234, 217, .45) 55%, rgba(242, 234, 217, 0) 100%);
}
.band__wave {
	position: absolute;
	left: 0; top: 180px;
	width: 100%; height: 150px;
	background: url("../img/wave-02b.svg") no-repeat center / 100% 100%;
}

.band--03b { height: 260px; background: #0B2115; }
.band--03b .band__fade--top {
	top: 0; height: 110px;
	background: linear-gradient(180deg, #0B2115 0%, rgba(11, 33, 21, 0) 100%);
}
.band--03b .band__fade--bottom {
	top: 140px; height: 120px;
	background: linear-gradient(180deg, rgba(235, 225, 205, 0) 0%, #EBE1CD 100%);
}

@media (max-width: 767px) {
	.band--02b { height: 220px; }
	.band--02b .band__fade--top { height: 130px; }
	.band__wave { top: 130px; height: 90px; }
	.band--03b { height: 180px; }
	.band--03b .band__fade--top { height: 76px; }
	.band--03b .band__fade--bottom { top: 96px; height: 84px; }
}

/* --------------------------------------------------------------------------
   03 · Які задачі допомагає вирішити — 1440×648 (20:45)
   -------------------------------------------------------------------------- */
.tasks {
	position: relative;
	height: 648px;
	background: #0B2115;
	color: var(--t-on-dark);
	overflow: hidden;
}

.tasks__photo {
	position: absolute;
	left: 0; top: 0;
	width: 535px; height: 648px;
	border-radius: 0 36px 36px 0;
	overflow: hidden;
}
.tasks__photo-img { width: 100%; height: 100%; object-fit: cover; }
.tasks__photo-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(6, 23, 14, .1) 0%, rgba(6, 23, 14, .1) 68%, rgba(6, 23, 14, .62) 100%);
}
.tasks__outline {
	position: absolute;
	left: 24px; top: 24px;
	width: 495px; height: 600px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-left: 0;
	border-radius: 0 28px 28px 0;
	pointer-events: none;
}

.tasks__body {
	position: absolute;
	left: 575px; top: 46px;
	width: 745px;
}
.tasks__title { margin-top: 18px; color: #F7F2E6; }

.tasks__list { list-style: none; margin-top: 30px; }
.tasks__item {
	display: flex; gap: 16px; align-items: flex-start;
	padding-block: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.tasks__item:first-child { padding-top: 0; }
.tasks__item:last-child { border-bottom: 0; }

.tasks__num {
	flex: none;
	padding-top: 2px;
	font: 800 15px/normal var(--f-display);
	letter-spacing: -.15px;
	color: rgba(121, 212, 155, .55);
}
.tasks__text { display: flex; flex-direction: column; gap: 6px; flex: 1 0 0; min-width: 0; }
.tasks__item-title { color: #F7F2E6; }
.tasks__item-desc { color: #B6CFC0; }

@media (max-width: 1279px) {
	.tasks { height: auto; padding-block: 46px; }
	.tasks__photo { width: 38%; }
	.tasks__outline { width: calc(38% - 40px); }
	.tasks__body { position: static; width: auto; margin-left: calc(38% + 40px); padding-right: var(--grid-margin); }
	.tasks__photo, .tasks__outline { height: 100%; top: 0; }
	.tasks__outline { top: 24px; height: calc(100% - 48px); }
}

@media (max-width: 1023px) {
	.tasks { padding: 0 0 48px; }
	.tasks__photo { position: static; width: 100%; height: 300px; border-radius: 0 0 36px 36px; }
	.tasks__outline { display: none; }
	.tasks__body { margin: 40px var(--grid-margin) 0; padding: 0; }
	.tasks__photo-scrim {
		background: linear-gradient(180deg, rgba(6, 23, 14, .1) 0%, rgba(6, 23, 14, .1) 60%, rgba(6, 23, 14, .62) 100%);
	}
}

/* --------------------------------------------------------------------------
   Заголовок секції — 1200×81 (252:193)
   -------------------------------------------------------------------------- */
.section-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.section-head__title { color: #0E1F15; }
.section-head__lead { color: #3B4D42; max-width: 680px; }
.section-head--on-dark .section-head__title { color: #F7F2E6; }
.section-head--on-dark .section-head__lead { color: #B6CFC0; }

/* --------------------------------------------------------------------------
   04–05 · Оберіть рішення + Порівняння — 1440×2502 (22:59)
   -------------------------------------------------------------------------- */
/* Низ секції: 80 + 88 порожніх кадрів перед смугою-переходом (22:59). */
.solutions { background: #F2EAD9; padding-block: 96px 168px; }
.solutions__tabs { margin-top: 36px; }
.solutions__cmp-head { margin-top: 72px; }
.solutions__cmp { margin-top: 32px; }
.solutions__cta { margin-top: 40px; }

/* --- Таби 1200×88 (252:199) ---------------------------------------------- */
.tabs4 {
	display: flex;
	background: #FBF7EE;
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .15);
	overflow: hidden;
}
.tabs4__tab {
	display: flex; align-items: center; gap: 16px;
	flex: 1 0 0; min-width: 0;
	padding: 22px 24px;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.tabs4__tab + .tabs4__tab { box-shadow: inset 1px 0 0 rgba(14, 31, 21, .12); }
.tabs4__tab:hover { background: rgba(238, 246, 238, .55); }

.tabs4__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	border-radius: var(--r-pill);
	background: #E7DCC6;
	color: #3B4D42;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs4__icon .icon { width: 22px; height: 22px; }

.tabs4__labels { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tabs4__title {
	font: 600 16px/1.2 var(--f-body);
	letter-spacing: -.032px;
	color: #3B4D42;
}
.tabs4__sub { font: var(--ty-caption); letter-spacing: var(--tr-caption); color: #6E7F73; }

.tabs4__tab[aria-selected="true"] {
	background: #EEF6EE;
	border-radius: 16px;
	box-shadow: inset 0 1.5px 0 rgba(30, 138, 76, .55), inset 0 -1.5px 0 rgba(30, 138, 76, .55);
}
.tabs4__tab[aria-selected="true"] .tabs4__icon { background: #17663B; color: #F7F2E6; }
.tabs4__tab[aria-selected="true"] .tabs4__title { color: #0E1F15; }
.tabs4__tab[aria-selected="true"] .tabs4__sub { color: #17663B; }
.tabs4__tab:focus-visible { outline: 3px solid rgba(58, 154, 97, .5); outline-offset: -3px; }

/* --- Панель рішення 1200×… (252:247) ------------------------------------- */
.panel {
	display: flex;
	align-items: stretch;
	margin-top: 24px;
	background: #FBF7EE;
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .15), var(--e-01);
	overflow: hidden;
}
.panel[hidden] { display: none; }

.panel__visual {
	position: relative;
	width: 430px; flex: none;
	min-height: 673px;
	background: #0B2115;
	overflow: hidden;
}
.panel__visual--gps {
	background:
		url("../img/panel-gps.svg") no-repeat center / cover,
		#0B2115;
}
.panel__visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__visual-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(11, 33, 21, .05) 0%, rgba(11, 33, 21, .28) 72%, rgba(11, 33, 21, .8) 100%);
}

.panel__caption {
	position: absolute;
	left: 24px; bottom: 24px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px 8px 14px;
	background: rgba(7, 26, 15, .72);
	border: 1px solid rgba(121, 212, 155, .3);
	border-radius: var(--r-pill);
	font: var(--ty-label); letter-spacing: var(--tr-label);
	color: #DDEAE1;
}
.panel__caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #79D49B; flex: none; }

.panel__content { flex: 1 0 0; min-width: 0; padding: 40px 44px; }

.panel__title-row { display: flex; align-items: center; gap: 14px; }
.panel__ring {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; flex: none;
	border-radius: var(--r-pill);
	background: #D6F2E0;
	color: #17663B;
}
.panel__ring .icon { width: 23px; height: 23px; }
.panel__title-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.panel__title { color: #0E1F15; }
.panel__subtitle { color: #6E7F73; }

.panel__lead { margin-top: 14px; color: #3B4D42; }

.panel__bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.panel__bullet { display: flex; align-items: flex-start; gap: 12px; color: #3B4D42; }
.panel__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; flex: none;
	margin-top: 1px;
	border-radius: var(--r-pill);
	background: #D6F2E0;
	color: #17663B;
}

.panel__specs { margin-top: 24px; }
.panel__spec {
	display: flex; gap: 20px; align-items: flex-start;
	padding-block: 13px;
	border-top: 1px solid rgba(14, 31, 21, .12);
}
.panel__spec:last-child { border-bottom: 1px solid rgba(14, 31, 21, .12); }
.panel__spec-label { width: 180px; flex: none; color: #6E7F73; }
.panel__spec-value {
	flex: 1 0 0; min-width: 0; margin: 0;
	font: 500 16.5px/1.58 var(--f-body);
	letter-spacing: -.0495px;
	color: #0E1F15;
}

.panel__price {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	margin-top: 24px;
	padding: 20px 24px;
	background: #EEF6EE;
	border-radius: 14px;
}
.panel__price-text { display: flex; flex-direction: column; gap: 5px; }
.panel__price-label { color: #6E7F73; }
.panel__price-value { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel__price-sum { color: #17663B; }
.panel__price-note { color: #6E7F73; }

/* --- Таблиця порівняння 1200×573 (253:228) ------------------------------- */
.cmp {
	background: #FBF7EE;
	border-radius: 20px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .15), var(--e-01);
	overflow-x: auto;
}
.cmp__table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.cmp__th {
	height: 67px;
	padding: 20px 22px;
	background: #F4EDDF;
	border-bottom: 1px solid rgba(14, 31, 21, .14);
	font: var(--ty-label); letter-spacing: var(--tr-label);
	color: #0E1F15;
	text-align: left;
	vertical-align: middle;
}
.cmp__th + .cmp__th { border-left: 1px solid rgba(14, 31, 21, .1); }
.cmp__th--param {
	font: var(--ty-body-s); letter-spacing: var(--tr-body-s);
	color: #6E7F73;
}

.cmp__tr + .cmp__tr > * { border-top: 1px solid rgba(14, 31, 21, .1); }
.cmp__rowhead,
.cmp__td { padding: 18px 22px; vertical-align: top; text-align: left; }
.cmp__rowhead {
	font: 500 16.5px/1.58 var(--f-body);
	letter-spacing: -.0495px;
	color: #0E1F15;
}
.cmp__td {
	border-left: 1px solid rgba(14, 31, 21, .08);
	font: 400 15.5px/1.52 var(--f-body);
	letter-spacing: -.031px;
	color: #3B4D42;
}
.cmp__tr--accent > * { background: #F4EDDF; }
.cmp__tr--accent .cmp__td {
	font: 500 16.5px/1.58 var(--f-body);
	letter-spacing: -.0495px;
	color: #17663B;
}

/* --- CTA-смуга 1200×118 (265:269) ---------------------------------------- */
.cta-band {
	display: flex; align-items: center; gap: 40px;
	padding: 30px;
	background: #123520;
	border-radius: 22px;
	box-shadow: var(--e-02);
}
.cta-band__title { flex: 1 0 0; min-width: 0; color: #F7F2E6; }
.cta-band__btn { --btn-h: 58px; --btn-px: 30px; gap: 12px; }

/* --- Смуга-перехід 05 → 06, 1440×420 (260:236) --------------------------- */
.band--0506 { height: 420px; background: #F2EAD9; }
.band--0506 .band__fade--top {
	top: 0; height: 150px;
	background: linear-gradient(180deg, #F2EAD9 0%, rgba(242, 234, 217, .5) 50%, rgba(242, 234, 217, 0) 100%);
}
.band--0506 .band__fade--bottom {
	top: 240px; height: 180px;
	background: linear-gradient(180deg, rgba(242, 234, 217, 0) 0%, rgba(242, 234, 217, .6) 50%, #F2EAD9 100%);
}

/* --- Адаптив (макета немає — авторська адаптація) ------------------------ */
@media (max-width: 1279px) {
	.panel__visual { width: 340px; min-height: 0; }
	.panel__content { padding: 32px; }
	.tabs4__tab { padding: 18px 16px; gap: 12px; }
	.tabs4__icon { width: 38px; height: 38px; }
}

@media (max-width: 1023px) {
	.solutions { padding-block: 64px 56px; }
	.tabs4 { flex-wrap: wrap; }
	.tabs4__tab { flex: 1 0 45%; }
	.panel { flex-direction: column; }
	.panel__visual { width: 100%; height: 280px; }
	.panel__visual--gps { background-size: cover; background-position: center 40%; }
	.cta-band { flex-direction: column; align-items: flex-start; gap: 20px; }
	.cta-band__btn { width: 100%; }
	.band--0506 { height: 300px; }
	.band--0506 .band__fade--top { height: 110px; }
	.band--0506 .band__fade--bottom { top: 170px; height: 130px; }
}

@media (max-width: 767px) {
	.tabs4 { flex-direction: column; border-radius: 16px; }
	.tabs4__tab { flex: none; }
	.tabs4__tab + .tabs4__tab { box-shadow: inset 0 1px 0 rgba(14, 31, 21, .12); }
	.panel__content { padding: 22px; }
	.panel__spec { flex-direction: column; gap: 2px; }
	.panel__spec-label { width: auto; }
	.panel__price { flex-direction: column; align-items: stretch; gap: 16px; }
	.panel__price .btn { width: 100%; }
	.cmp__table { min-width: 760px; }
	.cta-band { padding: 22px; }
}

/* --------------------------------------------------------------------------
   06 · Чому нам довіряють — 1440×915 (24:71)
   -------------------------------------------------------------------------- */
.trust { background: #F2EAD9; padding-block: 40px 96px; }
.trust .eyebrow__marker { background: #17663B; }

.trust__grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; }

.trust-card {
	display: flex;
	background: #FBF7EE;
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .16);
	overflow: hidden;
}
/* Ширини з макета: 736 + 440 у першому ряду, 588 + 588 у другому. */
.trust-card--wide   { width: calc((100% - 24px) * 736 / 1176); height: 330px; }
.trust-card--narrow { width: calc((100% - 24px) * 440 / 1176); height: 330px; flex-direction: column; }
.trust-card--half   { width: calc((100% - 24px) / 2); height: 300px; }

.trust-card__media { position: relative; flex: none; overflow: hidden; }
.trust-card--wide   .trust-card__media { width: 360px; height: 100%; }
.trust-card--narrow .trust-card__media { width: 100%; height: 168px; }
.trust-card--half   .trust-card__media { width: 230px; height: 100%; }

.trust-card__img { width: 100%; height: 100%; object-fit: cover; }

.trust-card__scrim { position: absolute; inset: 0; }
.trust-card--wide .trust-card__scrim,
.trust-card--half .trust-card__scrim {
	background: linear-gradient(90deg, rgba(11, 33, 21, 0) 0%, rgba(11, 33, 21, .35) 100%);
}
.trust-card--narrow .trust-card__scrim {
	background: linear-gradient(180deg, rgba(11, 33, 21, 0) 0%, rgba(11, 33, 21, .55) 100%);
}

.trust-card__num {
	position: absolute;
	left: 16px; top: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	background: rgba(251, 247, 238, .94);
	border: 1px solid rgba(14, 31, 21, .18);
	border-radius: var(--r-pill);
	font: 800 15px/normal var(--f-display);
	letter-spacing: -.3px;
	color: #0E1F15;
}

.trust-card__body {
	display: flex; flex-direction: column; align-items: flex-start;
	flex: 1 0 0; min-width: 0;
	padding: 26px 28px 28px;
}
.trust-card--wide .trust-card__body,
.trust-card--half .trust-card__body { justify-content: center; }

.trust-card__title { color: #0E1F15; font: var(--ty-h4); letter-spacing: var(--tr-h4); }
.trust-card--wide .trust-card__title { font: var(--ty-h3); letter-spacing: var(--tr-h3); }

.trust-card__hairline { width: 40px; height: 1px; margin-top: 10px; background: rgba(30, 138, 76, .6); }

.trust-card__text {
	margin-top: 12px;
	font: var(--ty-body-s); letter-spacing: var(--tr-body-s);
	color: #3B4D42;
}
.trust-card--wide .trust-card__text { font: var(--ty-body-m); letter-spacing: var(--tr-body-m); }

@media (max-width: 1279px) {
	.trust-card--wide .trust-card__media { width: 300px; }
	.trust-card--half .trust-card__media { width: 190px; }
	.trust-card__body { padding: 22px; }
}

@media (max-width: 1023px) {
	.trust { padding-block: 32px 64px; }
	.trust-card--wide,
	.trust-card--narrow,
	.trust-card--half { width: 100%; height: auto; min-height: 260px; }
	.trust-card--narrow { min-height: 0; }
}

@media (max-width: 767px) {
	.trust-card { flex-direction: column; }
	.trust-card--wide .trust-card__media,
	.trust-card--half .trust-card__media { width: 100%; height: 180px; }
	.trust-card__body { padding: 20px; }
}

/* --------------------------------------------------------------------------
   07 · Як відбувається початок роботи — 1440×1459 (26:71)
   -------------------------------------------------------------------------- */
.steps { background: #0B2115; color: var(--t-on-dark); }

/* Перехід: світла секція 06 → фото → затемнення в зелений блок (233:198) */
.steps__band { position: relative; height: 460px; overflow: hidden; background: #0B2115; }
.steps__band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps__band-fade { position: absolute; left: 0; right: 0; }
.steps__band-fade--top {
	top: 0; height: 156px;
	background: linear-gradient(180deg, #F2EAD9 0%, rgba(242, 234, 217, .55) 45%, rgba(242, 234, 217, 0) 100%);
}
.steps__band-fade--bottom {
	top: 267px; height: 193px;
	background: linear-gradient(180deg, rgba(11, 33, 21, 0) 0%, rgba(11, 33, 21, .55) 42%, rgba(11, 33, 21, .88) 75%, #0B2115 100%);
}

.steps__content { padding-block: 0; }
.steps .eyebrow__marker { background: #79D49B; }
.steps .eyebrow__text { color: #79D49B; }
.steps .section-head__title { color: #F2EEE2; }
.steps .section-head__title .accent { color: #8FD37A; }
/* У макеті між H2 і лідом стоїть окремий проміжок 14 плюс gap 16 (233:203). */
.steps .section-head__lead {
	margin-top: 30px;
	max-width: none;
	font: var(--ty-body-l); letter-spacing: var(--tr-body-l);
	color: #C9D4C6;
}

.steps__timeline { --steps: 3; position: relative; margin-top: 48px; }
.steps__list { list-style: none; display: flex; gap: 36px; align-items: stretch; }

.step-card {
	display: flex; flex-direction: column; align-items: flex-start;
	flex: 1 0 0; min-width: 0;
	padding: 16px 16px 26px;
	background: #12291B;
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(111, 191, 115, .22);
}
.step-card__img { width: 100%; height: 206px; object-fit: cover; border-radius: 14px; }

.step-card__marker { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px; }
.step-card__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex: none;
	border: 1.5px solid rgba(111, 191, 115, .55);
	border-radius: 20px;
	font: 600 15px/normal var(--f-body);
	color: #8FD37A;
}
.step-card__title { flex: 1 0 0; min-width: 0; color: #F2EEE2; }

.step-card__hairline { width: 100%; height: 1px; margin-top: 18px; background: rgba(242, 238, 226, .14); }
.step-card__text { margin-top: 18px; color: #C9D4C6; }

/* Стрілки в проміжках між картками (337:39) */
.steps__arrow {
	position: absolute;
	top: 110px;
	left: calc((100% + 36px) / var(--steps) * var(--i) - 27px);
	width: 18px; height: 18px;
	color: #8FD37A;
}

/* Місток 07 → 08 (254:222) */
.steps__bridge {
	display: block;
	height: 240px;
	margin-top: 72px;
	background: linear-gradient(180deg, #0B2115 0%, #3A4A34 55%, #F2EAD9 100%);
}

@media (max-width: 1279px) {
	.steps__list { gap: 24px; }
	.steps__arrow { display: none; }
	.step-card__img { height: 170px; }
}

@media (max-width: 1023px) {
	.steps__band { height: 320px; }
	.steps__band-fade--top { height: 120px; }
	.steps__band-fade--bottom { top: 170px; height: 150px; }
	.steps__list { flex-wrap: wrap; }
	.step-card { flex: 1 0 260px; }
	.steps__bridge { height: 160px; margin-top: 56px; }
}

@media (max-width: 767px) {
	.steps__list { flex-direction: column; }
	.step-card { flex: none; width: 100%; }
	.steps__bridge { height: 120px; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   08 · Поширені запитання — 1440×1611 (27:85)
   Кольори саме цієї секції відрізняються від базового компонента акордеона
   на дошці «02 · Components & States» — беремо значення секції.
   -------------------------------------------------------------------------- */
.faq { background: #F2EAD9; padding-block: 48px 104px; }
.faq__list { gap: 10px; margin-top: 44px; }

.faq .accordion__item {
	background: rgba(237, 229, 211, .75);
	border: 0;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .12);
}
.faq .accordion__item:hover { background: rgba(237, 229, 211, .95); }
.faq .accordion__item.is-open {
	background: #FBF7EE;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .2), 0 1px 1px rgba(18, 36, 26, .04), 0 8px 12px rgba(18, 36, 26, .07);
}

.faq .accordion__h { margin: 0; font: inherit; }
.faq .accordion__q { padding: 24px 26px 24px 32px; gap: 26px; }

.faq .accordion__toggle {
	background: #E3D8BE;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .14);
	color: #0E1F15;
}
.faq .accordion__item:hover .accordion__toggle { background: #DCCFB0; }
.faq .accordion__item.is-open .accordion__toggle {
	background: #123520;
	box-shadow: none;
	color: #F5F1E8;
}

.faq .accordion__a p {
	padding: 14px 68px 24px 32px;
	font: var(--ty-body-m); letter-spacing: var(--tr-body-m);
	color: #3B4D42;
}

@media (max-width: 767px) {
	.faq { padding-block: 32px 64px; }
	.faq .accordion__q { padding: 18px 18px 18px 20px; gap: 14px; }
	.faq .accordion__a p { padding: 10px 20px 18px; }
}

/* У розгорнутому стані нижній відступ дає блок відповіді, а не запитання:
   у макеті картка має єдиний вертикальний padding 24 (190:164). */
.faq .accordion__item.is-open .accordion__q { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   09 · Форма заявки — 1440×720 (28:111)
   -------------------------------------------------------------------------- */
.form-section {
	position: relative;
	min-height: 720px;
	background: #06170E;
	color: var(--t-on-dark);
	overflow: hidden;
}
.form-section__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.form-section__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(5, 15, 9, .97) 0%, rgba(6, 23, 14, .88) 55%, rgba(6, 23, 14, .62) 100%);
}
.form-section__wave { position: absolute; left: 0; width: 100%; height: 120px; }
.form-section__wave--in  { top: 0;  background: url("../img/wave-form-in.svg") no-repeat center / 100% 100%; }
.form-section__wave--out { top: 600px; background: url("../img/wave-form-out.svg") no-repeat center / 100% 100%; }

.form-section__inner { position: relative; min-height: 720px; }

/* Пітч ліворуч: 600 @120,157 */
.form-pitch { position: absolute; left: var(--grid-margin); top: 157px; width: 600px; }
.form-pitch .eyebrow__marker { background: #F0B838; }
.form-pitch .eyebrow__text { color: #F0B838; }
.form-pitch__title { margin-top: 16px; color: #F7F2E6; }
.form-pitch__lead { margin-top: 20px; width: 430px; color: #C2D8C9; }

.form-pitch__benefits { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
.form-pitch__benefit { display: flex; align-items: center; gap: 12px; color: #DDEAE1; }
.form-pitch__tick {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; flex: none;
	border-radius: var(--r-pill);
	background: #1E8A4C;
	color: #fff;
}

/* Картка форми: 560 @760,145 */
.form-card {
	position: absolute;
	left: calc(760px - var(--grid-margin) + var(--grid-margin));
	top: 145px;
	width: 560px;
	padding: 40px 44px;
	background: #FCF7EC;
	border-radius: 26px;
	box-shadow: 0 12px 18px rgba(10, 31, 20, .18);
	color: var(--t-primary);
}
.form-card__title { color: #0E1F15; }

.lead-form { margin-top: 26px; }
.lead-form__row { display: flex; gap: 20px; align-items: flex-start; }
.lead-form__row + .lead-form__row { margin-top: 20px; }
.lead-form__row .field { flex: 1 0 0; min-width: 0; }

/* Поля цієї картки трохи інші за кольором межі, ніж базовий компонент (109:239). */
.form-card .field__control { border-color: #CBBC9F; padding-right: 16px; }
.form-card .field__control::placeholder { color: #5E6F64; }
.form-card .select__control { padding-right: 46px; }
.form-card .chip { height: 56px; border-color: #CBBC9F; }
.form-card .chip:has(input:checked) { background: var(--c-green-800); border-color: var(--c-green-800); color: var(--t-on-dark); }
.form-card .chip:focus-within { outline: 3px solid rgba(58, 154, 97, .5); outline-offset: 3px; }

.lead-form__chips { gap: 10px; }
.lead-form__submit { width: 100%; margin-top: 30px; }
.lead-form__submit .btn__spinner { display: none; }
.lead-form__submit.is-loading .btn__spinner { display: block; }

.form-status { margin-top: 14px; font: var(--ty-body-s); letter-spacing: var(--tr-body-s); }
.form-status.is-ok { color: var(--sem-success); }
.form-status.is-error { color: var(--sem-error); }

@media (max-width: 1279px) {
	.form-pitch { width: 46%; }
	.form-pitch__lead { width: auto; }
	.form-card { left: auto; right: var(--grid-margin); width: 48%; padding: 32px; }
}

@media (max-width: 1023px) {
	.form-section, .form-section__inner { min-height: 0; }
	.form-section__inner { padding-block: 140px 120px; }
	.form-pitch, .form-card { position: static; width: 100%; }
	.form-card { margin-top: 40px; }
	.form-section__wave--out { top: auto; bottom: 0; }
}

@media (max-width: 767px) {
	.form-section__inner { padding-block: 96px 90px; }
	.form-section__wave, .form-section__wave--in, .form-section__wave--out { height: 70px; }
	.lead-form__row { flex-direction: column; gap: 16px; }
	.form-card { padding: 22px; border-radius: 20px; }
}

/* Порожній рядок статусу не має займати місце в макеті картки. */
.form-status:empty { display: none; }

/* --------------------------------------------------------------------------
   10 · Контакти та підтримка — 1440×991 (29:120)
   -------------------------------------------------------------------------- */
.contacts { position: relative; background: #F2EAD9; padding-block: 96px 104px; overflow: hidden; }
.contacts__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.contacts__veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(242, 234, 217, .94) 0%, rgba(242, 234, 217, .8) 45%, rgba(242, 234, 217, .62) 100%);
}
.contacts__inner { position: relative; }

/* Заголовок секції з додатковим відступом 60 з боків (29:121) */
.contacts__head { padding-inline: 60px; }
.contacts__head .section-head { gap: 14px; }
.contacts__head .section-head__title { max-width: 820px; }
/* У макеті між H2 і лідом окремий проміжок 4 плюс gap 14 (29:126). */
.contacts__head .section-head__lead { max-width: 680px; margin-top: 18px; }

/* Точки входу (255:222) */
.contacts__entries { display: flex; gap: 24px; margin-top: 40px; }
.entry { display: flex; align-items: center; gap: 14px; flex: 1 0 0; min-width: 0; }
.entry__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; flex: none;
	border-radius: var(--r-pill);
	background: #D6F2E0;
	color: #17663B;
}
.entry__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entry__title { font: 500 16.5px/1.58 var(--f-body); letter-spacing: -.0495px; color: #0E1F15; }
.entry__sub { color: #6E7F73; }

/* Три блоки (255:252) */
.contacts__blocks { display: flex; gap: 24px; align-items: stretch; height: 486px; margin-top: 32px; }

/* Блок 1 — підтримка */
.support-card {
	position: relative;
	width: 344px; flex: none;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 2px 2px rgba(18, 36, 26, .05), 0 18px 21px rgba(18, 36, 26, .13);
	color: var(--t-on-dark);
}
.support-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.support-card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6, 23, 14, .94) 0%, rgba(11, 33, 21, .9) 55%, rgba(18, 53, 32, .74) 100%);
}
.support-card__body {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	height: 100%;
	padding: 30px;
}
.support-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 13px;
	background: #1E8A4C;
	color: #F7F2E6;
}
.support-card__eyebrow { margin-top: 20px; color: #8CAB99; }
.support-card__title { margin-top: 10px; color: #F7F2E6; }
.support-card__text { margin-top: 12px; color: #A6C4B1; }
.support-card__btn { width: 100%; margin-top: 24px; }
.support-card__stores { display: flex; gap: 12px; margin-top: 12px; }

/* Блок 2 — картка контактів */
.contacts-card {
	flex: 1 0 0; min-width: 0;
	padding: 26px 30px;
	background: #FBF7EE;
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .15), 0 1px 1px rgba(18, 36, 26, .04), 0 8px 12px rgba(18, 36, 26, .07);
}
.contacts-card__eyebrow { color: #6E7F73; }
.contacts-card__rows { margin-top: 12px; }

.contact-row {
	display: flex; align-items: center; gap: 13px;
	padding-block: 12px;
	border-bottom: 1px solid rgba(14, 31, 21, .1);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: none;
	border-radius: 10px;
	background: #D6F2E0;
	color: #17663B;
}
.contact-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 0 0; }
.contact-row__label { color: #6E7F73; }
.contact-row__value {
	font: 500 16.5px/1.58 var(--f-body);
	letter-spacing: -.0495px;
	color: #0E1F15;
	text-decoration: none;
}
a.contact-row__value:hover { color: var(--c-green-700); text-decoration: underline; }

/* Блок 3 — карта + офіс */
.office { position: relative; width: 336px; flex: none; }
.office__map {
	position: relative;
	height: 337px;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(14, 31, 21, .15);
}
.office__map-img { width: 100%; height: 100%; object-fit: cover; }
.office__map-veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(242, 234, 217, .42) 0%, rgba(242, 234, 217, .6) 100%);
}
.office__pin {
	position: absolute;
	left: 143px; top: 117px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: var(--r-pill);
	background: #17663B;
	color: #F7F2E6;
	box-shadow: var(--e-03);
}
.office__card {
	position: absolute;
	left: 0; top: 295px;
	width: 100%;
	padding: 24px 26px;
	background: #0B2115;
	border-radius: 20px;
	box-shadow: 0 12px 18px rgba(10, 31, 20, .18);
	color: var(--t-on-dark);
}
.office__top { display: flex; align-items: center; gap: 12px; }
.office__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: none;
	border-radius: 11px;
	background: rgba(30, 138, 76, .28);
	color: #F7F2E6;
}
.office__title { color: #F7F2E6; }
.office__address { margin-top: 12px; color: #A6C4B1; }
.office__btn { width: 100%; margin-top: 18px; }

@media (max-width: 1279px) {
	.contacts__head { padding-inline: 0; }
	.contacts__blocks { height: auto; align-items: stretch; }
	.support-card { width: 30%; }
	.office { width: 30%; }
	.office__card { position: static; margin-top: 16px; }
	.office__map { height: 260px; }
	.office__pin { left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

@media (max-width: 1023px) {
	.contacts { padding-block: 64px; }
	.contacts__entries { flex-wrap: wrap; }
	.entry { flex: 1 0 260px; }
	.contacts__blocks { flex-wrap: wrap; }
	.support-card, .office { width: calc(50% - 12px); }
	.contacts-card { flex: 1 0 100%; order: -1; }
}

@media (max-width: 767px) {
	.contacts__blocks { flex-direction: column; }
	.support-card, .office, .contacts-card { width: 100%; flex: none; }
	.support-card__body { padding: 22px; }
	.contacts-card { padding: 22px; }
}