:root {
	--secondary: #11808D;
	--ice-2: #D4E6FF;
}

.mw-620 {
	max-width: 620px;
}

.mx-auto {
	margin-inline: auto;
}

.mt-32 {
	margin-top: 32px;
}

.br-xl-only {
	display: none;
}

@media (min-width: 992px) {
	.mt-xl-40 {
		margin-top: 40px;
	}

	.mt-xl-60 {
		margin-top: 60px;
	}

	.pb-xl-60 {
		padding-bottom: 60px !important;
	}

	.br-xl-only {
		display: block;
	}
}

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

.page-main {
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.4px;
	color: var(--base-07);
	text-wrap-style: balance;
}

@media (min-width: 768px) {
	.page-main {
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: -.6px;
	}
}

.page-main a:not([class]) {
	text-decoration: underline;
	color: var(--purple);
	text-decoration-color: rgba(133, 40, 118, .5);
	text-underline-position: from-font;
	transition: text-decoration-color .25s ease;
}

.page-main a:not([class]):hover {
	text-decoration-color: currentColor;
}

.page-main .h5 {
	margin: 0 0 30px;
	font-size: 18px;
	line-height: 22px;
}

@media (min-width: 992px) {
	.page-main .h5 {
		font-size: 22px;
		line-height: 27px;
	}
}

/* —— Section shell —— */

.section {
	position: relative;
	padding-block: 60px;
}

.section--gray {
	background: var(--base-02);
}

.section--ice {
	background: var(--ice-2);
}

.section--rounded {
	border-radius: 30px;
}


@media (max-width: 992px) {
	.section--gray {
		padding-block: 40px;
	}
}

.section__head {
	margin: 0 auto 32px;
	max-width: 850px;
	text-align: center;
}

.section__title {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	color: var(--black);
}

.section__title strong {
	color: var(--purple);
}

.section__descr {
	color: #4B5563;
}

@media (min-width: 1200px) {
	.section {
		padding-block: 100px;
	}

	.section--rounded {
		border-radius: 100px;
	}

	.section__head {
		margin-bottom: 60px;
	}

	.section__title {
		font-size: 40px;
		line-height: 52px;
		letter-spacing: -.8px;
	}

	.section__descr {
		font-size: 22px;
		line-height: 32px;
		color: var(--black);
	}
}

/* —— Hero —— */

.hero {
	position: relative;
	padding: 30px 0 40px;
	border-radius: 0 0 30px 30px;
	overflow: hidden;
	background: var(--light-blue);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	position: relative;
	z-index: 1;
}

.hero__content {
	width: 100%;
}

.hero__title {
	margin: 20px 0 15px;
	letter-spacing: -.4px;
	color: var(--black);
}

.hero__text {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 24px;
}

.hero__media {
	flex-shrink: 0;
	order: -1;
	width: 100%;
	max-width: 470px;
}

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

.hero .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
}


@media (max-width: 370px) {
	.hero__title {
		font-size: 24px !important;
		line-height: 32px;
	}
}

@media (min-width: 576px) {
	.hero__title {
		font-size: 32px;
		line-height: 36px;
	}

	.hero .button {
		width: auto;
	}
}

@media (min-width: 768px) {
	.hero {
		padding-bottom: 50px;
		border-radius: 0 0 45px 45px;
	}

	.hero__title {
		font-size: 44px;
		line-height: 56px;
		letter-spacing: -1.4px;
	}
}

@media (min-width: 992px) {
	.hero__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 48px;
	}

	.hero__content {
		max-width: 700px;
	}

	.hero__media {
		order: 0;
	}
}

@media (min-width: 1200px) {
	.hero {
		padding: 60px 0 100px;
		border-radius: 0 0 100px 100px;
	}

	.hero__title {
		margin-top: 12px;
		font-size: 54px;
		line-height: 66px;
	}

	.hero__text {
		margin-bottom: 32px;
		max-width: 617px;

		font-size: 20px;
		line-height: 30px;
	}
}

/* —— Badge —— */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0;
	white-space: nowrap;
	border-radius: 100px;
	border: 1px solid rgba(0, 158, 176, .25);
}

