/* =====================================================
   EXPERIENCE SECTION
===================================================== */

.experience-section{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    background:
    radial-gradient(circle at top left,#233bff22 0%,transparent 40%),
    radial-gradient(circle at bottom right,#00d4ff18 0%,transparent 40%),
    linear-gradient(180deg,#08111f 0%,#0b1528 100%);

}


.experience-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.25;

    pointer-events:none;

}

.experience-section::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(circle,#3b82f622,transparent 70%);

    filter:blur(80px);

    animation:floatGlow 14s ease-in-out infinite;

}

.section-title{

    max-width:860px;

    margin:0 auto 90px;

    text-align:center;

}

.section-title .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:40px;

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

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

    color:#6ee7ff;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

}

.section-title h2{

    margin-top:28px;

    font-size:58px;

    line-height:1.12;

    color:#fff;

    font-weight:800;

}

.section-title p{

    margin:28px auto 0;

    max-width:760px;

    color:#b6c2d5;

    line-height:1.9;

    font-size:18px;

}

.experience-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:flex-start;

    margin-bottom:100px;

}

.workflow-column{

    position:relative;

}

.workflow-line{

    width:2px;

    height:55px;

    background:linear-gradient(

    to bottom,

    #3b82f6,

    transparent);

    margin:0 auto;

}

.workflow-card{

    position:relative;

    display:flex;

    gap:22px;

    padding:26px;

    border-radius:24px;

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

    backdrop-filter:blur(24px);

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

    transition:.45s;

    overflow:hidden;

}

.workflow-card:hover{

    transform:translateY(-10px);

    border-color:#4cc9ff;

    box-shadow:

    0 20px 60px rgba(0,180,255,.20);

}

.workflow-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.10),

    transparent);

    transform:translateX(-120%);

    transition:1s;

}

.workflow-card:hover::before{

    transform:translateX(120%);

}

.workflow-icon{

    width:70px;

    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:white;

    font-size:30px;

    background:linear-gradient(

    135deg,

    #2563eb,

    #3b82f6);

}

.workflow-icon.warehouse{

    background:linear-gradient(

    135deg,

    #f59e0b,

    #fbbf24);

}

.workflow-icon.barcode{

    background:linear-gradient(

    135deg,

    #10b981,

    #34d399);

}

.workflow-icon.driver{

    background:linear-gradient(

    135deg,

    #ec4899,

    #fb7185);

}

.workflow-icon.invoice{

    background:linear-gradient(

    135deg,

    #8b5cf6,

    #a855f7);

}

.workflow-icon.payment{

    background:linear-gradient(

    135deg,

    #06b6d4,

    #22d3ee);

}

/* =====================================================
   Workflow Content
===================================================== */

.workflow-content{

    flex:1;

}

.workflow-label{

    display:inline-block;

    margin-bottom:10px;

    color:#60a5fa;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.workflow-content h3{

    margin:0 0 12px;

    color:#fff;

    font-size:28px;

    font-weight:700;

}

.workflow-content p{

    margin:0;

    color:#b8c5d6;

    line-height:1.8;

    font-size:15px;

}

.workflow-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:22px;

    color:#fff;

    font-weight:600;

}

.workflow-footer span{

    color:#9fb2ca;

}


/* =====================================================
   Progress Bar
===================================================== */

.progress-bar{

    width:100%;

    height:8px;

    margin-top:25px;

    border-radius:30px;

    overflow:hidden;

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

}

.progress-bar span{

    display:block;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #38bdf8
    );

    animation:progressMove 3s ease infinite alternate;

}


/* =====================================================
   Status Badge
===================================================== */

.workflow-status{

    display:inline-flex;

    align-items:center;

    margin-top:22px;

    padding:8px 16px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

}

.workflow-status.success{

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

    color:#4ade80;

}

.workflow-status.paid{

    background:rgba(59,130,246,.15);

    color:#60a5fa;

}


/* =====================================================
   Dashboard
===================================================== */

.experience-dashboard{

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:40px;

    padding:45px;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

}


/* =====================================================
   Dashboard Header
===================================================== */

.dashboard-header{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:18px;

    font-weight:700;

    margin-bottom:35px;

}

.live-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:

    0 0 0 rgba(34,197,94,.6);

    animation:livePulse 2s infinite;

}


/* =====================================================
   Activity Feed
===================================================== */

.activity-feed{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.activity-item{

    display:flex;

    gap:22px;

    align-items:center;

    padding:16px 18px;

    border-radius:16px;

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

    transition:.35s;

}

.activity-item:hover{

    transform:translateX(10px);

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

}

.activity-item .time{

    color:#38bdf8;

    font-weight:700;

    width:70px;

}

.activity-item .text{

    color:#d5ddea;

}


/* =====================================================
   KPI Grid
===================================================== */

.kpi-grid{

    display:grid;

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

    gap:22px;

}

.kpi-card{

    padding:28px;

    border-radius:22px;

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

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

    transition:.35s;

}

.kpi-card:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:0 15px 40px rgba(59,130,246,.18);

}

.kpi-label{

    display:block;

    color:#9fb2ca;

    margin-bottom:16px;

    font-size:14px;

}

.kpi-card h3{

    color:#fff;

    font-size:38px;

    margin:0;

    font-weight:700;

}


/* =====================================================
   Counter
===================================================== */

.counter{

    font-variant-numeric:tabular-nums;

}


/* =====================================================
   Reveal Animation
===================================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================================
   Active Workflow
===================================================== */

.workflow-card.active{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:

        0 25px 70px rgba(59,130,246,.28);

}

.workflow-card.active .workflow-icon{

    animation:iconPulse 2s infinite;

}


/* =====================================================
   Connection Line Glow
===================================================== */

.workflow-line{

    position:relative;

    overflow:hidden;

}

.workflow-line::after{

    content:"";

    position:absolute;

    left:-2px;

    top:-40%;

    width:6px;

    height:40px;

    border-radius:50px;

    background:linear-gradient(

        transparent,

        #60a5fa,

        #ffffff,

        #60a5fa,

        transparent

    );

    animation:flowDown 2.8s linear infinite;

}


/* =====================================================
   Dashboard Hover
===================================================== */

.experience-dashboard:hover{

    border-color:#3b82f6;

    box-shadow:

        0 30px 90px rgba(59,130,246,.18);

}


/* =====================================================
   KPI Hover
===================================================== */

.kpi-card:hover h3{

    color:#7dd3fc;

}


/* =====================================================
   Floating Effect
===================================================== */

.workflow-card{

    animation:

        floatingCard 7s ease-in-out infinite;

}

.workflow-card:nth-child(2){

    animation-delay:.3s;

}

.workflow-card:nth-child(4){

    animation-delay:.6s;

}

.workflow-card:nth-child(6){

    animation-delay:.9s;

}


/* =====================================================
   Animations
===================================================== */

@keyframes floatGlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(50px);

    }

}


@keyframes progressMove{

    from{

        width:20%;

    }

    to{

        width:88%;

    }

}


@keyframes livePulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.55);

    }

    70%{

        box-shadow:0 0 0 18px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}


