/* ==========================
   HERO SECTION
========================== */

.hero-section{
    position:relative;
    overflow:hidden;
    padding:90px 0 60px;
    background:
    radial-gradient(circle at 20% 20%, rgba(91,92,255,.12), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(139,92,246,.12), transparent 35%),
    #020817;
}

.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('../images/world-map.png') center center/cover no-repeat;
    opacity:.08;
    pointer-events:none;
}

.hero-container{
    width:90%;
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.hero-left{
    position:relative;
    z-index:2;
}

.hero-left h1{
    font-size:72px;
    line-height:1.05;
    font-weight:800;
    color:#fff;
    margin-bottom:25px;
}

.hero-left h1 span{
    display:block;

    background:linear-gradient(
    135deg,
    #7c5cff,
    #b65cff
    );

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

.hero-left p{
    max-width:550px;
    font-size:18px;
    line-height:1.8;
    color:#a7b5cf;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:45px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:18px 32px;

    background:linear-gradient(
    135deg,
    #5b5cff,
    #8b5cf6
    );

    border-radius:14px;

    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:18px 32px;

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

    border-radius:14px;

    color:#fff;
    text-decoration:none;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
}

.stat-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.stat-box i{
    color:#8b5cf6;
    font-size:22px;
}

.stat-box strong{
    display:block;
    font-size:26px;
    color:#fff;
}

.stat-box span{
    display:block;
    font-size:13px;
    color:#8ea0bd;
}

/* RIGHT SIDE */

.hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.workflow-circle{
    width:520px;
    height:520px;
    border-radius:50%;
    border:2px solid rgba(139,92,246,.35);
    position:relative;
}

.workflow-circle::before{
    content:"";
    position:absolute;
    inset:40px;
    border-radius:50%;
    border:1px solid rgba(91,92,255,.15);
}

.workflow-node{
    width:220px;
    height:65px;

    position:absolute;
    left:50%;
    transform:translateX(-50%);

    background:rgba(8,17,35,.95);

    border:1px solid rgba(91,92,255,.25);

    border-radius:16px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:0 20px;

    color:#fff;
}

.workflow-node i{
    color:#8b5cf6;
}

.node-1{top:25px;}
.node-2{top:105px;}
.node-3{top:185px;}
.node-4{top:265px;}
.node-5{top:345px;}
.node-6{top:425px;}
.........
/* =================================
   CORE SERVICES
================================= */

.services-section{
    padding:90px 0;
    position:relative;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    color:#00b7ff;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
}

.section-heading h2{
    margin-top:12px;
    font-size:52px;
    color:#fff;
}

.section-heading p{
    color:#9fb0c9;
    margin-top:15px;
    font-size:18px;
}

.services-grid{

    display:grid;

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

    gap:24px;
}

.service-card{

    background:
    linear-gradient(
    180deg,
    rgba(10,18,35,.95),
    rgba(5,10,20,.95)
    );

    border:1px solid rgba(91,92,255,.15);

    border-radius:24px;

    padding:40px 30px;

    transition:.35s;
}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#5b5cff;

    box-shadow:
    0 0 35px rgba(91,92,255,.18);
}

.service-icon{

    width:85px;
    height:85px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:32px;

    position:relative;
}

.service-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

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

.blue{
    color:#3b82f6;
    background:rgba(59,130,246,.12);
}

.purple{
    color:#8b5cf6;
    background:rgba(139,92,246,.12);
}

.pink{
    color:#d946ef;
    background:rgba(217,70,239,.12);
}

.cyan{
    color:#00d4ff;
    background:rgba(0,212,255,.12);
}

.service-card h3{
    text-align:center;
    color:#fff;
    font-size:28px;
    margin-bottom:18px;
}

.service-card p{
    text-align:center;
    line-height:1.8;
    color:#9eb0ca;
    margin-bottom:25px;
}

.service-card a{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#8b5cf6;

    font-weight:600;
}

.service-card a:hover{
    color:#fff;
}
............
/* =================================
   WHY CHOOSE US
================================= */

.why-section{
    padding:90px 0;
}

.why-wrapper{

    display:grid;

    grid-template-columns:
    384px repeat(5,1fr);

    gap:25px;

    padding:45px;

    border-radius:28px;

    background:
    linear-gradient(
    180deg,
    rgba(10,18,35,.95),
    rgba(5,10,20,.95)
    );

    border:1px solid rgba(91,92,255,.15);

    position:relative;
}

.why-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:
    radial-gradient(
    circle at top right,
    rgba(139,92,246,.10),
    transparent 35%
    );

    pointer-events:none;
}