.badge--green {
	color: #0d6670;
	background: rgba(0, 158, 176, .08);
}

.badge--purple {
	color: var(--purple);
	border-color: rgba(133, 40, 118, .3);
	background: rgba(133, 40, 118, .08);
}

.badge--blue {
	color: #005BDB;
	border-color: rgba(0, 91, 219, 0.3);
	background: rgba(0, 91, 219, 0.06);
}

.badge__icon {
	display: block;
	flex-shrink: 0;
	height: 14px;
}

/* —— Cards —— */

.cards {
	display: grid;
	gap: 16px;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--base-04);
	border-radius: 12px;
	background: #fff;
}

.card--gray {
	background: var(--base-02);
	border: none;
}

.cards--media .card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 20px;
	border: none;
}

.card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	background: var(--secondary);
}

.card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--rose);
}

.card__icon--light-green {
 	background: rgba(17, 128, 141, 0.08);
}

.card__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cards--media .card__body {
	gap: 4px;
}

.card__title {
	margin: 0;
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: -.4px;
	color: var(--black);
}

.card__num+.card__title {
	color: var(--secondary);
}

.cards--media .card__title {
	font-size: 20px;
	line-height: 28px;
}

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

@media (min-width: 768px) {
	.cards--2, .cards--3, .cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.cards--2 .card--full-width {
		grid-column: 1 / -1;
		grid-template-rows: unset;
		grid-template-columns: repeat(2, 1fr);
		gap: 48px;
	}
}

@media (min-width: 992px) {
	.cards {
		gap: 30px;
	}

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

	.cards--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.card {
		gap: 20px;
		padding: 30px;
		border-radius: 20px;
	}

	.cards--small .card {
		padding: 20px;
		gap: 18px;
		border-radius: 16px;
	}

	.card__body {
		gap: 12px;
	}

	.card__icon {
		width: 44px;
		height: 44px;
	}

	.card__title {
		font-size: 22px;
		line-height: 27px;
	}

	.cards--media .card__title {
		font-size: 24px;
		line-height: 32px;
	}

	.cards--small .card__title {
		font-size: 18px;
		line-height: 22px;
	}

	.cards--small .card__text {
		font-size: 14px;
		line-height: 20px;
		color: var(--base-05);
	}

	.cards--2 .card--full-width {
		gap: 90px;
	}

	.cards--2 .card--full-width .card__text {
		max-width: 30vw;
	}
}

/* —— Split (media + text) —— */

.split {
	display: grid;
	gap: 32px;
}

.split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.split__body {
	display: grid;
	gap: 20px;
}

.split__body .button {
	margin-top: 12px;
}

.split-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.split-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--secondary);
}

.split-item__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.split-item__title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
}

.split-item__text {
	color: var(--base-05);
}

@media (min-width: 992px) {
	.split {
		align-items: center;
		justify-content: center;
		grid-template-columns: repeat(2, auto);
		gap: var(--split-gap, 32px);
	}

	.split__media {
		max-width: var(--split-size);
	}

	.split__body {
		max-width: var(--split-size);
	}

	.split-item__title {
		font-size: 22px;
		line-height: 27px;
	}

	.split__body--2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 38px 20px;
	}

	.split__body--2 .split-item {
		flex-direction: column;
	}

	.split__body--2 .split-item__text {
		font-size: 14px;
		line-height: 20px;
	}

	.split__body--2 .split-item__title {
		font-size: 20px;
		line-height: 28px;
	}
}

/* —— Checklist —— */

.list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.list--check .list__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.list--check .list__item::before {
	content: "";
	width: 14px;
	height: 26px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14"><path fill="%23852876" d="M11.778 2.5 5.154 8.189 2.353 5.42.5 7.03 5.025 11.5 13.5 4.228z"/></svg>') no-repeat center/contain;
	flex-shrink: 0;
}

@media (min-width: 992px) {
	.list--check {
		flex-direction: row;
		justify-content: center;
		gap: 32px;
	}

	.list--check .list__item {
		max-width: 300px;
	}
}

/* —— Lead —— */

.lead {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -.4px;
	color: var(--black);
}

