/*==================================================
        AI DEPLOYMENT
==================================================*/

.ai-deployment{

    position:relative;
    padding:180px 0;
    background:#0B0B0D;
    overflow:hidden;

}


.spec-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}
.spec-id{

    font-size:12px;

    letter-spacing:.28em;

    color:#777;

}
.spec-status{

    padding:6px 14px;

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

    border-radius:999px;

    font-size:11px;

    letter-spacing:.18em;

    color:var(--orange);

}
.deployment-container{

    width:min(1400px,92%);
    margin:auto;
    position:relative;
    z-index:2;

}

/* Header */

.deployment-header{

    max-width:760px;
    margin-bottom:80px;

}

.deployment-header h2{

    font-size:72px;
    line-height:.95;
    color:#fff;
    margin:24px 0;

}

.deployment-header p{

    color:#8FA6BB;
    font-size:20px;
    line-height:1.8;

}

/* Card */

.deployment-card{

    background:#141416;
    border:1px solid rgba(255,255,255,.06);
    border-radius:28px;
    padding:50px;
    position:relative;
    overflow:hidden;

}

.deployment-card::before{

    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:20px;

}

.deployment-card::after{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,var(--orange),var(--blue));

}

.deployment-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    margin-top:40px;

}

/* Divider */

.production-side{

    border-left:1px solid rgba(255,255,255,.08);
    padding-left:50px;

}

.deployment-label{

    font-size:12px;
    letter-spacing:.24em;
    color:#666;
    margin-bottom:28px;

}

/* Chat */

.chat-window{

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:30px;

}

.chat-header{

    padding:14px 20px;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:12px;
    letter-spacing:.2em;
    color:#777;

}

.chat-body{

    padding:24px;
    display:flex;
    flex-direction:column;
    gap:16px;

}

.message{

    padding:14px 18px;
    border-radius:14px;
    max-width:85%;
    line-height:1.6;
    font-size:15px;

}

.message.user{

    align-self:flex-end;
    background:#232327;
    color:#fff;

}

.message.ai{

    background:rgba(255,139,77,.08);
    border:1px solid rgba(255,139,77,.15);
    color:#E7E7E7;

}

/* Lists */

.demo-list,
.production-list{

    list-style:none;
    padding:0;
    margin:0;

}

.demo-list li,
.production-list li{

    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:#D8D8D8;
    font-size:17px;

}

.production-list li{

    position:relative;
    padding-left:30px;

}

.production-list li::before{

    content:"";
    position:absolute;
    left:0;
    top:24px;

    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--orange);
    box-shadow:0 0 12px rgba(255,139,77,.35);

}

/* Footer */

.deployment-footer{

    margin-top:60px;
    padding-top:35px;
    border-top:1px solid rgba(255,255,255,.06);

}

.deployment-footer span{

    display:block;
    color:#666;
    letter-spacing:.22em;
    font-size:11px;
    margin-bottom:18px;

}

.deployment-footer h3{

    color:#fff;
    font-size:34px;
    line-height:1.35;
    max-width:780px;

}

/* Responsive */

@media(max-width:900px){

    .deployment-grid{

        grid-template-columns:1fr;

    }

    .production-side{

        border-left:none;
        border-top:1px solid rgba(255,255,255,.08);
        padding-left:0;
        padding-top:40px;

    }

    .deployment-header h2{

        font-size:52px;

    }

}