/* ===========================================
Demo Section
=========================================== */

.demo-section{

    padding:120px 0;
    
    background:#020617;
    
    }
    
    .demo-grid{
    
    display:grid;
    
    grid-template-columns:1fr 1fr;
    
    gap:35px;
    
    margin-top:60px;
    
    }
    
    /* ============================ */
    
    .whatsapp-window{
    
    padding:0;
    
    overflow:hidden;
    
    }
    
    .wa-header{
    
    display:flex;
    
    align-items:center;
    
    gap:15px;
    
    padding:18px 22px;
    
    background:#111B21;
    
    border-bottom:1px solid rgba(255,255,255,.08);
    
    }
    
    .wa-avatar{
    
    width:48px;
    
    height:48px;
    
    border-radius:50%;
    
    background:#25D366;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-weight:700;
    
    color:white;
    
    }
    
    .wa-header small{
    
    color:#8ED6A5;
    
    }
    
    /* ============================ */
    
    .chat-window{
    
    height:520px;
    
    overflow-y:auto;
    
    padding:20px;
    
    background:#0B141A;
    
    display:flex;
    
    flex-direction:column;
    
    gap:15px;
    
    }
    
    .message{
    
    max-width:80%;
    
    padding:14px 16px;
    
    border-radius:14px;
    
    line-height:1.6;
    
    font-size:15px;
    
    }
    
    .left{
    
    background:#202C33;
    
    align-self:flex-start;
    
    }
    
    .right{
    
    background:#005C4B;
    
    align-self:flex-end;
    
    }
    
    /* ============================ */
    
    .chat-input{
    
    padding:18px;
    
    background:#111B21;
    
    display:flex;
    
    flex-direction:column;
    
    gap:15px;
    
    }
    
    .chat-input textarea{
    
    height:140px;
    
    resize:none;
    
    padding:15px;
    
    border:none;
    
    border-radius:14px;
    
    background:#202C33;
    
    color:white;
    
    font-size:15px;
    
    outline:none;
    
    }
    
    /* ============================ */
    
    .analysis-panel{
    
    padding:30px;
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .analysis-header{
    
    display:flex;
    
    justify-content:space-between;
    
    margin-bottom:30px;
    
    }
    
    .analysis-item{
    
    padding:14px;
    
    margin-bottom:12px;
    
    border-radius:12px;
    
    background:rgba(255,255,255,.05);
    
    opacity:.4;
    
    transition:.3s;
    
    }
    
    .analysis-item.active{
    
    opacity:1;
    
    background:#1E3A8A;
    
    }
    
    .result-card{
    
    margin-top:25px;
    
    padding:20px;
    
    border-radius:16px;
    
    background:rgba(255,255,255,.03);
    
    min-height:280px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    }
    
    .placeholder{
    
    color:#94A3B8;
    
    text-align:center;
    
    }
    
    /* ============================ */
    
    @media(max-width:992px){
    
    .demo-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .chat-window{
    
    height:420px;
    
    }
    
    }

    /* ================================================= */

.loader-card{

    display:flex;
    
    flex-direction:column;
    
    align-items:center;
    
    justify-content:center;
    
    gap:20px;
    
    height:240px;
    
    }
    
    .loader-circle{
    
    width:60px;
    
    height:60px;
    
    border-radius:50%;
    
    border:6px solid rgba(255,255,255,.15);
    
    border-top:6px solid #38BDF8;
    
    animation:spin 1s linear infinite;
    
    }
    
    @keyframes spin{
    
    100%{
    
    transform:rotate(360deg);
    
    }
    
    }
    
    /* ================================================= */
    
    .buyer-card{
    
    display:flex;
    
    flex-direction:column;
    
    gap:25px;
    
    animation:fadeIn .5s ease;
    
    }
    
    @keyframes fadeIn{
    
    from{
    
    opacity:0;
    
    transform:translateY(20px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }
    
    .buyer-score{
    
    text-align:center;
    
    }
    
    .score-circle{
    
    width:120px;
    
    height:120px;
    
    margin:auto;
    
    border-radius:50%;
    
    background:linear-gradient(135deg,#2563EB,#38BDF8);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:42px;
    
    font-weight:800;
    
    margin-bottom:15px;
    
    }
    
    .score-circle span{
    
    font-size:18px;
    
    margin-left:4px;
    
    }
    
    .buyer-grid{
    
    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:18px;
    
    }
    
    .buyer-grid label{
    
    display:block;
    
    font-size:13px;
    
    color:#94A3B8;
    
    margin-bottom:4px;
    
    }
    
    .broker-box{
    
    padding:20px;
    
    border-radius:16px;
    
    background:rgba(255,255,255,.05);
    
    }