/* ==========================================
   SECTION 1 — ЗАГАЛЬНІ СТИЛІ
   ========================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

:root {
	--color-black: #000000;
	--color-white: #ffffff;
	--color-text-gray: #4c4c4c;
	--color-text-light: #858585;
	--color-text-muted: #8c8c8c;
	--color-text-breadcrumb: rgba(0,0,0,0.7);
	--color-border-light: #d7d7d7;
	--color-border-action: #d2d2d2;
	--color-border-filter: #a4a2a2;
	--color-tab-bg: #dbdbdb;
	--color-skeleton-line: #e0dede;
	--color-skeleton-image: #ececec;
	--color-skeleton-btn: #8b8b8b;
	--color-gradient: #f3f3f3;
	--color-arrow-btn: #7b7b7b;
	--color-app-icon: #020202;
	--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	min-height: 100vh;
	font-family: var(--font-main);
	color: var(--color-black);
	-webkit-font-smoothing: antialiased;
}
ul {
	list-style: none;
}
img{
	max-width: 100%;
	height: 100%;
}

.site-container {
	padding-top: 88px;
}

.container {
	max-width: 100%;
	width: 1280px;
	margin: 0 auto;
	/* margin: 0 70px; */
}

/* =====================
   HEADER
   ===================== */
.site-header {
	position: fixed !important;
	inset: 0 0 auto;
	background: var(--color-white);
	position: relative;
	z-index: 1001;
}

.site-header__inner {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 20px 70px;
}
.site-header__touch{
	display: none;
}
.site-header__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--color-black);
	flex-shrink: 0;
}
.site-header__logo img,
.site-header__logo svg{
	width: auto;
	max-height: 30px;
}
.site-header__nav {
	display: flex;
	align-items: center;
	margin-left: 56px;
	flex-shrink: 0;
}
.site-header__nav ul{
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
}
.site-header__nav ul a {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #adadad;
	text-decoration: none;
	position: relative;
	padding: 0;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.site-header__nav ul a:hover{
	color: var(--color-black);
}
.site-header__nav ul li.current-menu-item a {
	display: inline-block;
	position: relative;
	font-weight: 700;
}

.site-header__nav ul li.current-menu-item a:before {
	content: '';
	display: block;
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-black);
}

.site-header__search {
	margin-left: 40px;
	flex: 0 0 555px;
}

.site-header__search-trigger{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	border: none;
	background: #f0f0f0;
	border-radius: 100px;
	padding: 0 20px;
	letter-spacing: .2px;
	font-weight: 500;
    font-size: 16px;
    line-height: 22px;
	color: #adadad;
	text-align: left;
	cursor: pointer;
}
.site-header__search-trigger svg{
	margin-top: 2px;
	flex-shrink: 0;
}
.site-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.site-header__saved{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	gap: 10px;
	padding: 0 14px;
	border: 1px solid hsl(0 0% 8%);
	border-radius: 40px;
	background: hsl(0 0% 8%);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #FFF;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.site-header__saved:hover{
	background: hsl(0 0% 15%);
}
.site-header__saved svg{
	fill: #FFF;
	margin-top: 2px;
	flex-shrink: 0;
}
.site-header__avatar {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}
.site-header__avatar img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* =====================
   FOOTER
   ===================== */
.site-footer {
	display: none;
}

/* =====================
   BREADCRUMB
   ===================== */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0;
	height: 20px;
}

.breadcrumb__home-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: var(--color-text-breadcrumb);
}

.breadcrumb__path {
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-text-breadcrumb);
	white-space: nowrap;
}

.breadcrumb__path_gray {
	color: #787878;
}

/* =====================
   PAGE TITLE
   ===================== */
.title-desktop-h1 {
	font-size: 46px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-black);
}

/* =====================
   FILTER BAR
   ===================== */
.filterbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.filterbar-toggle {
	display: none;
}
.filterbar__mobile-head {
	display: none;
}
.filterbar__left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.filterbar__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.tabs-group {
	max-width: 100%;
	display: flex;
	align-items: center;
	background: #f0f0f0;
	border-radius: 20px;
	height: 40px;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}


.tabs-group__btn {
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-black);
	background: transparent;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	min-width: 70px;
	height: 40px;
	box-sizing: border-box;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.tabs-group_catalog {
	display: inline-flex;
}

.tabs-group__pill {
	position: absolute;
	top: 3px;
	height: 34px;
	background: var(--color-white);
	border-radius: 17px;
	transition: left 0.2s ease, width 0.2s ease;
	pointer-events: none;
}

/* =====================
   TAB PANELS
   ===================== */
.tab-panel {
	display: none;
}

.tab-panel_active {
	display: block;
}

.filter-dropdown {
	min-width: 155px;
	border: 1px solid var(--color-border-filter);
	border-radius: 30px;
	background: var(--color-white);
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
}

.filter-dropdown__label {
	box-sizing: border-box;
	height: 40px;
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-black);
	white-space: nowrap;
	user-select: none;
}

.filter-dropdown__chevron {
	width: 14px;
	height: 7px;
	flex-shrink: 0;
	stroke: var(--color-black);
	fill: none;
}

.filter-dropdown__list{
	display: none;
	min-width: 100%;
	position: absolute;
	inset: calc(100% + 7px) auto auto 0;
	background: #FFF;
	padding: 17px 12px;
	border: 1px solid var(--color-border-filter);
	border-radius: 12px;
	z-index: 3;
	white-space: nowrap;
}
.filter-dropdown__label svg{
	transform: rotate(90deg) translateX(1px);
}
.filter-dropdown.show .filter-dropdown__label svg{
	transform: rotate(-90deg) translateX(1px);
}
.filter-dropdown.show .filter-dropdown__list{
	display: block;
}
.filter-dropdown__list ul{
	list-style: none;
	margin: 0;
}
.filter-dropdown__list ul li:not(:last-child){
	margin-bottom: 16px;
}
.filter-dropdown__group:not(:last-child){
	margin-bottom: 16px;
}
.filter-dropdown__group-label{
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 17px;
	color: #919090;
	margin-bottom: 16px;
}
.filter-dropdown__sublabel{
	display: block;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: #5b5b5b;
	margin: 0 0 12px 12px;
}
.filter-dropdown__subgroup > ul{
	padding-left: 12px;
}

.filterbar__count {
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--color-text-light);
	white-space: nowrap;
	text-align: right;
}

.filterbar__divider {
	width: 1px;
	height: 42px;
	background: var(--color-border-light);
	flex-shrink: 0;
}

.filterbar__sort {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 36px;
}

.filterbar__sort-label {
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.filterbar__sort-value {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px;
	width: 135px;
}

.filterbar__sort-text {
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-black);
	white-space: nowrap;
}

.filterbar__sort-value svg{
	transform: rotate(90deg);
	flex-shrink: 0;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid var(--color-border-action);
	border-radius: 26px;
	padding: 10px 20px;
	gap: 5px;
	cursor: pointer;
	font-family: var(--font-main);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.165px;
	color: #040404;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.button:hover {
	background: #f2f2f2;
}
.button_white {
	background: var(--color-white);
}
.button_dark {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}
.button_dark:hover {
	background: #2a2a2a;
}
.button_dark svg{
	fill: var(--color-white);
}
.button_icon {
	background: var(--color-white);
	border-radius: 26px;
	width: 44px;
	height: 44px;
	padding: 10px;
}
.button_icon .button__icon {
	width: 24px;
	height: 24px;
	fill: var(--color-black);
}

.button_icon-sm .button__icon {
	width: 20px;
	height: 20px;
	fill: var(--color-black);
}

label.checkbox span{
	position: relative;
	display: inline-block;
	padding-left: 30px;
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	color: #373737;
}
label.checkbox input{
	width: 1px;
	height: 1px;
	position: absolute;
	opacity: 0;
}
label.checkbox span:before{
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid #9B9B9B;
	border-radius: 4px;
	position: absolute;
	top: 0;
	left: 0;
}
label.checkbox input:checked + span:before{
	background: var(--color-black) url('data:image/svg+xml,<svg fill="%23FFFFFF" viewBox="-3.5 0 19 19" xmlns="http://www.w3.org/2000/svg"><path d="M4.63 15.638a1.028 1.028 0 0 1-.79-.37L.36 11.09a1.03 1.03 0 1 1 1.58-1.316l2.535 3.043L9.958 3.32a1.029 1.029 0 0 1 1.783 1.03L5.52 15.122a1.03 1.03 0 0 1-.803.511.89.89 0 0 1-.088.004z"/></svg>') center center no-repeat;
	border-color: var(--color-black);
}

/* =====================
   FILTER BAR (shared: app type tabs & CJM section tabs)
   ===================== */
.filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* border-bottom: 2px solid #dbdbdb;
	height: 32px; */
}

.filter-bar__tabs {
	display: flex;
	align-items: center;
	gap: 34px;
	/* height: 32px; */
}

.filter-bar__tab {
	position: relative;
	/* height: 32px; */
	display: flex;
	align-items: center;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.198px;
	color: #adadad;
	white-space: nowrap;
	transition: 0.3s color;
}

.filter-bar__tab_active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #292929;
	z-index: 1;
}
.filter-bar__tab:hover,
.filter-bar__tab_active{
	color: #292929;
}
/* =====================
   VERSION BOX (shared: app & site version picker)
   ===================== */
.version-box {
	display: flex;
	align-items: center;
	gap: 16px;
}

.version-box__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #eaeaea;
	border-radius: 40px;
	background: #FFF;
	padding: 4px 12px;
	position: relative;
	cursor: pointer;
	user-select: none;
}

.version-box__badge-text {
	font-size: 14px;
	font-weight: 500;
	color: #232323;
	letter-spacing: -0.154px;
	line-height: 1.5;
	white-space: nowrap;
}

.version-box__badge > svg{
	transform: rotate(90deg);
}

.version-box__badge_open > svg{
	transform: rotate(-90deg);
}

.version-box__history-icon {
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
	fill: var(--color-black);
	cursor: pointer;
}

.version-box__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: var(--color-white);
	box-shadow: 0px 4px 7.4px 2px rgba(0, 0, 0, 0.19);
	border-radius: 12px;
	padding: 20px 0 15px;
	min-width: 220px;
	z-index: 10;
	white-space: nowrap;
}

.version-box__badge_open .version-box__dropdown {
	display: block;
}

