/* =========================================
01. WORKFLOW SECTION + GRID + ARROWS
========================================= */

.tm-workflow {
    width:100%;
    padding:120px 0;
    overflow:hidden;
}

.tm-workflow__container {
    width:100%;
}

/* HEADER */

.tm-workflow__header {
    max-width:700px;
    margin-bottom:80px;
}

.tm-workflow__header h2 {
    margin:0 0 20px;
    font-size:48px;
    line-height:1.1;
    color:#111827;
}

.tm-workflow__header p {
    margin:0;
    color:#6b7280;
    font-size:18px;
}

/* GRID */

.tm-workflow__flow {
    display:grid;
    grid-template-columns:
        minmax(300px,1fr)
        140px
        360px
        140px
        minmax(300px,1fr);
    align-items:center;
    gap:20px;
}

.tm-workflow__stage {
    display:flex;
    flex-direction:column;
}

/* ARROWS */

.tm-workflow__arrow {
    display:flex;
    align-items:center;
    justify-content:center;
}

.tm-workflow__arrow svg {
    width:140px;
    height:120px;
}

.tm-workflow__arrow path {
    fill:none;
    stroke:#94a3b8;
    stroke-width:3;
    stroke-linecap:round;
}

/* INITIAL STATES */

.tm-workflow__stage .tm-workflow-card,
.tm-workflow-main,
.tm-workflow__arrow {
    opacity:0;
    transform:translateY(40px);
}

/* ANIMATIONS */

.tm-workflow.is-visible .tm-workflow__stage--left .tm-workflow-card {
    animation:workflowReveal .8s forwards;
}

.tm-workflow.is-visible .tm-workflow-main {
    animation:workflowCenter .9s .7s forwards;
}

.tm-workflow.is-visible .tm-workflow__stage--right .tm-workflow-card {
    animation:workflowReveal .8s 1.4s forwards;
}

.tm-workflow.is-visible .tm-workflow__arrow {
    animation:workflowArrow .8s .5s forwards;
}

