/*=====================================
ERP HERO
======================================*/

.erp-hero{

    position:relative;

    overflow:hidden;

    padding:130px 0 90px;

    min-height:90vh;

}

.erp-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.erp-content{

    z-index:2;

}

.erp-content p{

    max-width:620px;

    margin:28px 0 35px;

}
.erp-network{

    position:relative;

    width:700px;

    height:700px;

    margin:auto;

}
.erp-core{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:160px;

    height:160px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    #1d4f87);

    box-shadow:

    0 0 50px rgba(0,212,255,.35);

    z-index:5;

}

.erp-core i{

    font-size:40px;

}
.erp-node{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.erp-node:hover{

    transform:translateY(-10px) scale(1.05);

}
.inventory{top:0;left:290px;}

.sales{top:90px;right:20px;}

.crm{top:290px;right:0;}

.accounting{bottom:90px;right:20px;}

.hr{bottom:0;left:290px;}

.reports{bottom:90px;left:20px;}

.purchase{top:290px;left:0;}

.manufacturing{top:90px;left:20px;}
.erp-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

    pointer-events:none;

}

.flow-line{

    fill:none;

    stroke:rgba(0,212,255,.22);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:8 10;

}

.erp-lines line{

    stroke:rgba(255,255,255,.12);

    stroke-width:2;

    stroke-dasharray:8 8;

}
.erp-flow-dot{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--secondary);

    box-shadow:

        0 0 12px var(--secondary),

        0 0 28px rgba(0,212,255,.5);

    z-index:8;

}
.erp-core{

    animation:erpPulse 4s ease-in-out infinite;

}

@keyframes erpPulse{

    0%,100%{

        box-shadow:

        0 0 30px rgba(0,212,255,.30);

    }

    50%{

        box-shadow:

        0 0 70px rgba(0,212,255,.55);

    }

}
.erp-node{

    animation:erpFloat 7s ease-in-out infinite;

}

.sales{

    animation-delay:.6s;

}

.crm{

    animation-delay:1.2s;

}

.accounting{

    animation-delay:1.8s;

}

.hr{

    animation-delay:2.2s;

}

.reports{

    animation-delay:2.8s;

}

.purchase{

    animation-delay:3.2s;

}

.manufacturing{

    animation-delay:3.8s;

}

@keyframes erpFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}
/*=====================================
ERP MODULES
======================================*/

.erp-dashboard{

    display:grid;

    grid-template-columns:repeat(4, minmax(0,1fr));

    gap:28px;

    margin-top:70px;

    align-items:stretch;

}

.erp-widget{

    width:100%;

    min-width:0;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    gap:16px;

    height:220px;

    padding:28px;

}

.erp-widget::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:var(--secondary);

    border-radius:20px;

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.erp-widget:hover::before{

    transform:scaleY(1);

}

.widget-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

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

}
.widget-content{

    display:flex;

    flex-direction:column;

    gap:12px;

    flex:1;

}

.widget-content h3{

    min-height:34px;

    margin:0;

}
.widget-content p{

    line-height:1.7;

    color:var(--text-light);

}
/*=====================================
ERP PROCESS
======================================*/

.erp-process{

    position:relative;

    max-width:1100px;

    margin:80px auto 0;

}

.erp-process::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:linear-gradient(

        to bottom,

        transparent,

        rgba(0,212,255,.4),

        transparent

    );

}

.erp-step{

    position: relative;

    display:grid;

    grid-template-columns:1fr 120px 1fr;

    align-items:center;

    min-height:220px;

    margin-bottom:70px;

}

.erp-step:last-child{

    margin-bottom:0;

}
.step-number{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    z-index:5;

}
.step-content{

    padding:32px;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.step-content:hover{

    transform:translateY(-8px);

    border-color:rgba(0,212,255,.35);

    box-shadow:

        0 25px 60px rgba(0,0,0,.18);

}

.step-content h3{

    margin-bottom:15px;

}

.step-content p{

    line-height:1.8;

}
.erp-step:nth-child(even) .step-content{

    grid-column:3;

}

.erp-step:nth-child(odd) .step-content{

    grid-column:1;

}
.step-content::after{

    content:"";

    position:absolute;

    top:50%;

    width:40px;

    height:2px;

    background:rgba(0,212,255,.35);

}

.erp-step:nth-child(odd) .step-content::after{

    right:-40px;

}

.erp-step:nth-child(even) .step-content::after{

    left:-40px;

}
.step-content{

    position:relative;

}
/*=====================================
ERP CTA
======================================*/

.erp-cta-section{

    padding-top:40px;

}

.erp-cta-box{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:90px 70px;

    border-radius:32px;

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

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

    backdrop-filter:blur(24px);

}

.erp-cta-glow{

    position:absolute;

    width:520px;

    height:520px;

    left:50%;

    top:-240px;

    transform:translateX(-50%);

    background:radial-gradient(

        circle,

        rgba(0,212,255,.22),

        transparent 70%

    );

    pointer-events:none;

}

.erp-cta-box h2{

    max-width:760px;

    margin:20px auto;

}

.erp-cta-box p{

    max-width:760px;

    margin:0 auto 45px;

    font-size:18px;

    line-height:1.9;

    color:var(--text-light);

}

.erp-cta-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}

.erp-feature{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:40px;

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

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

}

.erp-feature i{

    color:var(--secondary);

}

.erp-cta-box .hero-buttons{

    justify-content:center;

}