:root{
    --bg:#020b17;
    --bg-2:#07182d;
    --panel:rgba(7,20,37,.74);
    --panel-strong:rgba(10,24,42,.92);
    --panel-border:rgba(255,255,255,.08);
    --text:#f4f7fb;
    --muted:rgba(244,247,251,.72);
    --muted-soft:rgba(244,247,251,.56);
    --primary:#4fdeb4;
    --primary-strong:#63e7c0;
    --primary-dark:#08312d;
    --input:rgba(255,255,255,.04);
    --input-hover:rgba(255,255,255,.055);
    --input-border:rgba(255,255,255,.12);
    --shadow:0 32px 90px rgba(0,0,0,.34);
    --radius:30px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    color:var(--text);
    font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at 18% 30%, rgba(79,222,180,.16), transparent 28%),
        radial-gradient(circle at 82% 24%, rgba(32,115,255,.12), transparent 26%),
        radial-gradient(circle at 52% 100%, rgba(79,222,180,.10), transparent 36%),
        linear-gradient(180deg, #031120 0%, #020b17 42%, #03101d 100%);
    overflow:auto;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.015) 0%, transparent 28%, rgba(255,255,255,.015) 58%, transparent 100%),
        radial-gradient(circle at center, rgba(79,222,180,.05), transparent 42%);
    opacity:.75;
}

.progress-floating{
    position:fixed;
    top:22px;
    right:24px;
    z-index:5;
    width:176px;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px 14px 12px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:22px;
    background:rgba(3,13,24,.66);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.progress-label{
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(244,247,251,.62);
}

.progress-track{
    height:5px;
    width:100%;
    border-radius:999px;
    background:rgba(255,255,255,.09);
    overflow:auto;
}

.progress-fill{
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), var(--primary-strong));
    box-shadow:0 0 28px rgba(79,222,180,.34);
    transition:width .42s ease;
}

.progress-meta{
    display:flex;
    justify-content:flex-end;
    gap:2px;
    font-size:11px;
    color:rgba(244,247,251,.76);
    letter-spacing:.08em;
}

.stage{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:28px;
    position:relative;
}

.ambient{
    position:absolute;
    pointer-events:none;
    filter:blur(4px);
}

.ambient-left{
    top:8%;
    left:-8%;
    width:360px;
    height:360px;
    background:radial-gradient(circle, rgba(79,222,180,.16) 0%, rgba(79,222,180,0) 70%);
}

.ambient-right{
    right:-10%;
    bottom:4%;
    width:420px;
    height:420px;
    background:radial-gradient(circle, rgba(36,109,255,.14) 0%, rgba(36,109,255,0) 72%);
}

.ambient-center{
    inset:auto;
    width:720px;
    height:720px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(79,222,180,.06) 0%, transparent 66%);
    opacity:.8;
}

.form-shell{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.form-panel{
    position:relative;
    width:min(100%, 840px);
    min-height:min(620px, calc(100vh - 56px));
    max-height:calc(100vh - 56px);
    border-radius:var(--radius);
    border:1px solid var(--panel-border);
    background:linear-gradient(180deg, rgba(7,20,37,.84) 0%, rgba(5,16,29,.94) 100%);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow);
    overflow:auto;
}

.form-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 12%, rgba(79,222,180,.08), transparent 20%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 52%, transparent 100%);
}

.form-alert{
    position:absolute;
    top:18px;
    left:18px;
    right:18px;
    z-index:4;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,122,122,.22);
    background:rgba(72,18,18,.86);
    color:#ffd8d8;
    font-size:14px;
    line-height:1.5;
}

.hp-wrap{
    position:absolute;
    left:-9999px;
    opacity:0;
    pointer-events:none;
}

.step{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    padding:58px 58px 46px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(79,222,180,.38) transparent;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:opacity .32s ease, transform .32s ease, visibility .32s ease;
}

.step.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.step[data-kind="welcome"]{justify-content:center}

.step::-webkit-scrollbar{width:10px}
.step::-webkit-scrollbar-thumb{background:rgba(79,222,180,.22);border-radius:999px}
.step::-webkit-scrollbar-track{background:transparent}

.logo-center-full,
.logo-inline{
    display:flex;
    justify-content:center;
}

.logo-center-full{margin-bottom:28px}
.logo-inline{margin-bottom:22px}

.logo-main{
    width:260px;
    max-width:78%;
    object-fit:contain;
}

.logo-small{
    width:158px;
    max-width:64%;
    object-fit:contain;
}

.eyebrow,
.step-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(79,222,180,.16);
    background:rgba(79,222,180,.10);
    color:#c9fff1;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.hero-title,
.question-title{
    margin:18px 0 0;
    font-weight:800;
    letter-spacing:-.04em;
    text-wrap:balance;
}

