@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --cream: #f7f2e8;
    --cream-2: #fffdf8;

    --purple: #5b3b8c;
    --purple-dark: #3f2865;

    --text: #24212a;
    --muted: #77717f;

    --border: #e7dfd3;

    --success: #238b57;
}


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 10% 0%,
            rgba(91,59,140,.10),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            var(--cream),
            #fff 55%,
            #eee8f5
        );

    min-height: 100vh;
}


.container-main {

    width:
        min(
            1080px,
            calc(100% - 32px)
        );

    margin: 0 auto;
}


.brand {

    padding:
        28px 0 20px;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.brand-name {

    font-weight: 800;

    font-size: 20px;
}


.brand-sub {

    color: var(--muted);

    font-size: 12px;

    margin-top: 3px;
}


.hero {

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 34px;

    align-items: center;

    padding:
        45px 0 70px;
}


.badge {

    display: inline-flex;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        rgba(91,59,140,.10);

    color:
        var(--purple);

    font-size: 12px;

    font-weight: 700;
}


h1 {

    font-size:
        clamp(
            34px,
            5vw,
            58px
        );

    line-height:
        1.03;

    margin:
        16px 0;

    letter-spacing:
        -2px;
}


.hero p {

    color:
        var(--muted);

    line-height:
        1.75;

    max-width:
        580px;
}


.card {

    background:
        rgba(
            255,
            253,
            248,
            .94
        );

    border:
        1px solid
        rgba(
            231,
            223,
            211,
            .9
        );

    border-radius:
        24px;

    box-shadow:
        0 22px 60px
        rgba(
            63,
            40,
            101,
            .12
        );
}


.payment-card {

    padding:
        28px;
}


.card-title {

    font-size:
        22px;

    font-weight:
        800;

    margin-bottom:
        5px;
}


.card-desc {

    color:
        var(--muted);

    font-size:
        13px;

    margin-bottom:
        24px;
}


label {

    display:
        block;

    font-size:
        13px;

    font-weight:
        700;

    margin:
        0 0 8px;
}


.field {

    margin-bottom:
        18px;
}


input,
select {

    width: 100%;

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

    border-radius:
        13px;

    padding:
        14px 15px;

    font: inherit;

    outline: none;

    background:
        #fff;

    transition:
        .2s;
}


input:focus,
select:focus {

    border-color:
        var(--purple);

    box-shadow:
        0 0 0 4px
        rgba(
            91,
            59,
            140,
            .09
        );
}


.amount-wrap {

    position:
        relative;
}


.amount-prefix {

    position:
        absolute;

    left:
        15px;

    top:
        14px;

    font-weight:
        700;

    color:
        var(--muted);
}


#nominal {

    padding-left:
        52px;
}


.btn {

    border:
        0;

    width:
        100%;

    padding:
        15px 18px;

    border-radius:
        13px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-dark)
        );

    font: inherit;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 10px 25px
        rgba(
            91,
            59,
            140,
            .22
        );

    transition:
        transform .15s,
        box-shadow .15s;
}


.btn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 14px 30px
        rgba(
            91,
            59,
            140,
            .28
        );
}


.btn:disabled {

    opacity:
        .65;

    cursor:
        not-allowed;

    transform:
        none;
}


.note {

    margin-top:
        14px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.6;

    text-align:
        center;
}


.steps {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        14px;

    margin-bottom:
        50px;
}


.step {

    padding:
        18px;

    border-radius:
        17px;

    background:
        rgba(
            255,
            255,
            255,
            .55
        );

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


.step-no {

    width:
        30px;

    height:
        30px;

    border-radius:
        9px;

    background:
        var(--purple);

    color:
        white;

    display:
        grid;

    place-items:
        center;

    font-weight:
        800;

    font-size:
        12px;

    margin-bottom:
        10px;
}


.step strong {

    font-size:
        14px;
}


.step p {

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;

    margin:
        6px 0 0;
}


.footer {

    padding:
        25px 0 35px;

    color:
        var(--muted);

    font-size:
        11px;

    text-align:
        center;
}


.alert {

    padding:
        12px 14px;

    border-radius:
        12px;

    margin-bottom:
        16px;

    background:
        #fff0f0;

    color:
        #a73535;

    font-size:
        13px;
}


@media (max-width: 800px) {

    .hero {

        grid-template-columns:
            1fr;

        padding-top:
            25px;
    }


    .hero-copy {

        text-align:
            center;
    }


    .hero p {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .steps {

        grid-template-columns:
            1fr;
    }


    h1 {

        letter-spacing:
            -1px;
    }

}