.version-box__option {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	padding: 0 22px 0 11px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	letter-spacing: -0.176px;
	line-height: 1.5;
	cursor: pointer;
}

.version-box__option + .version-box__option {
	margin-top: 20px;
}

.version-box__option_active {
	color: #000;
	pointer-events: none;
}
.version-box__check {
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	visibility: hidden;
}

.version-box__option_active .version-box__check {
	visibility: visible;
}

.version-box__divider {
	height: 1px;
	background: #eaeaea;
	margin: 13px 0 0;
}

.version-box__request {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 22px 0 11px;
	margin-top: 11px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	letter-spacing: -0.176px;
	line-height: 1.5;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}

.version-box__request svg {
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
}

/* Search Popup */
.search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.07);
	z-index: 1005;
}
.search-overlay_active {
	display: block;
}

.search-popup {
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 955px;
	height: 537px;
	padding: 16px;
	max-width: calc(100vw - 40px);
	background: var(--color-white);
	border-radius: 30px;
	box-shadow: 0px 8px 14.2px 7px rgba(0,0,0,0.14);
	overflow: hidden;
}
.search-popup__input{
	margin: 0 65px 17px 0;
}

.search-popup__input input {
	width: 100%;
	height: 40px;
	padding: 0 20px;
	border: 1px solid #D7D7D7;
	border-radius: 100px;
	background: transparent;
	font-family: var(--font-main);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.154px;
	color: var(--color-text-gray);
	outline: none;
}
.search-popup__close {
	position: absolute;
	top: 24px;
	right: 20px;
	width: 16px;
	height: 16px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-black);
}
.search-popup__close svg {
	color: var(--color-black);
}
.search-popup__container{
	gap: 37px;
	display: flex;
}
.search-popup__sidebar {
	width: 214px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.search-popup__select {
	display: none;
}

.search-popup__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px;
	width: 214px;
	height: 48px;
	border-radius: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
	text-align: left;
	flex-shrink: 0;
}
.search-popup__tab_active {
	background: #f0f0f0;
}
.search-popup__tab > svg{
	fill: #666666;
}
.search-popup__content {
	width: calc(100% - 214px - 37px);
	max-height: calc(537px - 24px - 40px - 17px);
	overflow-y: auto;
}

.search-popup__panel {
	display: none;
	padding: 0 0 24px;
}
.search-popup__panel_active {
	display: block;
}
.search-popup__panel .tabs-group{
	display: inline-flex;
	margin-bottom: 20px;
}

.search-section {
	margin-bottom: 27px;
}
.search-section:last-child {
	margin-bottom: 0;
}
.search-section__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.154px;
	color: #878787;
	margin-bottom: 16px;
}

.search-apps {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.search-app-chip {
	width: 56px;
	height: 56px;
	background: #d5d3d3;
	border-radius: 8px;
	flex-shrink: 0;
}

.search-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}
.search-tag {
	display: flex;
	align-items: center;
	gap: 11px;
	height: 52px;
	padding: 0 14px;
	border: 1px solid #cccccc;
	border-radius: 8px;
	flex-shrink: 0;
	text-decoration: none;
}
.search-tag__dot {
	width: 16px;
	height: 16px;
	background: #d9d9d9;
	border-radius: 50%;
	flex-shrink: 0;
}
.search-tag__dot_lg {
	width: 20px;
	height: 20px;
}
.search-tag__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #424141;
	white-space: nowrap;
}

.search-group {
	margin-bottom: 20px;
}
.search-group__label_l1 ~ .search-group{
	padding-left: 20px;
}
.search-group:last-child {
	margin-bottom: 0;
}
.search-group__label {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #818181;
	margin-bottom: 10px;
}

.search-list {
	display: flex;
	flex-direction: column;
}
.search-group:not(:last-child){
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #f0f0f0;
}
.search-group__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	text-decoration: none;
}
.search-group__name {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
}
.search-group__count {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #818181;
}

.search-bank-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.search-bank-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 75px;
	padding: 0 16px;
	border: 1px solid #dbdbdb;
	border-radius: 12px;
	text-decoration: none;
	gap: 10px;
}
.search-bank-item__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.search-bank-item__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.198px;
	color: var(--color-black);
}
.search-bank-item__stats {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #818181;
}
.search-bank-item > svg {
	fill: #888888;
}

/* Simple popups */
.simple-popup {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 3000;
	align-items: center;
	justify-content: center;
}
.simple-popup_active {
	display: flex;
}
.simple-popup__panel {
	background: #fff;
	border-radius: 20px;
	width: 432px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.simple-popup__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.simple-popup__title {
	font-size: 18px;
	font-weight: 600;
	color: #000;
	letter-spacing: -0.198px;
	line-height: 1.5;
}
.simple-popup__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: -8px -8px 0 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #000;
}
.simple-popup__close svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}
.simple-popup__desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.6);
	letter-spacing: -0.154px;
}
.simple-popup__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.simple-popup__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.simple-popup__label {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	letter-spacing: -0.154px;
	line-height: 1.5;
}
.simple-popup__input,
.simple-popup__textarea {
	width: 100%;
	border: 1px solid #c0c0c0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
	color: #000;
	padding: 9px;
	font-family: inherit;
	letter-spacing: -0.154px;
	line-height: 1.5;
	resize: none;
	outline: none;
	box-sizing: border-box;
}
.simple-popup__input {
	height: 40px;
}
.simple-popup__textarea {
	height: 89px;
}
.simple-popup__input::placeholder,
.simple-popup__textarea::placeholder {
	color: #989898;
	font-weight: 400;
}
.simple-popup__radios {
	display: flex;
	align-items: center;
	gap: 21px;
}
.simple-popup__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #373737;
	line-height: normal;
}
.simple-popup__radio input[type="radio"] {
	display: none;
}
.simple-popup__radio-mark {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #636363;
	position: relative;
}
.simple-popup__radio input:checked + .simple-popup__radio-mark::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #636363;
}
.simple-popup__submit {
	width: 100%;
	height: 40px;
	background: #000;
	color: #fff;
	border-radius: 26px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.165px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	margin-top: 37px;
}

/* History modal */
.history-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1100;
	align-items: center;
	justify-content: center;
}
.history-modal_active {
	display: flex;
}
.history-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 940px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 50px);
	background: #fff;
	border-radius: 30px;
	overflow: hidden;
	flex-shrink: 0;
}
.history-modal__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-bottom: 1px solid #eaeaea;
	flex-shrink: 0;
}
.history-modal__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
}
.history-modal__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.history-modal__titles {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.history-modal__name {
	font-size: 16px;
	font-weight: 600;
	color: #000;
	line-height: 1.4;
}
.history-modal__sub {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.5);
	line-height: 1.4;
}
.history-modal__close {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #000;
}
.history-modal__close svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}
.history-modal__body {
	display: flex;
	flex: 1;
	overflow: hidden;
}

/* Sidebar */
.history-modal__sidebar {
	width: 285px;
	flex-shrink: 0;
	padding: 20px 12px;
	overflow-y: auto;
	border-right: 1px solid #eaeaea;
}
.history-modal__year-group + .history-modal__year-group {
	margin-top: 16px;
}
.history-modal__year {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.4);
	padding: 0 8px;
	margin-bottom: 4px;
}
.history-modal__sidebar-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 14px;
	color: #232323;
	cursor: pointer;
	line-height: 1.4;
}
.history-modal__sidebar-item:hover {
	background: #f5f5f5;
}
.history-modal__sidebar-item_active {
	font-weight: 600;
}
.history-modal__latest-tag {
	font-weight: 400;
	color: rgba(0, 0, 0, 0.45);
	font-size: 13px;
	white-space: nowrap;
}