.hero-title{
    max-width:640px;
    font-size:56px;
    line-height:1.02;
}

.question-title{
    max-width:620px;
    font-size:40px;
    line-height:1.08;
}

.question-title-submit{max-width:560px}

.hero-description,
.question-description{
    margin:16px auto 0;
    max-width:560px;
    font-size:16px;
    line-height:1.85;
    color:var(--muted);
    text-wrap:pretty;
}

.hero-description-submit{max-width:520px}

.hero-actions{margin-top:32px}

.mini-note,
.field-hint{
    margin-top:14px;
    font-size:13px;
    line-height:1.6;
    color:var(--muted-soft);
}

.question-wrap{
    width:100%;
    max-width:680px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-bottom:10px;
}

.fields-grid{
    width:100%;
    margin-top:26px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.field-item{text-align:left}
.field-span-full{grid-column:1 / -1}
.field-span-half{grid-column:span 1}

.field-label{
    display:block;
    margin-bottom:10px;
    color:var(--text);
    font-size:14px;
    font-weight:600;
}

.field{
    width:100%;
    min-height:58px;
    border:1px solid var(--input-border);
    border-radius:18px;
    background:var(--input);
    color:var(--text);
    padding:16px 18px;
    font-size:15px;
    outline:none;
    transition:border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease;
    font-family:inherit;
    -webkit-appearance:none;
    appearance:none;
}

.field:hover{background:var(--input-hover)}

.field::placeholder{color:rgba(244,247,251,.34)}

.field:-webkit-autofill,
.field:-webkit-autofill:hover,
.field:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text);
    box-shadow:0 0 0 1000px rgba(11,25,44,.96) inset, 0 0 0 4px rgba(79,222,180,.08);
    border:1px solid rgba(79,222,180,.26);
    transition:background-color 9999s ease-in-out 0s;
}

.field:focus{
    border-color:rgba(79,222,180,.72);
    background:rgba(255,255,255,.055);
    box-shadow:0 0 0 4px rgba(79,222,180,.10);
}

.field[type="number"]::-webkit-outer-spin-button,
.field[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.field[type="number"]{appearance:textfield;-moz-appearance:textfield}

.submit-summary{
    width:100%;
    max-width:560px;
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.summary-card{
    padding:16px 14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
    color:var(--text);
    font-size:13px;
    line-height:1.55;
}

.actions{
    width:100%;
    max-width:560px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:28px;
}

.btn{
    appearance:none;
    border:none;
    cursor:pointer;
    min-height:52px;
    padding:14px 24px;
    border-radius:999px;
    font-family:inherit;
    font-size:14px;
    font-weight:800;
    letter-spacing:-.01em;
    transition:transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
    min-width:184px;
    color:#04231f;
    background:linear-gradient(180deg, var(--primary-strong), var(--primary));
    box-shadow:0 16px 40px rgba(79,222,180,.22);
}

.btn-secondary{
    color:var(--text);
    background:transparent;
    border:1px solid rgba(255,255,255,.12);
}

.is-invalid{
    border-color:#ff7c7c !important;
    box-shadow:0 0 0 4px rgba(255,124,124,.10) !important;
}

@media (max-width: 1024px){
    .hero-title{font-size:48px}
    .question-title{font-size:34px}
    .form-panel{min-height:600px}
}

@media (max-width: 767px){
    body{overflow:auto}

    .progress-floating{
        top:14px;
        right:14px;
        width:124px;
        padding:10px 10px 9px;
        gap:6px;
        border-radius:16px;
    }

    .progress-label{display:none}

    .stage{
        padding:16px;
        align-items:stretch;
    }

    .form-shell{align-items:stretch}

    .form-panel{
        width:100%;
        min-height:calc(100dvh - 32px);
        max-height:none;
        border-radius:24px;
    }

    .step{
        padding:44px 20px 32px;
        justify-content:center;
    }

    .form-alert{
        top:14px;
        left:14px;
        right:14px;
        font-size:13px;
    }

    .logo-main{width:180px}
    .logo-small{width:118px}

    .hero-title{
        font-size:34px;
        line-height:1.04;
        max-width:320px;
    }

    .question-title{
        font-size:28px;
        line-height:1.08;
        max-width:320px;
    }

    .hero-description,
    .question-description{
        max-width:320px;
        font-size:14px;
        line-height:1.75;
    }

    .fields-grid,
    .submit-summary{
        grid-template-columns:1fr;
    }

    .field-span-half,
    .field-span-full{grid-column:1 / -1}

    .field{
        min-height:54px;
        border-radius:16px;
        padding:15px 16px;
        font-size:16px;
    }

    .summary-card{
        padding:14px;
        border-radius:16px;
    }

    .actions{
        flex-direction:column;
        margin-top:24px;
    }

    .btn{width:100%}

    .ambient{display:none}
}