@keyframes workflowReveal {
    to {
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes workflowCenter {
    0% {
        opacity:0;
        transform:scale(.85);
    }
    100% {
        opacity:1;
        transform:scale(1);
    }
}

@keyframes workflowArrow {
    to {
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================
02. LEFT WORKFLOW
========================================= */

.tm-workflow__stage--left{
    position:relative;
    height:560px;
    overflow:visible;
}

/* LAPTOP */

.tm-device--laptop{
    position:absolute;
    left:clamp(-260px,-15vw,-120px);
    top:clamp(-20px,2vw,40px);
    width:clamp(420px,42vw,720px);
    height:clamp(300px,28vw,480px);
    padding:clamp(25px,3vw,45px);
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.8);
    border-radius:32px;
    box-shadow:0 50px 120px rgba(88,28,135,.18);
    z-index:1;
}

/* LAPTOP HEADER */

.tm-device__top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.tm-device__top span{
    width:80px;
    height:8px;
    background:#ddd6fe;
    border-radius:10px;
}

.tm-avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#a855f7;
}

/* LAPTOP CONTENT */

.tm-placeholder{
    height:16px;
    background:#e9d5ff;
    margin-top:25px;
    border-radius:8px;
}

.tm-placeholder--large{
    width:80%;
    height:70px;
    background:#ddd6fe;
}

.tm-placeholder--short{
    width:45%;
}

.tm-device__grid{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.tm-device__grid div{
    flex:1;
    height:45px;
    background:#f3e8ff;
    border-radius:10px;
}

/* PHONE */

.tm-device--phone{
    position:absolute;
    right:-20px;
    top:150px;
    width:230px;
    height:330px;
    padding:25px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:32px;
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 35px 80px rgba(88,28,135,.25);
    z-index:2;
}

/* PHONE CONTENT */

.tm-phone__header{
    font-weight:600;
    margin-bottom:30px;
}

.tm-check-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-size:14px;
    line-height:1.35;
    max-width:230px;
}

.tm-check{
    width:22px;
    height:22px;
    min-width:22px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ddd6fe;
    color:transparent;
    font-size:12px;
}

/* COMPLETED */

.tm-check.done{
    animation:checkDone .45s forwards;
}

/* LOADING */

.tm-check.loading{
    background:linear-gradient(90deg,#ddd6fe,#8b5cf6,#ddd6fe);
    background-size:200%;
    color:transparent;
    animation:workflowLoading 1.5s linear infinite;
}

/* SEQUENCE */

.tm-workflow.is-visible .tm-check-row:nth-child(2) .tm-check.done{
    animation-delay:.3s;
}

.tm-workflow.is-visible .tm-check-row:nth-child(3) .tm-check.done{
    animation-delay:.8s;
}

.tm-workflow.is-visible .tm-check-row:nth-child(4) .tm-check.done{
    animation-delay:1.3s;
}

@keyframes checkDone{
    0%{
        background:#ddd6fe;
        color:transparent;
        transform:scale(.7);
    }
    60%{
        transform:scale(1.15);
    }
    100%{
        background:#8b5cf6;
        color:#fff;
        transform:scale(1);
    }
}

@keyframes workflowLoading{
    from{
        background-position:0%;
    }
    to{
        background-position:200%;
    }
}

.tm-check{
    width:22px;
    height:22px;
    min-width:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ddd6fe;
    overflow:hidden;
}

.tm-check .material-symbols-rounded{
    font-size:14px;
    font-variation-settings:
        'FILL' 1,
        'wght' 600,
        'GRAD' 0,
        'opsz' 20;
    color:#fff;
    opacity:0;
}

.tm-check.done .material-symbols-rounded{
    animation:showCheck .25s forwards;
    animation-delay:inherit;
}

@keyframes showCheck{
    from{
        opacity:0;
        transform:scale(.6);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}



/* =========================================
03. CENTER WORKFLOW FEATURE CARD
========================================= */

.tm-workflow-main{
    width:360px;
    min-height:560px;
    padding:40px;
    border-radius:40px;
    background:linear-gradient(160deg,#eff6ff,#bfdbfe);
    color:#111827;
    box-shadow:0 35px 80px rgba(37,99,235,.18);
    position:relative;
    z-index:2;
}

.tm-workflow-main__status{
    display:inline-flex;
    width:max-content;
    padding:8px 16px;
    background:#dbeafe;
    border:1px solid #bfdbfe;
    border-radius:999px;
    color:#2563eb;
    font-size:13px;
    font-weight:600;
    margin-bottom:30px;
}

.tm-workflow-main h3{
    margin:0 0 20px;
    font-size:34px;
    line-height:1.2;
    color:#111827;
}

.tm-workflow-main p{
    color:#475569;
    line-height:1.7;
}

.tm-workflow-main__steps{
    margin-top:40px;
    height:204px;
    overflow:hidden;
    position:relative;
    display:block;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
}

.tm-workflow-main__slider{
    display:flex;
    flex-direction:column;
    gap:15px;
    animation:workflowSlider 8s linear infinite;
}

.tm-workflow-main__slider div{
    padding:15px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.8);
    border-radius:14px;
    color:#111827;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.tm-workflow-main__slider .material-symbols-rounded{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:23px;
    color:#2563eb;
    font-variation-settings:
        'FILL' 1,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;
}


.tm-workflow-main__slider span{
    color:#2563eb;
    font-weight:700;
    min-width:28px;
}

@keyframes workflowSlider{
    0%,22%{
        transform:translateY(0);
    }
    30%,52%{
        transform:translateY(-73px);
    }
    60%,82%{
        transform:translateY(-146px);
    }
    100%{
        transform:translateY(-219px);
    
    }
}


/* =========================================
04. RIGHT WORKFLOW PREMIUM CARDS
========================================= */

.tm-workflow__stage--right{
    position:relative;
    height:560px;
    width:100%;
}

/* BASE CARDS */

.tm-workflow__stage--right .tm-workflow-card{
    position:absolute;
    width:clamp(300px,22vw,380px);
    padding:clamp(28px,2vw,36px);
    border-radius:32px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:0 35px 90px rgba(15,23,42,.12);
    color:#111827;
    overflow:hidden;
}

/* SOFT GREEN BACKGROUND CARDS */

.tm-workflow-card--growth,
.tm-workflow-card--scale{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.9),
            rgba(240,253,244,.85)
        );
}


/* CARD TITLES */

.tm-workflow-card h4{
    margin:0 0 18px;
    font-size:21px;
    line-height:1.25;
    font-weight:700;
    color:#111827;
}


/* REMOVE TEXT FEEL */

.tm-workflow-card p{
    display:none;
}


/* SCALE BADGE */

.tm-scale-badge{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    margin-bottom:22px;
    border-radius:999px;
    background:#dcfce7;
    color:#15803d;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}


/* BACK CARD POSITIONS */

.tm-workflow-card--growth{
    top:35px;
    right:-20px;
    z-index:2;
}

.tm-workflow-card--scale{
    top:315px;
    right:-20px;
    z-index:2;
}


/* FLOATING FRONT CARD */

.tm-workflow-card--value{
    top:170px;
    left:-10px;
    width:clamp(330px,24vw,410px);
    padding:clamp(32px,2vw,40px);
    z-index:5;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f0fdf4
        );
    border:1px solid rgba(34,197,94,.18);
    box-shadow:
        0 45px 110px rgba(34,197,94,.18);
}


/* CARD HEADER */

.tm-workflow-card__top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    color:#16a34a;
    font-size:13px;
    font-weight:700;
}


/* CHECK */

.tm-workflow-check{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    font-size:14px;
}


/* KPI */

.tm-value-stat{
    font-size:52px;
    line-height:1;
    font-weight:800;
    color:#16a34a;
    margin-bottom:10px;
}


/* KPI SUBTEXT */

.tm-value-label{
    color:#64748b;
    font-size:14px;
    margin-bottom:28px;
}


/* PLACEHOLDER SYSTEM */

.tm-workflow-placeholder,
.tm-lines{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.tm-workflow-placeholder span,
.tm-lines span{
    display:block;
    height:9px;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #dcfce7,
            #bbf7d0,
            #dcfce7
        );
    background-size:200%;
    animation:placeholderGlow 3s infinite;
}


.tm-workflow-placeholder span:nth-child(1),
.tm-lines span:nth-child(1){
    width:90%;
}

.tm-workflow-placeholder span:nth-child(2),
.tm-lines span:nth-child(2){
    width:65%;
}

.tm-workflow-placeholder span:nth-child(3),
.tm-lines span:nth-child(3){
    width:80%;
}


@keyframes placeholderGlow{
    0%{
        background-position:0%;
    }
    100%{
        background-position:200%;
    }
}
/* =========================================
GROWTH LINE CHART
========================================= */

.tm-growth-line{
    position:relative;
    width:100%;
    height:120px;
    margin-top:25px;
    overflow:hidden;
}

.tm-growth-line svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.tm-growth-line path.tm-line{
    fill:none;
    stroke:#22c55e;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:500;
    stroke-dashoffset:500;
    animation:growthDraw 2s ease forwards;
}

.tm-growth-line path.tm-fill{
    fill:url(#growthGradient);
    opacity:.18;
}

.tm-growth-point{
    fill:#22c55e;
    stroke:#ffffff;
    stroke-width:3;
}

@keyframes growthDraw{
    to{
        stroke-dashoffset:0;
    }
}


/* YEAR LABELS */

.tm-growth-years{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    color:#94a3b8;
    font-size:11px;
    font-weight:600;
}


/* BACK CARD MINI METRICS */

.tm-mini-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:24px;
}

.tm-mini-box{
    height:70px;
    border-radius:18px;
    background:rgba(220,252,231,.65);
    border:1px solid rgba(34,197,94,.12);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:15px;
}

.tm-mini-box span{
    display:block;
    height:8px;
    border-radius:20px;
    background:#bbf7d0;
    margin-bottom:8px;
}

.tm-mini-box span:last-child{
    width:60%;
    margin-bottom:0;
}


/* SMALL STATUS DOT */

.tm-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 15px rgba(34,197,94,.7);
}


