/* =========================================================

   ОСНОВА

========================================================== */



.rr-money-v3 {
    container-type: inline-size;
    --rr-radius: 22px;
    --rr-border-color: rgba(255, 255, 255, 0.09);
    --rr-bg-1: #111113;
    --rr-bg-2: #070708;
    --rr-bg-3: #030303;
    --rr-shine-alpha: 0.075;
    --rr-shine-left-alpha: 0.12;
    --rr-shine-right-alpha: 0.09;
    --rr-money-glass-bg-1: rgba(22, 22, 25, 0.82);
    --rr-money-glass-bg-2: rgba(8, 8, 9, 0.74);
    --rr-money-glass-border: rgba(255, 255, 255, 0.14);
    --rr-money-glass-radius: 15px;
    --rr-money-principle-bg-1: rgba(27, 27, 30, 0.9);
    --rr-money-principle-bg-2: rgba(8, 8, 9, 0.97);
    --rr-money-principle-radius: 13px;

    --rr-white: #f3f3f3;

    --rr-silver: #c6c7ca;

    --rr-muted: #92949a;

    --rr-border: rgba(255, 255, 255, 0.1);



    position: relative;



    width: 100%;

    min-width: 0;



    overflow: hidden;

    isolation: isolate;



    color: var(--rr-white);



    background:

        radial-gradient(

            circle at 50% -15%,

            rgba(255, 255, 255, var(--rr-shine-alpha, 0.075)),

            transparent 36%

        ),

        linear-gradient(145deg, var(--rr-bg-1, #111113) 0%, var(--rr-bg-2, #070708) 52%, var(--rr-bg-3, #030303) 100%);



    border: 1px solid var(--rr-border-color, rgba(255, 255, 255, 0.09));

    border-radius: var(--rr-radius, 22px);



    box-shadow:

        0 28px 70px rgba(0, 0, 0, 0.42),

        inset 0 1px 0 rgba(255, 255, 255, 0.055);



    font-family: inherit;

}



.rr-money-v3,

.rr-money-v3 * {

    box-sizing: border-box;

}



.rr-money-v3__inner {

    position: relative;

    z-index: 2;



    padding: clamp(24px, 3.5vw, 44px);

}



/* =========================================================

   ФОНОВЫЕ СВЕЧЕНИЯ

========================================================== */



.rr-money-v3__glow {

    position: absolute;

    z-index: 0;



    width: 340px;

    height: 340px;



    pointer-events: none;

    border-radius: 50%;

    filter: blur(22px);

}



.rr-money-v3__glow--left {

    top: -230px;

    left: -180px;



    background:

        radial-gradient(

            circle,

            rgba(255, 255, 255, var(--rr-shine-left-alpha, 0.12)),

            transparent 70%

        );

}



.rr-money-v3__glow--right {

    right: -230px;

    bottom: -240px;



    background:

        radial-gradient(

            circle,

            rgba(140, 144, 153, var(--rr-shine-right-alpha, 0.09)),

            transparent 70%

        );

}



/* =========================================================

   ОСНОВНАЯ РАСКЛАДКА

========================================================== */



.rr-money-v3__layout {

    display: grid;

    grid-template-columns:

        minmax(310px, 0.9fr)

        minmax(0, 1.1fr);



    gap: clamp(18px, 2.5vw, 30px);

    align-items: start;

}



/*

Обе колонки имеют одинаковый верхний внутренний отступ.

Подложка договора и заголовок справа начинаются на одной линии.

Сам договор продолжает выступать вверх.

*/



.rr-money-v3__visual,

.rr-money-v3__right {

    padding-top: 58px;

}



.rr-money-v3__right {

    display: grid;

    gap: 12px;

}



/* =========================================================

   ЗАГОЛОВОК СПРАВА

========================================================== */



.rr-money-v3__header {

    max-width: 760px;

    margin-bottom: 6px;

}



.rr-money-v3__label {

    display: flex;

    align-items: center;

    gap: 10px;



    margin-bottom: 12px;



    color: var(--rr-silver);

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}



.rr-money-v3__label span {

    width: 28px;

    height: 1px;



    background:

        linear-gradient(

            90deg,

            #ffffff,

            transparent

        );

}



.rr-money-v3__title {

    margin: 0;



    color: var(--rr-white);

    font-size: clamp(32px, 4.4vw, 58px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.055em;

}



.rr-money-v3__title strong {

    display: block;



    color: transparent;

    font-weight: 500;



    background:

        linear-gradient(

            90deg,

            #ffffff 0%,

            #a2a4a9 52%,

            #e7e7e8 100%

        );



    -webkit-background-clip: text;

    background-clip: text;

}



.rr-money-v3__description {

    max-width: 690px;

    margin: 16px 0 0;



    color: var(--rr-muted);

    font-size: 14px;

    line-height: 1.65;

}



/* =========================================================

   ПОДЛОЖКА ДОГОВОРА

========================================================== */



.rr-money-v3__document-stage {

    position: relative;



    min-height: 490px;

    padding-top: 6px;



    background:

        linear-gradient(

            145deg,

            rgba(27, 27, 30, 0.9),

            rgba(8, 8, 9, 0.97)

        );



    border: 1px solid var(--rr-border);

    border-radius: 20px;



    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.05),

        0 24px 55px rgba(0, 0, 0, 0.3);

}



/* =========================================================

   БУМАЖНЫЙ ДОГОВОР

========================================================== */



.rr-money-v3__paper {

    position: absolute;



    background:

        linear-gradient(

            145deg,

            #f6f6f4,

            #d6d6d2

        );



    border: 1px solid rgba(0, 0, 0, 0.09);

    border-radius: 8px;



    box-shadow:

        0 32px 60px rgba(0, 0, 0, 0.45);

}



.rr-money-v3__paper--back {

    top: -35px;

    left: 50%;



    width: 68%;

    height: 310px;



    padding: 30px;



    opacity: 0.52;



    transform:

        translateX(-50%)

        rotate(5deg);

}



.rr-money-v3__paper--main {

    top: -68px;

    left: 50%;

    z-index: 2;



    width: 74%;

    min-height: 370px;



    padding: 22px;



    color: #19191b;



    transform:

        translateX(-50%)

        rotate(-2.2deg);

}



.rr-money-v3__paper-header {

    display: flex;

    align-items: flex-start;

    gap: 13px;



    padding-bottom: 14px;



    border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}



.rr-money-v3__paper-logo {

    display: flex;

    flex: 0 0 38px;

    align-items: center;

    justify-content: center;



    width: 38px;

    height: 38px;



    color: #f1f1f1;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;



    background: #19191b;

    border-radius: 7px;

}



.rr-money-v3__paper-heading {

    display: flex;

    flex-direction: column;



    min-width: 0;

}



.rr-money-v3__paper-heading span {

    margin-bottom: 4px;



    color: #77777b;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}



.rr-money-v3__paper-heading strong {

    color: #151517;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

}



.rr-money-v3__paper-heading small {

    margin-top: 5px;



    color: #55555a;

    font-size: 7px;

    line-height: 1.35;

}



.rr-money-v3__paper-meta {

    display: flex;

    justify-content: space-between;

    gap: 12px;



    margin-top: 12px;



    color: #68686c;

    font-size: 6px;

}



.rr-money-v3__paper-section {

    margin-top: 16px;

}



.rr-money-v3__paper-section-title {

    margin-bottom: 8px;



    color: #29292c;

    font-size: 7px;

    font-weight: 700;

}



.rr-money-v3__paper-lines {

    display: grid;

    gap: 5px;

}



.rr-money-v3__paper-lines i,

.rr-money-v3__paper-line {

    display: block;



    width: 100%;

    height: 4px;



    background: rgba(28, 28, 31, 0.12);

    border-radius: 4px;

}



.rr-money-v3__paper-lines i.is-short,

.rr-money-v3__paper-line--short {

    width: 66%;

}



.rr-money-v3__paper--back

.rr-money-v3__paper-line {

    margin-bottom: 12px;

}



.rr-money-v3__paper-table {

    overflow: hidden;



    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 5px;

}



.rr-money-v3__paper-table > div {

    display: grid;

    grid-template-columns: 52px minmax(0, 1fr);

    gap: 10px;

    align-items: center;



    min-height: 27px;

    padding: 5px 8px;

}



.rr-money-v3__paper-table > div + div {

    border-top: 1px solid rgba(0, 0, 0, 0.09);

}



.rr-money-v3__paper-table span {

    color: #55555a;

    font-size: 6px;

    font-weight: 700;

}



.rr-money-v3__paper-table i {

    height: 4px;



    background: rgba(28, 28, 31, 0.12);

    border-radius: 4px;

}



.rr-money-v3__paper-bottom {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;



    margin-top: 20px;

}



.rr-money-v3__signature {

    display: grid;

    gap: 7px;

}



.rr-money-v3__signature span {

    color: #66666b;

    font-size: 6px;

}



.rr-money-v3__signature i {

    display: block;



    width: 90px;

    height: 1px;



    background: rgba(0, 0, 0, 0.28);

}



.rr-money-v3__stamp {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    width: 68px;

    height: 68px;



    color: rgba(80, 84, 91, 0.72);



    border: 2px solid rgba(80, 84, 91, 0.5);

    border-radius: 50%;



    transform: rotate(-12deg);

}



.rr-money-v3__stamp span {

    font-size: 6px;

    letter-spacing: 0.1em;

}



.rr-money-v3__stamp strong {

    margin-top: 3px;



    font-size: 8px;

    letter-spacing: 0.06em;

}



/* =========================================================

   СТЕКЛЯННАЯ ПЛАШКА

========================================================== */



.rr-money-v3__principle-card {

    position: absolute;

    right: 18px;

    bottom: 18px;

    left: 18px;

    z-index: 5;



    padding: 20px;



    background:

        linear-gradient(

            145deg,

            var(--rr-money-glass-bg-1, rgba(22, 22, 25, 0.82)),

            var(--rr-money-glass-bg-2, rgba(8, 8, 9, 0.74))

        );



    border: 1px solid var(--rr-money-glass-border, rgba(255, 255, 255, 0.14));

    border-radius: var(--rr-money-glass-radius, 15px);



    box-shadow:

        0 22px 50px rgba(0, 0, 0, 0.42),

        inset 0 1px 0 rgba(255, 255, 255, 0.07);



    backdrop-filter:

        blur(24px)

        saturate(112%);



    -webkit-backdrop-filter:

        blur(24px)

        saturate(112%);

}



.rr-money-v3__principle-label {

    display: block;



    margin-bottom: 7px;



    color: #92949a;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}



.rr-money-v3__principle-card h3 {

    margin: 0;



    color: #f3f3f3;

    font-size: clamp(22px, 2.4vw, 31px);

    font-weight: 450;

    line-height: 1.08;

    letter-spacing: -0.04em;

}



.rr-money-v3__principle-card p {

    margin: 10px 0 0;



    color: #97999f;

    font-size: 11px;

    line-height: 1.55;

}



/* =========================================================

   ЧЕТЫРЕ ПРИНЦИПА

========================================================== */



.rr-money-v3__principles {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;



    margin-top: 12px;

}



.rr-money-v3__principle {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: 10px;

    align-items: start;



    padding: 13px;



    background:

        linear-gradient(

            145deg,

            var(--rr-money-principle-bg-1, rgba(27, 27, 30, 0.9)),

            var(--rr-money-principle-bg-2, rgba(8, 8, 9, 0.97))

        );



    border: 1px solid var(--rr-border);

    border-radius: var(--rr-money-principle-radius, 13px);

}



.rr-money-v3__principle-number {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 30px;

    height: 30px;



    color: #080808;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.1em;



    background:

        linear-gradient(

            145deg,

            #ffffff,

            #989ba0

        );



    border-radius: 9px;

}



.rr-money-v3__principle h4 {

    margin: 0 0 4px;



    color: #eeeeef;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.35;

}



.rr-money-v3__principle p {

    margin: 0;



    color: #86898f;

    font-size: 9px;

    line-height: 1.45;

}



/* =========================================================

   ЛЕВАЯ CTA-КАРТОЧКА

========================================================== */



.rr-money-v3__left-cta {

    display: grid;

    gap: 14px;



    margin-top: 12px;

    padding: 17px;



    background:

        linear-gradient(

            145deg,

            rgba(30, 30, 34, 0.92),

            rgba(8, 8, 9, 0.98)

        );



    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 15px;



    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.055),

        0 18px 40px rgba(0, 0, 0, 0.22);

}



.rr-money-v3__left-cta-text span {

    display: block;



    margin-bottom: 6px;



    color: #8d9095;

    font-size: 8px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.rr-money-v3__left-cta-text strong {

    display: block;



    color: #eeeeef;

    font-size: 17px;

    font-weight: 450;

    line-height: 1.25;

    letter-spacing: -0.025em;

}



/* =========================================================

   КНОПКА

========================================================== */



.rr-money-v3__button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;



    width: 100%;

    min-height: 45px;

    padding: 11px 15px;



    color: #080808;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.3;

    text-align: center;

    text-decoration: none;



    background:

        linear-gradient(

            135deg,

            #ffffff,

            #a2a5aa

        );



    border-radius: 10px;



    box-shadow:

        0 10px 26px rgba(255, 255, 255, 0.07),

        inset 0 1px 0 rgba(255, 255, 255, 0.7);



    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}



.rr-money-v3__button:hover {

    transform: translateY(-2px);



    box-shadow:

        0 14px 32px rgba(255, 255, 255, 0.11),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

}



.rr-money-v3__button svg {

    width: 16px;

    height: 16px;



    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}



/* =========================================================

   ПРАВЫЕ КАРТОЧКИ

========================================================== */



.rr-money-v3__card {

    min-width: 0;



    padding: 18px;



    background:

        linear-gradient(

            145deg,

            rgba(27, 27, 30, 0.92),

            rgba(8, 8, 9, 0.97)

        );



    border: 1px solid var(--rr-border);

    border-radius: 17px;



    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.05),

        0 18px 40px rgba(0, 0, 0, 0.22);

}



.rr-money-v3__card-header {

    display: flex;

    gap: 12px;

    align-items: flex-start;



    margin-bottom: 14px;

}



.rr-money-v3__icon {

    display: flex;

    flex: 0 0 42px;

    align-items: center;

    justify-content: center;



    width: 42px;

    height: 42px;



    color: #d4d5d7;



    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.1),

            rgba(255, 255, 255, 0.025)

        );



    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 12px;

}