@keyframes iconPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

}


@keyframes flowDown{

    from{

        top:-40px;

    }

    to{

        top:100%;

    }

}


@keyframes floatingCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


/* =====================================================
   Tablet
===================================================== */

@media (max-width:1200px){

.experience-wrapper{

    gap:40px;

}

.section-title h2{

    font-size:48px;

}

.experience-dashboard{

    grid-template-columns:1fr;

}

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

.experience-section{

    padding:90px 0;

}

.section-title{

    margin-bottom:60px;

}

.section-title h2{

    font-size:34px;

    line-height:1.3;

}

.section-title p{

    font-size:16px;

}

.experience-wrapper{

    grid-template-columns:1fr;

    gap:35px;

}

.workflow-card{

    padding:20px;

}

.workflow-icon{

    width:58px;

    height:58px;

    font-size:24px;

}

.workflow-content h3{

    font-size:22px;

}

.kpi-grid{

    grid-template-columns:1fr;

}

.activity-item{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

.activity-item .time{

    width:auto;

}

}


/* =====================================================
   Small Mobile
===================================================== */

@media (max-width:480px){

.section-title h2{

    font-size:28px;

}

.workflow-card{

    flex-direction:column;

}

.workflow-icon{

    margin-bottom:10px;

}

.dashboard-header{

    font-size:16px;

}

.kpi-card{

    padding:22px;

}

.kpi-card h3{

    font-size:30px;

}

}

/* =====================================================
   JavaScript Interaction States
===================================================== */

.workflow-card.waiting{

    opacity:.58;

    filter:saturate(.65);

}

.workflow-card.completed{

    opacity:.82;

    border-color:rgba(34,197,94,.28);

}

.workflow-card.completed .workflow-icon{

    box-shadow:0 0 30px rgba(34,197,94,.22);

}

.activity-item.activity-active{

    background:rgba(59,130,246,.14);

    border:1px solid rgba(96,165,250,.25);

    transform:translateX(8px);

}

.activity-new{

    opacity:0;

    transform:translateY(-18px);

}

.activity-new.activity-visible{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .45s ease,
        transform .45s ease;

}

.activity-removing{

    opacity:0;

    transform:translateY(12px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}

.kpi-card.kpi-updated{

    animation:kpiUpdate .9s ease;

}

.kpi-card.workflow-highlight{

    border-color:rgba(56,189,248,.6);

    box-shadow:
        0 15px 45px rgba(56,189,248,.16);

}

@keyframes kpiUpdate{

    0%{

        transform:scale(1);

    }

    45%{

        transform:scale(1.045);

        border-color:#38bdf8;

    }

    100%{

        transform:scale(1);

    }

}