/* ================================================
   RESET for old styles
   ================================================ */
#header, #header.scr {
	background: none;
	box-shadow: none;
	backdrop-filter: none;
	margin-bottom: -108px;

	.btn.btn-plain:hover, .btn.btn-plain:active {
		box-shadow: none;
		background: none;
	}
}
body.with_mob_menu {
	.intercom-launcher { display: none; }
	#header, #header.scr {
		margin-bottom: 0;
	}
}
#blocks {
	.block_svg {
		margin-top: 58px !important;

		.h1 {
			height: 300px;
		}
	}
	div[data-block] {
		padding-top: 88px;
	}
	div.block:not(.block_svg) .in {
		padding-top: 58px !important;
	}
}

svg {
	#whitetriangle {
		transform: translateY(38px);
	}
}

#step10 div.head, #step13 div.head {
	padding-top: 104px;
}

#step10 .alt {
	top: -288px;
}

#step12 .data {
	padding-top: 108px;
}

/* ================================================
   WS-ICON (common.css)
   ================================================ */

ws-icon {
	width: 20px;
	height: 20px;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* ================================================
   SECTION BASE (main.css)
   ================================================ */

.section {
	width: 100%;
	padding: 0 80px;
	box-sizing: border-box;
	position: relative;
}

.section.section-full-width {
	padding: 0;
	overflow: hidden;
}

/* ================================================
   SECTION HEADER (main.css)
   ================================================ */

:root {
	--site-header-push: 0px;
}

.section-header {
	z-index: 999;
	position: sticky;
	top: 0;
	transform: translateY(calc(-1 * var(--site-header-push)));
	will-change: transform;
}

/* ================================================
   HEADER (main.css)
   ================================================ */

.header {
	width: 100%;
	padding: 12px 0 28px 0;

	.header__container-wrap {
		width: 100%;
		display: flex;
		justify-content: center;
		transition: all 0.1s ease-out;
	}

	.header__container {
		padding: 16px;
		box-sizing: border-box;
		width: 100%;
		max-width: 1360px;
		border-radius: 48px;
		background: #ffffffcc;           /* --base-white-a-80 */
		box-shadow:
				0 0 0 1px #081c1626,          /* --base-greengrey-a-150 */
				0 2px 4px -2px #081c1626,
				0 6px 12px -2px #2636260f,    /* --base-greengrey-a-100 */
				0 12px 24px -2px #2636260f;   /* --special-header-shadow */
		backdrop-filter: blur(6px);
		display: flex;
		justify-content: space-between;
		position: relative;
		transition: all 0.3s cubic-bezier(0, 0, 0.05, 1);

		.header__left, .header__right {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
		}

		.header__left {
			.header__menu {
				display: flex;
				gap: 8px;
				padding-left: 28px;

				.menu__item {
					display: flex;
					align-items: center;

					a {
						display: inline-flex;
						padding: 6px 8px;
						text-decoration: none;
						border-radius: 20px;
						cursor: pointer;
						align-items: center;
						justify-content: center;

						span {
							color: #000000a8;    /* --text-base-secondary */
							font: normal normal 500 13px/18px "Inter", sans-serif; /* --font-body-med-xs */
							padding: 0 2px;
						}

						ws-icon svg { fill: #000000a8; } /* --base-txt-secondary */

						&:hover {
							background: #2636260f; /* --bg-surf-a-20 = --base-greengrey-a-100 */

							span { color: #000000ed; } /* --text-base-primary */
							ws-icon svg { fill: #000000ed; }
						}
					}

					&.has-menu-active a {
						background: #2636260f;

						span { color: #000000ed; }
						ws-icon svg { fill: #000000ed; }
					}
				}
			}
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 12px;
			position: relative;
			height: 36px;
			text-decoration: none !important;

			.brand__icon {
				width: 36px;
				height: 36px;

				svg {
					width: 36px;
					height: 36px;
				}
			}

			.brand__text {
				color: #000000ed;                        /* --text-base-primary */
				font-feature-settings: 'calt' off;
				font-family: "Work Sans", sans-serif;    /* --font-family-brand-logo */
				font-size: 20px;
				font-style: normal;
				font-weight: 600;
				line-height: 24px;
			}

			.brand__badge {
				position: absolute;
				top: -4px;
				right: -40px;
				padding: 4px 6px;
				border-radius: 24px;
				background: #081c1626;   /* --base-greengrey-a-150 */
				border: 1px solid #2636260f; /* --base-greengrey-a-100 */
				font-family: "Work Sans", sans-serif;
				color: #000000ed;
				font-size: 11px;
				font-style: normal;
				font-weight: 600;
				line-height: 12px;
				display: none;
				justify-content: center;
				align-items: center;
			}
		}

		button {
			border-radius: 50px;
		}
	}
}

#header.scr {
	.header__container {
		max-width: 1024px;

		.header__left {
			.header__menu {
				padding-left: 8px;
				gap: 2px;
				margin-left: 0;
			}
		}
	}
}

/* ================================================
   BUTTONS (buttons.css) — variants used in header
   ================================================ */

.btn {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	cursor: pointer;
	text-decoration: none;

	span { white-space: nowrap; }

	&.btn-32 {
		padding: 6px 8px;
		border-radius: 10px;
		height: 32px;

		ws-icon svg { width: 16px; height: 16px; }

		span {
			font: normal normal 600 13px/18px "Inter", sans-serif; /* --font-body-semi-xs */
			padding: 0 4px;
		}

		&.btn-square { width: 32px; }
	}

	&.btn-36 {
		padding: 6px 8px;
		border-radius: 10px;
		height: 32px;

		ws-icon svg { width: 16px; height: 16px; }

		span {
			font: normal normal 600 13px/18px "Inter", sans-serif;
			padding: 0 4px;
		}

		&.btn-square { width: 36px; }
	}

	&.btn-plain {
		color: #000000a8;    /* --text-base-secondary */
		background: #ffffff00; /* --base-white-a-0 */

		ws-icon svg { fill: #000000a8; }

		&:hover {
			color: #000000ed;   /* --text-base-primary */
			ws-icon svg { fill: #000000ed; }
		}
	}

	&.btn-accent {
		color: #2a2d0c;      /* --button-accent-text = --color-lime-950 */
		background: #eef95a; /* --button-accent-surf-default = --color-lime-400 */
		box-shadow:
				0 3px 1px -1px #ffffff80 inset,   /* --base-white-a-50 */
				0 -8px 28px 4px #081c1626 inset,  /* --base-greengrey-a-150 */
				0 0 0 1px #99a428,                /* --button-accent-outline = --color-lime-700 */
				0 1px 2px -0.5px #081c1626,
				0 3px 4px -1.5px #081c1626,
				0 8px 10px -4px #2636260f;        /* --base-greengrey-a-100 */

		ws-icon svg { fill: #2a2d0c; }

		&:hover {
			background: #e6f23d; /* --button-accent-surf-hover = --color-lime-500 */
			box-shadow:
					0 0 0 1.5px #c6d131,         /* --button-accent-surf-press = --color-lime-600 */
					0 1px 2px -0.5px #081c1626,
					0 3px 4px -1.5px #081c1626,
					0 8px 10px -4px #2636260f;
		}

		&:active {
			background: #c6d131;
			box-shadow: 0 0 0 1.5px #c6d131;
		}
	}

	&.btn-primary {
		color: #ffffff;      /* --text-base-invert-primary */
		background: #1e201f; /* --base-greengrey-990 */
		box-shadow:
				0 0 0 1px #303332,      /* --base-greengrey-950 */
				0 2px 2px -1px #001a0a33, /* --base-greengrey-a-200 */
				0 4px 4px -2px #001a0a33,
				0 6px 8px -3px #081c1626; /* --base-greengrey-a-150 */

		ws-icon svg { fill: #ffffff; }

		&:hover {
			background: #474b49;   /* --base-greengrey-900 */
			box-shadow:
					0 0 0 1px #474b49,
					0 2px 2px -1px #001a0a33,
					0 4px 4px -2px #001a0a33,
					0 6px 8px -3px #081c1626;
		}

		&:active {
			background: #5d625f;   /* --base-greengrey-800 */
			box-shadow: 0 0 0 1px #5d625f;
		}
	}

	&.btn-secondary {
		color: #000000ed;      /* --text-base-primary */
		background: #2636260f; /* --base-greengrey-a-100 */
		box-shadow: 0 0 0 1px #081c1626; /* --border-mid-high */

		ws-icon svg { fill: #000000ed; }

		&:hover {
			background: #081c1626;
			box-shadow: 0 0 0 1px #081c1626;
		}

		&:active {
			background: #001a0a33; /* --base-greengrey-a-200 */
			box-shadow: 0 0 0 1px #001a0a33;
		}
	}

	&.btn-ghost, &[disabled] {
		color: #0a0a0a33;      /* --text-base-ghost = --base-neutral-a-400 */
		background: #2636260f;
		box-shadow: 0 0 0 1px #2636260f;
		ws-icon svg { fill: #0a0a0a33; }
		pointer-events: none;
	}
}

a.btn {
	display: inline-flex;
}

.btn-special {
	text-decoration: none;

	&.btn-lang {
		span { padding: 0; }
	}
}

/* ================================================
   MENU DROPDOWN (menu.css)
   ================================================ */

#menuContainer {
	position: absolute;
	left: 0;
	top: 0;
}

.menu {
	--menu-width: 240px;

	&:has(.menu__group-2col) {
		--menu-width: 480px;
	}

	width: var(--menu-width);
	display: none;

	border-radius: 12px;
	background: #ffffff; /* --base-white-solid */
	box-shadow:
			0 0 0 1px #081c1626,
			0 2px 4px -2px #081c1626,
			0 4px 12px -4px #2636260f,
			0 6px 16px -4px #2636260f,
			0 8px 28px -4px #2636260f,
			0 8px 32px -4px #2636260f; /* --shadow-menu-mid */
	position: absolute;
	z-index: 1000;
	overflow: hidden;

	.menu__group {
		display: flex;
		flex-direction: column;
		width: 100%;

		.menu__item {
			padding: 10px 8px;
			display: flex;
			align-items: center;
			gap: 12px;
			cursor: pointer;

			&:first-child { padding: 14px 8px 10px; }
			&:last-child  { padding: 10px 8px 14px; }

			span, a {
				font: normal normal 400 15px/20px "Inter", sans-serif; /* --font-body-reg-sm */
				color: #000000ed; /* --base-txt-primary */
				text-decoration: none;
			}

			span.menu__item__lang {
				font: normal normal 600 13px/18px "Inter", sans-serif; /* --font-body-semi-xs */
				padding: 0 10px;
				border-right: 1px solid #2636260f; /* --border-high */
				color: #000000ed;
				min-width: 20px;
				text-align: center;
			}

			.in { flex-grow: 1; padding: 2px 0; }
			> .in { padding: 2px 12px; }

			ws-icon svg { fill: #000000ed; }
			ws-icon:last-child { margin-right: 4px; }

			&:hover { background: #2636260f; }

			&.menu__item-active {
				background: #2636260f;
				pointer-events: none;
				cursor: auto;
			}
		}

		&.menu__group-2col {
			display: grid;
			grid-template-columns: 1fr 1fr;

			.menu__item {
				&:first-child { padding: 14px 8px 10px; }
				&:last-child  { padding: 10px 8px 14px; }

				&.menu__item-lastodd {
					grid-column: 1 / -1;
				}
			}
		}
	}
}

/* ================================================
   MOBILE MENU BUTTON
   ================================================ */

#mobMenu ws-icon:last-child {
	display: none;
}

/* ================================================
   MOBILE MENU (main.css)
   ================================================ */

.mobile__menu {
	display: none;
	background: #ffffff;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 990;
	padding-top: 94px;

	.mobile__menu-wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow-x: scroll;

		.mobile__menu-container {
			padding: 12px 36px 32px 36px;

			.mobile__menu__group-top {
				.mobile__menu__group-title {
					color: #05050580; /* --text-base-tertiatry */
					font: normal normal 700 13px/18px "Inter", sans-serif; /* --font-body-bold-xs */
					padding-bottom: 13px;
				}

				.mobile__menu__item {
					&:not(:last-child) { padding-bottom: 20px; }

					a {
						color: #000000ed;
						font: normal normal 400 18px/24px "Inter", sans-serif; /* --font-body-reg-lg */
						text-decoration: none;
					}
				}
			}

			.mobile__menu__group {
				padding: 12px 0;

				.mobile__menu__group-sub {
					padding: 12px 0;
					width: 100%;
					overflow: hidden;
					position: relative;

					a {
						display: flex;
						width: 100%;
						justify-content: space-between;
						align-items: center;
						text-decoration: none;

						span {
							color: #000000ed;
							font: normal normal 500 18px/24px "Inter", sans-serif; /* --font-body-med-lg */
						}
					}

					.mobile__menu__group-body {
						display: none;
						position: absolute;
						top: 0;
						bottom: 0;
						width: 100%;
						right: -9px;

						&.item1 {
							display: inline-flex;
							flex-direction: column;
						}
					}
				}
			}

			&+.mobile__menu-container {
				padding: 12px 36px;
				border-top: 1px solid #081c1626;    /* --border-mid-high */
				border-bottom: 1px solid #081c1626;
			}

			&:last-child {
				padding-bottom: 60px;
			}
		}

		.mobile__menu__item-disabled, .mobile__menu__sub-disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}

	.mobile__menu__footer {
		padding: 12px 36px;
		display: flex;
		gap: 8px;
		position: sticky;
		bottom: 0;
		background: #ffffff;
	}
}

.flex_gap { flex: 1 1 0; }

/* ================================================
   ADAPTIVE (adaptive.css)
   ================================================ */

@media screen and (min-width: 1240px) {
	.mobile-only, .menu__group-mobileHeader {
		display: none !important;
	}
}

@media screen and (max-width: 1360px) {
	.header__container-wrap {
		max-width: calc(100% - 80px);
		margin: 0 auto;
	}
}

@media screen and (max-width: 1240px) {
	.header__container-wrap {
		max-width: 566px;
		margin: 0 auto;

		.header__left {
			.header__menu { display: none; }
		}

		.header__right {
			.btn:not(.mobile-only) { display: none; }
		}
	}

	.mobile-only { display: inline-block; }

	.header {
		.header__container {
			.header__left {
				.header__menu { display: none; }
			}
		}
	}

	.menu {
		.menu__group {
			&.menu__group-2col {
				display: flex;
				flex-direction: column;
			}
		}
	}

	body.with_mob_menu {
		overflow-y: hidden;

		.header {
			box-shadow: 0 1px 0 0 #081c1626;
			background: #ffffff;
			padding-bottom: 0;
			margin-bottom: 28px;

			.header__container-wrap {
				.header__container {
					transition: none;
					background: none;
					border-radius: 0;
					box-shadow: none;
					backdrop-filter: none;
				}
			}
		}

		#mobMenu ws-icon {
			&:first-child { display: none; }
			&:last-child  { display: inline-block; }
		}

		.mobile__menu {
			display: block;
		}

		.mobile-open {
			display: block;
			width: 100vw;
			height: calc(100vh - 154px);
			border-radius: 0;
			border: 0;
			box-shadow: 0 1px 0 0 #081c1626;
			top: 94px;
			left: 100vw;
			animation: slide-in 0.3s ease forwards;
			position: fixed;

			.menu__group-mobileHeader {
				display: flex;
				gap: 10px;
				color: #000000ed;
				font: normal normal 500 18px/24px "Inter", sans-serif; /* --font-body-med-lg */
				align-items: center;
				padding: 32px 0 0 32px;
				width: 100%;
				box-sizing: border-box;
			}

			.menu__group {
				padding: 12px 32px;
				overflow-y: auto;
				max-height: 100%;

				.menu__item {
					margin-left: 10px;

					span, a {
						font: normal normal 400 16px/20px "Inter", sans-serif; /* --font-body-reg-md */
					}

					&:last-child {
						margin-bottom: 160px;
					}
				}
			}
		}

		.mobile-closing {
			animation: slide-out 0.3s ease forwards;
		}
	}

	@keyframes slide-in {
		from { left: 100vw; }
		to   { left: 0; }
	}

	@keyframes slide-out {
		from { left: 0; }
		to   { left: 100vw; }
	}
}

@media screen and (max-width: 620px) {
	.header { padding: 10px 0 28px 0; }

	.header__container-wrap {
		max-width: calc(100% - 40px);
		margin: 0 auto;

		.header__left {
			.brand {
				.brand__badge { display: none; }
			}
			.header__menu { display: none; }
		}
	}
}

@media screen and (max-width: 380px) {
	.header__left {
		.brand {
			transform: scale(0.8);
			transform-origin: left center;
		}
	}

	.header__container-wrap {
		max-width: calc(100% - 40px);
	}
}