.rr-money-v3__icon svg {

    width: 21px;

    height: 21px;



    fill: none;

    stroke: currentColor;

    stroke-width: 1.55;

    stroke-linecap: round;

    stroke-linejoin: round;

}



.rr-money-v3__card-header span,

.rr-money-v3__small-heading span {

    display: block;



    margin-bottom: 5px;



    color: #8d9095;

    font-size: 8px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.rr-money-v3__card-header h3 {

    margin: 0;



    color: #f2f2f3;

    font-size: clamp(19px, 2vw, 25px);

    font-weight: 450;

    line-height: 1.12;

    letter-spacing: -0.035em;

}



/* =========================================================

   ТЕГИ ПЛАТЕЖЕЙ

========================================================== */



.rr-money-v3__tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.rr-money-v3__tags span {

    padding: 8px 11px;



    color: #d0d1d4;

    font-size: 10px;

    line-height: 1.35;



    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.08),

            rgba(255, 255, 255, 0.02)

        );



    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 999px;

}



/* =========================================================

   ЭТАПЫ ОПЛАТЫ

========================================================== */



.rr-money-v3__timeline {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

}



.rr-money-v3__timeline-item {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: 10px;

    align-items: start;



    padding: 12px;



    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.075);

    border-radius: 11px;

}