/* Main content */
.history-modal__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.history-modal__search-wrap {
	padding: 16px 24px 0;
	flex-shrink: 0;
}
.history-modal__search {
	width: 100%;
	height: 40px;
	border: 1px solid #d7d7d7;
	border-radius: 20px;
	padding: 0 16px;
	font-size: 14px;
	color: #000;
	font-family: inherit;
	outline: none;
	box-sizing: border-box;
}
.history-modal__search::placeholder {
	color: #aaa;
}
.history-modal__scroll {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px 32px;
}
.history-modal__section {
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid #eaeaea;
}
.history-modal__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
.history-modal__version-title {
	font-size: 22px;
	font-weight: 600;
	color: #000;
	margin: 0 0 16px;
}
.history-modal__changes {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 16px;
}
.history-modal__change-title {
	font-size: 15px;
	font-weight: 600;
	color: #000;
	margin: 0 0 4px;
}
.history-modal__change-text {
	font-size: 14px;
	color: #232323;
	line-height: 1.5;
	margin: 0;
}
.history-modal__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.history-modal__btn-view {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border: 1px solid #d7d7d7;
	border-radius: 20px;
	background: none;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.history-modal__btn-view:hover {
	border-color: #aaa;
}
.history-modal__btn-review {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.65);
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.history-modal__btn-review svg {
	flex-shrink: 0;
	fill: currentColor;
}
.history-modal__review {
	display: none;
	margin-top: 16px;
	background: #f5f5f5;
	border-radius: 12px;
	padding: 14px 16px;
	flex-direction: column;
	gap: 10px;
}
.history-modal__review.show {
	display: flex;
}
.history-modal__review-header {
	display: flex;
	align-items: center;
	gap: 8px;
}
.history-modal__review-header svg {
	flex-shrink: 0;
	fill: currentColor;
	color: rgba(0, 0, 0, 0.6);
}
.history-modal__review-label {
	font-size: 14px;
	font-weight: 600;
	color: #000;
}
.history-modal__review-text {
	font-size: 14px;
	color: #232323;
	line-height: 1.5;
	margin: 0;
}
.history-modal__review .history-modal__btn-view {
	align-self: flex-start;
	margin-top: 4px;
}

/* Bookmarks page */
.bookmarks-page { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.bookmarks-page__title { margin-bottom: 32px; }
.bookmarks-page__empty { color: #888; }
.bookmarks-page__section { margin-bottom: 48px; }
.bookmarks-page__section-title { margin-bottom: 16px; }
.bookmarks-page__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bookmarks-page__list-item { display: flex; align-items: center; gap: 12px; }
.bookmarks-page__list-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.bookmarks-page__screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bookmarks-page__screen-item img { width: 100%; border-radius: 8px; display: block; }

.success-copy,
.success-favoriteadd,
.success-favoriteremove{
	display: inline-flex;
	align-items: center;
	padding: 24px 38px;
	background: var(--color-black);
	font-size: 14px;
	font-weight: 400;
	color: var(--color-white);
	letter-spacing: -0.154px;
	line-height: 1.5;
	position: fixed;
	bottom: 10px;
	right: 10px;
	transform: translateX(300px);
	transition: all 0.3s ease;
	z-index: 2200;
}
.success-copy.show,
.success-favoriteadd.show,
.success-favoriteremove.show{
	transform: translateX(0px);
}


/* ==========================================
   SECTION 2 — СТИЛІ ДЛЯ ШАБЛОНІВ /parts/
   ========================================== */

.bank-item {
	width: calc((100% - 48px) / 3);
	height: 353px;
	background: #f0f0f0;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	text-decoration: none;
	display: block;
}

.bank-item__cover {
	width: 100%;
	height: 206px;
	background: #d5d5d5;
}

.bank-item__cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bank-item__cover_mono    { background: #d5d5d5; }
.bank-item__cover_privat  { background: #d9e7cb; }
.bank-item__cover_pumbl   { background: #fdf6f6; }
.bank-item__cover_raiff   { background: #e9e6cc; }
.bank-item__cover_sense   { background: #cbd7e7; }
.bank-item__cover_abank   { background: #e6f3e0; }
.bank-item__cover_oscad   { background: #98c4a9; }
.bank-item__cover_ukrsib  { background: #e7e7cb; }
.bank-item__cover_novapay { background: #dbcbe7; }

.bank-item__info {
	position: absolute;
	left: 19px;
	top: 222px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bank-item__name {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.242px;
	color: var(--color-black);
}

.bank-item__apps {
	display: flex;
	align-items: center;
	gap: 20px;
}

.bank-item__app {
	width: 56px;
	height: 56px;
	background: #d5d3d3;
	border-radius: 8px;
	flex-shrink: 0;
}
.bank-item__app img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* =====================
   FLOW CARD
   ===================== */

.flow-card__icon {
	width: 56px;
	height: 56px;
	background: var(--color-app-icon);
	border-radius: 8px;
	flex-shrink: 0;
}
.flow-card__icon img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}
.flow-card__titles {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.flow-card__bank {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.198px;
	color: var(--color-black);
	white-space: nowrap;
}
.flow-card__bank a{
	color: #000;
	text-decoration: none;
}
/* =====================
   FLOW CARD — base styles
   ===================== */
.flow-cards {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.flow-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flow-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flow-card__title-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.flow-card__name {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-black);
	letter-spacing: -0.264px;
	line-height: 1.2;
	white-space: nowrap;
}

.flow-card__ci {
	display: flex;
	align-items: center;
	gap: 8px;
}

.flow-card__ci-divider {
	width: 1px;
	height: 30px;
	background: var(--color-border-light);
	flex-shrink: 0;
	margin: 0 5px;
}

.flow-card__ci-text {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-black);
	white-space: nowrap;
	line-height: normal;
}

.flow-card__ci-icon {
	display: block;
	stroke: var(--color-black);
	fill: none;
	flex-shrink: 0;
	width: 9px;
	height: 6px;
}

.flow-card__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

/* Slider section */
.flow-card__slides-outer {
	position: relative;
	overflow: hidden;
}
.flow-card_catalog .flow-card__slides-outer {
	margin-top: 24px;
}

.flow-card__swiper.swiper {
	overflow: visible;
}

.flow-card__swiper .swiper-wrapper {
	align-items: flex-start;
}

.flow-card__slide {
	width: 243px !important;
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
}

.flow-card__slide > span{
	display: block;
	position: relative;
	padding-top: 220%;
}
.flow-card__slide > span img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	border: 1px solid var(--color-border-light);
	border-radius: 29px;
}
.flow-card__nav-btn {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-arrow-btn);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	opacity: 0;
	transition: background 0.2s ease;
}
.flow-card:hover .flow-card__nav-btn{
	opacity: 0.5;
}
.flow-card__nav-btn:hover {
	opacity: 1;
	background: #6b6b6b;
}

.flow-card__nav-btn svg {
	fill: #FFF;
}

/* Doc link inside PDF slide */
.flow-card__slide_pdf {
	overflow: visible;
}
.flow-card__doc-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 32px;
	height: 32px;
	left: 16px;
	top: 16px;
	background: #F4F4F4;
	border: 1px solid #D2D2D2;
	border-radius: 26px;
	z-index: 2;
}
.flow-card__doc-icon svg{
	fill: #424242;
}
.flow-card__doc-link {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--font-main);
	width: 100%;
	height: 100%;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.165px;
	color: #424242;
	margin-top: 5px;
}
.flow-card__doc-link svg {
	fill: none;
	stroke: #424242;
	flex-shrink: 0;
}
.flow-card .flow-card__doc-link{
	display: none;
}
.screen-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.screen-card__phone {
	position: relative;
	padding-top: 218%;
	background: var(--color-white);
	border: 1px solid var(--color-border-light);
	border-radius: 29px;
	overflow: hidden;
	cursor: pointer;
}
.screen-card__phone img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.screen-card__hover {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	padding-bottom: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}
.screen-card__choose{
	width: 24px;
	height: 24px;
	position: absolute;
	left: 12px;
	top: 12px;
	background: #FFFCFC;
	border: 2px solid #000000;
	border-radius: 50%;
}
.screen-card__phone:hover .screen-card__hover {
	opacity: 1;
	visibility: visible;
}
.screen-card__hover-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.screen-card__hover-btn_dark {
	background: var(--color-black);
}
.screen-card__hover-btn_dark svg {
	fill: var(--color-white);
}
.screen-card__hover-btn_light {
	background: var(--color-white);
}
.screen-card__hover-btn_light svg {
	fill: var(--color-black);
}
.screen-card__caption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}
.screen-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--color-skeleton-image);
	flex-shrink: 0;
}
.screen-card__icon img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.screen-card__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.screen-card__name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-black);
}
.screen-card__bank {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-light);
}

.cjm-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cjm-card {
	background: var(--color-white);
	border: 1px solid var(--color-border-light);
	border-radius: 16px;
	padding: 24px 28px;
	min-height: 182px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr;
	gap: 0 48px;
}
.cjm-card__header {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 16px;
}
.cjm-card__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-black);
}
.cjm-card__subtitle {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-text-gray);
}
.cjm-card__meta {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: end;
}
.cjm-card__time {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cjm-card__time-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-light);
}
.cjm-card__time-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-black);
}
.cjm-card__touchpoints {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.cjm-card__tp-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-light);
	flex-shrink: 0;
}
.cjm-card__chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}
.cjm-chip {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-gray);
	background: transparent;
	border: 1px solid var(--color-border-light);
	border-radius: 20px;
	padding: 3px 10px;
	white-space: nowrap;
}
.cjm-card__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.cjm-card__btn-view {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--color-black);
	color: var(--color-white);
	border: none;
	border-radius: 20px;
	padding: 10px 20px;
	cursor: pointer;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
}
.cjm-card__btn-view svg{
	fill: var(--color-white);
	transform: rotate(-45deg);
	flex-shrink: 0;
}
.cjm-card__btn-download {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border-action);
	background: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cjm-card__btn-download .button__icon {
	fill: var(--color-black);
}


/* ==========================================
   SECTION 3 — СТИЛІ ДЛЯ СТОРІНОК
   ========================================== */

/* =====================
   CATALOG SECTION
   ===================== */
.catalog__wrapper {
	margin-top: 52px;
}

.catalog-list {
	display: flex;
	flex-direction: column;
	gap: 54px;
}

/* =====================
   FLOW CARD — catalog-specific overrides
   ===================== */
.flow-card_catalog {
	gap: 0;
}
/* .flow-card_catalog .flow-card__header {
	align-items: flex-end;
} */
.flow-card_catalog .flow-card__title-group {
	gap: 13px;
}

.flow-card_catalog .flow-card__name {
	font-size: 22px;
	letter-spacing: -0.242px;
}

.flow-card_catalog .flow-card__ci {
	gap: 13px;
	margin-left: 13px;
}
.flow-card_catalog .flow-card__ci-divider {
	height: 46px;
	margin: 0;
}
.flow-card_catalog .flow-card__ci-icon {
	width: 5px;
	height: 10px;
	transform: rotate(-90deg);
}

/* =====================
   CATALOG PAGE
   ===================== */
.catalog {
	padding: 52px 0 157px;
}

.catalog .title-desktop-h1 {
	margin-top: 30px;
}

.catalog .filterbar {
	margin-top: 57px;
}

/* =====================
   PAGE HOME
   ===================== */
.home-hero{
	padding: 53px 0 100px;
}
.home-hero .tabs-group {
	width: 326px;
	background: #f0f0f0;
	border-radius: 18px;
	overflow: hidden;
}
.home-hero .tabs-group__btn{
	width: 100%;
}
.home-hero__content{
	margin-top: 53px;
	display: flex;
	align-items: flex-start;
	gap: 50px;
}
.home-hero__left {
	width: 50%;
}
.home-hero__title {
	font-size: 50px;
	font-weight: 600;
	line-height: 1.37;
	letter-spacing: -0.55px;
	color: var(--color-black);
}
.home-hero__right {
	width: calc(50% - 50px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 21px;
}
.home-hero__desc {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.37;
	letter-spacing: -0.198px;
	color: var(--color-black);
	text-align: right;
}
.home-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #010101;
	color: var(--color-white);
	height: 44px;
	width: 212px;
	border-radius: 40px;
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.home-hero__categories{
	margin-top: 75px;
	display: flex;
	align-items: flex-start;
	gap: 60px;
}
.home-hero__item {
	width: calc((100% - 2 * 60px) / 3);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 17px;
	position: relative;
}
.home-hero__item:not(:last-child):after {
	content: '';
	display: block;
	position: absolute;
	inset: 0 -30px 0 auto;
	width: 1px;
	background: var(--color-border-light);
	flex-shrink: 0;
}
.home-hero__header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.198px;
	color: #707070;
}
.home-hero__header svg{
	flex-shrink: 0;
	fill: #707070;
}
.home-hero__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.home-hero__list a {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.242px;
	color: var(--color-black);
	white-space: nowrap;
	text-decoration: none;
	display: block;
	transition: opacity 0.2s ease;
}
.home-hero__list:hover a {
	opacity: 0.4;
}
.home-hero__list a:hover {
	opacity: 1;
}




