/*****

-- Project was created in:
---- 20__ year

*****/


/***======================= QUICK-SEARCH =======================***/
/***===========================================================***/

/**********************************************

- 1.GENERAL STYLE
-----
-- 1.1.general-setting-pages
-- 1.2.nav
-- 1.3.burger
-- 1.4.close-menu-
-- 1.5.section-head(title)
-- 1.6.footer

--------------------------------

- 2.PAGE-SETTINGS
------
-- 2.1. index.html

--------------------------------

3.MEDIA-SETTINGS
-----
-- 3.1.media(max-width:1441px)
-----
-- 3.2.media(max-width:1301px)
-----
-- 3.3.media(max-width:1201px)
-----
-- 3.4.media(max-width:1011px)
-----
-- 3.5.media(max-width:926px)
-----
-- 3.6.media(max-width:861px)
-----
-- 3.7.media(max-width:741px)
-----
-- 3.8.media(max-width:661px)
-----
-- 3.9.media(max-width:531px)
-----
-- 3.10.media(max-width:436px)
-----
-- 3.11.media(max-width:376px)
-----
-- 3.12.media(max-width:351px)

**********************************************/


/***======================= QUICK-SEARCH-END =======================***/
/***===============================================================***/



/***======================= 1.GENERAL-STYLE =======================***/
/***==============================================================***/