.rr-money-v3__timeline-marker {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 28px;

    height: 28px;



    color: #080808;

    font-size: 7px;

    font-weight: 700;



    background:

        linear-gradient(

            145deg,

            #ffffff,

            #95989d

        );



    border-radius: 8px;

}



.rr-money-v3__timeline-item strong {

    display: block;



    margin-bottom: 3px;



    color: #eeeeef;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.35;

}



.rr-money-v3__timeline-item p {

    margin: 0;



    color: #85888e;

    font-size: 9px;

    line-height: 1.45;

}



.rr-money-v3__notice {

    margin-top: 10px;

    padding: 9px 11px;



    color: #b9bbbf;

    font-size: 9px;

    line-height: 1.45;



    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 9px;

}



/* =========================================================

   ИЗМЕНЕНИЯ И ВОЗВРАТ

========================================================== */



.rr-money-v3__card--split {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));



    padding: 0;

    overflow: hidden;

}



.rr-money-v3__split-part {

    padding: 18px;

}



.rr-money-v3__split-part +

.rr-money-v3__split-part {

    border-left: 1px solid rgba(255, 255, 255, 0.08);

}



.rr-money-v3__small-heading h3 {

    margin: 0 0 10px;



    color: #eeeeef;

    font-size: 17px;

    font-weight: 450;

    line-height: 1.2;

    letter-spacing: -0.025em;

}