.home-banks {
	padding-bottom: 133px;
}

.home-banks__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 31px;
}

.home-banks__title {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.352px;
	color: #292929;
}

.home-banks__filter {
	border-color: #CCC;
	border-radius: 50px;
	background: none;
}

.home-banks__filter-chevron {
	flex-shrink: 0;
	stroke: var(--color-black);
	fill: none;
}

.home-banks__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* =====================
   PAGE BANK
   ===================== */

/* =====================
   BANK HEAD SECTION
   ===================== */
.bank-head {
	padding-top: 36px;
}

.bank-head__logo {
	width: 175px;
	height: 81px;
	border: 1px solid #c7c7c7;
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
	margin-top: 26px;
}

.bank-head__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bank-head__title {
	font-weight: 600;
	letter-spacing: -.4px;
	font-size: 44px;
	line-height: 48px;
	color: var(--color-black);
	max-width: 853px;
	margin-top: 14px;
}

/* =====================
   BANK STATS
   ===================== */
.bank-stats {
	display: flex;
	align-items: center;
	gap: 46px;
	margin-top: 23px;
}

.bank-stats__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bank-stats__label {
	letter-spacing: .2px;
	font-size: 14px;
	line-height: 20px;
	color: #3d3d3d;
	white-space: nowrap;
}

.bank-stats__value {
	font-weight: 600;
	letter-spacing: .2px;
    font-size: 16px;
    line-height: 22px;
	color: var(--color-black);
	white-space: nowrap;
}

/* =====================
   APP TYPE TABS (Застосунки / Сайт / CJM)
   ===================== */
.bank-info {
	padding-top: 46px;
}

.bank-info .tabs-group {
	width: 439px;
	max-width: 100%;
	display: inline-flex;
	background: #f0f0f0;
	border-radius: 26px;
	flex-shrink: 0;
}
.bank-info .tabs-group__btn {
	width: 100%;
}
.bank-info .tabs-group .tabs-group__pill{
	background: var(--color-black);
}
.bank-info .tabs-group[data-active="apps"] .tabs-group__btn[data-tab="apps"],
.bank-info .tabs-group[data-active="site"] .tabs-group__btn[data-tab="site"],
.bank-info .tabs-group[data-active="cjm"] .tabs-group__btn[data-tab="cjm"] {
	color: var(--color-white);
}
/* =====================
   APP CARDS SECTION
   ===================== */
.bank-appcard {
	padding-top: 37px;
}

.bank-appcard__items {
	display: flex;
	align-items: flex-start;
	gap: 68px;
	margin-top: 30px;
}

.appcard-item {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 240px;
	flex-shrink: 0;
	text-decoration: none;
}

.appcard-item__screenshot {
	width: 240px;
	height: 240px;
	border-radius: 36px;
	overflow: hidden;
	flex-shrink: 0;
}

.appcard-item__meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.appcard-item__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.appcard-item__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.appcard-item__tag {
	background: #d9d9d9;
	height: 24px;
	padding: 0 13px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-black);
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.appcard-item__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: #040404;
	white-space: nowrap;
}

.appcard-item__score {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #434343;
	white-space: nowrap;
}

.appcard-item__divider {
	width: 237px;
	height: 1px;
	background: #d7d7d7;
	flex-shrink: 0;
}

.appcard-item__flows {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.appcard-item__flow {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
	white-space: nowrap;
}

/* =====================
   OTHER BANKS SECTION
   ===================== */
.bank-featured {
	padding-top: 79px;
	padding-bottom: 58px;
}

.bank-featured__title {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.352px;
	color: #292929;
}

.bank-featured__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 31px;
}

/* =====================
   САЙТ TAB — SITE CARD
   ===================== */
.bank-sitecard {
	padding-top: 30px;
}

.sitecard {
	padding: 46px 73px;
	display: flex;
	gap: 77px;
	background: #f0f0f0;
	border-radius: 22px;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}

.sitecard__screenshot {
	width: 378px;
	border: 1px solid #bebebe;
	border-radius: 15px;
	overflow: hidden;
}
.sitecard__screenshot span {
	display: block;
	position: relative;
	padding-top: 80.9%;
}
.sitecard__screenshot img{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
	object-position: top;
	display: block;
}

.sitecard__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(100% - 378px -77px);
}

.sitecard__columns {
	display: flex;
	align-items: flex-start;
}

.sitecard__column {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 179px;
	flex-shrink: 0;
}

.sitecard__col-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #747474;
	white-space: nowrap;
}

.sitecard__col-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sitecard__col-item {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
}

.sitecard__col-link {
	color: inherit;
	text-decoration: none;
}
.sitecard__col-link:hover {
	text-decoration: underline;
}

.sitecard__divider {
	width: 1px;
	height: 200px;
	background: #d7d7d7;
	margin: 0 77px;
	flex-shrink: 0;
	align-self: flex-start;
}

.sitecard__actions {
	display: flex;
	align-items: center;
	gap: 29px;
}

.sitecard__btn-all {
	width: 216px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sitecard__link {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.154px;
	color: #040404;
	white-space: nowrap;
}


.sitecard__link-icon {
	width: 20px;
	height: 20px;
	display: block;
	transform: rotate(180deg);
}

/* =====================
   CJM TAB — LAYOUT (sidebar + content)
   ===================== */
.section-cjmcard {
	padding: 37px 0 58px;
}


.section-cjmcard__layout {
	display: flex;
	align-items: flex-start;
	gap: 39px;
	margin-top: 22px;
}

.section-cjmcard__nav {
	width: 266px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section-cjmcard__navitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 11px;
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
	white-space: nowrap;
}

.section-cjmcard__navitem_active {
	background: var(--color-white);
	border-radius: 12px;
}

.section-cjmcard__navitem svg {
	flex-shrink: 0;
}

.section-cjmcard__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.section-cjmcard__group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-cjmcard__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #737373;
}

.section-cjmcard__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cjm-order-btn{
	border: 0;
	padding: 0;
	background: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 15px;
	line-height: 150%;
	letter-spacing: -0.011em;
	color: #040404;
	cursor: pointer;
}
/* =====================
   PAGE APPLICATION
   ===================== */
.app-head {
	padding-top: 27px;
}

/* App head block */
.app-head__block {
	display: flex;
	justify-content: space-between;
	position: relative;
	background: #f0f0f0;
	border-radius: 20px;
	flex-shrink: 0;
	padding: 26px 28px;
	margin-top: 15px;
}

.app-head__icon{
	display: block;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	margin-bottom: 7px;
}
.app-head__icon img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.app-head__name{
	font-size: 32px;
	font-weight: 600;
	color: var(--color-black);
	letter-spacing: -0.352px;
	line-height: 1.5;
	margin-bottom: 24px;
}
.app-head__right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}
.app-stats-toggle {
	display: none;
}
.app-stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px 41px;
}
.app-stats__item {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.app-stats__label {
	letter-spacing: .2px;
	font-size: 14px;
	line-height: 20px;
	color: #3d3d3d;
	white-space: nowrap;
}
.app-stats__value {
	font-weight: 600;
	letter-spacing: .2px;
    font-size: 16px;
    line-height: 22px;
	color: var(--color-black);
	white-space: nowrap;
}
.app-head__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* App catalog (Флоу / Екрани) */
.app-catalog {
	padding-top: 57px;
	padding-bottom: 0;
}

.app-catalog__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.app-catalog__controls {
	display: flex;
	align-items: center;
	gap: 16px;
}

.app-catalog__toggle {
	display: none;
}

.app-catalog__mobile-head {
	display: none;
}

/* Flow dropdown */
.flow-dropdown {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	border: 1px solid var(--color-border-filter);
	border-radius: 12px;
	padding: 10px 12px;
	width: 167px;
	gap: 8px;
	cursor: pointer;
	flex-shrink: 0;
}

.flow-dropdown__text {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-black);
	white-space: nowrap;
	line-height: normal;
}

.flow-dropdown__caret {
	width: 9px;
	height: 6px;
	display: block;
	stroke: #232323;
	fill: none;
	flex-shrink: 0;
}

.flow-count {
	font-size: 16px;
	font-weight: 400;
	color: var(--color-text-light);
	line-height: 1.5;
	white-space: nowrap;
}

/* Flow layout */
.app-flow {
	padding-top: 33px;
	padding-bottom: 60px;
}

.app-flow__layout {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

/* Flow sidebar */
.app-flow__sidebar {
	width: 235px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 23px;
}

.app-flow__search {
	height: 40px;
	border: 1px solid var(--color-border-light);
	border-radius: 100px;
	overflow: hidden;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.app-flow__input{
	width: 100%;
	height: 100%;
	padding: 0 20px;
	border: none;
	background: none;
	outline: none;
}

.flow-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.flow-accordion__subitems {
	display: flex;
	flex-direction: column;
}

.flow-accordion__sub {
	font-size: 16px;
	font-weight: 500;
	color: #232323;
	letter-spacing: -0.176px;
	line-height: 1.5;
	padding: 10px 11px 10px 17px;
	cursor: pointer;
}

.flow-accordion__sub_active {
	background: #e7e7e7;
	border-left: 2px solid var(--color-black);
}

.flow-accordion__sub_parent {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	padding-right: 11px;
	cursor: pointer;
	gap: 10px;
}
.flow-accordion__sub_parent > svg{
	flex-shrink: 0;
	transform: rotate(90deg);
}
.flow-accordion__sub_parent.js-l2-parent_expanded > svg{
	transform: rotate(-90deg);
}
.flow-accordion__sub_l3 {
	padding-left: 29px;
}

.flow-accordion__l3 {
	display: flex;
	flex-direction: column;
}


.flow-accordion__item {
	background: var(--color-white);
	border-radius: 8px;
	overflow: hidden;
}

.flow-accordion__item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-black);
	letter-spacing: -0.176px;
	line-height: 1.5;
	padding: 10px 11px;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}
.flow-accordion__item-header > svg{
	flex-shrink: 0;
	transform: rotate(90deg);
}
.flow-accordion__item_expanded .flow-accordion__item-header > svg{
	transform: rotate(-90deg);
}
/* Flow content */
.app-flow__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flow-section-title {
	font-size: 16px;
	font-weight: 600;
	color: #737373;
	letter-spacing: -0.176px;
	line-height: 1.5;
}

