/* =========================================
   AI AGENT HERO
========================================= */

.ai-agent-hero {

    padding: 120px 0;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at top left,
            rgba(34, 197, 94, 0.12),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(148, 0, 122, 0.12),
            transparent 90%
        ),
        #ffffff;
}

/* =========================================
   LEFT SIDE
========================================= */

.hero-badge {

    display: inline-block;

    padding: 12px 24px;

    border-radius: 50px;

    background: rgba(34, 197, 94, .08);

    color: #22c55e;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 25px;
}

.ai-agent-hero h1 {

    font-size: 76px;

    line-height: 1.05;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 25px;
}

.ai-agent-hero h1 span {

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #94007a
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.ai-agent-hero p {

    font-size: 22px;

    line-height: 1.8;

    color: #64748b;

    margin-bottom: 40px;
}

/* Buttons */

.hero-btns {

    display: flex;

    gap: 15px;

    margin-bottom: 50px;

    flex-wrap: wrap;
}

.btn-primary-ai {

    padding: 16px 35px;

    border-radius: 16px;

    text-decoration: none;

    color: #fff;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #94007a
        );
}

.btn-secondary-ai {

    padding: 16px 35px;

    border-radius: 16px;

    text-decoration: none;

    color: #111827;

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

    background: #fff;
}

/* Stats */

.hero-stats {

    display: flex;

    gap: 50px;
}

.hero-stats h3 {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 5px;

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #94007a
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.hero-stats span {

    color: #64748b;
}

/* =========================================
   RIGHT SIDE
========================================= */

.hero-visual {

    position: relative;

    min-height: 650px;
}

.hero-visual img {

    width: 100%;

    max-width: 580px;

    position: absolute;

    right: 0;

    bottom: 0;
}

/* =========================================
   CHAT BOXES
========================================= */

.chat-bubble {

    position: absolute;

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 18px 22px;

    max-width: 330px;

    line-height: 1.7;

    font-size: 15px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

    border: 1px solid rgba(34,197,94,.08);

    animation: floatBubble 4s ease-in-out infinite;
}

.chat-header {

    font-weight: 700;

    margin-bottom: 10px;

    color: #0f172a;
}

.user-chat {

    top: 0;

    left: -40px;
}

.agent-chat {

    top: 130px;

    right: -20px;

    animation-delay: .8s;
}

.action-chat {

    bottom: 150px;

    left: -20px;

    animation-delay: 1.6s;
}

.success-chat {

    bottom: 20px;

    right: 0;

    animation-delay: 2.4s;

    border-color: #22c55e;
}

/* =========================================
   AI STATUS
========================================= */

.agent-status {

    position: absolute;

    top: 260px;

    left: 50%;

    transform: translateX(-50%);

    background: #fff;

    padding: 14px 22px;

    border-radius: 50px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    font-weight: 600;
}

.pulse {

    width: 10px;

    height: 10px;

    background: #22c55e;

    border-radius: 50%;

    display: inline-block;

    margin-right: 8px;

    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(34,197,94,0);
    }
}

@keyframes floatBubble {

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

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

/* =========================================
   MOBILE
========================================= */

@media(max-width:991px){

    .ai-agent-hero{
        padding:80px 0;
        text-align:center;
    }

    .ai-agent-hero h1{
        font-size:48px;
    }

    .hero-stats{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-visual{
        margin-top:60px;
        min-height:auto;
    }

    .hero-visual img{
        position:relative;
        max-width:100%;
    }

    .chat-bubble,
    .agent-status{
        display:none;
    }
}

/*End Of Hero Section*/




/*AI Agent Don't Just Chat*/
 .agent-capabilities {

    padding: 100px 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(34,197,94,.08),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(148,0,122,.08),
            transparent 45%
        ),
        #ffffff;
}

.section-tag {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(34,197,94,.08);

    color: #22c55e;

    font-weight: 700;

    margin-bottom: 20px;
}

.agent-capabilities h2 {

    font-size: 60px;

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 25px;

    color: #0f172a;
}

.agent-capabilities h2 span {

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #94007a
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.agent-capabilities p {

    color: #64748b;

    line-height: 1.8;
}

.capability-image img {

    width: 100%;

    border-radius: 30px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.08);
}

.capability-list {

    margin-top: 40px;
}

.capability-item {

    display: flex;

    gap: 20px;

    padding: 22px;

    margin-bottom: 18px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid rgba(34,197,94,.08);

    box-shadow:
        0 10px 25px rgba(0,0,0,.04);

    transition: .4s;
}

.capability-item:hover {

    transform: translateX(10px);

    box-shadow:
        0 20px 40px rgba(148,0,122,.08);
}

.icon {

    min-width: 60px;

    height: 60px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.12),
            rgba(148,0,122,.12)
        );
}