.rr-money-v3__split-part > p {

    margin: 0;



    color: #8d9095;

    font-size: 10px;

    line-height: 1.55;

}



.rr-money-v3__split-part ul {

    display: grid;

    gap: 6px;



    margin: 0;

    padding: 0;



    list-style: none;

}



.rr-money-v3__split-part li {

    position: relative;



    padding-left: 14px;



    color: #b8babf;

    font-size: 9px;

    line-height: 1.45;

}



.rr-money-v3__split-part li::before {

    position: absolute;

    top: 6px;

    left: 0;



    width: 5px;

    height: 5px;



    content: "";



    background:

        linear-gradient(

            145deg,

            #ffffff,

            #777a80

        );



    border-radius: 50%;

}



/* =========================================================

   ПЛАНШЕТ

========================================================== */



@media (max-width: 1050px) {

    .rr-money-v3__layout {

        grid-template-columns: 1fr;

    }



    .rr-money-v3__right {

        order: 1;

        padding-top: 0;

    }



    .rr-money-v3__visual {

        order: 2;

        padding-top: 74px;

    }



    .rr-money-v3__document-stage {

        min-height: 510px;

    }



    .rr-money-v3__paper--main {

        width: min(420px, 72%);

    }



    .rr-money-v3__paper--back {

        width: min(390px, 66%);

    }

}