/* Screens layout */
.app-screen {
	padding-top: 33px;
	padding-bottom: 60px;
}

.app-screen__layout {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

.app-screen__sidebar {
	width: 235px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.screens-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.screens-group__title {
	font-size: 16px;
	font-weight: 600;
	color: #6d6d6d;
	line-height: normal;
	white-space: nowrap;
}
.screens-group__items li:not(:last-child) {
	margin-bottom: 20px;

}

/* Selected screens chips */
.screens-selected {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 4px;
}

.screens-selected__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.screens-selected__title {
	font-size: 16px;
	font-weight: 600;
	color: #141414;
}

.screens-selected__clear {
	font-size: 14px;
	font-weight: 500;
	color: #373737;
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--font-main);
}

.screens-selected__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.screens-selected__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px;
	background: var(--color-white);
	border: 1px solid #a4a2a2;
	border-radius: 26px;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 14px;
	font-weight: 500;
	color: #141414;
	white-space: nowrap;
}

.screens-selected__chip svg {
	fill: none;
	stroke: #141414;
	flex-shrink: 0;
}

.screens-selected__divider {
	height: 1px;
	background: #a4a2a2;
	margin-top: 4px;
}

.app-screen__content {
	flex: 1;
	min-width: 0;
}

.screens-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 20px;
}
.screens-grid .screen-card{
	width: calc((100% - 3 * 20px) / 4);
}
.catalog .screens-grid .screen-card{
	width: calc((100% - 4 * 20px) / 5);
}
/* =====================
   FLOW MODAL
   ===================== */
.flow-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1100;
	align-items: center;
	justify-content: center;
}
.flow-modal_active {
	display: flex;
}
.flow-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1223px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 50px);
	background: var(--color-white);
	border-radius: 30px;
	overflow: hidden;
	flex-shrink: 0;
}

/* Header */
.flow-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	height: 100px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--color-border-light);
}
.flow-modal__info {
	display: flex;
	align-items: center;
	gap: 13px;
}
.flow-modal__icon {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}
.flow-modal__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.flow-modal__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.flow-modal__ci{
	display: flex;
	align-items: center;
	gap: 13px;
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	margin-left: 10px;
}
.flow-modal__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.198px;
	color: var(--color-black);
	white-space: nowrap;
}
.flow-modal__app {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #646464;
	white-space: nowrap;
}
.flow-modal__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.flow-modal__close {
	width: 16px;
	height: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-black);
	flex-shrink: 0;
}

/* Scrollable body */
.flow-modal__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: 20px;
}

/* Tabs toggle */
.flow-modal__tabs {
	display: flex;
	align-items: center;
	position: relative;
	width: 192px;
	height: 32px;
	background: var(--color-tab-bg);
	border-radius: 20px;
	margin: 14px 0 0 28px;
	overflow: hidden;
	flex-shrink: 0;
}
.flow-modal__tabs-pill {
	position: absolute;
	top: 2px;
	height: 28px;
	background: var(--color-white);
	border-radius: 33px;
	transition: left 0.2s ease, width 0.2s ease;
	pointer-events: none;
}
.flow-modal__tabs[data-active="screens"] .flow-modal__tabs-pill {
	left: 2px;
	width: 93px;
}
.flow-modal__tabs[data-active="prototype"] .flow-modal__tabs-pill {
	left: 97px;
	width: 93px;
}
.flow-modal__tab {
	flex: 1;
	height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 15px;
	font-weight: 500;
	color: var(--color-black);
	position: relative;
	z-index: 1;
	white-space: nowrap;
}

/* Slides */
.flow-modal__slides-outer {
	position: relative;
	margin: 15px 28px 0;
}
.flow-modal__swiper.swiper {
	overflow: visible;
}
.flow-modal__swiper .swiper-wrapper {
	align-items: flex-start;
}
.flow-modal__slide {
	width: 251px !important;
	height: 548px;
	background: var(--color-white);
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}
.flow-modal__slide img {
	width: 100%;
	height: 100%;
	border-radius: 30px;
	border: 1px solid var(--color-border-light);
	object-fit: cover;
	display: block;
}
.flow-modal__nav-btn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid var(--color-border-action);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s ease;
	opacity: 0.5;
}
.flow-modal__nav-btn:hover {
	background: #f2f2f2;
	opacity: 1;
}
.flow-modal__nav-btn .button__icon {
	width: 24px;
	height: 24px;
	stroke: var(--color-black);
	fill: none;
	transform: rotate(90deg);
}
.flow-modal__nav-btn_prev {
	right: auto;
	left: 0;
}
.flow-modal__nav-btn_prev .slider-arrow {
	transform: scaleX(-1);
}
.flow-modal__nav-btn_next .slider-arrow {
	transform: scaleX(1);
}

.flow-modal__slide_pdf {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.flow-modal__slide_pdf img {
	height: 548px;
	flex-shrink: 0;
}
.flow-modal__slide_pdf .flow-card__doc-link {
	display: flex;
	position: static;
	transform: none;
	width: auto;
	height: auto;
	margin-top: 8px;
}

/* Footer */
.flow-modal__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 40px 0 51px;
}
.flow-modal__footer-btns {
	display: flex;
	align-items: center;
	gap: 12px;
}
.flow-modal__btn-download {
	height: 44px;
	padding: 0 16px;
	background: var(--color-white);
	border: 1px solid var(--color-border-action);
	border-radius: 26px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-family: var(--font-main);
}
.flow-modal__btn-download .button__icon {
	width: 24px;
	height: 24px;
	fill: #424242;
	flex-shrink: 0;
}
.flow-modal__btn-download .button__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #424242;
	white-space: nowrap;
}
.flow-modal__hide-zones {
	position: absolute;
	right: 25px;
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--font-main);
	display: none !important;
}
.flow-modal__hide-zones svg {
	fill: none;
	stroke: #424242;
	flex-shrink: 0;
}
.flow-modal__hide-zones span {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #424242;
	white-space: nowrap;
}

/* Compare section */
.flow-modal__compare {
	display: none;
	padding-bottom: 28px;
}
.flow-modal__compare_active {
	display: block;
}
.flow-modal__compare-divider {
	height: 1px;
	background: var(--color-border-light);
	margin: 0 0 20px;
}
.flow-modal__compare-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	margin-bottom: 16px;
}
.flow-modal__compare-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.198px;
	color: var(--color-black);
}
.flow-modal__compare-filter.filter-dropdown {
	width: auto;
	border: none;
	border-radius: 0;
}
.flow-modal__compare-filter .filter-dropdown__label {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--color-border-action);
	border-radius: 20px;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 14px;
	color: #0a0a0a;
	user-select: none;
}
.flow-modal__compare-filter .filter-dropdown__list {
	min-width: 150px;
	left: auto;
	right: 0;
}
.flow-modal__compare-filter-item {
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 14px;
	color: #0a0a0a;
	cursor: pointer;
	white-space: nowrap;
	list-style: none;
}
.flow-modal__compare-filter-item:hover {
	background: var(--color-tab-bg);
}
.flow-modal__compare-filter-item_active {
	font-weight: 600;
}
.flow-modal__compare-rows {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.flow-modal__compare-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.flow-modal__compare-bank {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 28px;
	cursor: pointer;
}
.flow-modal__compare-bank-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}
.flow-modal__compare-bank-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.flow-modal__compare-bank-name {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-black);
	white-space: nowrap;
}
.flow-modal__compare-bank-dot {
	font-size: 12px;
	color: #c0c0c0;
}
.flow-modal__compare-bank-ci {
	font-size: 14px;
	color: #646464;
	white-space: nowrap;
}
.flow-modal__compare-bank .flow-card__ci-icon {
	stroke: #646464;
	fill: none;
	margin-left: 2px;
}
.flow-modal__compare-slides-outer {
	position: relative;
	margin-left: 28px;
	height: 548px;
	overflow: hidden;
}
.flow-modal__compare-swiper.swiper {
	overflow: visible;
}
.flow-modal__compare-swiper .swiper-wrapper {
	align-items: flex-start;
}
.flow-modal__compare-slide {
	width: 251px !important;
	height: 548px;
	background: var(--color-white);
	border: 0.95px solid var(--color-border-light);
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}
.flow-modal__compare-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.flow-modal__compare-nav-btn {
	position: absolute;
	right: 80px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid var(--color-border-action);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s ease;
}
.flow-modal__compare-nav-btn:hover {
	background: #f2f2f2;
}
.flow-modal__compare-nav-btn .button__icon {
	width: 24px;
	height: 24px;
	stroke: var(--color-black);
	fill: none;
	transform: rotate(90deg);
}
.flow-modal__compare-empty {
	padding: 0 28px;
	font-size: 14px;
	color: #9a9a9a;
}

/* =====================
   SCREEN SINGLE MODAL
   ===================== */
.screen-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1100;
	align-items: center;
	justify-content: center;
}
.screen-modal_active {
	display: flex;
}
.screen-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1223px;
	max-height: calc(100vh - 50px);
	background: var(--color-white);
	border-radius: 30px;
	overflow: hidden;
	flex-shrink: 0;
}

/* Header */
.screen-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	height: 100px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--color-border-light);
}
.screen-modal__info {
	display: flex;
	align-items: center;
	gap: 13px;
}
.screen-modal__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--color-skeleton-image);
	overflow: hidden;
	flex-shrink: 0;
}
.screen-modal__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.screen-modal__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.screen-modal__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.198px;
	color: var(--color-black);
	white-space: nowrap;
}
.screen-modal__bank {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #646464;
	white-space: nowrap;
}
.screen-modal__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.screen-modal__close {
	width: 16px;
	height: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-black);
	flex-shrink: 0;
}


/* Body */
.screen-modal__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #e6e6e6 transparent;
}
.screen-modal__body::-webkit-scrollbar { width: 10px; }
.screen-modal__body::-webkit-scrollbar-track { background: transparent; }
.screen-modal__body::-webkit-scrollbar-thumb { background: #e6e6e6; border-radius: 40px; }

/* Viewer: phone + side arrows */
.screen-modal__viewer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 120px;
}
.screen-modal__phone {
	width: 260px;
	height: 568px;
	border: 0.984px solid var(--color-border-light);
	border-radius: 32px;
	overflow: hidden;
	flex-shrink: 0;
}
.screen-modal__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.screen-modal__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid var(--color-border-action);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s ease;
}
.screen-modal__arrow:hover:not(:disabled) {
	background: #f2f2f2;
}
.screen-modal__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.screen-modal__arrow_prev { left: 38px; }
.screen-modal__arrow_next { right: 38px; }
.screen-modal__arrow .button__icon {
	width: 24px;
	height: 24px;
	stroke: var(--color-black);
	fill: none;
}
.screen-modal__arrow_prev svg { transform: rotate(-180deg); }