.why-intro{
    position:relative;
    z-index:2;
}

.why-intro span{

    color:#00d4ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;
}

.why-intro h2{

    color:#fff;

    font-size:42px;

    line-height:1.15;

    margin:18px 0;
}

.why-intro p{

    color:#9fb0c9;

    line-height:1.8;
}

.why-feature{

    text-align:center;

    position:relative;

    z-index:2;
}

.why-icon{

    width:72px;
    height:72px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    rgba(91,92,255,.12);

    color:#8b5cf6;

    font-size:28px;

    border:1px solid rgba(91,92,255,.15);
}

.why-feature h4{

    color:#fff;

    font-size:18px;

    margin-bottom:10px;
}

.why-feature p{

    color:#9fb0c9;

    font-size:14px;

    line-height:1.7;
}
.hero-benefits{display:flex;gap:28px;margin-top:27px}
.mini-benefit{display:flex;align-items:center;gap:9px}
.mini-benefit strong{display:block;font-size:12px}
.mini-benefit small{display:block;color:#8792aa;font-size:13px;margin-top:2px}
.mini-icon{
  width:27px;height:27px;border:1px solid #313d5f;border-radius:50%;
  display:grid;place-items:center;background:#09132a;
}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini-icon svg{color:#a56cff;font-size:14px}

/* =================================
   PROCESS TIMELINE
================================= */

.process-section{
    padding:100px 0;
    position:relative;
}

.process-timeline{

    position:relative;

    display:grid;

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

    gap:25px;

    margin-top:70px;
}

/* Timeline line */

.process-timeline::before{

    content:"";

    position:absolute;

    left:10%;
    right:10%;

    top:42px;

    height:3px;

    background:
    linear-gradient(
    90deg,
    #5b5cff,
    #8b5cf6,
    #00d4ff
    );

    border-radius:50px;
}

/* Step */

.process-step{

    position:relative;

    text-align:center;

    z-index:2;
}

.process-circle{

    width:85px;
    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #5b5cff,
    #8b5cf6
    );

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;

    color:#fff;

    box-shadow:
    0 0 30px rgba(91,92,255,.35);

    position:relative;
}

.process-circle::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:1px solid rgba(91,92,255,.20);
}

.process-step h4{

    color:#fff;

    font-size:22px;

    margin-bottom:12px;
}

.process-step p{

    color:#9fb0c9;

    line-height:1.7;

    max-width:180px;

    margin:auto;
}
.process-step:hover .process-circle{

    transform:translateY(-8px);

    box-shadow:
    0 0 40px rgba(91,92,255,.55);

    transition:.35s;
}

.process-step:hover h4{
    color:#8b5cf6;
}
@media(max-width:991px){

.process-timeline{

    grid-template-columns:1fr;

    gap:50px;
}

.process-timeline::before{

    left:50%;
    top:0;
    bottom:0;

    width:3px;
    height:auto;

    transform:translateX(-50%);
}

.process-step p{
    max-width:100%;
}

}
/* =================================
   CTA SECTION
================================= */

/* ===================================
   CTA SECTION
=================================== */

.automation-cta{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;

    padding:38px 40px;

    border-radius:18px;

    background:
    linear-gradient(
        90deg,
        rgba(26,59,150,.95) 0%,
        rgba(31,42,110,.95) 35%,
        rgba(69,33,140,.95) 100%
    );

    border:1px solid rgba(167,92,255,.45);

    overflow:hidden;
}

/* decorative curved line */

.automation-cta::before{

    content:"";

    position:absolute;

    width:1200px;
    height:400px;

    right:-300px;
    bottom:-250px;

    border-radius:50%;

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

    opacity:.5;
}

.automation-cta::after{

    content:"";

    position:absolute;

    width:900px;
    height:280px;

    right:-200px;
    bottom:-180px;

    border-radius:50%;

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

    opacity:.4;
}

.cta-icon{

    width:90px;
    height:90px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    radial-gradient(
        circle,
        rgba(172,123,255,.35),
        rgba(172,123,255,.08)
    );

    color:#d7b7ff;

    font-size:48px;

    box-shadow:
    0 0 40px rgba(167,92,255,.25);
}

.cta-content{
    flex:1;
    position:relative;
    z-index:2;
}