/* =========================================================

   МОБИЛЬНЫЙ

========================================================== */



@media (max-width: 767px) {

    .rr-money-v3 {

        border-radius: 18px;

    }



    .rr-money-v3__inner {

        padding: 18px;

    }



    .rr-money-v3__title {

        font-size: 32px;

    }



    .rr-money-v3__title strong {

        display: inline;

    }



    .rr-money-v3__description {

        font-size: 13px;

    }



    .rr-money-v3__visual {

        padding-top: 56px;

    }



    .rr-money-v3__document-stage {

        min-height: 470px;

    }



    .rr-money-v3__paper--main {

        top: -48px;



        width: 78%;

        min-height: 345px;

        padding: 18px;

    }



    .rr-money-v3__paper--back {

        top: -23px;



        width: 72%;

        height: 290px;

    }



    .rr-money-v3__principles {

        grid-template-columns: 1fr;

    }



    .rr-money-v3__timeline {

        grid-template-columns: 1fr;

    }



    .rr-money-v3__card--split {

        grid-template-columns: 1fr;

    }



    .rr-money-v3__split-part +

    .rr-money-v3__split-part {

        border-top: 1px solid rgba(255, 255, 255, 0.08);

        border-left: 0;

    }

}



@media (max-width: 430px) {

    .rr-money-v3__inner {

        padding: 15px;

    }



    .rr-money-v3__document-stage {

        min-height: 440px;

    }



    .rr-money-v3__paper--main {

        top: -35px;



        width: 84%;

        min-height: 320px;

        padding: 15px;

    }



    .rr-money-v3__paper--back {

        width: 78%;

    }



    .rr-money-v3__paper-heading strong {

        font-size: 20px;

    }



    .rr-money-v3__paper-section {

        margin-top: 12px;

    }



    .rr-money-v3__principle-card {

        right: 12px;

        bottom: 12px;

        left: 12px;



        padding: 16px;

    }



    .rr-money-v3__principle-card h3 {

        font-size: 23px;

    }



    .rr-money-v3__principle-card p {

        font-size: 10px;

    }



    .rr-money-v3__left-cta {

        padding: 15px;

    }



    .rr-money-v3__left-cta-text strong {

        font-size: 15px;

    }



    .rr-money-v3__card {

        border-radius: 14px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .rr-money-v3 *,

    .rr-money-v3 *::before,

    .rr-money-v3 *::after {

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

    }

}