@charset "UTF-8";

/* ========================================
   CSS Variables — единый источник правды
   для цветов, размеров, теней и переходов.
   Все значения берутся отсюда, хардкод запрещён.
======================================== */
:root {
    /* Цвета */
    --color-primary: #4154b7;
    --color-primary-hover: #3446a0;
    --color-primary-light: #60b2f5;
    --color-primary-dark: #04202d;
    --color-accent: #e42fb2;
    --color-accent-red: #f22d3e;
    --color-accent-cyan: #6eced9;
    --color-accent-cyan-alt: #6ed1dc;

    --color-text: #04202d;
    --color-text-light: #666e75;
    --color-text-muted: #5f6f7e;
    --color-text-dark: #191919;

    --color-white: #fff;
    --color-bg-light: #f8fafe;
    --color-bg-lighter: #dff0fd;
    --color-bg-blue: #f8faff;
    --color-input-bg: rgba(229, 235, 250, 0.65);
    --color-input-bg-light: rgba(229, 235, 250, 0.45);
    --color-input-bg-strong: rgba(229, 235, 250, 0.7);

    /* Тени */
    --shadow-card: 0 -6px 39px rgba(220, 225, 233, 0.25),
                   0 12px 40px rgba(220, 225, 233, 0.25);
    --shadow-form: 0 4px 100px rgba(66, 71, 75, 0.1);
    --shadow-soft: 0 -3px 1rem rgba(215, 226, 243, 0.25),
                   0 0.8rem 1rem rgba(215, 226, 243, 0.25);
    --shadow-panel: 0 4px 39px rgba(220, 225, 233, 0.25),
                    0 12px 40px rgba(220, 225, 233, 0.25);

    /* Радиусы */
    --radius-sm: 0.6rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 1.6rem;
    --radius-section: 6.5rem;

    /* Анимация */
    --transition-base: 0.4s ease;
    --transition-fast: 0.25s ease;

    /* Фокус */
    --focus-ring: 0 0 0 3px rgba(65, 84, 183, 0.25);
}

/* ========================================
   Reset & Base
   Совмещённый: modern universal + полный element reset
   из оригинала (font:inherit, border:0, vertical-align)
======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* FIX: Полный element-reset как в оригинале —
   без него заголовки/code/pre/fieldset получают
   дефолтные браузерные стили */
a, abbr, acronym, address, applet, article, aside, audio,
b, big, blockquote, body, canvas, caption, center, cite, code,
dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, html, i, iframe, img, ins, kbd, label, legend,
li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s,
samp, section, small, span, strike, strong, sub, summary, sup,
table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

html {
    height: 100%;
    font-size: 10px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    text-rendering: geometricPrecision;
    overflow-x: hidden;
    word-break: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-text);
    font-family: Inter, system-ui, sans-serif;
    font-size: 1.7rem;
    line-height: 1.65;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote::after,
