.gt-flow-card {

    width: 540px;
    max-width: 92vw;

    padding: 36px;

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.09)
        );

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(32px);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.02),
        0 24px 80px rgba(0,0,0,.45),
        0 0 120px rgba(0,212,255,.08);

    position: relative;

    overflow: hidden;

    transform: none;

    transition:
        box-shadow 900ms ease,
        border-color 900ms ease,
        background 900ms ease;
}

.gt-flow-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            transparent 30%
        );

    pointer-events: none;
}

@keyframes gt-card-float {

    0% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }

    100% {
        translate: 0 0;
    }
}

/* ====================================================== */
/* HEADER */
/* ====================================================== */

.gt-flow-header {

    margin-bottom: 28px;
}

.gt-flow-title {

    margin: 0 0 10px;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.03em;

    color: var(--gt-text);

    text-shadow:
        0 0 30px rgba(255,255,255,.08);
}

.gt-flow-description {

    margin: 0;

    color: var(--gt-text-soft);

    font-size: 15px;

    line-height: 1.7;

    max-width: 95%;
}

/* ====================================================== */
/* INPUTS */
/* ====================================================== */

.gt-flow-input {

    width: 100%;

    height: 52px;

    padding: 0 18px;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,.08);

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

    color: var(--gt-text);

    font-size: 15px;

    outline: none;

    transition:
        border-color .25s var(--gt-ease),
        box-shadow .25s var(--gt-ease),
        background .25s var(--gt-ease);
}

.gt-flow-input::placeholder {

    color: var(--gt-text-muted);
}

.gt-flow-input:hover {

    border-color:
        rgba(255,255,255,.12);
}

.gt-flow-input:focus {

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

    border-color:
        rgba(0,212,255,.45);

    box-shadow:
        0 0 0 4px rgba(0,212,255,.08),
        0 0 40px rgba(0,212,255,.10);
}

select.gt-flow-input {

    cursor: pointer;
}

/* ====================================================== */
/* BUTTONS */
/* ====================================================== */

.gt-flow-next,
.gt-flow-back {

    height: 48px;

    padding: 0 22px;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform .25s var(--gt-ease),
        background .25s var(--gt-ease),
        box-shadow .25s var(--gt-ease);
}

.gt-flow-next {

    border: 1px solid rgba(0,212,255,.18);

    background:
        linear-gradient(
            135deg,
            rgba(0,212,255,.22),
            rgba(30,94,255,.22)
        );

    color: #ffffff;

    box-shadow:
        0 8px 25px rgba(0,212,255,.12);
}

.gt-flow-next:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 35px rgba(0,212,255,.22);
}

.gt-flow-back {

    border:
        1px solid rgba(255,255,255,.08);

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

    color:
        var(--gt-text-soft);
}

.gt-flow-back:hover {

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

    color:
        var(--gt-text);
}

/* ====================================================== */
/* FOOTER */
/* ====================================================== */

.gt-flow-footer {

    display: flex;

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

    gap: 12px;

    margin-top: 28px;
}

/* ====================================================== */
/* PROGRESS */
/* ====================================================== */

.gt-flow-progress {

    width: 100%;

    height: 6px;

    border-radius: 999px;

    overflow: hidden;

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

    margin-bottom: 24px;
}

.gt-flow-progress-bar {

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #00D4FF,
            #1E5EFF
        );

    box-shadow:
        0 0 20px rgba(0,212,255,.5);
}

/* ====================================================== */
/* CHECKBOX */
/* ====================================================== */

.gt-checkbox {

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--gt-text-soft);
}

/* ====================================================== */
/* FLOAT */
/* ====================================================== */

@keyframes floatCard {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}




.gt-flow-orb {

    box-shadow:

        0 0 calc(
            40px *
            (
                1 +
                var(--orb-energy)
            )
        )

        var(--orb-color),

        0 0 calc(
            120px *
            (
                1 +
                var(--orb-energy)
            )
        )

        rgba(0,212,255,.25);
}

.gt-flow-scene-enter .gt-flow-card {
    animation:
        gtSceneArrival
        900ms
        cubic-bezier(.16,1,.3,1);
}

@keyframes gtSceneArrival {

    0% {

        opacity: 0;

        transform:

            translateY(40px)
            scale(.96);
    }

    100% {

        opacity: 1;

        transform:

            translateY(0)
            scale(1);
    }
}