@media (min-width: 992px) {
	.lead {
		font-size: 22px;
		line-height: 32px;
	}
}

/* —— Media figure (diagram / wide illustration) —— */

.media {
	border-radius: 12px;
	overflow: hidden;
}

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

@media (min-width: 992px) {
	.media {
		border-radius: 20px;
	}
}

/* —— Promo —— */

.section-promo {
	padding-block: 40px;
	margin-bottom: 60px;
	--bg: var(--ice-2);
	background: var(--bg);
}

.promo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.promo .badge {
	margin-bottom: 20px;
}

.promo .button {
	margin-top: 26px;
}

.promo__content {
	max-width: 540px;
}

.promo__content p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.promo__content p + p {
	margin-top: 8px;
}

.promo__media {
	max-width: 467px;
}

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

@media (min-width: 992px) {
	.section-promo {
		padding: 0;
		margin-bottom: 100px;
		background: none;
	}

	.promo {
		flex-direction: row;
		gap: 43px;
		align-items: center;
		padding: 60px;
		background: var(--bg);
		border-radius: 20px;
	}

	.promo .badge {
		margin-bottom: 32px;
	}

	.promo__content p {
		font-size: 18px;
		line-height: 27px;
	}

	.promo .button {
		margin-top: 32px;
		width: 100%;
	}
}

/* —— FAQ —— */

.faq__list {
	counter-reset: faq-counter;
}

.faq__item {
	padding: 20px 0;
	counter-increment: faq-counter;
	border-bottom: 1px solid var(--base-03);
}

@media (max-width: 576px) {
	.faq__item .button {
		margin-left: -40px;
		padding-block: 0;
		height: 40px;
		line-height: 40px;
		border: none;
		border-radius: 10px;
	}
}

/* плавная анимация для details */
@supports (interpolate-size: allow-keywords) {
	html {
		interpolate-size: allow-keywords;
	}

	.faq__item::details-content {
		block-size: 0;
		opacity: 0;
		overflow: hidden;
		transition: block-size 0.2s ease,
		opacity 0.2s ease,
		content-visibility 0.2s allow-discrete;
	}

	.faq__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	@starting-style {
		.faq__item[open]::details-content {
			block-size: 0;
			opacity: 0;
		}
	}
}