/* FRONT CARD GLOW */

.tm-workflow-card--value::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-60px;
    bottom:-60px;
    border-radius:50%;
    background:rgba(34,197,94,.12);
    filter:blur(40px);
}


/* BACK CARD GLOW */

.tm-workflow-card--growth::before,
.tm-workflow-card--scale::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    right:-40px;
    top:-40px;
    border-radius:50%;
    background:rgba(34,197,94,.08);
    filter:blur(35px);
}


/* RESPONSIVE */

@media(max-width:1200px){

    .tm-workflow__stage--right .tm-workflow-card{
        width:clamp(260px,24vw,330px);
    }

    .tm-workflow-card--value{
        left:-10px;
    }

}


@media(max-width:900px){

    .tm-workflow__stage--right{
        height:auto;
        display:flex;
        flex-direction:column;
        gap:25px;
    }

    .tm-workflow__stage--right .tm-workflow-card{
        position:relative;
        top:auto;
        right:auto;
        left:auto;
        width:100%;
    }

    .tm-workflow-card--value{
        order:1;
    }

    .tm-workflow-card--growth{
        order:2;
    }

    .tm-workflow-card--scale{
        order:3;
    }

}


/* REDUCE MOTION */

@media(prefers-reduced-motion:reduce){

    .tm-workflow-placeholder span,
    .tm-lines span,
    .tm-growth-line path.tm-line{
        animation:none;
    }

}