.capability-item h4 {

    font-weight: 700;

    margin-bottom: 8px;
}
/*End Of AI Agent Don't Just Chat*/




/* ==================================
   LIVE AI CHAT SECTION
================================== */

.agent-live-chat{

    padding:120px 0;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(
        circle at top left,
        rgba(34,197,94,.08),
        transparent 40%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(148,0,122,.08),
        transparent 80%
    ),
    #fff;
}

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

.section-header{

    max-width:850px;

    margin:auto auto 80px;
}

.section-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(34,197,94,.08);

    color:#22c55e;

    font-weight:700;

    margin-bottom:20px;
}

.agent-live-chat h2{

    font-size:60px;

    font-weight:800;

    margin-bottom:20px;

    color:#0f172a;
}

.agent-live-chat h2 span{

    background:
    linear-gradient(
        90deg,
        #22c55e,
        #94007a
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

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

.employee-side{

    text-align:center;
}

.employee-side img{

    max-height:700px;

    object-fit:contain;
}

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

.chat-window{

    background:#fff;

    border-radius:32px;

    padding:35px;

    box-shadow:
    0 30px 80px rgba(0,0,0,.08);

    border:1px solid rgba(34,197,94,.08);
}

/* Header */

.chat-header{

    display:flex;

    align-items:center;

    gap:15px;

    padding-bottom:25px;

    border-bottom:1px solid #eef2f7;
}

.agent-avatar{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #94007a
    );

    color:#fff;
}

.chat-header h5{

    margin:0;

    font-weight:700;
}

.chat-header span{

    color:#64748b;
}

/* Messages */

.chat-message{

    margin-top:25px;
}

.message{

    padding:18px 22px;

    border-radius:18px;

    line-height:1.8;

    max-width:85%;
}

.user .message{

    background:#f8fafc;

    margin-left:auto;
}

.agent .message{

    background:
    linear-gradient(
        135deg,
        rgba(34,197,94,.08),
        rgba(148,0,122,.08)
    );
}

.success .message{

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #94007a
    );

    color:#fff;
}

.time{

    margin-top:8px;

    font-size:12px;

    color:#94a3b8;
}

/* Status */

.live-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    font-weight:600;
}

.pulse-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(34,197,94,.6);
    }

    100%{
        box-shadow:0 0 0 12px rgba(34,197,94,0);
    }
}

/* Progress */

.scan-progress{

    height:10px;

    background:#edf2f7;

    border-radius:30px;

    margin-top:15px;

    overflow:hidden;
}

.scan-bar{

    width:100%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        #22c55e,
        #94007a
    );

    animation:loading 2s linear infinite;
}

@keyframes loading{

    0%{
        width:0%;
    }

    100%{
        width:100%;
    }
}

/* Action Card */

.action-card{

    margin-top:25px;

    padding:25px;

    border-radius:24px;

    background:#f8fafc;
}

.action-card h6{

    margin-bottom:15px;

    font-weight:700;
}

.action-card ul{

    padding:0;

    margin:0;

    list-style:none;
}

.action-card li{

    padding:8px 0;
}

/* Metrics */

.resolution-card{

    margin-top:30px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;
}

.metric{

    text-align:center;

    padding:20px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        rgba(34,197,94,.08),
        rgba(148,0,122,.08)
    );
}

.metric strong{

    display:block;

    font-size:28px;

    font-weight:800;

    background:
    linear-gradient(
        90deg,
        #22c55e,
        #94007a
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.metric span{

    font-size:14px;

    color:#64748b;
}

/* Responsive */

@media(max-width:991px){

    .agent-live-chat{
        padding:80px 0;
    }

    .agent-live-chat h2{
        font-size:42px;
    }

    .employee-side{
        margin-bottom:50px;
    }

    .resolution-card{
        grid-template-columns:1fr;
    }
}

/*End Of Watch AI Agent Solve Problems*/