.cta-content h2{

    color:#ffffff;

    font-size:42px;

    line-height:1.2;

    margin-bottom:12px;

    font-weight:700;
}

.cta-content p{

    color:#c5d1ea;

    font-size:18px;

    line-height:1.8;

    max-width:520px;
}

.cta-actions{

    display:flex;
    gap:18px;

    position:relative;
    z-index:2;
}

.cta-btn{

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;

    font-weight:600;

    padding:20px 34px;

    border-radius:14px;

    transition:.3s ease;
}

.cta-btn.primary{

    background:
    linear-gradient(
        135deg,
        #6f5cff,
        #a855f7
    );

    color:#fff;

    box-shadow:
    0 0 25px rgba(111,92,255,.35);
}

.cta-btn.primary:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 35px rgba(111,92,255,.5);
}

.cta-btn.secondary{

    background:
    rgba(8,12,35,.35);

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

    color:#fff;
}

.cta-btn.secondary:hover{

    background:
    rgba(255,255,255,.05);
}
@media (max-width:991px){

    .automation-cta{

        flex-direction:column;
        text-align:center;

        padding:35px 25px;
    }

    .cta-content h2{
        font-size:34px;
    }

    .cta-content p{
        max-width:100%;
    }

    .cta-actions{

        width:100%;

        flex-direction:column;
    }

    .cta-btn{

        width:100%;

        justify-content:center;
    }

}

@media (max-width:576px){

    .cta-content h2{
        font-size:28px;
    }

    .cta-icon{
        width:75px;
        height:75px;
        font-size:38px;
    }

}

/* ==========================================
   CTA SECTION
========================================== */

.automation-cta{

    position:relative;

    display:grid;
    grid-template-columns:80px 1fr auto;

    align-items:center;
    gap:25px;

    padding:28px 35px;

    min-height:120px;

    border-radius:12px;

    background:
    linear-gradient(
        90deg,
        #173b96 0%,
        #1b2468 35%,
        #52258b 100%
    );

    border:1px solid rgba(168,92,255,.35);

    overflow:hidden;
}

/* Decorative Curves */

.automation-cta::before{

    content:"";

    position:absolute;

    width:1400px;
    height:220px;

    right:-250px;
    bottom:-160px;

    border-radius:50%;

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

    pointer-events:none;
}

.automation-cta::after{

    content:"";

    position:absolute;

    width:1100px;
    height:180px;

    right:-200px;
    bottom:-130px;

    border-radius:50%;

    border:1px dashed rgba(255,255,255,.06);

    pointer-events:none;
}

/* Icon */

.cta-icon{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;

    color:#d7b7ff;

    position:relative;
    z-index:2;
}

.cta-icon i{
    display:block;
}

/* Content */

.cta-content{
    position:relative;
    z-index:2;
}

.cta-content h2{

    margin:0 0 8px;

    color:#fff;

    font-size:24px;
    font-weight:700;

    line-height:1.3;
}

.cta-content p{

    margin:0;

    color:#c6d2ea;

    font-size:15px;

    line-height:1.6;

    max-width:420px;
}

/* Buttons */

.cta-actions{

    display:flex;
    align-items:center;
    gap:15px;

    position:relative;
    z-index:2;
}

.cta-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    padding:16px 28px;

    border-radius:12px;

    transition:.3s ease;
}

/* Primary Button */

.cta-btn.primary{

    min-width:260px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #6d5cff,
        #9d5cff
    );

    box-shadow:
    0 8px 20px rgba(109,92,255,.25);
}

.cta-btn.primary:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(109,92,255,.4);
}

/* Secondary Button */

.cta-btn.secondary{

    min-width:160px;

    color:#fff;

    background:rgba(10,10,30,.25);

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

.cta-btn.secondary:hover{

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

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){

    .automation-cta{

        grid-template-columns:1fr;

        text-align:center;

        gap:20px;

        padding:30px 25px;
    }

    .cta-icon{
        margin:auto;
    }

    .cta-content p{
        max-width:100%;
    }

    .cta-actions{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;
    }

}

@media(max-width:576px){

    .automation-cta{
        padding:25px 20px;
    }

    .cta-content h2{
        font-size:22px;
    }

    .cta-content p{
        font-size:14px;
    }

    .cta-btn{

        width:100%;

        min-width:auto;
    }

    .cta-actions{
        flex-direction:column;
    }

}