blockquote::before,
q::after,
q::before {
    content: "";
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* FIX: img/svg БЕЗ display:block — оригинал не ставил,
   display:block ломает inline-картинки в .social, .exchanger-attention и т.д. */
img,
svg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* FIX: SVG children transition — был в оригинале */
svg * {
    transition: 0.3s;
}

input,
textarea {
    appearance: none;
    border-radius: 0;
    line-height: 1.5em;
    font-family: inherit;
}

strong {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}

[role="button"],
button {
    cursor: pointer;
    font-family: inherit;
}

/* ========================================
   Accessibility — Focus States
   :focus-visible вместо убийства outline
======================================== */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========================================
   Base Elements
======================================== */
.content {
    flex: 1 0 auto;
}

a {
    font-size: inherit;
    color: inherit;
    transition: var(--transition-base);
    text-decoration: none;
}

a:focus,
a:hover {
    text-decoration: none;
}

/* ========================================
   Layout
======================================== */
.container {
    width: 155rem;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    padding-left: 15px;
    padding-right: 15px;
}

section {
    position: relative;
    overflow: hidden;
}

/* FIX: Clearfix — полностью пропал в новой версии,
   нужен для float-лейаутов контейнеров */
.clearfix::after,
.clearfix::before {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.container-fluid::after,
.container-fluid::before,
.container::after,
.container::before,
.row::after,
.row::before {
    content: " ";
    display: table;
}

.container-fluid::after,
.container::after,
.row::after {
    clear: both;
}

/* ========================================
   Utilities
======================================== */
.hide,
.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

.hidden_sx {
    display: none;
}

.affix {
    position: fixed;
}

.w100 {
    width: 100%;
}

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

.pad_30 {
    padding: 3rem;
}

.pad_section {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

.pad_section_bot {
    padding-bottom: 12rem;
}

.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ========================================
   Decorative Elements
======================================== */
.decor-grid {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    top: 0;
    pointer-events: none;
}

.decor-grid li {
    position: absolute;
    width: 44.7rem;
    height: 44.7rem;
}

.decor-circle {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    top: 0;
    pointer-events: none;
}

.decor-circle li {
    position: absolute;
    border-radius: 50%;
}

/* ========================================
   Forms
======================================== */
.wrap-form {
    background: var(--color-white);
    box-shadow: var(--shadow-form);
    border-radius: var(--radius-lg);
    padding: 3rem;
}

.form-group {
    position: relative;
    margin-bottom: 2rem;
}

.form-horizontal {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin: 0 -1rem;
}

.form-horizontal > .form-group {
    width: calc(50% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
}

.form-horizontal .full {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
}

.form-horizontal .third {
    width: calc(33.333% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
}

.input_st {
    height: 6.4rem;
    border-radius: var(--radius-md);
    width: 100%;
    border: 1px solid transparent;
    font-size: 1.6rem;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 400;
    padding: 0 5px 0 2rem;
    background: var(--color-input-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input_st::placeholder {
    color: rgba(102, 110, 117, 0.9);
}

.input_st:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

textarea.input_st {
    height: 18.5rem;
    resize: none;
    padding: 1rem 5px 5px 2rem;
}

.input_currency {
    display: inline;
    border: 0;
    background: 0;
    padding: 0 2rem 0 6rem;
    font-weight: 600;
    height: 6.4rem;
    font-size: 1.5rem;
    width: 100%;
    font-family: Inter, system-ui, sans-serif;
}

.form-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-bot .btn_st {
    margin-left: 1.5rem;
}

.form-consent {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
}

.form-consent label {
    cursor: pointer;
    line-height: 0;
}

.form-consent__text {
    width: calc(100% - 3rem);
    padding-left: 2rem;
    font-size: 14px;
    color: var(--color-text-light);
    align-self: center;
}

.form-consent__text a {
    color: var(--color-primary-light);
}

.form-consent__text a:hover {
    color: var(--color-accent);
}

/* Checkbox */
.check_st + span {
    position: relative;
    border-radius: var(--radius-sm);
    width: 3rem;
    height: 3rem;
    display: block;
    transition: var(--transition-base);
    background: var(--color-input-bg);
}

.check_st + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/check.png) center no-repeat;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.check_st:checked + span {
    background: var(--color-primary);
}

.check_st:checked + span::before {
    opacity: 1;
}

/* ========================================
   Buttons
======================================== */
.btn_st {
    display: inline-block;
    background: var(--color-primary);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: background var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    font-weight: 500;
    font-size: 1.6rem;
    font-family: Inter, system-ui, sans-serif;
    color: var(--color-white);
    border: 0;
    min-width: 25rem;
    text-align: center;
}

.btn_st > span {
    height: 6.4rem;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_st_blue {
    background: var(--color-primary-light);
}

.btn_st_dark {
    background: var(--color-primary-dark);
}

.btn_st:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(65, 84, 183, 0.3);
}

.btn_st:active {
    background: var(--color-accent);
    transform: translateY(0);
    box-shadow: none;
}

.btn_center {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin-top: 4.5rem;
}

.btn_center.pagination {
    margin-top: 0;
}

/* ========================================
   Typography
======================================== */
.title-section {
    margin-bottom: 4rem;
}

.title-section__main {
    position: relative;
    padding-bottom: 2rem;
    font-weight: 600;
    font-size: 4.3rem;
    line-height: 1.4;
}

.title-section__main::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 6.3rem;
    height: 0.9rem;
    background: url(../img/camel-line.svg) no-repeat;
}

.title-section__main.no_decor {
    padding-bottom: 0;
}

.title-section__main.no_decor::before {
    display: none;
}

.title-section__subtitle {
    line-height: 1.65;
    margin-top: 3rem;
    font-size: 1.7rem;
    color: var(--color-text-light);
}

.title-section.text-center .title-section__main::before {
    left: 50%;
    transform: translateX(-50%);
}

.text-group {
    font-size: 1.7rem;
    color: var(--color-text-light);
}

.text-group > * {
    margin-bottom: 1.5rem;
}

.text-group > :last-child {
    margin-bottom: 0;
}

.text-group strong {
    color: var(--color-text-dark);
    font-weight: 500;
}

.text-group a {
    color: var(--color-primary-light);
}

.text-group a:hover {
    color: var(--color-accent);
}

.text-group h1,
.text-group h2,
.text-group h3,
.text-group h4,
.text-group h5,
.text-group h6 {
    color: var(--color-text);
    font-weight: 600;
}

.text-group h1 {
    font-size: 4.3rem;
    line-height: 1.2;
}

.text-group h2 {
    font-size: 3.5rem;
    line-height: 1.2;
}

.text-group h3 {
    font-size: 3rem;
    line-height: 1.2;
}

.text-group h4 {
    font-size: 2.5rem;
    line-height: 1.2;
}

.text-group h5 {
    font-size: 1.9rem;
}

.text-group ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.text-group ul li:last-child {
    margin-bottom: 0;
}

.text-group ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

.text-group ol {
    counter-reset: counter;
}

.text-group ol li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.text-group ol li:last-child {
    margin-bottom: 0;
}

.text-group ol li::before {
    content: counter(counter) ".";
    counter-increment: counter;
    position: absolute;
    left: 0;
    font-weight: 500;
    color: var(--color-accent);
}

/* ========================================
   Components — Rating
======================================== */
.rating {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
}

.rating li {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.rating li:last-child {
    margin-right: 0;
}

.rating li.active svg path {
    fill: #f0c93e !important;
}

/* ========================================
   Components — Social
======================================== */
.social {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
    margin-top: 3rem;
}

.social li {
    padding-right: 3.3rem;
    position: relative;
}

.social li::before {
    content: "";
    position: absolute;
    right: 1.5rem;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-accent);
    top: 50%;
    transform: translateY(-50%);
}

.social li:last-child {
    padding-right: 0;
}

.social li:last-child::before {
    display: none;
}

.social li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    transition: background var(--transition-fast);
}

.social li a img,
.social li a svg {
    width: 2rem;
    height: 2rem;
}

/* FIX: Вернул !important как в оригинале —
   без него hover может не перебить inline background */
.social li a:hover {
    background: var(--color-accent) !important;
}

/* ========================================
   Components — Breadcrumbs
======================================== */
.breadcrumbs {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 33rem;
    max-width: 100%;
    margin: 6.5rem 0;
    font-size: 1.5rem;
}

.breadcrumbs li {
    display: inline;
    padding-right: 4rem;
    position: relative;
}

.breadcrumbs li:last-child {
    padding-right: 0;
}

.breadcrumbs li::before {
    content: "/";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
}

.breadcrumbs li:last-child::before {
    display: none;
}

.breadcrumbs li a {
    color: var(--color-text-muted);
}

.breadcrumbs li a:hover {
    color: var(--color-accent);
}

/* ========================================
   Components — Pagination
======================================== */
.pagination {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin-top: 3rem;
}

.pagination li {
    margin-right: 1rem;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    background: #e5ebfa;
    border-radius: 9px;
    width: 4.6rem;
    height: 4.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 1.4rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pagination li a.active,
.pagination li a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ========================================
   Components — Modal
======================================== */
.modal {
    display: none;
    max-width: 98%;
    background: var(--color-white);
    box-shadow: var(--shadow-form);
    border-radius: var(--radius-lg);
    overflow: visible;
    padding: 0;
}

.modal-sm {
    width: 52rem;
}

.modal-content {
    padding: 4.5rem 3.5rem 3.5rem;
}

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

.modal-title__main {
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1;
}

.modal-title__subtitle {
    color: var(--color-text-light);
    line-height: 1.65;
    margin-top: 2rem;
}

.modal-title + * {
    margin-top: 3.5rem;
}

.modal .btn_st {
    margin-top: 3rem;
}

.show_pass {
    right: 2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: url(../img/view.svg) center no-repeat;
    cursor: pointer;
    background-size: 100%;
}

.show_pass.active {
    background: url(../img/view-none.svg) center no-repeat;
}

/* ========================================
   Components — Tabs
======================================== */
.js-tab-link {
    cursor: pointer;
}

.js-tab-link.active {
    pointer-events: none;
}

.js-tab-item {
    display: none;
}

.js-tab-item.active {
    display: block;
}

/* ========================================
   Components — Contact List
======================================== */
.contact-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
    margin-top: 3rem;
}

.contact-list li {
    margin-right: 2.5rem;
}

.contact-list li:last-child {
    margin-right: 0;
}

.contact-list li a:hover {
    color: var(--color-accent);
}

/* ========================================
   Swiper Testimonials — Pagination
   (замена Slick dots, повторяет их внешний вид)
======================================== */
.testimonials-slider .swiper-pagination {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin-top: 4rem;
    position: relative;
    bottom: auto;
    width: 100%;
}

.testimonials-slider .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: rgba(4, 32, 45, 0.24);
    border-radius: var(--radius-md);
    margin: 0 1rem 0 0;
    transition: var(--transition-base);
    cursor: pointer;
    opacity: 1;
}

.testimonials-slider .swiper-pagination-bullet:last-child {
    margin-right: 0;
}

.testimonials-slider .swiper-pagination-bullet:hover {
    background: #1c1c1d;
}

.testimonials-slider .swiper-pagination-bullet-active {
    background: #1c1c1d;
    width: 2.8rem;
    border-radius: var(--radius-md);
}

/* ========================================
   CustomSelect (замена Selectric)
   Vanilla JS, zero dependencies
======================================== */

/* Обёртка */
.cs-wrapper {
    position: relative;
    cursor: pointer;
    width: 100%;
}

.cs-wrapper.cs-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Кнопка-триггер */
.cs-trigger {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 6.4rem;
    width: 100%;
    font-size: 1.5rem;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 500;
    overflow: hidden;
    margin: 0;
    padding: 0 3.5rem 0 1.5rem;
    border: 0;
    background: var(--color-input-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    text-align: left;
    color: var(--color-text);
    transition: background var(--transition-fast),
                box-shadow var(--transition-fast);
    line-height: 1.3;
}

.cs-trigger:hover {
    background: rgba(229, 235, 250, 0.85);
}

.cs-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Лейбл */
.cs-label {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Стрелка */
.cs-arrow {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-right: 1px solid #626262;
    border-bottom: 1px solid #626262;
    transition: transform var(--transition-base);
    flex-shrink: 0;
    pointer-events: none;
}

.cs-open .cs-arrow {
    transform: translateY(-50%) rotate(-135deg);
}

/* Дропдаун */
.cs-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    border-radius: 10px;
    background: #e5ebfa;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.06);
    animation: csDropdownIn 0.2s ease-out;
}

.cs-above .cs-dropdown {
    top: auto;
    bottom: calc(100% + 4px);
    animation: csDropdownInUp 0.2s ease-out;
}

@keyframes csDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes csDropdownInUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Поиск */
.cs-search {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 1.4rem;
    font-family: Inter, system-ui, sans-serif;
    background: transparent;
    outline: none;
    color: var(--color-text);
}

.cs-search::placeholder {
    color: var(--color-text-muted);
}

/* Список опций */
.cs-options {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.cs-options::-webkit-scrollbar {
    width: 4px;
}

.cs-options::-webkit-scrollbar-track {
    background: transparent;
}

.cs-options::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* Опция */
.cs-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    gap: 10px;
    min-height: 44px;
}

.cs-option:hover,
.cs-option--focused {
    background: rgba(0, 0, 0, 0.06);
}

.cs-option--selected {
    background: var(--color-text-muted);
    color: var(--color-white);
}

.cs-option--selected:hover,
.cs-option--selected.cs-option--focused {
    background: var(--color-text-muted);
    color: var(--color-white);
}

.cs-option--disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Иконки валют внутри CustomSelect */
.cs-option .select_ico,
.cs-label .select_ico {
    margin-right: 0;
}

/* Прозрачный фон в exchanger */
.exchanger-item .cs-trigger {
    background: transparent;
}

.exchanger-item .cs-trigger:hover {
    background: rgba(0, 0, 0, 0.03);
}

.select_ico {
    width: 2.8rem;
    height: 2.8rem;
    margin-right: 10px;
    line-height: 0;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    vertical-align: middle;
}

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

.select_text {
    width: calc(100% - 3rem);
    display: inline;
}

/* ========================================
   Fonts
======================================== */
@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-Thin.woff2) format("woff2"),
         url(../fonts/Inter-Thin.woff) format("woff");
    font-weight: 100;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-ExtraLight.woff2) format("woff2"),
         url(../fonts/Inter-ExtraLight.woff) format("woff");
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-Light.woff2) format("woff2"),
         url(../fonts/Inter-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-Regular.woff2) format("woff2"),
         url(../fonts/Inter-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-Medium.woff2) format("woff2"),
         url(../fonts/Inter-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-SemiBold.woff2) format("woff2"),
         url(../fonts/Inter-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-ExtraBold.woff2) format("woff2"),
         url(../fonts/Inter-ExtraBold.woff) format("woff");
    font-weight: 800;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-Black.woff2) format("woff2"),
         url(../fonts/Inter-Black.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

/* ========================================
   Header
======================================== */
.header {
    background: var(--color-primary-dark);
    position: relative;
    z-index: 1;
}

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

.logo {
    width: 8rem;
    height: 5.4rem;
    display: block;
    line-height: 0;
}

.navigation ul {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 13px;
}

.navigation ul li {
    padding: 0 2.5rem;
}

.navigation ul li a {
    height: 7.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}

.navigation ul li a::before {
    content: "";
    position: absolute;
    background: var(--color-accent);
    border-radius: 3px 3px 0 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    bottom: 0;
    transition: var(--transition-base);
}

.navigation ul li a.active,
.navigation ul li a:hover {
    color: var(--color-white);
}

.navigation ul li a.active::before,
.navigation ul li a:hover::before {
    width: 2.3rem;
}

.user-nav {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
}

.user-nav > * {
    margin-left: 4rem;
}

.user-nav > :first-child {
    margin-left: 0;
}

.user-nav__balance {
    color: var(--color-white);
}

.enter-link {
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.4rem;
}

.enter-link:hover {
    color: var(--color-accent);
}

.enter-btn {
    display: inline-block;
    background: var(--color-white);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.enter-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.tog-nav {
    width: 24px;
    height: 11px;
    cursor: pointer;
    display: none;
    position: relative;
}

.tog-nav::after,
.tog-nav::before {
    content: "";
    width: 100%;
    height: 1px;
    border-radius: 0.3px;
    position: absolute;
    background: var(--color-accent);
    left: 0;
    transition: var(--transition-base);
}

.tog-nav::before {
    top: 0;
}

.tog-nav::after {
    bottom: 0;
}

.tog-nav.active::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tog-nav.active::after {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Language Switcher */
.language {
    position: relative;
}

.language-active {
    cursor: pointer;
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.4rem;
    text-transform: uppercase;
    padding-right: 1.5rem;
    position: relative;
}

.language-active::before {
    content: "";
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateY(-50%) rotate(45deg);
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
    transition: var(--transition-base);
}

.language-drop {
    position: absolute;
    top: calc(100% + 3rem);
    transition: var(--transition-base);
    left: 0;
    padding-top: 1.5rem;
    opacity: 0;
    pointer-events: none;
}

.language-drop ul {
    background: var(--color-bg-lighter);
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: 5px 0;
    width: 5rem;
}

.language-drop ul li {
    padding: 5px 0;
}

.language-drop ul a {
    padding: 5px;
    display: block;
    font-size: 1.4rem;
    text-align: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.language-drop ul a:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

.language.active .language-drop {
    opacity: 1;
    pointer-events: all;
    top: 100%;
}

.language.active .language-active::before {
    transform: translateY(0) rotate(-135deg);
}

/* ========================================
   Footer
======================================== */
.footer {
    background: var(--color-primary-dark);
}

.footer-top {
    padding: 1.8rem 0;
}

.footer-top__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
}

.footer-bot {
    border-top: 1px solid rgba(27, 59, 72, 0.6);
    padding: 2.5rem 0;
}

.footer-bot__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    font-size: 1.6rem;
    color: var(--color-text-muted);
}

.footer-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-muted);
}