/* Info bar: buttons + counter + flows */
.screen-modal__infobar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 40px 24px;
	border-top: 1px solid var(--color-border-light);
}
.screen-modal__infobar-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.screen-modal__counter {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.154px;
	color: #848484;
	white-space: nowrap;
}
.screen-modal__flows {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.screen-modal__flows-label {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.154px;
	color: #848484;
	white-space: nowrap;
}
.screen-modal__flows-tags {
	display: flex;
	align-items: center;
	gap: 6px;
}
.screen-modal__flow-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 8px;
	background: var(--color-skeleton-image);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.143px;
	color: #424242;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

/* Compare section */
.screen-modal__compare {
	display: none;
}
.screen-modal__compare_active {
	display: block;
}
.screen-modal__compare-divider {
	height: 1px;
	background: var(--color-border-light);
}
.screen-modal__compare-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 40px 16px;
}
.screen-modal__compare-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.198px;
	color: var(--color-black);
}
.screen-modal__compare-filter.filter-dropdown {
	width: auto;
	border: none;
	border-radius: 0;
}
.screen-modal__compare-filter .filter-dropdown__label {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--color-border-action);
	border-radius: 26px;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 14px;
	font-weight: 400;
	color: #0a0a0a;
}
.screen-modal__compare-filter .filter-dropdown__list {
	min-width: 160px;
	inset: 100% 0 auto auto;
}
.screen-modal__compare-filter-item {
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 400;
	color: #0a0a0a;
	cursor: pointer;
	list-style: none;
}
.screen-modal__compare-filter-item:hover {
	background: var(--color-skeleton-image);
}
.screen-modal__compare-filter-item_active {
	font-weight: 500;
}
.screen-modal__compare-rows {
	padding: 0 40px 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.screen-modal__compare-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.screen-modal__compare-bank {
	display: flex;
	align-items: center;
	gap: 8px;
}
.screen-modal__compare-bank-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--color-skeleton-image);
	overflow: hidden;
	flex-shrink: 0;
}
.screen-modal__compare-bank-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
.screen-modal__compare-bank-name {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.176px;
	color: var(--color-black);
}
.screen-modal__compare-slides-outer {
	position: relative;
	height: 568px;
	overflow: hidden;
}
.screen-modal__compare-swiper.swiper {
	overflow: visible;
}
.screen-modal__compare-swiper .swiper-wrapper {
	align-items: flex-start;
}
.screen-modal__compare-slide {
	width: 260px !important;
	height: 568px;
	background: var(--color-white);
	border: 0.95px solid var(--color-border-light);
	border-radius: 32px;
	overflow: hidden;
	flex-shrink: 0;
	cursor: pointer;
}
.screen-modal__compare-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.screen-modal__compare-gradient {
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 568px;
	background: linear-gradient(to left, var(--color-white) 20%, transparent 100%);
	pointer-events: none;
	z-index: 2;
}
.screen-modal__compare-nav-btn {
	position: absolute;
	right: 60px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid var(--color-border-action);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s ease;
}
.screen-modal__compare-nav-btn:hover {
	background: #f2f2f2;
}
.screen-modal__compare-nav-btn .button__icon {
	width: 20px;
	height: 20px;
	stroke: var(--color-black);
	fill: none;
	transform: rotate(90deg);
}

/* =====================
   PAGE SITE
   ===================== */

.site-head {
	padding-top: 27px;
}

.site-head__block {
	display: flex;
	justify-content: space-between;
	padding: 26px 28px;
	position: relative;
	background: #f0f0f0;
	border-radius: 20px;
	overflow: hidden;
	margin-top: 15px;
}

.site-head__left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.site-head__preview {
	width: 272px;
	height: 225px;
	border: 0.912px solid #bebebe;
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
}

.site-head__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	border-radius: 12px;
	display: block;
}

.site-head__title {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.352px;
	color: var(--color-black);
	white-space: nowrap;
}
.site-head__right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

/* Site catalog */
.site-catalog {
	padding: 32px 0 120px;
}

.site-catalog__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-catalog .tabs-group {
	display: flex;
	position: relative;
	height: 40px;
	background: var(--color-tab-bg);
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
}

.site-catalog .tabs-group__pill {
	position: absolute;
	top: 3px;
	height: 34px;
	background: var(--color-white);
	border-radius: 33px;
	transition: left 0.25s ease, width 0.25s ease;
	pointer-events: none;
	z-index: 0;
}

.site-catalog .tabs-group__btn {
	position: relative;
	min-width: 92px;
	height: 40px;
	display: flex;
	box-sizing: border-box;
	padding: 0 10px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-black);
	z-index: 1;
	white-space: nowrap;
}

.site-catalog__count {
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #858585;
	white-space: nowrap;
}

.site-catalog__layout {
	margin-top: 25px;
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.site-catalog__sidebar {
	width: 266px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: sticky;
	top: 20px;
	align-self: flex-start;
}

.site-catalog__navitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 11px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
	white-space: nowrap;
}

.site-catalog__navitem svg {
	display: none;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: var(--color-black);
}
.site-sidebar__navitem_active svg{
	display: block;
}
.site-sidebar__navitem_active {
	background: var(--color-white);
	border-radius: 12px;
}

.site-catalog__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-catalog__block {
	scroll-margin-top: 90px;
}

.site-catalog__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #737373;
	margin-bottom: 16px;
}

.site-catalog__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 35px 16px;
	justify-content: space-between;
}
.site-catalog__item{
	width: calc((100% - 1 * 16px) / 2);
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
	cursor: pointer;
}

.site-catalog__frame {
	position: relative;
	padding-top: 78.6%;
}

.site-catalog__frame img {
	position: absolute;
	inset: 0;
	border-radius: 15px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.site-catalog__label {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: var(--color-black);
	padding-left: 14px;
	white-space: nowrap;
}

/* =====================
   SITE SCREEN MODAL
   ===================== */
.site-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1100;
	align-items: center;
	justify-content: center;
}
.site-modal_active {
	display: flex;
}
.site-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1223px;
	max-height: calc(100vh - 50px);
	background: var(--color-white);
	border-radius: 30px;
	overflow: hidden;
	flex-shrink: 0;
}
.site-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	height: 86px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--color-border-light);
}
.site-modal__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.site-modal__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.198px;
	color: var(--color-black);
}
.site-modal__sub {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.176px;
	color: #646464;
}
.site-modal__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-modal__close {
	width: 16px;
	height: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-black);
	flex-shrink: 0;
}
.site-modal__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 30px 0;
	scrollbar-width: thin;
	scrollbar-color: #e6e6e6 transparent;
}
.site-modal__body::-webkit-scrollbar {
	width: 10px;
}
.site-modal__body::-webkit-scrollbar-track {
	background: transparent;
}
.site-modal__body::-webkit-scrollbar-thumb {
	background: #e6e6e6;
	border-radius: 40px;
}
.site-modal__img-wrap {
	border: 1px solid var(--color-border-light);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 20px;
}
.site-modal__img {
	display: block;
	width: 100%;
	height: auto;
}
.site-modal__footer {
	position: relative;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	padding: 16px 0 24px;
	gap: 12px;
}
.site-modal__footer::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to top, #fff 0%, transparent 100%);
	pointer-events: none;
}
.site-modal__btn-copy {
	background: var(--color-black);
	border: none;
	color: var(--color-white);
}
.site-modal__btn-download {
	background: var(--color-white);
	border: 1px solid #d2d2d2;
	color: #424242;
}

/* =====================
   WEB-TYPE FLOW OVERRIDES
   ===================== */

/* Card slider */
.flow-card_web .flow-card__slide {
	width: 590px !important;
	border-radius: 19px;
}
.flow-card_web .flow-card__slide > span{
	padding-top: 71.2%;
}
.flow-card_web .flow-card__slide img {
	border-radius: 19px;
}

/* Modal main slider */
.flow-modal_web .flow-modal__slides-outer {
	height: 420px;
}
.flow-modal_web .flow-modal__slide {
	width: 590px !important;
	height: 420px;
}
.flow-modal_web .flow-modal__slide img {
	border-radius: 8px;
}
.flow-modal_web .flow-modal__slide_pdf img {
	height: 420px;
}

/* Modal compare slider */
.flow-modal__compare-row_web .flow-modal__compare-slide {
	width: 590px !important;
	height: 420px;
	border-radius: 8px;
}



/* Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 1320px){
	.container{
		padding-left: 20px;
		padding-right: 20px;
	}
	.site-header__search {
		flex: 0 0 300px;
	}
}
@media only screen and (max-width: 1190px){
	.site-header__inner{
		padding: 10px 20px;
	}
	.site-header__saved{
		width: 40px;
		font-size: 0;
		gap: 0;
		padding: 0;
		margin-left: auto;
	}
	.site-header__search{
		width: 40px;
		height: 40px;
		flex: initial;
		padding: 0;
		margin-left: 5px;
	}
	.site-header__search-trigger{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
	}
	.site-header__search-trigger svg{
		display: block;
		fill: var(--color-text-gray);
	}
	.site-header__search-trigger span{
		display: none;
	}
	.site-header__actions{
		gap: 5px;
		margin-left: 5px;
	}
	.site-header__nav{
		visibility: hidden;
		position: absolute;
		inset: 100% 0 auto;
		background: #FFF;
		padding: 10px 20px;
		margin: 0;
		transition: none;
	}
	.mobile-menu-open .site-header__nav{
		visibility: visible;
	}
	.site-header__nav ul{
		width: 100%;
		gap: 15px;
		flex-direction: column;
		align-items: flex-start;
	}
	.site-header__touch{
		display: block;
		position: relative;
		overflow: hidden;
		border: 1px solid var(--color-border-light);
		border-radius: 50%;
		background: #FFF;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0 0 0 auto;
	}
	.site-header__touch span {
		display: block;
		position: absolute;
		top: 18px;
		left: 12px;
		right: 12px;
		height: 2px;
		background: var(--color-text-gray);
		transition: background 0 0.3s;
	}
	.site-header__touch span::before,
	.site-header__touch span::after{
		content: '';
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-text-gray);
 		transition-duration: 0.3s, 0.3s;
 		transition-delay: 0.3s, 0;
	}
	.site-header__touch span::before {
		top: -6px;
 		transition-property: top, transform;
	}
	.site-header__touch span::after {
		bottom: -6px;
 		transition-property: bottom, transform;
	}
	.site-header__touch.active span {
		background: none !important;
	}
	.site-header__touch.active span::before {
		top: 0;
		transform: rotate(45deg);
	}
	.site-header__touch.active span::after {
		bottom: 0;
		transform: rotate(-45deg);
	}
	.site-header__touch.active span::before,
	.site-header__touch.active span::after {
		transition-delay: 0, 0.3s;
	}
	.sitecard {
		padding: 20px;
	}
	.filterbar-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-top: 30px;
		height: 44px;
		background: var(--color-white);
		border: 1px solid var(--color-border-action);
		border-radius: 26px;
		padding: 0 20px;
		font-size: 16px;
		font-weight: 500;
		color: var(--color-black);
		cursor: pointer;
		flex-shrink: 0;
	}

	.catalog .filterbar {
		max-width: 100vw;
		visibility: hidden;
		margin-top: 0;
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		z-index: 2000;
		background: var(--color-white);
		overflow-y: auto;
		padding: 20px;
	}

	.catalog .filterbar.filterbar_open {
		visibility: visible;
	}

	.filterbar__mobile-head {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		margin-bottom: 24px;
	}

	.filterbar__mobile-title {
		font-size: 22px;
		font-weight: 600;
		line-height: normal;
		color: var(--color-black);
	}

	.filterbar__mobile-close {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 1px solid var(--color-border-action);
		border-radius: 50%;
		cursor: pointer;
		flex-shrink: 0;
		color: var(--color-black);
	}

	.filterbar__left {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.filterbar .tabs-group {
		width: 100%;
		height: 44px;
	}

	.filterbar .tabs-group__btn {
		flex: 1;
		height: 44px;
	}

	.filterbar .tabs-group__pill {
		height: 38px;
	}

	.filterbar .filter-dropdown {
		width: 100%;
	}

	.filterbar .filter-dropdown__list {
		position: static;
		min-width: unset;
		width: 100%;
		border: none;
		border-top: 1px solid var(--color-border-light);
		border-radius: 0 0 12px 12px;
		padding: 12px;
	}

	.filterbar__right {
		flex-direction: column-reverse;
		align-items: flex-start;
		margin-top: 24px;
		gap: 16px;
	}

	.filterbar__divider {
		display: none;
	}
	
}
@media only screen and (max-width: 992px){
	.search-popup{
		left: 20px;
		right: 20px;
		transform: none;
	}
	.site-catalog__item{
		width: 100%;
	}
}
@media only screen and (max-width: 767px){
	.home-hero {
		padding: 30px 0 100px;
	}
	.home-hero__content{
		flex-direction: column;
		margin-top: 35px;
		gap: 20px;
	}
	.home-hero__left, .home-hero__right{
		width: 100%;
	}
	.home-hero__title {
		font-size: 30px;
	}
	.home-hero__desc{
		font-size: 16px;
		text-align: left;
	}
	.home-hero__categories {
		margin-top: 35px;
		flex-direction: column;
		gap: 30px;
	}
	.home-hero__item{
		width: 100%;
		gap: 10px;
	}
	.home-hero__item:not(:last-child)::after {
		display: none;
	}
	.home-hero__list {
		gap: 10px;
	}
	.home-hero__list a {
		font-size: 16px;
	}
	.home-banks {
		padding-bottom: 70px;
	}
	.home-banks__header{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.bank-item{
		width: 100%;
	}
	.bank-head {
		padding-top: 25px;
	}
	.bank-head__logo {
		width: 120px;
		height: 64px;
	}
	.bank-head__title {
		font-size: 34px;
		line-height: 1.3;
	}
	.bank-stats{
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
		margin-top: 15px;
	}
	.bank-info {
		padding-top: 30px;
	}
	.appcard-item__screenshot {
		width: 160px;
		height: 160px;
		border-radius: 25px;
	}
	.sitecard{
		flex-direction: column;
		gap: 30px;
	}
	.sitecard__screenshot{
		max-width: 100%;
	}
	.sitecard__content{
		width: 100%;
	}
	.sitecard__actions{
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		margin-top: 20px;
	}
	.section-cjmcard__layout{
		flex-direction: column;
		gap: 30px;
	}
	.section-cjmcard__nav{
		width: 100%;
	}
	.section-cjmcard__content{
		width: 100%;
	}
	.filter-bar{
		position: relative;
	}
	.section-cjmcard {
		padding: 37px 0 0px;
	}
	.section-cjmcard .filter-bar{
		margin-bottom: 50px;
	}
	.cjm-order-btn{
		position: absolute;
		top: calc(100% + 15px);
		left: 0;
	}
	.cjm-card{
		display: block;
		padding: 20px;
	}
	.cjm-card__actions{
		justify-content: flex-start;
		margin-top: 20px;
	}
	.bank-featured{
		padding: 50px 0;
	}
	.bank-featured__title {
		font-size: 24px;
		line-height: 1.4;
	}
	







	.search-popup{
		height: calc(100vh - 40px);
	}
	.search-popup__container{
		flex-direction: column;
	}
	.search-popup__sidebar{
		display: none;
	}
	.search-popup__select {
		display: block;
		width: 100%;
		position: relative;
	}
	.search-popup__select select {
		width: 100%;
		height: 40px;
		border: 1px solid var(--color-border-filter);
		border-radius: 12px;
		background: var(--color-white);
		padding: 10px 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 5px;
		font-size: 16px;
		font-weight: 500;
		line-height: normal;
		color: var(--color-black);
		white-space: nowrap;
		user-select: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	.search-popup__select svg{
		position: absolute;
		top: 12px;
		right: 12px;
		transform: rotate(90deg);
	}
	.search-popup__content{
		position: static;
		width: 100%;
		max-height: calc(100vh - 200px);
	}
	.flow-modal__panel {
		width: 100%;
		max-width: none;
		max-height: 100%;
		border-radius: 0;
	}
	.flow-modal__header {
		height: auto;
		min-height: 70px;
		padding: 14px 20px;
		flex-wrap: wrap;
		gap: 10px;
	}
	.flow-modal__info {
		flex: 1;
		min-width: 0;
	}
	.flow-modal__name,
	.flow-modal__app {
		white-space: normal;
	}
	.flow-modal__ci {
		display: none;
	}
	.flow-modal__btn-others {
		display: none;
	}
	.flow-modal__actions {
		gap: 10px;
	}
	.flow-modal__tabs {
		margin-left: 20px;
	}
	/* Восстанавливаем dropdown в модале (global .filter-dropdown { width:100% } из filterbar сломал бы его) */
	.flow-modal .filter-dropdown {
		width: auto;
	}
	.flow-modal .filter-dropdown__list {
		position: absolute;
		width: auto;
		min-width: 150px;
		border: 1px solid var(--color-border-filter);
		border-top: 1px solid var(--color-border-filter);
		border-radius: 12px;
		padding: 17px 12px;
	}
	/* Слайды — мобильный тип */
	.flow-modal__slides-outer {
		margin: 12px 0 0;
	}
	.flow-modal__slides-outer .flow-modal__slide:first-child {
		margin-left: 15px;
	}
	.flow-modal__slides-outer .flow-modal__slide:last-child {
		margin-right: 15px;
	}
	.flow-modal__nav-btn {
		display: none;
	}
	/* Слайды — web тип (пересчёт размера под экран) */
	.flow-modal_web .flow-modal__slides-outer {
		height: calc((100vw - 32px) * 0.712);
	}
	.flow-modal_web .flow-modal__slide {
		width: calc(100vw - 70px) !important;
		height: calc((100vw - 32px) * 0.712) !important;
	}
	.flow-modal__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		margin: 24px 20px 30px;
	}
	.flow-modal__footer-btns {
		gap: 10px;
		flex-wrap: wrap;
	}
	.flow-modal__hide-zones {
		position: static;
	}
	.flow-modal__compare-header {
		padding: 0 20px;
	}
	.flow-modal__compare-bank {
		padding: 0 20px;
	}
	.flow-modal__compare-slides-outer {
		margin-left: 16px;
	}
	.flow-modal__compare-nav-btn {
		display: none;
	}
	.flow-modal__compare-empty {
		padding: 0 20px;
	}
	.flow-modal__compare-row_web .flow-modal__compare-slides-outer {
		height: calc((100vw - 32px) * 0.712);
	}
	.flow-modal__compare-row_web .flow-modal__compare-slide {
		width: calc(100vw - 32px) !important;
		height: calc((100vw - 32px) * 0.712) !important;
	}
	.title-desktop-h1{
		font-size: 30px;
	}
	.catalog {
		padding: 52px 0;
	}
	.catalog__wrapper {
		margin-top: 30px;
	}
	.flow-card__header{
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.flow-card__title-group{
		flex-wrap: wrap;
	}
	.flow-card__icon{
		width: 40px;
		height: 40px;
	}
	.flow-card__titles{
		width: calc(100% - 40px - 13px);
		gap: 0;
	}
	.flow-card_catalog .flow-card__name {
		font-size: 16px;
	}
	.flow-card__bank{
		font-size: 14px;
	}
	.flow-card__ci {
		gap: 0;
		margin: 0 !important;
	}
	.flow-card__ci-divider{
		display: none;
	}
	.flow-card__slides-outer{
		margin-left: -20px;
		margin-right: -20px;
	}
	.flow-card__slide:first-child{
		margin-left: 16px;
	}
	.flow-card__slide:last-child{
		margin-right: 16px;
	}
	.flow-card__nav-btn{
		display: none !important;
	}
	.screens-grid .screen-card {
		width: calc((100% - 1 * 20px) / 2);
	}
	.flow-card_web .flow-card__slide{
		width: calc(100vw - 60px) !important;
	}
	.app-stats-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		border: 1px solid #eaeaea;
		border-radius: 40px;
		padding: 6px 12px;
		background: none;
		cursor: pointer;
		font-family: var(--font-main);
		font-size: 14px;
		color: var(--color-black);
		margin-bottom: 10px;
	}
	.app-stats-toggle svg {
		transform: rotate(90deg);
		transition: transform 0.2s ease;
		flex-shrink: 0;
	}
	.app-stats-toggle.is-open svg {
		transform: rotate(-90deg);
	}
	.app-stats {
		display: none;
	}
	.app-stats.app-stats_open {
		display: flex;
		flex-wrap: wrap;
	}
	.app-head__block{
		flex-direction: column;
	}
	.app-head__name{
		font-size: 24px;
		line-height: 1.3;
	}
	.app-head__left,.app-head__right{
		width: 100%;
	}
	.app-head__right{
		align-items: flex-start;
		gap: 20px;
	}
	.app-catalog {
		padding-top: 10px;
	}
	.app-catalog__toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-top: 20px;
		height: 44px;
		background: var(--color-white);
		border: 1px solid var(--color-border-action);
		border-radius: 26px;
		padding: 0 20px;
		font-size: 16px;
		font-weight: 500;
		color: var(--color-black);
		cursor: pointer;
		flex-shrink: 0;
	}

	.app-catalog__panel {
		visibility: hidden;
		position: fixed;
		inset: 0;
		z-index: 2000;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background: var(--color-white);
		overflow-y: auto;
		padding: 20px;
	}

	.app-catalog__panel.app-catalog__panel_open {
		visibility: visible;
	}

	.app-catalog__mobile-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex-shrink: 0;
		margin-bottom: 24px;
	}

	.app-catalog__mobile-title {
		font-size: 22px;
		font-weight: 600;
		line-height: normal;
		color: var(--color-black);
	}

	.app-catalog__mobile-close {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 1px solid var(--color-border-action);
		border-radius: 50%;
		cursor: pointer;
		flex-shrink: 0;
		color: var(--color-black);
	}

	.app-catalog__controls {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
	}

	.app-catalog__controls .tabs-group {
		width: 100%;
		height: 44px;
	}

	.app-catalog__controls .tabs-group__btn {
		flex: 1;
		height: 44px;
	}

	.app-catalog__controls .tabs-group__pill {
		height: 38px;
	}

	.app-catalog__controls .filter-dropdown {
		width: 100%;
	}

	.app-catalog__controls .filter-dropdown__list {
		position: static;
		min-width: unset;
		width: 100%;
		border: none;
		border-top: 1px solid var(--color-border-light);
		border-radius: 0 0 12px 12px;
		padding: 12px;
	}

	.app-catalog__panel .flow-count {
		display: none;
	}

	/* Контейнер для sidebar, который JS перемещает в панель */
	.app-catalog__panel-body {
		width: 100%;
		margin-top: 20px;
		border-top: 1px solid var(--color-border-light);
		padding-top: 20px;
	}

	/* Sidebar внутри панели — показываем */
	.app-catalog__panel-body .app-flow__sidebar,
	.app-catalog__panel-body .app-screen__sidebar {
		width: 100%;
		display: flex !important;
	}

	/* Sidebar в layout — скрываем (JS вернёт обратно при закрытии) */
	.app-flow__layout .app-flow__sidebar,
	.app-screen__layout .app-screen__sidebar {
		display: none;
	}
	.screen-modal__panel {
		width: 100%;
		max-height: 100%;
		border-radius: 0;
	}
	/* Шапка */
	.screen-modal__header {
		height: auto;
		min-height: 70px;
		padding: 14px 20px;
		flex-wrap: wrap;
		gap: 10px;
	}
	.screen-modal__info {
		flex: 1;
		min-width: 0;
	}
	.screen-modal__name,
	.screen-modal__bank {
		white-space: normal;
	}
	.screen-modal__btn-others {
		display: none;
	}
	.screen-modal__actions {
		gap: 10px;
	}
	/* Viewer: убираем горизонтальные отступы, стрелки у краёв */
	.screen-modal__viewer {
		padding: 24px 0;
	}
	.screen-modal__arrow_prev { left: 8px; }
	.screen-modal__arrow_next { right: 8px; }
	/* Infobar */
	.screen-modal__infobar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px 20px 20px;
	}
	.screen-modal__infobar-left {
		flex-wrap: wrap;
		gap: 10px;
	}
	.screen-modal__flows {
		flex-wrap: wrap;
	}
	/* Compare */
	.screen-modal__compare-header {
		padding: 16px 20px;
	}
	.screen-modal__compare-rows {
		padding: 0 20px 20px;
	}
	.screen-modal__compare-gradient {
		display: none;
	}
	.screen-modal__compare-nav-btn {
		display: none;
	}
	/* Site screen modal — полноэкранный режим (по аналогии с flow/screen modal) */
	.site-modal__panel {
		width: 100%;
		max-width: none;
		max-height: 100%;
		border-radius: 0;
	}
	.site-modal__header {
		height: auto;
		min-height: 70px;
		padding: 14px 20px;
		gap: 10px;
	}
	.site-modal__titles {
		flex: 1;
		min-width: 0;
	}
	.site-modal__body {
		padding: 16px 16px 0;
	}
	.site-modal__footer {
		flex-direction: column;
		padding: 16px 16px 24px;
	}
	.site-modal__footer .button {
		width: 100%;
	}
	.site-head__block{
		flex-direction: column;
		gap: 20px;
		padding: 20px 15px;
	}
	.site-head__left{
		width: 100%;
	}
	.site-head__right{
		width: 100%;
		gap: 10px;
		align-items: flex-start;
	}
	.site-head__title {
		font-size: 24px;
		line-height: 1.3;
	}
	.site-catalog{
		padding: 30px 0 50px;
	}
	.site-catalog__layout{
		flex-direction: column;
		gap: 30px;
	}
	.site-catalog__sidebar,
	.site-catalog__content{
		width: 100%;
	}
	.history-modal__sidebar{
		display: none;
	}
	}