.faq__item summary {
	display: flex;
	gap: 16px;
	list-style: none;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -.4px;
	color: var(--base-06);
	cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::before {
	content: counter(faq-counter, decimal-leading-zero);
	flex-shrink: 0;
	display: inline-block;
	width: 24px;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -.4px;
	color: var(--secondary);
}

.faq__item summary::after {
	content: '';
	flex-shrink: 0;
	margin-left: auto;
	display: block;
	height: 24px;
	width: 24px;
	background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='38.5' height='38.5' rx='19.25' stroke='%23D5D4D6' stroke-width='1.5'/%3E%3Cpath d='M28.4202 19.5785L28.4202 20.5798L20.5006 20.5798L20.5006 28.4994L19.4994 28.4994L19.4994 20.5798L11.5798 20.5798L11.5798 19.5785L19.4994 19.5785L19.4994 11.6589L20.5006 11.6589L20.5006 19.5785L28.4202 19.5785Z' fill='%235F5F5F'/%3E%3C/svg%3E%0A") center / contain no-repeat;
	transition: all .2s ease-in-out;
}
.faq__item[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='38.5' height='38.5' rx='19.25' stroke='%23852876' stroke-width='1.5'/%3E%3Cpath d='M28.4202 19.5785L28.4202 20.5798L20.5006 20.5798L20.5006 28.4994L19.4994 28.4994L19.4994 20.5798L11.5798 20.5798L11.5798 19.5785L19.4994 19.5785L19.4994 11.6589L20.5006 11.6589L20.5006 19.5785L28.4202 19.5785Z' fill='%23852876'/%3E%3C/svg%3E%0A");
	transform: rotate(45deg);
}

.faq__answer {
	padding: 12px 0 0 40px;
}

.faq__answer p {
	margin: 0;
}

.faq__answer p:not(:last-child) {
	margin-bottom: 16px;
}

.faq__answer :is(ol, ul) {
	margin: 0 0 10px;
	padding: 0 0 0 1em;
}

.faq__answer ol li::marker {
	color: var(--purple);
}

@media (min-width: 768px) {
	.faq__item summary {
		align-items: center;
		font-size: 20px;
		line-height: 28px;
	}

	.faq__item summary::after {
		width: 30px;
		height: 30px;
	}

	.faq__answer :is(ol, ul) {
		margin-bottom: 20px;
	}

	.faq__answer p + p {
		margin-top: 18px;
	}
}

@media (min-width: 1200px) {
	.faq__list {
		max-width: 930px;
		margin-inline: auto;
	}

	.faq__item summary::after {
		width: 40px;
		height: 40px;
	}
}

/* —— CTA —— */

.section-cta {
	padding-block: 40px;
	margin-bottom: 60px;
	--bg: var(--light-blue);
	background: var(--bg) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="405" fill="none" viewBox="0 0 320 405"><g filter="url(%23a)"><path fill="%23009eb0" d="m280 392.303-56.547-98.106c-33.918 19.631-63.526 41.01-86.361 61.464 6.261-30.013 9.955-66.398 9.955-105.661H33.953c0 39.212 3.694 75.597 9.954 105.661-22.834-20.454-52.442-41.833-86.36-61.464L-99 392.303c33.918 19.632 67.22 34.587 96.315 44.197-29.095 9.559-62.397 24.565-96.315 44.197l56.547 98.106c33.918-19.631 63.526-41.01 86.36-61.464-6.26 30.013-9.954 66.398-9.954 105.661h113.094c0-39.212-3.694-75.597-9.955-105.661 22.835 20.454 52.443 41.833 86.361 61.464L280 480.697c-33.918-19.632-67.22-34.587-96.315-44.197 29.095-9.559 62.397-24.565 96.315-44.197"/></g><defs><filter id="a" width="879" height="873" x="-349" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6517_11454" stdDeviation="125"/></filter></defs></svg>') no-repeat bottom left / 100%;
}

.cta {
	display: flex;
	flex-direction: column-reverse;
	gap: 20px;
	align-items: center;
	text-align: center;
}

.cta__title {
	margin: 0 32px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.3;
}

.cta__title strong {
	color: var(--secondary);
}

.cta__text {
	margin-top: 8px;
}

.cta .button {
	width: auto;
	margin-top: 32px;
}

.cta__media {
	flex-grow: 1;
}

.cta__media img {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
}

@media (min-width: 992px) {
	.section-cta {
		padding: 0;
		margin-bottom: 100px;
		background: none;
	}

	.cta {
		flex-direction: row;
		gap: 52px;
		justify-content: center;
		align-items: center;
		padding: 40px;
		text-align: left;
		background: var(--bg) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="858" height="396" fill="none" viewBox="0 0 858 396"><g filter="url(%23a)"><path fill="%23009eb0" d="m358 270.778-82.21-142.557c-49.311 28.527-92.355 59.592-125.553 89.313C159.339 173.923 164.71 121.053 164.71 64H.29c0 56.978 5.371 109.849 14.473 153.534-33.198-29.721-76.242-60.786-125.553-89.313L-193 270.778c49.311 28.527 97.727 50.257 140.025 64.222-42.298 13.89-90.714 35.695-140.025 64.221l82.21 142.557c49.31-28.526 92.355-59.591 125.553-89.312C5.66 496.077.29 548.947.29 606h164.42c0-56.978-5.371-109.849-14.473-153.534 33.198 29.721 76.242 60.786 125.553 89.312L358 399.221c-49.311-28.526-97.727-50.257-140.025-64.221 42.298-13.89 90.714-35.695 140.025-64.222"/></g><defs><filter id="a" width="1551" height="1542" x="-693" y="-436" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_6394_14995" stdDeviation="250"/></filter></defs></svg>') no-repeat left bottom/100%;
		border-radius: 40px;
	}

	.cta__content {
		max-width: 606px;
	}

	.cta__title {
		margin: 0;
		font-size: 40px;
		letter-spacing: -.8px;
	}

	.cta__text {
		margin-top: 15px;
	}
}