/* 1.1.general-setting-pages *************************/
/****************************************************/
:root {
	--color-white: #fff;
	--color-1: #fffbf2;
	--color-2: #94bad1;
	--color-3: #A7C3E4;
	--color-7: #182c4d;

	--gradient-1: linear-gradient(135deg, #7ea3d1, #4d78ab);
	--gradient-2: linear-gradient(135deg, #7ea3d1, #3d6ba8);

	/* для ширины екрана 1440px */
	/* 65px */
	--font-1: 3.3rem;

	/* 45px */
	--font-2: 2.81rem;

	/* 40px */
	--font-3: 2.28311rem;

	/* 35px */
	--font-4: 2.19rem;

	/* 30px */
	--font-5: 1.88rem;

	/* 25px */
	--font-6: 1.4rem;

	/* 20px */
	--font-7: 1.1rem;

	/* 16px */
	--font-8: 0.916rem;

	/* 14px */
	--font-9: 0.9rem;

	--transition-1: .4s;


	/* уменьшил верхнюю границу clamp, чтобы 3 карточки надёжнее помещались в ряд */
	/* --sz: clamp(8px, min(1.3vw, 2vh), 18px); */
	/* font-size: var(--sz); */
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Montserrat';
	margin: 0;
	padding: 0;
}


/******************************************/
.wrapp {
	position: relative;
	width: 100%;
	height: auto;
	overflow: clip;
	z-index: 1;
}

.content {
	max-width: 100%;
	width: 100%;
	padding: 0 36px;
}


/* 1.2.nav *******************************************/
/****************************************************/
.nav {
	position: fixed;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;
	background: rgba(242, 251, 255, 0.224);
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
	z-index: 15;
}

.nav .content {
	padding: 0 11px;
}

.nav__wrapp {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding: 22px 25px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 46px;
	height: 46px;
	font-weight: 800;
	font-size: var(--font-6);
	color: var(--color-7);
	/* color: #718EB9; */
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1;
}

.logo__txt div {
	font-size: 12px;
}

.logo img {
	display: block;
	width: 100%;
	height: auto;
	margin-right: -4px;
}

.footer .logo {
	color: var(--color-white);
}

.logo svg {
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
}

.nav__menu {
	position: absolute;
	width: auto;
	height: auto;
	left: 50%;
	padding: 5px 6px;
	border-radius: 37px;
	background: var(--color-white);
	transform: translateX(-50%);
}

.nav__menu .btn {
	display: none;
}

.nav__ul {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	width: auto;
	flex: 0 0 auto;
}

.menu-bubble {
	position: absolute;
	width: auto;
	height: 100%;
	border-radius: 23px;
	background: var(--gradient-1);
	opacity: 0;
	pointer-events: none;
	transition: left 0.3s, opacity 0.3s, width 0.2s;
	z-index: 1;
}

.nav__li {
	position: relative;
	list-style: none;
	white-space: nowrap;
	z-index: 2;
}

.nav__link {
	position: relative;
	display: inline-block;
	padding: 11px 14px;
	font-weight: 600;
	font-size: var(--font-7);
	color: var(--color-7);
	text-decoration: none;
	transition-delay: .2s;
	transition: color var(--transition-1);
}

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

.nav__li.active .nav__link {
	color: var(--color-white);
}

.nav__contact {
	width: 179px;
	height: auto;
	padding: 5px;
	background: var(--color-2);
	font-size: var(--font-7);
	color: var(--color-white);
	font-weight: 600;
	overflow: hidden;
	border-radius: 30px;
	text-decoration: none;
	cursor: pointer;
}

/* 1.3.burger ****************************************/
/****************************************************/
.burger {
	display: none;
	width: 35px;
	height: 35px;
	padding: 3px;
	border-radius: 8px;
	/* background: var(--color-3); */
	background: var(--gradient-1);
	cursor: pointer;
	user-select: none;
}

.burger svg {
	width: 100%;
	height: 100%;
}

.burger svg path {
	/* fill: var(--color-1); */
	fill: #eef4fc;
	transition: .3s;
}

.burger .dots_anim {
	transition: .2s;
	transform-origin: center;
}

.burger.active .dots_anim {
	opacity: 0;
	transform: scale(0);
}

.burger:hover svg path {
	fill: var(--color-7);
}


/* 1.5.section-head(title) ***************************/
/****************************************************/
.section-head {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 50px;
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 9px;
	padding: 6px 16px;
	border-radius: 999px;
	background: #eef4fc;
	color: #648cb9;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.plans .section-eyebrow {
	background: rgb(126 163 209 / 0.14);
	border: 1px solid rgb(126 163 209 / 0.3);
	color: #a9c3e5;
}

.section-title {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: var(--font-3);
	line-height: 1.2;
	color: var(--color-7);
}

.section-title em {
	background: linear-gradient(135deg, #7ea3d1, #3f6698);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.section-descript {
	margin: 0;
	font-size: calc(var(--font-8) + 1px);
	line-height: 1.6;
	color: #6b7684;
}


/* 1.6.footer ****************************************/
/****************************************************/
.footer {
	margin-top: 50px;
	padding: 32px 0;
	background: #131a26;
	background: radial-gradient(circle at 30% 0%, #223349 0%, #0d1420 70%);
}

.footer__wrapp {
	width: 100%;
}

.footer__top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 40px;
}

/* --- колонка 1: лого, опис, пошта --- */
.footer__brand-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.footer__logo-mark {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgb(126 163 209 / 0.16);
	border: 1px solid rgb(126 163 209 / 0.25);
	display: grid;
	place-items: center;
}

.footer__logo-mark svg {
	width: 19px;
	height: 19px;
	stroke: #a9c3e5;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footer__logo-text {
	font-size: 21px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.footer__descript {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.5);
	margin: 0 0 22px;
	max-width: 300px;
}

.footer__email {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(255 255 255 / 0.12);
	color: rgb(255 255 255 / 0.85);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease;
}

.footer__email:hover {
	background: rgb(255 255 255 / 0.09);
	border-color: rgb(255 255 255 / 0.2);
}

.footer__email svg {
	width: 15px;
	height: 15px;
	stroke: #7ea3d1;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- колонка 2: соцмережі --- */
.footer__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.4);
	margin: 0 0 20px;
}

.footer__social {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 28px;
}

.footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgb(255 255 255 / 0.85);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.footer__social-icon {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgb(126 163 209 / 0.16);
	border: 1px solid rgb(126 163 209 / 0.25);
	display: grid;
	place-items: center;
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.footer__social-icon svg {
	width: 15px;
	height: 15px;
	stroke: #a9c3e5;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footer__social-link:hover .footer__social-icon {
	background: linear-gradient(135deg, #7ea3d1, #3d6ba8);
	border-color: transparent;
}

.footer__social-link:hover .footer__social-icon svg {
	stroke: #fff;
}

.footer__social-link:hover {
	color: #fff;
}

.footer__cta-title {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 20px;
}

.footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 26px;
	padding-right: 7px;
	border-radius: 999px;
	background: var(--gradient-1);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 14px 28px -10px rgb(61 107 168 / 0.55);
	transition: transform .25s ease, box-shadow .25s ease;
}

.footer__cta:hover {
	box-shadow: 0 18px 34px -10px rgb(61 107 168 / 0.65);
}

.footer__cta:hover .cta__button-arrow {
	background: rgb(255 255 255 / 0.3);
	transform: translateX(2px);
}

.footer__cta svg {
	width: 15px;
	height: 15px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- нижній рядок --- */
.footer__divider {
	height: 1px;
	background: rgb(255 255 255 / 0.08);
	margin: 40px 0 24px;
}

.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.footer__copyright {
	font-size: 13px;
	color: rgb(255 255 255 / 0.45);
	margin: 0;
}

.footer__legal {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__legal a {
	font-size: 13px;
	font-weight: 500;
	color: rgb(255 255 255 / 0.65);
	text-decoration: none;
	transition: color .25s ease;
}

.footer__legal a:hover {
	color: #fff;
}


/***===================== 1.GENERAL-STYLE-END =====================***/
/***==============================================================***/



/***======================= 2.PAGE-SETTINGS =======================***/
/***==============================================================***/

/* 2.1.index.html *************************/
/*****************************************/

/* 2.1.1.home-header *****************/
.home-header {
	margin-top: 91px;
}

.home-header .content {
	padding: 0px 15px;
}

.home-header__wrapp {
	padding-top: 45px;
	background: url(../../img/header/home-header-bg.png);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border-radius: 60px;
}







.badge {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 auto;
	margin-bottom: 10px;
	padding: 15px 24px;
	border-radius: 50px;

	/* градиент как на оригинале — голубоватый слева, белый справа */
	background: linear-gradient(105deg,
			rgb(210 225 248 / 0.75) 0%,
			rgb(235 242 255 / 0.60) 40%,
			rgb(255 255 255 / 0.70) 100%);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	border: 1px solid rgb(180 200 235 / 0.5);

	box-shadow:
		inset 0 1px 1px rgb(255 255 255 / 0.9),
		inset 0 -1px 1px rgb(140 170 215 / 0.15),
		0 4px 16px rgb(100 130 190 / 0.12);

	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #3a5aab;

	user-select: none;
}

.badge__icon {
	font-size: 1.2rem;
	color: #4a6cc4;
	line-height: 1;
}

.badge__text {
	line-height: 1;
}








.home-header__title {
	margin: 0;
	font-weight: 600;
	font-size: var(--font-1);
	text-align: center;
	color: var(--color-7);
	line-height: 1.05;
}

.txt-bg {
	position: relative;
	display: inline-block;
	color: var(--color-white);
}

.txt-bg::before {
	position: absolute;
	content: '';
	width: calc(100% + 15px);
	height: 95%;
	top: 50%;
	left: 50%;
	border-radius: 20px;
	background: var(--color-3);
	transform: translate(-50%, -45%);
	z-index: -1;
}


.home-header__descript {
	text-align: center;
	font-size: var(--font-6);
	margin: 20px 0;
	line-height: 1;
}

.home-header__btn {
	display: flex;
	align-items: center;
	gap: 20px;
	width: fit-content;
	margin: 20px auto;
}

/* ============================================================
   btn.css — универсальная кнопка с анимированным бордером
   Использование:
     <button class="btn">Default</button>
     <button class="btn btn--light">Light</button>
     <button class="btn btn--dark">Dark</button>
     <button class="btn btn--ghost">Ghost</button>
     <button class="btn btn--sm">Small</button>
     <button class="btn btn--lg">Large</button>
     Комбинации: class="btn btn--dark btn--lg"
   ============================================================ */

/* ── Анимируемые CSS-свойства ─────────────────────────────── */

@property --gradient_rotate {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --fill_start {
	syntax: "<color>";
	initial-value: rgb(140, 175, 215);
	inherits: false;
}

@property --fill_end {
	syntax: "<color>";
	initial-value: rgb(80, 120, 170);
	inherits: false;
}

/* ── Базовая кнопка (md по умолчанию) ────────────────────── */

.btn {
	/* Цвета заливки — переопределяются в модификаторах */
	--fill_start: rgb(140, 175, 215);
	--fill_end: rgb(80, 120, 170);
	--btn-color: #f0f6ff;
	--btn-shadow: rgb(80 120 180 / 0.4);

	/* Металлическая палитра бордера на базе #A7C3E4 */
	--metal_01: rgb(220 235 250);
	--metal_02: rgb(180 205 230);
	--metal_03: rgb(140 175 210);
	--metal_04: rgb(100 140 185);
	--metal_05: rgb(60 100 150);
	--metal_06: rgb(25 55 100);

	/* Служебные */
	--gradient_rotate: 0deg;
	--border_width: 2px;

	/* Размер (md) */
	padding-inline: 3.2rem;
	padding-block: 1.4rem;
	padding-right: 0.4rem;
	font-size: 1.8rem;
	gap: 12px;

	/* Базовые стили */
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	border-radius: 50px;
	border: var(--border_width) solid transparent;

	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	color: var(--btn-color);
	letter-spacing: 0.01em;
	white-space: nowrap;

	/* Заливка + анимированный бордер в одном свойстве */
	background:
		linear-gradient(160deg,
			var(--fill_start) 0%,
			var(--fill_end) 100%) padding-box,
		conic-gradient(from var(--gradient_rotate),
			rgb(from var(--metal_01) r g b / 0.9),
			rgb(from var(--metal_01) r g b / 0.1),
			rgb(from var(--metal_06) r g b / 0.0),
			rgb(from var(--metal_06) r g b / 1.0),
			rgb(from var(--metal_04) r g b / 0.4),
			rgb(from var(--metal_04) r g b / 0.0),
			rgb(from var(--metal_04) r g b / 0.9),
			rgb(from var(--metal_01) r g b / 0.9)) border-box;

	box-shadow:
		0 6px 20px var(--btn-shadow),
		inset 0 1px 1px rgb(255 255 255 / 0.35);

	/* Плавный hover за счёт @property */
	transition:
		--fill_start 0.4s ease,
		--fill_end 0.4s ease,
		box-shadow 0.4s ease;

	animation: btn-border-rotate 6s linear infinite;
}

/* Внешнее свечение — крутится в обратную сторону */
.btn::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--border_width) - 2px);
	z-index: -1;
	border-radius: inherit;
	border: 2px solid transparent;
	background:
		conic-gradient(from var(--gradient_rotate),
			rgb(from var(--metal_03) r g b / 0.8),
			rgb(from var(--metal_01) r g b / 1.0),
			rgb(from var(--metal_01) r g b / 0.8),
			rgb(from var(--metal_06) r g b / 0.6),
			rgb(from var(--metal_02) r g b / 0.7),
			rgb(from var(--metal_05) r g b / 0.5),
			rgb(from var(--metal_04) r g b / 0.8),
			rgb(from var(--metal_03) r g b / 0.8)) padding-box,
		conic-gradient(from 0deg,
			rgb(from var(--metal_03) r g b / 0.8),
			rgb(from var(--metal_01) r g b / 1.0),
			rgb(from var(--metal_06) r g b / 0.6),
			rgb(from var(--metal_02) r g b / 0.7),
			rgb(from var(--metal_05) r g b / 0.5),
			rgb(from var(--metal_04) r g b / 0.8),
			rgb(from var(--metal_03) r g b / 0.8)) border-box;
	filter: blur(3px);
	opacity: 0.6;
	animation: btn-border-rotate 9s linear infinite reverse;
}

/* Стрелка */
.btn__arrow {
	font-size: 1em;
	transition: transform 0.2s ease;
}

.btn:hover .btn__arrow {
	transform: translateX(5px);
}

/* Состояния */
.btn:hover {
	--fill_start: rgb(175, 210, 245);
	--fill_end: rgb(110, 155, 210);
	box-shadow:
		0 6px 28px rgb(80 140 220 / 0.55),
		inset 0 1px 1px rgb(255 255 255 / 0.5);
}

.btn:active {
	--fill_start: rgb(110, 150, 195);
	--fill_end: rgb(65, 100, 150);
	box-shadow:
		0 3px 10px rgb(80 120 180 / 0.3),
		inset 0 2px 4px rgb(25 55 100 / 0.3);
}

/* ── Цветовые модификаторы ────────────────────────────────── */

/* Светлый — для тёмного фона */
.btn--light {
	--fill_start: rgb(200, 225, 248);
	--fill_end: rgb(150, 190, 230);
	--btn-color: #1a3a5c;
	--btn-shadow: rgb(100 150 200 / 0.35);
}

.btn--light:hover {
	--fill_start: rgb(220, 238, 255);
	--fill_end: rgb(170, 208, 245);
}

.btn--light:active {
	--fill_start: rgb(160, 200, 235);
	--fill_end: rgb(110, 160, 205);
}

/* Тёмный — для светлого фона */
.btn--dark {
	--fill_start: rgb(55, 90, 135);
	--fill_end: rgb(25, 50, 90);
	--btn-color: #ddeeff;
	--btn-shadow: rgb(20 45 90 / 0.5);
}

.btn--dark:hover {
	--fill_start: rgb(70, 110, 160);
	--fill_end: rgb(35, 65, 110);
}

.btn--dark:active {
	--fill_start: rgb(40, 70, 110);
	--fill_end: rgb(15, 35, 70);
}

/* Ghost — полупрозрачный, для оверлеев и фото-фонов */
.btn--ghost {
	--fill_start: rgb(167 195 228 / 0.15);
	--fill_end: rgb(80 120 170 / 0.15);
	--btn-color: #c8dff5;
	--btn-shadow: rgb(80 120 180 / 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.btn--ghost:hover {
	--fill_start: rgb(167 195 228 / 0.28);
	--fill_end: rgb(80 120 170 / 0.28);
}

.btn--ghost:active {
	--fill_start: rgb(80 120 170 / 0.35);
	--fill_end: rgb(40 80 130 / 0.35);
}

/* ── Размерные модификаторы ───────────────────────────────── */
/* Маленькая — navbar, теги, вторичные CTA */
/* .btn--ssm {
	padding-inline: 1.2rem;
	padding-block: 0.6rem;
	font-size: 1.1rem;
	gap: 6px;
} */
.btn--ssm {
	padding-inline: 1rem;
	padding-block: 0.3rem;
	padding-right: 0.3rem;
	font-size: 1rem;
	gap: 6px;
}

/* Маленькая — navbar, теги, вторичные CTA */
/* .btn--sm {
	padding-inline: 2rem;
	padding-block: 0.8rem;
	font-size: 1.4rem;
	gap: 8px;
} */
.btn--sm {
	padding-inline: 1.5rem;
	padding-block: 0.4rem;
	padding-right: 0.4rem;
	font-size: 1.2rem;
	gap: 8px;
}

/* Средняя — по умолчанию, ничего дописывать не нужно */
/* .btn--md { } */

/* Большая — hero-секция, главный CTA */
.btn--lg {
	padding-inline: 4.8rem;
	padding-block: 2rem;
	font-size: 2.2rem;
	gap: 16px;
}

/* ── Анимация бордера ─────────────────────────────────────── */

@keyframes btn-border-rotate {
	from {
		--gradient_rotate: 0deg;
	}

	to {
		--gradient_rotate: 360deg;
	}
}

/* ── Доступность ──────────────────────────────────────────── */

/* Убираем лишнюю анимацию для тех, кто просил меньше движения */
@media (prefers-reduced-motion: reduce) {

	.btn,
	.btn::before {
		animation: none;
	}

	.btn__arrow {
		transition: none;
	}
}

/* Видимый фокус для клавиатурной навигации */
.btn:focus-visible {
	outline: 3px solid rgb(167 195 228 / 0.8);
	outline-offset: 4px;
}










.btn__arrow-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* круг чуть больше высоты кнопки — выпирает */
	width: 2rem;
	height: 2rem;
	border-radius: 50%;

	background: rgb(255 255 255 / 0.18);
	border: 1px solid rgb(255 255 255 / 0.25);
	box-shadow:
		inset 0 1px 1px rgb(255 255 255 / 0.4),
		0 2px 8px rgb(80 120 180 / 0.2);

	flex-shrink: 0;
	transition: background 0.3s ease;
}

.btn--sm .btn__arrow-wrap {
	width: 2rem;
	height: 2rem;
}

.btn--ssm .btn__arrow-wrap {
	width: 1.7rem;
	height: 1.7rem;
}

.btn--ssm .btn__arrow {
	width: 0.9rem;
	height: 0.9rem;
}

.btn:hover .btn__arrow-wrap {
	background: rgb(255 255 255 / 0.28);
}

.btn__arrow {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform 0.25s ease;
}

.btn:hover .btn__arrow {
	transform: translateX(2px);
}























/* .home-header__template {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--font-7);
	color: #000000;
	text-decoration: none;
	margin-left: 20px;
} */
.home-header__template {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 10px;
	font-size: var(--font-7);
	font-weight: 500;
	color: #4a6080;
	text-decoration: none;
	padding: 0.4rem 0.4rem 0.4rem 1.2rem;
	border-radius: 50px;
	border: 1px solid rgb(90 115 170 / 0.15);
	background: rgb(255 255 255 / 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.home-header__template:hover {
	background: rgb(255 255 255 / 0.55);
	border-color: rgb(90 115 170 / 0.25);
	color: #2a4060;
}

.home-header__template .btn__arrow-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgb(90 115 170 / 0.10);
	border: 1px solid rgb(90 115 170 / 0.15);
	box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.6);
	flex-shrink: 0;
	transition: background 0.3s ease;
}

.home-header__template:hover .btn__arrow-wrap {
	background: rgb(90 115 170 / 0.18);
}

.home-header__template .btn__arrow {
	width: 1rem;
	height: 1rem;
	transition: transform 0.25s ease;
}

.home-header__template:hover .btn__arrow {
	transform: translateX(2px);
}















.home-header__img {
	width: 100%;
	height: auto;
	margin-top: -35px;
	overflow: hidden;
	border-radius: 60px;
	pointer-events: none;
}

.home-header__img img {
	display: block;
	width: 100%;
	height: auto;
	filter:
		drop-shadow(0 4px 8px rgb(90 115 170 / 0.18)) drop-shadow(0 12px 32px rgb(90 115 170 / 0.22)) drop-shadow(0 32px 60px rgb(80 105 160 / 0.16));
}


/* 2.1.2.benefits *****************/
.benefits {
	/* margin-top: 60px; */
	margin-top: 25px;
}

/* .benefits__wrapp {
	margin-top: 30px;
} */

.benefits__ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.benefits__li {
	width: auto;
	height: auto;
	padding: 20px;
	/* background: #F8F9FD; */
	border-radius: 20px;
	/* background: linear-gradient(135deg,
			rgb(255 255 255 / 0.90) 0%,
			rgb(235 242 255 / 0.80) 50%,
			rgb(215 228 250 / 0.70) 100%);
	box-shadow:
		0 2px 6px rgb(90 115 170 / 0.08),
		0 8px 24px rgb(90 115 170 / 0.12),
		inset 0 1px 1px rgb(255 255 255 / 0.9);
	border: 1px solid #fff; */
	background: linear-gradient(165deg, #ffffff 0%, #f6faff 100%);
	border: 1px solid rgb(100 140 185 / 0.14);
	box-shadow: 0 1px 2px rgb(90 115 170 / 0.05), 0 8px 20px -10px rgb(90 115 170 / 0.14);
}

.benefits__li-wr {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 295px;
	height: auto;
}

.benefits__img {
	width: 90px;
	height: 90px;
	flex: 0 0 auto;
}

.benefits__img img {
	display: block;
	width: 100%;
	height: 100%;
	filter:
		drop-shadow(0 2px 6px rgb(100 130 210 / 0.25)) drop-shadow(0 6px 20px rgb(90 115 200 / 0.20));
}

.benefits__title {
	font-size: 1.2rem;
	color: var(--color-7);
}

.benefits__descript {
	margin-top: 5px;
	font-size: var(--font-8);
	color: #535353;
}


/* 2.1.3.collection *****************/
.collection {
	margin-top: 100px;
}

.collection .splide__track {
	overflow: visible;
}

.collection__wrapp {
	margin-top: 50px;
}

.collection__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: auto;
	gap: 1.8rem;
}

/* === КАРТОЧКА === */
.collection__item {
	position: relative;
	border-radius: 26px;
	background: linear-gradient(165deg, #ffffff 0%, #f6faff 100%);
	border: 1px solid rgb(100 140 185 / 0.12);
	box-shadow:
		0 1px 2px rgb(90 115 170 / 0.05),
		0 12px 28px -8px rgb(90 115 170 / 0.16);
	transition: transform .45s cubic-bezier(.22, .9, .3, 1),
		box-shadow .45s cubic-bezier(.22, .9, .3, 1),
		border-color .45s ease;
	overflow: hidden;
}

.collection__item:hover {
	/* transform: translateY(-8px); */
	border-color: rgb(100 140 185 / 0.3);
	box-shadow:
		0 1px 2px rgb(90 115 170 / 0.06),
		0 26px 40px -12px rgb(90 115 170 / 0.28);
}

.collection__item-wrapp {
	width: 100%;
	height: auto;
	padding: 14px;
}

/* --- фото + "восковая печать" --- */
.collection__item-img {
	position: relative;
	margin-bottom: 22px;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.collection__item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	will-change: transform;
	transition: transform .6s cubic-bezier(.22, .9, .3, 1);
}

.collection__item:hover .collection__item-img img {
	transform: scale(1.06);
}

.collection__item-seal {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.85);
	/* backdrop-filter: blur(6px); */
	/* background: rgb(255 255 255 / 0.18); */
	backdrop-filter: blur(8px);
	border: 1px solid rgb(255 255 255 / 0.35);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 10px rgb(90 115 170 / 0.18);
	will-change: transform;
	transition: transform .45s ease;
}

.collection__item:hover .collection__item-seal {
	transform: rotate(18deg) scale(1.08);
}

.collection__item-seal svg {
	width: 16px;
	height: 16px;
	stroke: #648cb9;
}

/* --- eyebrow-таг --- */
.collection__item-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 auto 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #eef4fc;
	color: #648cb9;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.collection__item-tag-row {
	display: flex;
	justify-content: center;
}

/* --- заголовок --- */
.collection__item-head {
	margin: 0 0 15px;
	font-weight: 600;
	font-size: 1.3rem;
	text-align: center;
	color: var(--color-7);
}

/* --- кнопки --- */
.collection__item-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.collection__button {
	width: 100%;
	padding: 13px 0;
	text-align: center;
	text-decoration: none;
	border-radius: 13px;
	font-weight: 600;
	font-size: 14.5px;
	transition: .3s ease;
}

.collection__button.order {
	background: var(--gradient-1);
	color: #fff;
	box-shadow: 0 6px 16px -4px rgb(77 120 171 / 0.5);
}

.collection__button.order:hover {
	box-shadow: 0 8px 20px -4px rgb(77 120 171 / 0.65);
	transform: translateY(-1px);
}

.collection__button.view {
	width: auto;
	padding: 0;
	background: none;
	color: #6b7684;
	font-weight: 500;
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.collection__button.view::after {
	content: "→";
	transition: transform .3s ease;
}

.collection__button.view:hover {
	color: #4d78ab;
}

.collection__button.view:hover::after {
	transform: translateX(3px);
}


/* 2.1.4.features *****************/
.features {
	margin-top: 100px;
}




.features__list {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 1fr;
	gap: 1rem;
	max-width: 950px;
	margin: 0 auto;
}

.features__list-item {
	position: relative;
	border-radius: 18px;
	background: linear-gradient(165deg, #ffffff 0%, #f6faff 100%);
	border: 1px solid rgb(100 140 185 / 0.14);
	box-shadow: 0 1px 2px rgb(90 115 170 / 0.05), 0 8px 20px -10px rgb(90 115 170 / 0.14);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
	height: 78px;
	overflow: hidden;
	user-select: none;
	transition: transform .3s cubic-bezier(.22, .9, .3, 1), box-shadow .3s ease, border-color .3s ease;
}

.features__list-item:hover {
	border-color: rgb(100 140 185 / 0.32);
	box-shadow: 0 1px 2px rgb(90 115 170 / 0.06), 0 14px 24px -10px rgb(90 115 170 / 0.2);
}

.features__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #eef4fc;
	display: grid;
	place-items: center;
	transition: background .3s ease, transform .3s ease;
}

.features__list-item:hover .features__icon {
	background: #dfeaf8;
	transform: scale(1.06);
}

.features__icon svg {
	width: 20px;
	height: 20px;
	stroke: #4d78ab;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.features__label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-7);
	line-height: 1.25;
}

/* три ряда: 4 / 3 / 3 элемента, все на одном уровне */
.features__list-item:nth-child(1) {
	grid-column: span 3;
}

/* Дата і місце */
.features__list-item:nth-child(2) {
	grid-column: span 3;
}

/* Таймінг дня */
.features__list-item:nth-child(3) {
	grid-column: span 3;
}

/* Гугл карти */
.features__list-item:nth-child(4) {
	grid-column: span 3;
}

/* Дрес-код */

.features__list-item:nth-child(5) {
	grid-column: span 4;
}

/* Фото пари */
.features__list-item:nth-child(6) {
	grid-column: span 4;
}

/* RSVP-форма */
.features__list-item:nth-child(7) {
	grid-column: span 4;
}

/* Музика */

.features__list-item:nth-child(8) {
	grid-column: span 3;
}

/* Countdown */
.features__list-item:nth-child(9) {
	grid-column: span 4;
}

/* Побажання для молодят */
.features__list-item:nth-child(10) {
	grid-column: span 5;
}

/* @media (max-width: 720px) {
	.features__list-item:nth-child(n) {
		grid-column: span 6 !important;
	}
}

@media (max-width: 480px) {
	.features__list-item:nth-child(n) {
		grid-column: span 12 !important;
	}
} */









/* 2.1.5.process *****************/
.process {
	margin-top: 80px;
}

.process__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.1rem;
	max-width: 1400px;
	margin: 0 auto;
}

.process__list-item {
	border-radius: 22px;
	border: 1px solid rgb(100 140 185 / 0.16);
	background: linear-gradient(180deg, #f6faff 0%, #ffffff 55%);
	padding: 0 0 26px;
	overflow: hidden;
}

/* ============ верхній блок з кільцями ============ */
.process__illustration {
	position: relative;
	height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}

.process__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgb(61 107 168 / 0.14);
	animation: ring-pulse 4s ease-in-out infinite;
}

.process__ring--1 {
	width: 190px;
	height: 190px;
	animation-delay: 0s;
}

.process__ring--2 {
	width: 148px;
	height: 148px;
	border-color: rgb(61 107 168 / 0.2);
	animation-delay: -1.3s;
}

.process__ring--3 {
	width: 108px;
	height: 108px;
	border-color: rgb(61 107 168 / 0.28);
	animation-delay: -2.6s;
}

@keyframes ring-pulse {

	0%,
	100% {
		transform: scale(1);
		opacity: .7;
	}

	50% {
		transform: scale(1.05);
		opacity: 1;
	}
}

.process__icon-circle {
	position: relative;
	z-index: 1;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(160deg, #7ea3d1 0%, #3d6ba8 100%);
	box-shadow: 0 16px 30px -10px rgb(61 107 168 / 0.55);
	display: grid;
	place-items: center;
}

.process__icon-circle svg {
	width: 30px;
	height: 30px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* плаваюча пігулка-статус (як "Ai Analyzing" на референсі) */
.process__pill {
	position: absolute;
	bottom: 22px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #7ea3d1, #3d6ba8);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 10px 20px -8px rgb(61 107 168 / 0.5);
	z-index: 2;
	white-space: nowrap;
}

.process__pill svg {
	width: 13px;
	height: 13px;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
	animation: spin 1.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* дрібні плаваючі бейджі навколо кола (як соцмережі на референсі) */
.process__badge {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid rgb(100 140 185 / 0.25);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 14px -6px rgb(90 115 170 / 0.3);
	animation: badge-float 3.2s ease-in-out infinite;
}

.process__badge svg {
	width: 12px;
	height: 12px;
	stroke: #4d78ab;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.process__badge--tl {
	top: 14px;
	left: 18px;
	animation-delay: 0s;
}

.process__badge--r {
	top: 50%;
	right: 8px;
	margin-top: -14px;
	animation-delay: -1.1s;
}

.process__badge--br {
	bottom: 14px;
	right: 20px;
	animation-delay: -2.2s;
}

@keyframes badge-float {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-7px) rotate(-4deg);
	}
}

/* ============ текстовий блок ============ */
.process__text {
	padding: 0 22px;
}

.process__list-item-num {
	display: block;
	font-size: 0.878rem;
	font-weight: 700;
	color: #3d6ba8;
	margin-bottom: 8px;
}

.process__list-item-title {
	font-size: 1.13rem;
	font-weight: 800;
	color: var(--color-7);
	margin: 0 0 10px;
}

.process__list-item-descript {
	font-size: 12.5px;
	line-height: 1.55;
	color: #6b7684;
	margin: 0;
}

/* ============ адаптив ============ */
/*@media (max-width: 720px) {

	.process__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.9rem;
	}

	.process__illustration {
		height: 160px;
		margin-bottom: 16px;
	}

	.process__ring--1 {
		width: 150px;
		height: 150px;
	}

	.process__ring--2 {
		width: 116px;
		height: 116px;
	}

	.process__ring--3 {
		width: 84px;
		height: 84px;
	}

	.process__icon-circle {
		width: 60px;
		height: 60px;
	}

	.process__icon-circle svg {
		width: 24px;
		height: 24px;
	}

	.process__badge {
		width: 24px;
		height: 24px;
	}

	.process__badge svg {
		width: 10px;
		height: 10px;
	}

	.process__badge--tl {
		top: 8px;
		left: 8px;
	}

	.process__badge--br {
		bottom: 8px;
		right: 10px;
	}

	.process__pill {
		font-size: 10.5px;
		padding: 6px 11px;
		bottom: 14px;
	}

	.process__text {
		padding: 0 16px;
	}

	.process__list-item-title {
		font-size: 14.5px;
	}

	.process__list-item-descript {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.process__list {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.process__illustration {
		height: 180px;
	}

	.process__ring--1 {
		width: 170px;
		height: 170px;
	}

	.process__ring--2 {
		width: 132px;
		height: 132px;
	}

	.process__ring--3 {
		width: 96px;
		height: 96px;
	}

	.process__icon-circle {
		width: 68px;
		height: 68px;
	}

	.process__icon-circle svg {
		width: 28px;
		height: 28px;
	}
} */



























/* 2.1.6.plans *****************/
.plans {
	margin-top: 80px;
	padding: 80px 0;
	background: #131a26;
	background: radial-gradient(circle at 50% 30%, #223349 0%, #0d1420 64%);
}

.plans .section-head {
	margin-bottom: 80px;
}

.plans .section-title {
	color: #fff;
}

.plans .section-descript {
	color: #9a9a9a;
}

.plans__wrapp.splide {
	visibility: visible;
}

.plans__wrapp .splide__track {
	overflow: visible;
}

.plans .splide.is-initialized:not(.is-active) .splide__list {
	display: flex;
}

/* контейнер-обёртка для трёх карточек */
.plans__row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.4rem;
	align-items: stretch;
	justify-content: center;
}

.card {
	position: relative;
	background: radial-gradient(circle at 50% 0%, #2d4059 0%, #10161f 60%);
	box-shadow:
		inset 0 1.01rem 0.2rem -1rem #fff0,
		inset 0 -1.01rem 0.2rem -1rem #0000,
		0 -1.02rem 0.2rem -1rem #fff0,
		0 1rem 0.2rem -1rem #0000,
		0 0 0 1px #6b8cb84d,
		0 4px 4px 0 #0006,
		0 0 0 1px #2d4059;
	width: 19rem;
	flex: 0 0 19rem;
	/* фиксированная ширина, не сжимается и не растёт */
	border-radius: 1.8rem;
	color: #fff;
	padding: 1.6rem 1.6rem 1.8rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}

.card::before {
	content: "";
	display: block;
	--offset: 1rem;
	width: calc(100% + 2 * var(--offset));
	height: calc(100% + 2 * var(--offset));
	position: absolute;
	left: calc(-1 * var(--offset));
	right: calc(-1 * var(--offset));
	top: calc(-1 * var(--offset));
	bottom: calc(-1 * var(--offset));
	margin: auto;
	box-shadow: inset 0 0 0px 0.06rem #6b8cb84d;
	border-radius: 2.6rem;
	--ax: 4rem;
	clip-path: polygon(var(--ax) 0, 0 0, 0 var(--ax), var(--ax) var(--ax),
			var(--ax) calc(100% - var(--ax)), 0 calc(100% - var(--ax)), 0 100%,
			var(--ax) 100%, var(--ax) calc(100% - var(--ax)),
			calc(100% - var(--ax)) calc(100% - var(--ax)), calc(100% - var(--ax)) 100%,
			100% 100%, 100% calc(100% - var(--ax)),
			calc(100% - var(--ax)) calc(100% - var(--ax)), calc(100% - var(--ax)) var(--ax),
			100% var(--ax), 100% 0, calc(100% - var(--ax)) 0,
			calc(100% - var(--ax)) var(--ax), var(--ax) var(--ax));
	transition: all 0.4s ease-in-out;
	pointer-events: none;
}

.card:hover::before {
	--offset: 0.5rem;
	--ax: 8rem;
	border-radius: 2.2rem;
	box-shadow: inset 0 0 0 0.08rem #6b8cb84d;
}

/* выделенная карточка "Standard" — самый популярный план */
.card.featured {
	background: radial-gradient(circle at 50% 0%, #3d6ba8 0%, #16283f 60%);
	box-shadow:
		inset 0 1.01rem 0.2rem -1rem #fff0,
		inset 0 -1.01rem 0.2rem -1rem #0000,
		0 -1.02rem 0.2rem -1rem #fff0,
		0 1rem 0.2rem -1rem #0000,
		0 0 0 1.5px #7ea3d1,
		0 8px 24px 0 #1a3a6640,
		0 0 0 1px #3d6ba8;
}

.card.featured::before {
	box-shadow: inset 0 0 0px 0.06rem #7ea3d180;
}

.card.featured:hover::before {
	box-shadow: inset 0 0 0 0.08rem #7ea3d180;
}

.card.featured .light-layer .glow {
	background: radial-gradient(ellipse at 50% 0%, #7ea3d1a0, transparent 70%);
}

/* обёртка нужна только чтобы выступ не обрезался overflow:hidden карточки, на размер карточки не влияет */
.card__wrapp {
	position: relative;
	z-index: 1;
}

/* выступ "Популярний", слитый с верхней гранью карточки — не плавает, а является продолжением её формы */
.popular-tab {
	position: absolute;
	top: -1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(2px);
	/* лёгкий нахлёст на карточку, чтобы не было видимого шва */
	width: 14rem;
	height: 1.5rem;
	z-index: -1;
	pointer-events: none;
}

.popular-tab svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.popular-tab .tab-shape {
	fill: #3d6ba8;
	stroke: #7ea3d1;
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
}

.popular-tab-content {
	position: absolute;
	left: 50%;
	top: 0.3rem;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.32rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #eaf1fb;
	white-space: nowrap;
}

.popular-tab-content svg {
	position: static;
	width: 0.55rem;
	height: 0.55rem;
	fill: #cfe0f5;
	flex: none;
}

.light-layer {
	position: absolute;
	left: 0;
	top: -2rem;
	height: 60%;
	width: 100%;
	pointer-events: none;
	opacity: 0.5;
	transition: opacity 0.4s ease-in-out;
}

.card:hover .light-layer {
	opacity: 0.85;
}

.light-layer .glow {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	width: 70%;
	height: 10rem;
	background: radial-gradient(ellipse at 50% 0%, #6b8cb866, transparent 70%);
	filter: blur(1.2rem);
}

.plans__content {
	position: relative;
	z-index: 1;
}

.top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.6rem;
}

.plan-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #f2f2f2;
}

.plan-label .dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #7ea3d1;
	box-shadow: 0 0 0.4rem #7ea3d1cc;
}

.days-badge {
	font-size: 0.7rem;
	color: #ccc;
	border: 1px solid #fff3;
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	background: #ffffff0a;
}

.price-row {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	margin-bottom: 0.5rem;
}

.price {
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.price-unit {
	font-size: 0.9rem;
	color: #fff9;
	font-weight: 400;
}

.subtitle {
	font-size: 0.72rem;
	color: #fff6;
	margin-bottom: 1.4rem;
}

.choose-btn {
	appearance: none;
	border: none;
	width: 100%;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.9rem 0;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 12px 0 #0006;
}

.choose-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px 0 #0008;
}

.featured-btn {
	background: #7ea3d1;
	color: #0d1420;
}

.featured-btn:hover {
	box-shadow: 0 6px 16px 0 #1a3a6680;
}

.divider {
	height: 1px;
	background: #fff2;
	margin: 1.6rem 0 1.4rem;
}

.included-title {
	font-size: 0.85rem;
	color: #eee;
	margin: 0 0 1rem;
}

.feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.feature-list li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.78rem;
	color: #ddd;
}

.check {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #ffffff14;
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1px #fff2;
}

.check svg {
	width: 0.6rem;
	height: 0.6rem;
}



.destination__swipe {
	display: none;
}










/* 2.1.7.faq *****************/
.faq {
	margin-top: 80px;
	padding-bottom: 80px;
}

.faq__list {
	max-width: 850px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq__item {
	border-radius: 44px;
	background: #eef4fc;
	cursor: pointer;
	transition: background .35s cubic-bezier(.22, .9, .3, 1), box-shadow .35s ease;
}

.faq__item.is-active {
	border-radius: 32px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgb(90 115 170 / 0.05), 0 20px 40px -18px rgb(90 115 170 / 0.28);
	border: 1px solid rgb(100 140 185 / 0.14);
	cursor: default;
}

.faq__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 7px 28px;
	padding-right: 7px;
}

.faq__question {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-7);
	margin: 0;
}

.faq__toggle {
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #ffffff;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 10px -4px rgb(90 115 170 / 0.2);
	transition: transform .35s cubic-bezier(.22, .9, .3, 1);
}

.faq__item.is-active .faq__toggle {
	background: #eef4fc;
	transform: rotate(135deg);
}

.faq__toggle svg {
	width: 17px;
	height: 17px;
	stroke: #3d6ba8;
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
}

.faq__body-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s cubic-bezier(.22, .9, .3, 1);
}

.faq__item.is-active .faq__body-wrap {
	grid-template-rows: 1fr;
}

.faq__body-inner {
	overflow: hidden;
}

.faq__answer {
	margin: 0;
	padding: 0 28px 28px;
	font-size: 14px;
	line-height: 1.65;
	color: #6b7684;
}








/* 2.1.8.cta *****************/
.collection_page .cta {
	margin-top: 40px;
}

.cta__bl {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	border-radius: 26px;
	background: linear-gradient(180deg, #ffffff 0%, #f2f7fd 100%);
	border: 1px solid rgb(100 140 185 / 0.16);
	overflow: hidden;
	padding: 76px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow:
		inset 0 -34px 46px -12px rgb(126 163 209 / 0.55),
		inset 0 -70px 90px -20px rgb(61 107 168 / 0.28),
		inset 0 -120px 130px -30px rgb(22 40 63 / 0.12);
}

.cta__bl::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.7), transparent);
	z-index: 1;
	pointer-events: none;
}