.footer-nav li {
    padding: 0 2.5rem;
}

.footer-nav a:hover {
    color: var(--color-white);
}

.footer-contact {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    color: var(--color-white);
    font-size: 1.6rem;
}

.footer-contact li {
    margin-right: 3.5rem;
}

.footer-contact li:last-child {
    margin-right: 0;
}

.footer-contact li a:hover {
    color: var(--color-accent);
}

.footer-link {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    align-items: center;
}

.footer-link li {
    margin-right: 3.5rem;
}

.footer-link li:last-child {
    margin-right: 0;
}

.footer-link li a:hover {
    color: var(--color-accent);
}

/* ========================================
   Section — Head (Hero)
======================================== */
.section-head {
    background: var(--color-bg-light);
    padding-top: 17rem;
    padding-bottom: 17rem;
    position: relative;
    border-radius: 0 0 0 var(--radius-section);
}

.section-head > img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.section-head .decor-grid li:first-child {
    top: -25rem;
    left: 24rem;
}

.section-head .decor-grid li:nth-child(2) {
    left: 40%;
    transform: translateX(-50%);
    bottom: -25rem;
}

.section-head .decor-grid li:last-child {
    top: 0;
    right: 50rem;
}

.section-head .decor-circle li:first-child {
    width: 13.5rem;
    height: 13.5rem;
    background: var(--color-accent-red);
    top: 50%;
    transform: translateY(-50%);
    left: -6.2rem;
}

.section-head .decor-circle li:nth-child(2) {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-accent-cyan);
    top: 55%;
    left: 5rem;
}

.section-head .decor-circle li:nth-child(3) {
    width: 13px;
    height: 13px;
    border: 3px solid var(--color-accent-red);
    bottom: 14rem;
    left: 23%;
}

.section-head .decor-circle li:nth-child(4) {
    width: 13px;
    height: 13px;
    border: 3px solid var(--color-accent-cyan-alt);
    top: 14rem;
    left: 53%;
}

.section-head .decor-circle li:nth-child(5) {
    width: 4px;
    height: 4px;
    background: var(--color-accent-cyan);
    top: 13.5rem;
    left: 23%;
}

.section-head .decor-circle li:nth-child(6) {
    width: 4px;
    height: 4px;
    background: var(--color-accent-cyan);
    top: 23.5rem;
    left: 40%;
}

.section-head .decor-circle li:nth-child(7) {
    width: 5px;
    height: 5px;
    background: var(--color-accent-red);
    top: 10.5rem;
    left: 47%;
}

.section-head .decor-circle li:nth-child(8) {
    width: 6px;
    height: 6px;
    background: var(--color-accent-cyan-alt);
    bottom: 7.5rem;
    left: 30%;
}

.section-head .decor-circle li:nth-child(9) {
    width: 4px;
    height: 4px;
    background: var(--color-accent-red);
    bottom: 7.5rem;
    left: 40%;
}

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

.head-content .wrap-form {
    width: 57rem;
}

.head-content__left {
    width: calc(100% - 58rem);
    padding-right: 5rem;
}

.head-suptitle {
    letter-spacing: 0.15em;
    font-weight: 500;
    font-size: 13px;
    line-height: 22px;
}

.head-title {
    font-weight: 600;
    font-size: 5.5rem;
    line-height: 1.3;
}

.head-title > span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.head-text {
    width: 74rem;
    padding-left: 8rem;
    position: relative;
    line-height: 1.8;
    font-size: 1.9rem;
    color: var(--color-text-light);
    margin-top: 3.5rem;
    max-width: 100%;
}

.head-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 4.9rem;
    height: 0.7rem;
    background: url(../img/camel-line.svg) center no-repeat;
    background-size: 100%;
}

.head-in {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row wrap;
}

.head-in__left,
.head-in__right {
    width: 49%;
}

.head-in + * {
    margin-top: 4rem;
}

.head-in__right .text-group + * {
    margin-top: 4rem;
}

/* Section Head In */
.section-head-in .decor-circle li:first-child {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary-light);
    top: 5rem;
    left: -2rem;
}

.section-head-in .decor-circle li:nth-child(2) {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    top: 15rem;
    left: 5%;
}

.section-head-in .decor-circle li:nth-child(3) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    top: 25rem;
    left: 3%;
}

.section-head-in .decor-circle li:nth-child(4) {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary);
    top: 5rem;
    right: -2rem;
}

.section-head-in .decor-circle li:nth-child(5) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    top: 15rem;
    right: 5%;
}

.section-head-in .decor-circle li:nth-child(6) {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    top: 25rem;
    right: 3%;
}