/* Screen card selection */
.screen-card_selected .screen-card__hover {
	opacity: 1;
	visibility: visible;
}
.screen-card_selected .screen-card__choose {
	background: var(--color-black);
	border-color: var(--color-black);
}
.screen-card_selected .screen-card__choose::after {
	content: '';
	display: block;
	position: absolute;
	top: 3px;
	left: 7px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* Screen select panel */
.screen-select-panel {
	position: fixed;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1500;
	background: var(--color-black);
	border-radius: 20px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: bottom 0.3s ease;
	white-space: nowrap;
}
.screen-select-panel_active {
	bottom: 30px;
}
.screen-select-panel__count {
	color: var(--color-white);
	font-size: 14px;
	font-weight: 500;
}
.screen-select-panel__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Flow card slider — left arrow */
.flow-card__nav-btn_prev {
	right: auto;
	left: 20px;
}
.flow-card__nav-btn_prev .slider-arrow {
	transform: scaleX(-1);
}

/* Плавное появление/закрытие попапов (display заменён на opacity+visibility) */
.search-overlay,
.history-modal,
.flow-modal,
.screen-modal,
.site-modal {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.search-overlay { display: block; }
.history-modal,
.flow-modal,
.screen-modal,
.site-modal { display: flex; }

.search-overlay_active,
.history-modal_active,
.flow-modal_active,
.screen-modal_active,
.site-modal_active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.25s ease;
}

/* ==========================================
   MOBBIN-STYLE REDESIGN (v1) — append-only
   Переопределения токенов и компонентов под эстетику Mobbin:
   мягкие нейтральные границы, near-black, спокойная палитра,
   лёгкий подъём карточек на ховере. HTML не меняется.
   ========================================== */

/* Токены: смягчённые границы и серые, near-black вместо чистого чёрного */
:root {
	--color-black: #0a0a0a;
	--color-text-gray: #52525b;
	--color-text-light: #a1a1aa;
	--color-text-muted: #a1a1aa;
	--color-border-light: #ececec;
	--color-border-action: #e4e4e7;
	--color-border-filter: #d4d4d8;
	--color-tab-bg: #f4f4f5;
	--color-arrow-btn: #71717a;
}

html, body {
	background: var(--color-white);
}

/* Карточки банков — мягче, спокойный нейтральный фон, лёгкий подъём */
.bank-item {
	background: #f4f4f5;
	border-radius: 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bank-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(9, 9, 11, 0.10);
}

/* Скриншоты экранов — мягкая тень телефона при наведении на карточку */
.screen-card__phone {
	transition: box-shadow 0.2s ease;
}
.screen-card:hover .screen-card__phone {
	box-shadow: 0 10px 28px rgba(9, 9, 11, 0.10);
}

/* Иконки приложений (каталог банка) — лёгкий подъём */
.appcard-item__screenshot {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.appcard-item:hover .appcard-item__screenshot {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(9, 9, 11, 0.10);
}

/* Сегмент-переключатели (pill) — чистый нейтральный фон вместо серого */
.home-hero .tabs-group {
	background: #f4f4f5;
}

/* Hover-кнопки экранов внутри flow-modal (переиспользуем .screen-card__hover) */
.flow-card__slide .screen-card__hover {
	display: none;
}
.flow-modal__slide .screen-card__hover {
	display: flex;
	border-radius: 30px;
}
.flow-modal_web .flow-modal__slide .screen-card__hover {
	border-radius: 8px;
}
.flow-modal__slide:hover .screen-card__hover {
	opacity: 1;
	visibility: visible;
}

/* Contact Form 7 в попапах — сохраняем оформление .simple-popup */
.simple-popup .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
/* Радио CF7 — повторяем вид .simple-popup__radio / .simple-popup__radio-mark */
.simple-popup__radios .wpcf7-radio {
	display: flex;
	align-items: center;
	gap: 21px;
}
.simple-popup__radios .wpcf7-list-item {
	margin: 0;
}
.simple-popup__radios .wpcf7-list-item label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #373737;
	line-height: normal;
	margin: 0;
}
.simple-popup__radios input[type="radio"] {
	display: none;
}
.simple-popup__radios .wpcf7-list-item-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.simple-popup__radios .wpcf7-list-item-label::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #636363;
	box-sizing: border-box;
}
.simple-popup__radios input:checked + .wpcf7-list-item-label::before {
	background: radial-gradient(circle, #636363 0 7px, transparent 7px);
}
.wpcf7-spinner{
	position: absolute;
	margin: 0;
	right: 5px;
	bottom: 5px;
}
.wpcf7-not-valid{
	border-color: #dc3232 !important;
}
.wpcf7-not-valid-tip{
	display: none !important;
}
.wpcf7 form .wpcf7-response-output {
	margin: 1em 0;
	padding: 9px;
	font-size: 14px;
}