.cta__dots {
	position: absolute;
	top: 0;
	right: 0;
	width: 340px;
	height: 240px;
	background-image: radial-gradient(rgb(61 107 168 / 0.18) 1.4px, transparent 1.4px);
	background-size: 16px 16px;
	mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.cta__glow {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(126 163 209 / 0.25), transparent 70%);
	filter: blur(60px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

.cta__content {
	position: relative;
	z-index: 3;
	max-width: 640px;
}

.cta__title span {
	background: linear-gradient(135deg, #7ea3d1, #3d6ba8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cta__subtitle {
	font-size: 14px;
	color: #6b7684;
	margin: 0 0 30px;
}

.cta__button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 6px 6px 24px;
	border-radius: 999px;
	background: var(--gradient-1);
	color: #ffffff;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 14px 30px -12px rgb(61 107 168 / 0.5);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cta__button:hover {
	box-shadow: 0 18px 36px -12px rgb(61 107 168 / 0.6);
}

.cta__button-arrow {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.2);
	display: grid;
	place-items: center;
	transition: transform .25s ease, background .25s ease;
}

.cta__button:hover .cta__button-arrow {
	background: rgb(255 255 255 / 0.3);
	transform: translateX(2px);
}

.cta__button svg,
.home-header__btn svg {
	width: 15px;
	height: 15px;
	stroke: #ffffff;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}





















/*  */
.contacts {
	margin-top: 100px;
}

.contacts-bento {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contacts-bento__row {
	display: grid;
	gap: 16px;
}

.contacts-bento__row--top {
	grid-template-columns: repeat(3, 1fr);
}

.contacts-bento__row--bottom {
	grid-template-columns: repeat(2, 1fr);
}

.contact-tile {
	position: relative;
	border-radius: 26px;
	padding: 28px;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid rgb(28 39 51 / 0.06);
	transition: transform .3s ease, box-shadow .3s ease;
}

.contact-tile:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 34px -18px rgb(28 39 51 / 0.22);
}

/* -- великий контурний "watermark"-значок праворуч, а не коробочка зліва -- */
.contact-tile__mark {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 68px;
	height: 68px;
	opacity: .28;
}

.contact-tile__mark svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.contact-tile__top {
	position: relative;
	z-index: 1;
	padding-right: 66px;
	/* щоб жирний хендл не залазив під іконку */
}

.contact-tile__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}

.contact-tile__handle {
	font-size: 21px;
	font-weight: 800;
	color: var(--color-7);
	letter-spacing: -0.01em;
	line-height: 1.25;
	word-break: break-word;
}

.contact-tile__bottom {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.contact-tile__descript {
	font-size: 12px;
	line-height: 1.55;
	color: #6b7684;
}

/* -- дія: повноцінна кнопка-чип (текст + стрілка разом), а не гола іконка -- */
.contact-tile__action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px 9px 16px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgb(28 39 51 / 0.12);
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	transition: background .25s ease, transform .25s ease, border-color .25s ease, color .25s ease;
}

.contact-tile:hover .contact-tile__action {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	transform: translateX(2px);
}

.contact-tile__action-arrow {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.05);
	display: grid;
	place-items: center;
	flex: none;
	transition: background .25s ease, transform .25s ease;
}