/* ========================================
   Exchanger
======================================== */
.exchanger-item {
    margin-bottom: 3.5rem;
}

.exchanger-item__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 2rem;
}

.exchanger-item__main {
    background: var(--color-input-bg);
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
}

.exchanger-item__main + * {
    margin-top: 2rem;
}

.exchanger-item__main-left {
    width: 50%;
    position: relative;
}

.exchanger-item__main-left > span {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 1.6rem;
}

.exchanger-item__main-left::before {
    content: "";
    position: absolute;
    background: rgba(207, 207, 207, 0.8);
    height: 3.8rem;
    width: 1px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.exchanger-item__main-right {
    width: 50%;
}

.exchanger-info__item {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin-bottom: 1.5rem;
    font-size: 14px;
    color: #6e6e6e;
}

.exchanger-info__item strong {
    font-weight: 500;
    color: var(--color-text-dark);
}

.exchanger-info__item:last-child {
    margin-bottom: 0;
}

.exchanger-btn {
    margin-top: 3.5rem;
}

.exchanger-btn .btn_st {
    width: 100%;
}

.exchanger-bot {
    margin-top: 2.5rem;
}

.exchanger-bot .btn_st {
    margin-top: 2.5rem;
}

.exchanger-attention {
    font-size: 14px;
    color: var(--color-text-light);
}

.exchanger-attention strong {
    font-weight: 600;
    color: var(--color-text);
    font-size: 1.6rem;
}

.exchanger-attention img {
    margin-right: 1rem;
    vertical-align: sub;
}

.exchanger-policy {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.exchanger-policy .form-consent {
    width: 48%;
}

/* ========================================
   Section — Advantages
======================================== */
.section-advantages .decor-grid > li:first-child {
    top: -2rem;
    left: -16rem;
}

.section-advantages .decor-grid > li:last-child {
    top: 50%;
    transform: translateY(-50%);
    right: -16rem;
}

.advantages {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin: 0 -1.5rem;
}

.advantages-item {
    margin: 3.4rem 1.5rem 0;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    padding: 9rem 3.5rem 4rem;
    width: calc(33.333% - 3rem);
    position: relative;
    text-align: center;
}

.advantages-item__media {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 9rem;
    height: 9rem;
    top: -3rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advantages-item__media img {
    width: 3.6rem;
    height: 3.6rem;
}

.advantages-item__title {
    font-weight: 600;
    font-size: 2.2rem;
    margin-bottom: 2.2rem;
    line-height: 1;
}

.advantages-item__text {
    font-size: 1.7rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* ========================================
   Mover Line (Marquee)
======================================== */
.mover-line {
    margin-top: 8rem;
    width: 100vw;
    margin-left: -50%;
    animation: moveSlideshow 40s linear infinite;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.03em;
    color: #e1e7f4;
    font-weight: 600;
    font-size: 6rem;
    line-height: 1;
}

.mover-line__item {
    padding: 0 4rem;
    position: relative;
}

.mover-line__item::before {
    content: "/";
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes moveSlideshow {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(50%, 0);
    }
}

/* ========================================
   Section — Testimonials
======================================== */
.section-testimonials {
    border-radius: var(--radius-section) 0;
}

.section-testimonials .decor-grid > li:first-child {
    top: -25rem;
    left: 30%;
}

.section-testimonials .decor-grid > li:nth-child(2) {
    left: -30rem;
    bottom: 27rem;
}

.section-testimonials .decor-grid > li:last-child {
    bottom: 0;
    left: 25rem;
}

.testimonials-group {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.testimonials-group__left {
    width: 40%;
    padding-right: 5rem;
}

.testimonials-group__right {
    width: 60%;
}

.testimonials-item {
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-xl);
    padding: 3.5rem;
    position: relative;
    text-align: left;
}

.testimonials-item::before {
    content: "";
    position: absolute;
    right: 100%;
    background: var(--color-accent);
    border-radius: 20px 0 0 20px;
    top: 3.5rem;
    width: 3px;
    height: 2rem;
}

.testimonials-item__top {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin-bottom: 2rem;
}

.testimonials-item__name {
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
}

.testimonials-item__text {
    font-size: 1.7rem;
    line-height: 1.65;
    color: var(--color-text-light);
}

.testimonials-item__date {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
    color: rgba(102, 110, 117, 0.6);
    font-size: 1.6rem;
    margin-top: 2.5rem;
}

.testimonials-item__date img,
.testimonials-item__date svg {
    width: 1.6rem;
    height: 1.8rem;
    margin-right: 1.2rem;
}

/* Testimonials Swiper — стили слайдов */
.testimonials-slider .swiper-slide {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 1rem;
}

.testimonials-slider {
    overflow: hidden;
}

.testimonials-slider .swiper-slide:hover {
    background: transparent;
}

.testimonials-slider .swiper-slide > * {
    margin-bottom: 2.5rem;
}

.testimonials-slider .swiper-slide > :last-child {
    margin-bottom: 0;
}

.section-testimonials-main {
    padding-top: 2.5rem;
}

.section-testimonials-main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 10rem;
    background: var(--color-bg-blue);
    border-radius: var(--radius-section) 0 0 0;
}

.section-testimonials-main .decor-grid li:first-child {
    top: 15rem;
    left: -17rem;
}

.section-testimonials-main .decor-grid li:nth-child(2) {
    top: 35%;
    right: -17rem;
}

.testimonials {
    width: 126.2rem;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials .testimonials-item {
    margin-bottom: 2.5rem;
}

.testimonials .testimonials-item:last-child {
    margin-bottom: 0;
}

/* ========================================
   Section — FAQ
======================================== */
.section-faq .decor-grid > li:first-child {
    top: 10rem;
    left: -16rem;
}

.section-faq .decor-grid > li:last-child {
    bottom: 14rem;
    right: -16rem;
}

.faq {
    width: 113rem;
    max-width: 100%;
    margin: 0 auto;
    counter-reset: counter;
}

.faq-item {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    margin-bottom: 2.5rem;
    position: relative;
}

.faq-item::before {
    content: counter(counter, decimal-leading-zero) ".";
    counter-increment: counter;
    position: absolute;
    top: 3.5rem;
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
    left: 3.5rem;
}

.faq-item::after {
    content: "";
    position: absolute;
    right: 100%;
    background: var(--color-accent);
    border-radius: 2rem 0 0 2rem;
    width: 3px;
    height: 2rem;
    top: 3.5rem;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item__title {
    padding: 3.5rem 5.5rem 3.5rem 8.6rem;
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    position: relative;
}

.faq-item__title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-primary-light);
    left: 0;
    margin-left: -3px;
    transform: translateX(-8px);
}

.faq-item__title::after {
    content: "";
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
    transition: var(--transition-base);
}

.faq-item__content {
    padding: 0 5.5rem 3.5rem 8.6rem;
    color: var(--color-text-light);
    font-size: 1.7rem;
    line-height: 1.65;
    display: none;
}

.faq-item.active .faq-item__title::after {
    transform: translateY(-50%) rotate(-135deg);
}

.section-faq-main {
    padding-top: 2.5rem;
}

.section-faq-main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 7rem;
    background: var(--color-bg-blue);
    border-radius: var(--radius-section) 0;
}

.section-faq-main .decor-grid li:first-child {
    top: 15rem;
    left: -17rem;
}

.section-faq-main .decor-grid li:nth-child(2) {
    top: 35%;
    right: -17rem;
}

.faq-nav {
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.5rem;
    width: 113rem;
    max-width: 100%;
    margin: 0 auto 3.5rem;
    display: flex;
    justify-content: center;
}

.faq-nav__item {
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--color-text-muted);
    height: 6.4rem;
    padding: 1rem 3.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-base);
    text-align: center;
}

.faq-nav__item:hover {
    color: var(--color-accent);
}

.faq-nav__item.active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ========================================
   Section — Partners
======================================== */
.section-partners {
    border-radius: var(--radius-section) 0;
}

.section-partners .decor-grid > li:first-child {
    top: -22rem;
    left: 20%;
}

.section-partners .decor-grid > li:nth-child(2) {
    right: 20%;
    bottom: -20rem;
}

/* Partners — стили слайдов (scoped к .partners) */
.partners .swiper-slide {
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-xl);
    width: auto;
    display: block;
    transition: background var(--transition-fast);
}

.partners .swiper-slide:hover {
    background: #d7dcf2;
}

.swiper-slide__item {
    width: 34.6rem;
    height: 13.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    padding: 2rem;
}

.partners > * {
    margin-bottom: 3rem;
}

