/* ================================
   VectorPath AI - V2 Style
   FinTech / AI SaaS Design
================================ */


/* ---------- RESET ---------- */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body {

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

    background:
    radial-gradient(
        circle at top,
        #eef5ff,
        #f8fafc 45%,
        #ffffff
    );

    color:#111827;

}


button {

    border:none;
    cursor:pointer;

    font-family:inherit;

}



.app {

    width:100%;
    min-height:100vh;

}





/* ---------- SCREEN ---------- */


.screen {

    display:none;

    min-height:100vh;

    width:100%;

}


.screen.active {

    display:flex;

    animation:
    fadeIn .5s ease;

}



@keyframes fadeIn {

    from {

        opacity:0;
        transform:translateY(15px);

    }


    to {

        opacity:1;
        transform:none;

    }

}





/* ---------- BRAND ---------- */


.brand {

    position:absolute;

    top:30px;
    left:30px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:700;

    font-size:18px;

}


.logo {

    width:42px;
    height:42px;

    border-radius:14px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #22c55e
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

}





/* ---------- HERO ---------- */


#hero {

    justify-content:center;

    align-items:center;

    text-align:center;

}



.hero-content {

    max-width:620px;

    padding:30px;

}



.ai-avatar {

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );


    color:white;

    font-size:42px;


    box-shadow:

    0 20px 50px
    rgba(37,99,235,.25);


}



.ai-avatar.big {

    width:120px;

    height:120px;

    font-size:55px;

}





.hero-content h1 {

    margin-top:35px;

    font-size:52px;

    line-height:1.1;

    letter-spacing:-1px;

}


.hero-content h1 span {

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #16a34a
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero-content p {

    margin-top:25px;

    font-size:20px;

    color:#64748b;

    line-height:1.6;

}





.primary-btn {


    margin-top:35px;


    padding:

    18px 40px;


    border-radius:999px;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );


    color:white;


    font-size:18px;


    font-weight:700;


    box-shadow:

    0 15px 30px
    rgba(37,99,235,.25);


    transition:.3s;


}



.primary-btn:hover {


    transform:translateY(-3px);


}



.primary-btn.large {

    width:100%;

}



.trust-row {

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;


    color:#64748b;

    font-size:14px;

}





/* ---------- CHAT ---------- */


#chat {

    justify-content:center;

    align-items:center;

}



.chat-container {


    width:100%;

    max-width:600px;

    height:90vh;


    background:white;


    border-radius:28px;


    box-shadow:

    0 30px 80px
    rgba(0,0,0,.12);


    display:flex;

    flex-direction:column;


    overflow:hidden;


}





.chat-header {


    padding:20px;

    border-bottom:1px solid #e5e7eb;

    display:flex;

    gap:12px;

    align-items:center;

}


.mini-avatar {


    width:45px;

    height:45px;

    background:#2563eb;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}


.chat-header p {

    font-size:13px;

    color:#64748b;

}





.chat-messages {


    flex:1;

    padding:25px;

    overflow-y:auto;

}



.message {


    max-width:80%;

    padding:15px 18px;

    margin-bottom:18px;

    border-radius:18px;

    line-height:1.5;

}



.ai-message {


    background:#f1f5f9;

    color:#111827;


    border-bottom-left-radius:5px;


}



.user-message {


    background:#2563eb;

    color:white;

    margin-left:auto;


    border-bottom-right-radius:5px;


}





.answer-buttons {


    padding:20px;

    display:grid;

    gap:12px;

}



.answer-buttons button {


    padding:15px;

    border-radius:15px;

    background:white;

    border:

    1px solid #dbeafe;


    font-size:15px;


    transition:.2s;


}



.answer-buttons button:hover {

    background:#eff6ff;

    border-color:#2563eb;

}







/* ---------- THINKING ---------- */


#thinking {


    justify-content:center;

    align-items:center;

}



.thinking-box {


    text-align:center;

    max-width:450px;

    padding:30px;


}



.thinking-box h2 {


    margin-top:30px;

    font-size:32px;


}



.thinking-box p {


    margin-top:20px;

    color:#64748b;


}



.progress-container {


    width:100%;

    height:12px;

    background:#e5e7eb;

    border-radius:20px;

    margin-top:30px;

    overflow:hidden;

}



#progressBar {


    width:0%;

    height:100%;


    background:

    linear-gradient(
        90deg,
        #2563eb,
        #22c55e
    );


    transition:width .4s;


}



#thinkingSteps {


    text-align:left;

    margin-top:30px;

    color:#475569;

    line-height:2;

}





/* ---------- REPORT ---------- */


#report {


    justify-content:center;

}



.report-container {


    width:100%;

    max-width:650px;

    padding:30px;

}



.report-title {

    text-align:center;

}



.success {

    color:#16a34a;

    font-weight:700;

}


.report-title h1 {


    margin-top:15px;

    font-size:38px;


}




.score-card {


    margin-top:30px;


    padding:35px;


    text-align:center;


    border-radius:30px;


    background:

    linear-gradient(
        135deg,
        #eff6ff,
        #ecfdf5
    );


}


.score-card p {

    color:#64748b;

}


#scoreNumber {


    font-size:80px;

    font-weight:800;

    color:#2563eb;

}





.card {


    margin-top:20px;

    padding:25px;

    background:white;

    border-radius:25px;


    box-shadow:

    0 10px 30px
    rgba(0,0,0,.06);


}



.card h3 {

    margin-bottom:15px;

}



.profile-name {


    font-size:28px;

    font-weight:800;

    color:#2563eb;

}



.card li {


    margin-left:20px;

    margin-bottom:12px;

}



.opportunity {


    text-align:center;

}



#opportunityScore {


    font-size:65px;

    font-weight:800;

    color:#16a34a;


}



.small-note {


    margin-top:20px;

    font-size:12px;

    color:#94a3b8;

    text-align:center;


}





/* ---------- MOBILE ---------- */


@media(max-width:600px){


.hero-content h1 {

    font-size:38px;

}



.hero-content p {

    font-size:17px;

}



.trust-row {

    flex-direction:column;

}


.chat-container {


    height:100vh;

    border-radius:0;

}



.report-container {

    padding:20px;

}


}