.contact-tile:hover .contact-tile__action-arrow {
	background: rgb(255 255 255 / 0.22);
	transform: rotate(-45deg);
}

.contact-tile__action svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -- пастельні відтінки під кожну платформу -- */
.contact-tile--instagram {
	background: #fdf2f6;
	--accent: #c9578e;
}

.contact-tile--telegram {
	background: #eef6fd;
	--accent: #3d8fd6;
}

.contact-tile--email {
	background: #f2f6fb;
	--accent: #4d78ab;
}

.contact-tile--tiktok {
	background: #eefcfa;
	--accent: #1fa89a;
}

.contact-tile--threads {
	background: #f4f4f6;
	--accent: #4a4d55;
}

.contacts-bento__group-note {
	font-size: 12px;
	color: #9aa4b1;
	margin: 4px 0 -4px 4px;
}

@media (max-width: 760px) {

	.contacts-bento__row--top,
	.contacts-bento__row--bottom {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {

	.contacts-bento__row--top,
	.contacts-bento__row--bottom {
		grid-template-columns: 1fr;
	}
}





/***======================= 2.PAGE-SETTINGS-END =======================***/
/***==================================================================***/



/***======================= 3.MEDIA-SETTINGS =======================***/
/***===============================================================***/



/* 3.1.media(max-width:1441px) *********************/
/**************************************************/
@media(max-width: 1441px) {

	/* 3.1.media(1441)_home-page */
	/* collection */
	.collection__list {
		grid-template-columns: repeat(4, 1fr);
	}

}

/* 3.2.media(max-width:1301px) *********************/
/**************************************************/
@media(max-width: 1301px) {}

/* 3.3.media(max-width:1201px) *********************/
/**************************************************/
@media(max-width: 1201px) {

	/* 3.1.media(1201)_general */
	:root {
		--font-1: 3rem;
	}


	/* nav */
	.nav__wrapp {
		padding: 10px 15px;
	}

	.logo {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}

	.logo img {
		width: auto;
		height: 100%;
	}

	.nav__ul {
		gap: 10px;
	}

	.nav__link {
		padding: 5px 10px;
		font-size: 0.9rem;
	}

	/* 3.2.media(1201)_home-page */
	/* header */
	.home-header {
		margin-top: 57px;
	}

	.home-header__wrapp {
		border-radius: 40px;
	}

	.badge {
		padding: 12px 20px;
		font-size: 0.85rem;
	}

	/* 3.3.media(1201)_home-page */
	/* collection */
	.collection__wrapp {
		padding: 0 25px;
	}

	.collection__list {
		grid-template-columns: repeat(3, 1fr);
	}

	/* process */
	.process__wrapp {
		padding: 0 70px;
	}

	.process__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

/* 3.4.media(max-width:1011px) *********************/
/**************************************************/
@media(max-width: 1011px) {

	/* 3.1.media(1011)_general */
	:root {
		--font-1: 2.7rem;
	}

	/* nav */
	.logo {
		width: 35px;
		height: 35px;
		font-size: 1.4rem;
	}

	.nav__wrapp .btn {
		display: none;
	}

	.nav__menu .btn {
		display: flex;
		margin-top: 20px;
	}

	.nav__menu {
		opacity: 0;
		pointer-events: none;
		padding: 10px;
		left: unset;
		top: unset;
		bottom: -10px;
		right: 50px;
		transform-origin: top right;
		background: linear-gradient(165deg, #ffffff 0%, #f6faff 100%);
		box-shadow: 0 1px 2px rgb(90 115 170 / 0.05), 0 8px 20px -10px rgb(90 115 170 / 0.14);
		border: 1px solid var(--color-3);
		border-radius: 15px;
		transform: translate(50px, 95%);
		transition: .3s;
	}

	.nav__menu.active {
		pointer-events: auto;
		/* transform: translate(0, 100%) scale(1); */
		transform: translate(40px, 100%);
		opacity: 1;
	}

	.menu-bubble {
		width: 100%;
		height: auto;
		transition: top 0.3s, opacity 0.3s, height 0.2s;
	}

	.nav__ul {
		flex-direction: column;
	}

	.burger {
		display: block;
	}

	/* 3.2.media(1011)_home-page */
	/* header */
	.home-header__wrapp {
		border-radius: 30px;
	}

	.badge {
		padding: 12px 20px;
		font-size: 0.8rem;
	}

	/* process */
	.process__wrapp {
		padding: 0 40px;
	}
}

/* 3.5.media(max-width:926px) **********************/
/**************************************************/
@media(max-width: 926px) {

	/* 3.1.media(861)_general */
	.footer__top {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer__cta-col {
		text-align: left;
	}

	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.footer__copyright {
		order: 1;
	}
}

/* 3.6.media(max-width:861px) **********************/
/**************************************************/
@media(max-width: 861px) {

	/* 3.1.media(861)_general */
	:root {
		--font-1: 2.5rem;
		--font-6: 1.2rem;
	}

	/* 3.2.media(861)_home-page */
	/* header */
	.badge {
		padding: 10px 20px;
		font-size: 0.7rem;
	}

	.badge__icon {
		font-size: 1rem;
	}

	.home-header__img {
		margin-top: -18px;
	}

	/* 3.3.media(861)_home-page */
	/* collection */
	.collection__list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* features */
	.features__wrapp {
		padding: 0 40px;
	}

	.features__list-item:nth-child(n) {
		grid-column: span 6 !important;
	}

	/* precess */
	.process__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.9rem;
	}

	.process__illustration {
		height: 160px;
		margin-bottom: 16px;
	}

	.process__ring--1 {
		width: 150px;
		height: 150px;
	}

	.process__ring--2 {
		width: 116px;
		height: 116px;
	}

	.process__ring--3 {
		width: 84px;
		height: 84px;
	}

	.process__icon-circle {
		width: 60px;
		height: 60px;
	}

	.process__icon-circle svg {
		width: 24px;
		height: 24px;
	}

	.process__badge {
		width: 24px;
		height: 24px;
	}

	.process__badge svg {
		width: 10px;
		height: 10px;
	}

	.process__badge--tl {
		top: 8px;
		left: 8px;
	}

	.process__badge--br {
		bottom: 8px;
		right: 10px;
	}

	.process__pill {
		font-size: 10.5px;
		padding: 6px 11px;
		bottom: 14px;
	}

	.process__text {
		padding: 0 16px;
	}

}


/* 3.7.media(max-width:741px) **********************/
/**************************************************/
@media(max-width: 741px) {
	.plans .section-head {
		margin-bottom: 30px;
	}

	.plans__row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0;
	}

	.splide__track {
		overflow: visible;
	}

	.destination__swipe {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 5px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		padding: 2px 0;
		padding-right: 2px;
		padding-left: 10px;
		margin: 0 auto;
		margin-bottom: 40px;
		border-radius: 25px;
		/* background: var(--color-3); */
		/* background: #5172a6; */
		background: #3a5e98;
	}

	.destination__swipe-txt {
		font-size: var(--font-8);
		line-height: .8;
		font-weight: 600;
		/* color: #273b5b; */
		color: #aacdff;
		text-transform: uppercase;
	}

	.destination__swipe-img {
		width: 20px;
		height: 20px;
		padding: 2px;
		border-radius: 50%;
		background: #273b5b;
	}

	.destination__swipe svg {
		width: 100%;
		height: 100%;
		/* fill: var(--color-3); */
		fill: #aacdff;
	}
}

/* 3.8.media(max-width:661px) **********************/
/**************************************************/
@media(max-width: 661px) {

	/* 3.1.media(661)_general */
	:root {
		--font-1: 2.3rem;
		--font-3: 2.1rem;
		--font-6: 1.2rem;
	}


	/* 3.2.media(661)_home-page */
	/* header */
	.home-header__title {
		max-width: 455px;
		width: 100%;
		margin: 0 auto;
		padding: 0 10px;
	}

	.home-header__descript {
		padding: 0 10px;
		line-height: 1.4;
	}

	.home-header__btn {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		align-items: baseline;
		padding: 0 15px;
	}

	.home-header__template {
		line-height: .8;
	}

	.home-header__img {
		margin-top: -5px;
	}

	/* benefits */
	.benefits__li {
		width: 100%;
	}

	.benefits__li-wr {
		width: 100%;
	}

	/* features */
	.features__wrapp {
		padding: 0 15px;
	}

	/* process */
	.process__wrapp {
		padding: 0 15px;
	}
}

/* 3.9.media(max-width:531px) **********************/
/**************************************************/
@media(max-width: 531px) {

	/* 3.1.media(531)_general */
	/* nav */
	.nav__wrapp {
		align-items: center;
		padding: 10px 0;
	}

	.logo {
		width: 29px;
		height: 29px;
		font-size: 1.1rem;
	}

	/* footer */
	.footer__legal {
		flex-wrap: wrap;
		gap: 20px;
	}

	/* 3.3.media(861)_home-page */
	/* collection */
	.collection__list {
		grid-template-columns: repeat(1, 1fr);
	}

	/* features */
	.features__wrapp {
		padding: 0 40px;
	}

	.features__list-item:nth-child(n) {
		grid-column: span 12 !important;
	}

	/* process */
	.process__wrapp {
		padding: 0 40px;
	}

	.process__list {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.process__illustration {
		height: 180px;
	}

	.process__ring--1 {
		width: 170px;
		height: 170px;
	}

	.process__ring--2 {
		width: 132px;
		height: 132px;
	}

	.process__ring--3 {
		width: 96px;
		height: 96px;
	}

	.process__icon-circle {
		width: 68px;
		height: 68px;
	}

	.process__icon-circle svg {
		width: 28px;
		height: 28px;
	}

	.process__text {
		text-align: center;
	}
}

/* 3.10.media(max-width:436px) *********************/
/**************************************************/
@media(max-width: 436px) {

	/* 3.1.media(436)_general */
	.content {
		padding: 0 10px;
	}

	/* 3.2.media(436)_home-page */
	/* header */
	.home-header .content {
		padding: 0px 5px;
	}

	.home-header__wrapp {
		padding-top: 30px;
	}

	/* features */
	.features__wrapp {
		padding: 0 30px;
	}

	/* precess */
	.process__wrapp {
		padding: 0 30px;
	}
}

/* 3.11.media(max-width:376px) *********************/
/**************************************************/
@media(max-width: 376px) {

	/* 3.1.media(376)_general */
	.footer__legal {
		flex-wrap: wrap;
		gap: 15px;
	}


	/* collection */
	.collection__wrapp {
		padding: 0 15px;
	}

	/* features */
	.features__wrapp {
		padding: 0;
	}

	/* precess */
	.process__wrapp {
		padding: 0;
	}
}

/* 3.12.media(max-width:351px) *********************/
/**************************************************/
@media(max-width: 351px) {

	/* hader */
	.home-header__template {
		font-size: 1rem;
	}

	/* card */
	.card {
		width: 18rem;
		padding: 1.2rem 1.2rem 1.4rem;
	}

	.price {
		font-size: 2.2rem;
	}

	.feature-list li {
		font-size: 0.7rem;

	}
}

/***======================= 3.MEDIA-SETTINGS-END =======================***/
/***===================================================================***/