.partners > :last-child {
    margin-bottom: 0;
}

/* ========================================
   Section — Action (CTA)
======================================== */
.section-action .decor-grid li:first-child {
    top: -1rem;
    left: -15rem;
}

.section-action .decor-grid li:last-child {
    bottom: 5rem;
    right: -16rem;
}

.section-action.section-head-in .decor-grid li:first-child {
    top: auto;
    left: -15rem;
    bottom: 1rem;
}

.section-action.section-head-in .decor-grid li:last-child {
    top: 5rem;
    right: -16rem;
}

.action-group {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.action-group__left {
    width: 43%;
    align-self: center;
}

.action-group .wrap-form {
    width: 52%;
}

/* ========================================
   Section — About
======================================== */
.section-about {
    border-radius: var(--radius-section) 0 0 0;
}

.section-about .decor-grid li:first-child {
    top: 3rem;
    left: -16rem;
}

.section-about .decor-grid li:last-child {
    top: -5rem;
    right: -20rem;
}

.about {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin: 0 -1.5rem;
}

.about-item {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    align-items: flex-start;
    width: calc(33.333% - 3rem);
    margin: 0 1.5rem;
}

.about-item__media {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.about-item__media img,
.about-item__media svg {
    width: 3.4rem;
    height: 3.4rem;
}

.about-item__content {
    width: calc(100% - 9rem);
    padding-left: 3rem;
}

.about-item__title {
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 2rem;
}

.about-item__text {
    line-height: 1.65;
    color: var(--color-text-light);
}

.about.full {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

.about.full .about-item {
    width: 100%;
    margin: 0 0 4rem;
}

.about.full .about-item:last-child {
    margin-bottom: 0;
}

/* ========================================
   Section — Text
======================================== */
.section-text .decor-grid li:first-child {
    top: 10rem;
    left: -16rem;
}

.section-text .decor-grid li:nth-child(2) {
    top: 30%;
    right: -16rem;
}

.section-text .decor-grid li:nth-child(3) {
    bottom: 5.5rem;
    left: -16rem;
}

.wrap-text {
    width: 101rem;
    max-width: 100%;
    margin: 0 auto;
}

/* ========================================
   Section — Info
======================================== */
.section-info {
    border-radius: 6.5px 0 0 0;
}

.section-info .decor-grid li:first-child {
    top: 0;
    left: -16rem;
}

.section-info .decor-grid li:last-child {
    bottom: 0;
    right: -16rem;
}

.info-list {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin: 1.5rem -1.5rem 0;
    counter-reset: counter;
}

.info-list__item {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    padding: 3.5rem;
    width: calc(33.333% - 3rem);
    margin: 3rem 1.5rem 0;
    position: relative;
    line-height: 1.65;
    color: var(--color-text-light);
}

.info-list__item::after {
    content: "";
    position: absolute;
    right: 100%;
    background: var(--color-accent);
    border-radius: 20px 0 0 20px;
    width: 3px;
    height: 2rem;
    top: 3.5rem;
}

.info-list__item::before {
    content: counter(counter, decimal-leading-zero);
    counter-increment: counter;
    display: block;
    line-height: 1.2;
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--color-text);
    margin-bottom: 2.5rem;
}

/* ========================================
   Section — Levels
======================================== */
.section-levels .decor-grid li:first-child {
    left: -16rem;
    top: 0;
}

.section-levels .decor-grid li:last-child {
    bottom: 0;
    right: -16rem;
}

.levels {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.levels-item {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    width: calc(33.333% - 3rem);
    margin: 3rem 1.5rem 0;
}

.levels-item__label {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    display: inline-block;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-primary-light);
    line-height: 1;
    margin-bottom: 2rem;
    font-size: 1.6rem;
}

.levels-item__column {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.levels-item__column-item {
    width: 49%;
}

.levels-item__column-title {
    font-weight: 500;
    color: var(--color-text-light);
}

.levels-item__column-main {
    font-weight: 600;
}

/* ========================================
   Section — Payment
======================================== */
.section-payment .decor-grid li:first-child {
    top: 11rem;
    left: -18rem;
}

.section-payment .decor-grid li:last-child {
    bottom: 0;
    right: -18rem;
}

.section-payment .decor-circle li:first-child {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary-light);
    top: 5rem;
    left: -2rem;
}

.section-payment .decor-circle li:nth-child(2) {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    top: 15rem;
    left: 5%;
}

.section-payment .decor-circle li:nth-child(3) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    top: 25rem;
    left: 3%;
}

.section-payment .decor-circle li:nth-child(4) {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary);
    bottom: 25rem;
    right: -2rem;
}

.section-payment .decor-circle li:nth-child(5) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    bottom: 15rem;
    right: 5%;
}

.section-payment .decor-circle li:nth-child(6) {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    bottom: 9rem;
    right: 3%;
}

.payment {
    background: var(--color-white);
    box-shadow: var(--shadow-form);
    border-radius: var(--radius-lg);
    width: 1140px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin: 0 auto;
    position: relative;
}

.payment.big {
    width: 1262px;
}

.payment::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.payment-item__left,
.payment-item__right {
    padding: 3rem;
    width: 50%;
}

.payment-item__title {
    font-weight: 600;
    line-height: 1;
    margin-bottom: 3.5rem;
}

.payment-item__btn {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.payment-item__btn > .btn_st {
    width: calc(50% - 1rem);
    min-width: auto;
}

.payment-item__btn > .btn_st span {
    min-width: 100%;
}

.payment-text {
    font-size: 1.6rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.payment-checkout {
    background: var(--color-input-bg-light);
    border-radius: var(--radius-md);
}

.payment-checkout li {
    padding: 2.5rem;
    border-bottom: 1px solid rgba(213, 221, 240, 0.85);
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-checkout li:last-child {
    border-bottom: 0;
}

.payment-checkout li strong {
    font-weight: 500;
}

.payment-checkout li span {
    color: var(--color-text-light);
}

.payment-info {
    margin-top: 3rem;
}

.payment-info__item {
    background: var(--color-bg-lighter);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.payment-info__item:last-child {
    margin-bottom: 0;
}

.payment-info__item-title {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
    padding: 2.5rem 3.5rem 2.5rem 2.5rem;
    cursor: pointer;
    position: relative;
}

.payment-info__item-title::before {
    content: "";
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
    transition: var(--transition-base);
}

.payment-info__item-content {
    padding: 0 2.5rem 2.5rem;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-text-light);
    display: none;
}

.payment-info__item.active .payment-info__item-title::before {
    transform: translateY(-50%) rotate(-135deg);
}

.payment .exchanger-item:last-child {
    margin-bottom: 0;
}

/* ========================================
   Cabinet
======================================== */
.section-cabinet .decor-grid li:first-child {
    top: 11rem;
    left: -18rem;
}

.section-cabinet .decor-grid li:last-child {
    bottom: 0;
    right: -18rem;
}

.section-cabinet .decor-circle li:first-child {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary-light);
    top: 5rem;
    left: -2rem;
}

.section-cabinet .decor-circle li:nth-child(2) {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    top: 15rem;
    left: 5%;
}

.section-cabinet .decor-circle li:nth-child(3) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    top: 25rem;
    left: 3%;
}

.section-cabinet .decor-circle li:nth-child(4) {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary);
    bottom: 25rem;
    right: -2rem;
}

.section-cabinet .decor-circle li:nth-child(5) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    bottom: 15rem;
    right: 5%;
}

.section-cabinet .decor-circle li:nth-child(6) {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    bottom: 9rem;
    right: 3%;
}

.cabinet-wrap {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.cabinet-wrap__left {
    width: 35.7rem;
}

.cabinet-wrap__right {
    width: calc(100% - 39rem);
}

.cabinet-aside {
    background: var(--color-white);
    box-shadow: var(--shadow-panel);
    border-radius: var(--radius-lg);
}

.cabinet-aside__top {
    padding: 2.5rem;
}

.cabinet-aside__top:last-child {
    border-bottom: 0;
}

.cabinet-aside__bot {
    padding: 2rem;
    line-height: 0;
    border-top: 1px solid rgba(141, 153, 174, 0.15);
}

.user-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
}

.user-info__avatar {
    background: url(../img/account.svg) center no-repeat var(--color-input-bg);
    background-size: 12px;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
}

.user-info__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info__content {
    width: calc(100% - 5rem);
    padding-left: 1.5rem;
    line-height: 1;
}

