html,
body {
    min-height: 100%;
}

body {
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(24, 162, 217, .13),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(242, 116, 5, .09),
            transparent 30%
        ),
        var(--bg-page);
}

.start-wrapper {
    width: 100%;
    max-width: 470px;

    animation:
        startIn .35s ease both;
}

@keyframes startIn {

    from {
        opacity: 0;

        transform:
            translateY(8px)
            scale(.99);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}

.start-card {
    overflow: hidden;

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

    border:
        1px solid
        rgba(225, 231, 234, .88);

    border-radius:
        var(--radius-xl);

    box-shadow:
        0 24px 65px
        rgba(30, 53, 64, .11);

    backdrop-filter:
        blur(12px);
}

/* =========================
   CABEÇALHO
   ========================= */

.start-header {
    position: relative;

    padding:
        31px
        32px
        22px;

    text-align: center;
}

.start-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--sulnet-blue),
            var(--sulnet-orange)
        );
}

.start-logo {
    display: block;

    width: 155px;
    max-height: 68px;

    margin:
        0 auto
        23px;

    object-fit: contain;
}

.start-title {
    margin:
        0
        0
        8px;

    color: var(--text);

    font-size: 25px;
    line-height: 1.2;
}

.start-description {
    max-width: 370px;

    margin:
        0 auto;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.55;
}

/* =========================
   FORMULÁRIO
   ========================= */

.start-form-area {
    padding:
        8px
        32px
        30px;
}

.start-error {
    margin-bottom: 18px;

    padding:
        12px
        14px;

    border:
        1px solid #f0cccc;

    border-radius:
        var(--radius-md);

    background:
        #fff1f1;

    color:
        #9b2929;

    font-size:
        13px;

    line-height:
        1.45;

    animation:
        errorIn .2s ease both;
}

@keyframes errorIn {

    from {
        opacity: 0;

        transform:
            translateY(-3px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

.form-group {
    margin-bottom: 17px;
}

.form-label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;

    font-weight: 700;
}

.start-input {
    padding:
        13px
        14px;

    font-size:
        15px;
}

.start-button {
    width: 100%;

    margin-top: 4px;

    padding:
        14px
        18px;

    border: 0;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            var(--sulnet-orange),
            #f58c29
        );

    color: #fff;

    font-size:
        15px;

    font-weight:
        700;

    box-shadow:
        0 7px 18px
        rgba(242, 116, 5, .19);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.start-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px
        rgba(242, 116, 5, .25);
}

.start-button:active {
    transform:
        translateY(0);
}

/* =========================
   RODAPÉ
   ========================= */

.start-privacy {
    margin:
        18px
        0
        0;

    color:
        #819098;

    font-size:
        11px;

    line-height:
        1.5;

    text-align:
        center;
}

.start-footer {
    margin-top:
        17px;

    padding-top:
        14px;

    border-top:
        1px solid #eef2f3;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    color:
        #9aa5aa;

    font-size:
        10px;
}

.start-footer-dot {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--sulnet-blue);
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 520px) {

    body {
        padding: 13px;
    }

    .start-card {
        border-radius:
            19px;
    }

    .start-header {
        padding:
            26px
            21px
            19px;
    }

    .start-logo {
        width:
            140px;

        margin-bottom:
            19px;
    }

    .start-title {
        font-size:
            22px;
    }

    .start-form-area {
        padding:
            7px
            21px
            24px;
    }

}