.user-info__suptitle {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.user-info__title {
    font-weight: 500;
    font-size: 1.6rem;
}

.cabinet-nav {
    padding: 2rem;
    border-top: 1px solid rgba(141, 153, 174, 0.15);
}

.cabinet-nav li {
    margin-bottom: 1.5rem;
}

.cabinet-nav li:last-child {
    margin-bottom: 0;
}

.cabinet-nav li a {
    background: var(--color-input-bg-strong);
    border-radius: var(--radius-md);
    padding: 1rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    line-height: 1;
    color: var(--color-text-light);
    font-weight: 500;
    font-size: 1.6rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cabinet-nav li a.active,
.cabinet-nav li a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.notification {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 12px;
    margin-left: 1rem;
    text-align: center;
}

.cabinet-title {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 3.5rem;
}

.cabinet-title__main {
    font-weight: 600;
    font-size: 3.5rem;
}

.cabinet-title a.btn_st {
    min-width: auto;
    font-size: 1.4rem;
    line-height: 1;
}

.cabinet-title a.btn_st span {
    height: auto;
    min-height: 4.6rem;
}

.cabinet-content {
    background: var(--color-white);
    box-shadow: var(--shadow-panel);
    border-radius: var(--radius-lg);
}

.cabinet-form__item {
    padding: 3rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cabinet-form__item:last-child {
    border-bottom: 0;
}

.cabinet-form__item-title {
    font-weight: 600;
    font-size: 1.7rem;
    margin-bottom: 2.5rem;
}

.cabinet-form__item button.btn_st {
    margin-top: 2.5rem;
}

.cabinet-wallets__top {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
}

.cabinet-wallets__top .cabinet-form__item-title {
    margin-bottom: 0;
}

.cabinet-wallets__top .btn_st {
    min-width: 18rem;
    font-size: 1.4rem;
}

.cabinet-wallets__top .btn_st > span {
    height: 4.6rem;
}

.wallets {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin: 0 -1rem;
}

.wallets-item {
    padding: 2rem;
    border-radius: 10px;
    width: calc(33.333% - 2rem);
    margin: 2rem 1rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
}

.wallets-item__logo {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    overflow: hidden;
}

.wallets-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wallets-item__content {
    width: calc(100% - 4.2rem);
    padding-left: 1.5rem;
    font-size: 1.6rem;
    line-height: 1;
}

.wallets-item__title {
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Cabinet Table */
.cabinet-table {
    background: var(--color-white);
    box-shadow: var(--shadow-panel);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cabinet-table__head {
    background: var(--color-primary);
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-white);
}

.cabinet-table__head-item {
    height: 6.6rem;
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    text-align: center;
}

.cabinet-table__head-item:last-child {
    border-right: 0;
}

.cabinet-table__row-item {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    font-size: 1.6rem;
    border-top: 1px solid rgba(141, 153, 174, 0.2);
}

.cabinet-table__row-item:first-child {
    border-top: 0;
}

.cabinet-table__td {
    width: 100%;
    min-height: 7.8rem;
    padding: 1rem 2.5rem;
    border-right: 1px solid rgba(141, 153, 174, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    flex-shrink: 0;
    line-height: 1.5;
    text-align: center;
}

.cabinet-table__td:last-child {
    border-right: 0;
}

.cabinet-table__td .btn_st {
    min-width: auto;
    width: 100%;
    font-size: 1.4rem;
}

.cabinet-table__td .btn_st span {
    height: auto;
    min-height: 3.8rem;
    padding: 1rem;
}

.td-title {
    display: none;
}

.table-number {
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--color-primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.table-number .notification {
    margin: 0 1rem 0 0;
}

.td-content__title {
    color: var(--color-text-muted);
}

.td-content__main {
    font-weight: 500;
}

.cabinet-info {
    background: var(--color-white);
    box-shadow: var(--shadow-panel);
    border-radius: var(--radius-lg);
    padding: 15rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.cabinet-info__content {
    width: 51rem;
    max-width: 100%;
}

.cabinet-info__title {
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 2rem;
}

.cabinet-info__text {
    color: var(--color-text-light);
}

.back_link {
    font-weight: 500;
    display: inline-block;
    color: var(--color-primary);
    padding-left: 2rem;
    position: relative;
}

.back_link::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-left: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: var(--transition-base);
}

.back_link:hover {
    color: var(--color-accent);
}

.back_link:hover::before {
    border-color: var(--color-accent);
}

/* ========================================
   Chat
======================================== */
.chat-dialog {
    max-height: 78rem;
    overflow: auto;
}

.chat-dialog__item {
    margin-bottom: 2.5rem;
}

.chat-dialog__item:last-child {
    margin-bottom: 0;
}

.chat-dialog__main {
    width: 68.6rem;
    max-width: 96%;
    border-radius: var(--radius-md);
    padding: 2.5rem;
    background: var(--color-input-bg-strong);
}

.chat-dialog__main.receive {
    margin: auto 0 auto auto;
    background: rgba(96, 178, 245, 0.2);
}

.chat-dialog__main-top {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    font-weight: 500;
}

.chat-dialog__main-text {
    color: var(--color-text-muted);
    margin-top: 1.5rem;
    line-height: 1.6;
}

.chat-form {
    margin-top: 2rem;
}

.chat-form__group {
    position: relative;
}

.chat_input {
    border: 1px solid #d5ddf0;
    border-radius: var(--radius-md);
    height: 6.4rem;
    padding: 0 7.5rem 0 2rem;
    width: 100%;
    display: block;
    font-size: 1.6rem;
    font-family: Inter, system-ui, sans-serif;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chat_input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.chat_btn {
    width: 5.6rem;
    background: url(../img/send.svg) center no-repeat var(--color-primary-light);
    background-size: 2rem;
    border-radius: 8px;
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    border: 0;
    transition: background-color var(--transition-fast);
}

.chat_btn:hover {
    background-color: var(--color-primary-hover);
}

.chat_btn:active {
    background-color: var(--color-accent);
}

/* ========================================
   Error Page
======================================== */
.section-error {
    padding: 16rem 0;
}

.section-error .decor-grid li:first-child {
    top: 20%;
    left: -17rem;
}

.section-error .decor-grid li:nth-child(2) {
    top: 4rem;
    left: 22%;
}

.section-error .decor-grid li:nth-child(3) {
    top: 4rem;
    right: -20rem;
}

.section-error .decor-grid li:last-child {
    bottom: -20rem;
    right: 15%;
}

.section-error .decor-circle li:first-child {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.2rem solid var(--color-primary-light);
    top: 5rem;
    left: -2rem;
}

.section-error .decor-circle li:nth-child(2) {
    width: 13px;
    height: 13px;
    border: 3px solid var(--color-primary-light);
    top: 20rem;
    left: 7rem;
}

.section-error .decor-circle li:nth-child(3) {
    width: 3.1rem;
    height: 3.1rem;
    background: var(--color-accent);
    top: 13rem;
    left: 20%;
}

.section-error .decor-circle li:nth-child(4) {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    top: 30%;
    left: 10%;
}

.section-error .decor-circle li:nth-child(5) {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    bottom: 3.5rem;
    left: 6.5rem;
}

.section-error .decor-circle li:nth-child(6) {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    bottom: 10%;
    left: 8%;
}

.section-error .decor-circle li:nth-child(7) {
    width: 6.2rem;
    height: 6.2rem;
    border: 1.5rem solid var(--color-accent);
    bottom: 15%;
    left: 15%;
}

.section-error .decor-circle li:nth-child(8) {
    width: 2.3rem;
    height: 2.3rem;
    border: 0.5rem solid var(--color-primary);
    bottom: 40%;
    right: 25%;
}

.section-error .decor-circle li:nth-child(9) {
    width: 3rem;
    height: 3rem;
    background: var(--color-primary);
    top: 10%;
    right: 25%;
}

.section-error .decor-circle li:nth-child(10) {
    width: 5.3rem;
    height: 5.3rem;
    border: 1.5rem solid var(--color-primary);
    top: 10%;
    right: -2.5rem;
}

.section-error .decor-circle li:nth-child(11) {
    width: 1.3rem;
    height: 1.3rem;
    border: 3px solid var(--color-primary-light);
    top: 30%;
    right: 5%;
}

.section-error .decor-circle li:nth-child(12) {
    width: 9.3rem;
    height: 9.3rem;
    border: 2rem solid var(--color-primary-light);
    bottom: 10%;
    right: 8%;
}

.error-content {
    width: 52rem;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.error-content .title-section__main {
    font-size: 3.5rem;
}

.error-content__media {
    margin-bottom: 3rem;
}

/* ========================================
   Media Queries
======================================== */

/* ----- XL: 1500px ----- */
@media (max-width: 1500px) {
    html {
        font-size: 9px;
    }
}

/* ----- LG: 1368px ----- */
@media (max-width: 1368px) {
    html {
        font-size: 8px;
    }

    .decor-grid li {
        width: 33.8rem;
        height: 33.8rem;
    }

    .pad_30 {
        padding: 1.5rem;
    }

    .section-head .decor-circle li:first-child {
        width: 9.5rem;
        height: 9.5rem;
        top: 20%;
        left: 10px;
    }

    .section-head .decor-circle li:nth-child(2) {
        top: 70%;
        width: 4.3rem;
        height: 4.3rem;
    }

    .head-title {
        font-size: 4.5rem;
    }

    .navigation ul li {
        padding: 0 1.5rem;
    }

    .footer-nav li {
        padding: 0 1rem;
    }

    .footer-contact li {
        margin-right: 2rem;
    }

    .info-list {
        margin: 2rem -1rem 0;
    }

    .info-list__item {
        padding: 2.5rem;
        width: calc(33.333% - 2rem);
        margin: 2rem 1rem 0;
    }

    .info-list__item::after {
        top: 2.5rem;
    }

    .info-list__item::before {
        margin-bottom: 1.5rem;
    }

    .levels {
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .levels-item {
        width: calc(33.333% - 2rem);
        margin: 2rem 1rem 0;
        padding: 1.5rem;
    }

    .payment-item__left,
    .payment-item__right {
        padding: 1.8rem;
    }

    .cabinet-form__item {
        padding: 2rem;
    }

    .cabinet-wrap__right {
        width: calc(100% - 31rem);
    }

    .cabinet-wrap__left {
        width: 30rem;
    }

    .cabinet-title__main {
        font-size: 3rem;
    }

    .cabinet-table__td {
        padding: 1rem 1.5rem;
    }
}

/* ----- 1100px ----- */
@media (max-width: 1100px) {
    .user-nav > * {
        margin-left: 2.5rem;
    }
}

/* ----- MD: 1023px ----- */
@media (max-width: 1023px) {
    .pad_section,
    .pad_section_bot {
        padding-bottom: 5.5rem;
    }

    .pad_section {
        padding-top: 5.5rem;
    }

    .text-group h1,
    .title-section__main {
        font-size: 3.5rem;
    }

    .text-group h2 {
        font-size: 3rem;
    }

    .text-group h3 {
        font-size: 2.5rem;
    }

    .text-group h4 {
        font-size: 2.2rem;
    }

    .breadcrumbs {
        margin: 3.5rem 0 2.5rem;
    }

    .modal-title__main {
        font-size: 25px;
    }

    .navigation ul li {
        padding: 0 1rem;
    }

    .navigation ul {
        font-size: 10px;
    }

    .decor-circle,
    .section-head .decor-grid li:last-child,
    .section-head > img {
        display: none;
    }

    .section-head {
        padding: 5.5rem 0;
        border-radius: 0 0 0 3.5rem;
    }

    .head-content__left {
        width: 100%;
        padding: 0;
    }

    .head-content__left + * {
        margin-top: 3rem;
    }

    .head-content .wrap-form {
        width: 100%;
    }

    .head-suptitle {
        font-size: 10px;
    }

    .head-title {
        font-size: 30px;
    }

    .section-head .decor-grid li:first-child {
        top: -16rem;
        left: 1rem;
    }

    .section-head .decor-grid li:nth-child(2) {
        transform: translateX(0);
        left: -10rem;
    }

    .exchanger-attention,
    .exchanger-info__item,
    .exchanger-item__title {
        font-size: 13px;
    }

    .advantages-item__title {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .advantages {
        margin: 0 -1rem;
    }

    .advantages-item {
        padding: 8rem 1.5rem 1.5rem;
        margin: 3.4rem 1rem 0;
        width: calc(33.333% - 2rem);
    }

    .mover-line {
        font-size: 4rem;
        margin-top: 4rem;
    }

    .section-testimonials {
        border-radius: 3.5rem 0;
    }

    .testimonials-group__left {
        width: 100%;
        padding-right: 0;
    }

    .testimonials-group__right {
        width: 100%;
        text-align: center;
    }

    .testimonials-group__right > .btn_st {
        margin: 25px auto 0;
    }

    .testimonials-slider .swiper-pagination {
        margin-top: 25px;
    }

    .section-testimonials .decor-grid > li:last-child {
        display: none;
    }

    .section-testimonials .decor-grid > li:first-child {
        left: auto;
        right: -10rem;
        top: -15rem;
    }

    .section-partners {
        border-radius: 35px 0;
    }

    .swiper-slide__item {
        width: 184px;
        height: 72px;
    }

    .action-group .wrap-form,
    .action-group__left {
        width: 100%;
    }

    .action-group__left + * {
        margin-top: 2.5rem;
    }

    .form-consent__text {
        font-size: 12px;
    }

    .head-in__right .text-group + * {
        margin-top: 3rem;
    }

    .section-faq-main::before {
        border-radius: 3.5rem 0 0 0;
    }

    .section-about {
        border-radius: 3.5rem 0 0 0;
    }

    .about {
        margin: 0;
    }

    .about-item {
        width: 100%;
        margin: 0 0 3rem;
    }

    .about-item:last-child {
        margin-bottom: 0;
    }

    .about-item__media {
        width: 6.5rem;
        height: 6.5rem;
    }

    .about-item__media img,
    .about-item__media svg {
        width: 2.6rem;
        height: 2.6rem;
    }

    .about-item__content {
        width: calc(100% - 6.5rem);
        padding-left: 15px;
    }

    .about.full .about-item {
        margin-bottom: 3rem;
    }

    .info-list__item {
        padding: 1.5rem;
    }

    .info-list__item::after {
        top: 1.5rem;
    }

    .levels-item {
        width: calc(50% - 2rem);
    }

    .levels {
        margin-top: 2rem;
    }

    .payment-item__title {
        margin-bottom: 2.5rem;
    }

    .payment-checkout li {
        padding: 1.5rem;
        font-size: 12px;
    }

    .cabinet-wrap__left {
        width: 50rem;
        margin-bottom: 3rem;
    }

    .cabinet-wrap__right {
        width: 100%;
    }

    .cabinet-title__main {
        font-size: 25px;
    }

    .cabinet-title {
        margin-bottom: 2.5rem;
    }

    .cabinet-aside__content {
        display: none;
    }

    .cabinet-aside__top {
        cursor: pointer;
        position: relative;
        padding-right: 3.5rem;
    }

    .cabinet-aside__top::before {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-right: 1px solid var(--color-text);
        border-bottom: 1px solid var(--color-text);
        right: 2rem;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        transition: var(--transition-base);
    }

    .cabinet-aside__top.active::before {
        transform: translateY(-50%) rotate(-135deg);
    }

    .cabinet-info {
        padding: 10rem 1.5rem;
    }

    .section-error {
        padding: 5rem 0;
    }

    .footer-nav {
        width: 100%;
        order: 2;
        margin-top: 3rem;
        justify-content: space-between;
    }

    .footer-nav li:first-child {
        padding: 0;
    }

    .section-testimonials-main::before {
        border-radius: 3.5rem 0 0 0;
    }
}

/* ----- Desktop min-width overrides ----- */
@media (min-width: 1024px) {
    .cabinet-aside__content {
        display: block !important;
    }
}

@media (min-width: 861px) {
    .navigation {
        display: block !important;
    }
}

/* ----- SM: 860px (Mobile Nav) ----- */
@media (max-width: 860px) {
    .header .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .tog-nav {
        display: block;
    }

    .navigation {
        background: var(--color-primary-dark);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        border-top: 1px solid rgba(248, 250, 254, 0.2);
        display: none;
    }

    .navigation ul {
        font-size: 11px;
        display: block;
        padding: 2rem 0;
    }

    .navigation ul li {
        padding: 0;
    }

    .navigation ul li a {
        height: auto;
        display: block;
        text-align: left;
        font-weight: 600;
        color: var(--color-white);
        padding: 10px 15px;
    }

    .navigation ul li a::before {
        display: none;
    }

    .faq-nav__item {
        padding: 1rem 2rem;
    }
}

/* ----- Tablet: 767px ----- */
@media (max-width: 767px) {
    .cs-trigger {
        font-size: 1.4rem;
        padding: 0 3rem 0 1.2rem;
    }

    .cs-option {
        padding: 12px 1.2rem;
        font-size: 1.4rem;
    }

    .cs-arrow {
        right: 1.2rem;
    }

    .wrap-form {
        padding: 15px 10px;
    }

    .title-section__main {
        font-size: 30px;
        line-height: 1.2;
    }

    .rating li {
        width: 14px;
        height: 14px;
    }

    .title-section {
        margin-bottom: 2.5rem;
    }

    .btn_center {
        margin-top: 2.5rem;
    }

    .text-group h1 {
        font-size: 30px;
    }

    .text-group h2 {
        font-size: 25px;
    }

    .text-group h3 {
        font-size: 20px;
    }

    .text-group h4 {
        font-size: 18px;
    }

    .modal-content {
        padding: 2.5rem 2rem 2rem;
    }

    .hidden_sx {
        display: none;
    }

    .modal .btn_st {
        margin-top: 2rem;
    }

    .head-text {
        display: none;
    }

    .head-title {
        padding-bottom: 2.5rem;
        position: relative;
    }

    .head-title::before {
        content: "";
        position: absolute;
        width: 49px;
        height: 7px;
        background: url(../img/camel-line.svg) center no-repeat;
        bottom: 0;
        left: 0;
    }

    .advantages-item {
        margin: 0 0 1.5rem;
        padding: 15px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
    }

    .advantages {
        margin: 0;
    }

    .advantages-item__media {
        position: relative;
        width: 55px;
        height: 55px;
        left: auto;
        transform: translate(0, 0);
        top: auto;
    }

    .advantages-item__content {
        text-align: left;
        width: calc(100% - 55px);
        padding-left: 15px;
        align-self: center;
    }

    .testimonials-item {
        padding: 20px;
    }

    .testimonials-item__name {
        font-size: 14px;
    }

    .testimonials-item::before {
        top: 2.5rem;
    }

    .testimonials-item__date {
        margin-top: 1.5rem;
    }

    .faq-item__content {
        padding: 0 15px 15px;
    }

    .faq-item::before {
        left: 15px;
    }

    .faq-item__title {
        padding: 15px 45px 15px 60px;
    }

    .faq-item::after,
    .faq-item::before {
        top: 15px;
    }

    .faq-item__title::after {
        right: 2rem;
    }

    .form-horizontal .third {
        width: calc(50% - 2rem);
    }

    .head-in__left,
    .head-in__right {
        width: 100%;
    }

    .faq-nav {
        flex-flow: row wrap;
    }

    .faq-nav__item {
        width: 50%;
    }

    .info-list {
        margin: 1rem 0;
    }

    .info-list__item {
        width: 100%;
        margin: 2rem 0 0;
    }

    .levels {
        margin: 1rem 0 0;
    }

    .levels-item {
        width: 100%;
        margin: 2rem 0 0;
    }

    .payment::before {
        display: none;
    }

    .payment-item__left,
    .payment-item__right {
        width: 100%;
    }

    .payment-item__left + * {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .payment-info__item-title {
        padding: 1.5rem 2.5rem 1.5rem 1.5rem;
    }

    .payment-info__item-title::before {
        right: 1.5rem;
    }

    .payment-info__item-content {
        padding: 0 1.5rem 1.5rem;
    }

    .wallets-item {
        width: calc(50% - 2rem);
    }

    .cabinet-aside__bot,
    .cabinet-aside__top,
    .cabinet-nav {
        padding: 1.5rem;
    }

    .cabinet-table__head {
        display: none;
    }

    .cabinet-table__td {
        width: 100% !important;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        min-height: auto;
        border: 0;
        align-items: center;
        padding: 5px 1.5rem;
    }

    .cabinet-table {
        background: transparent;
        box-shadow: none;
        overflow: visible;
        border-radius: 0;
    }

    .cabinet-table__row-item {
        border: 0;
        background: var(--color-white);
        box-shadow: var(--shadow-form);
        border-radius: 1.4rem;
        margin-bottom: 1.5rem;
        padding: 10px 0;
    }

    .cabinet-table__row-item:last-child {
        margin-bottom: 0;
    }

    .td-title {
        display: block;
        font-weight: 500;
    }

    .td-content__main,
    .td-content__title {
        display: inline-block;
    }

    .pagination {
        justify-content: center;
    }

    .chat-dialog__main {
        padding: 15px;
    }

    .chat-dialog {
        max-height: 46rem;
    }

    .error-content .title-section__main {
        font-size: 3rem;
    }

    .footer-contact {
        width: 100%;
        margin-top: 3rem;
    }

    .footer-link {
        width: 100%;
        order: 0;
    }

    .copyright {
        order: 1;
    }

    .copyright + * {
        margin-bottom: 3rem;
    }
}

/* ----- Mobile: 600px ----- */
@media (max-width: 600px) {
    .form-horizontal {
        margin-left: 0;
        margin-right: 0;
    }

    .form-horizontal .form-group,
    .form-horizontal .third,
    .form-horizontal > * {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .form-bot {
        display: block;
    }

    .form-bot .btn_st {
        width: 100%;
        margin: 2.5rem 0 0;
    }

    .wallets,
    .wallets-item {
        margin-left: 0;
        margin-right: 0;
    }

    .wallets-item {
        width: 100%;
    }

    .back_link::before {
        width: 6px;
        height: 6px;
    }

    .chat-dialog__main-name {
        width: 100%;
    }

    .chat-dialog__main-date {
        color: var(--color-text-muted);
    }

    .footer-nav li {
        width: 50%;
        padding: 0;
        margin-top: 2.5rem;
    }

    .footer-nav {
        margin-top: 0;
    }

    .footer-contact {
        margin-top: 1rem;
    }

    .footer-contact li {
        width: 100%;
        margin: 1rem 0 0;
    }

    .footer-link li {
        width: 100%;
        margin: 0 0 1.5rem;
    }

    .footer-link li:last-child {
        margin-bottom: 0;
    }
}

/* ----- 460px ----- */
@media (max-width: 460px) {
    .exchanger-policy .form-consent {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .exchanger-policy .form-consent:last-child {
        margin-bottom: 0;
    }

    .payment-item__btn > .btn_st {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .payment-item__btn > .btn_st:last-child {
        margin-bottom: 0;
    }
}

/* ----- XS: 420px ----- */
@media (max-width: 420px) {
    .enter-btn {
        padding: 1.2rem 8px;
    }

    .logo {
        width: 7rem;
        height: 4.4rem;
    }

    .user-nav__balance {
        display: none;
    }

    .levels-item__column-item {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .levels-item__column-item:last-child {
        margin-bottom: 0;
    }
}

/* ----- XXS: 389px (объединены 389 и 380) ----- */
@media (max-width: 389px) {
    .cs-trigger {
        height: 5.6rem;
    }

    .text-group h1,
    .title-section__main {
        font-size: 25px;
    }

    .text-group h2 {
        font-size: 23px;
    }

    .btn_st {
        width: 100%;
    }

    .btn_center {
        margin-top: 2.5rem;
    }

    .modal-title__main {
        font-size: 20px;
    }

    .exchanger-item__main-left {
        width: 40%;
    }

    .exchanger-item__main-right {
        width: 60%;
    }

    .exchanger-item__main-left > span {
        left: 1rem;
    }

    .input_currency {
        padding: 0 1rem 0 5rem;
    }

    .head-title {
        font-size: 25px;
    }

    .testimonials-item__name {
        display: block;
        width: 100%;
    }

    .testimonials-item__name + * {
        margin-top: 1rem;
    }

    .testimonials-item {
        padding: 15px 10px;
    }

    .testimonials-item::before {
        top: 2rem;
    }

    .faq-item::before,
    .faq-item__title {
        font-size: 14px;
    }

    .faq-nav__item {
        width: 100%;
        padding: 1rem 0;
    }

    .contact-list li {
        width: 100%;
        margin: 0 0 1rem;
    }

    .contact-list li:last-child {
        margin-bottom: 0;
    }

    .payment-checkout li {
        flex-flow: row wrap;
    }

    .payment-checkout li strong {
        width: 100%;
        display: block;
        margin-bottom: 1rem;
    }

    .cabinet-wallets__top .btn_st {
        width: auto;
        min-width: auto;
    }

    .cabinet-title a.btn_st {
        margin-top: 2rem;
    }

    .cabinet-title__main {
        font-size: 20px;
    }

    .footer-nav li {
        width: 100%;
        padding: 0;
    }

    .pagination {
        justify-content: center;
    }
}

/* ========================================
   Reduced Motion
======================================== */
@media (prefers-reduced-motion: reduce) {
    .cs-dropdown {
        animation: none;
    }

    .cs-arrow,
    .cs-trigger,
    .cs-option {
        transition: none;
    }
}