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

.ai-hero{

    position:relative;

    padding:180px 0 140px;

    overflow:hidden;

}

.ai-hero::before{

    content:"";

    position:absolute;

    width:750px;
    height:750px;

    left:-250px;
    top:-250px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(91,95,255,.18),
    transparent 70%);

    filter:blur(120px);

}

.ai-hero::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

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

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,212,255,.15),
    transparent 70%);

    filter:blur(120px);

}
.ai-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    position:relative;

    z-index:2;

}
.ai-content h1{

    font-size:72px;

    line-height:1.05;

    margin:25px 0;

}

.ai-content p{

    font-size:20px;

    color:var(--gray);

    line-height:1.9;

    max-width:650px;

    margin-bottom:45px;

}

.ai-content .service-badge i{

    color:#8B5CF6;

}
.ai-network-wrapper{

    position:relative;

    width:100%;

    height:760px;

    display:flex;

    justify-content:center;

    align-items:center;

}
.ai-core{

    position:relative;

    width:220px;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

}
.core-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

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

}

.ring-two{

    inset:-40px;

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

}
.ai-core-center{

    width:150px;

    height:150px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-align:center;

    background:

    linear-gradient(
    135deg,
    rgba(91,95,255,.18),
    rgba(0,212,255,.10));

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

    backdrop-filter:blur(30px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.35);

}

.ai-core-center i{

    font-size:42px;

    color:#8B5CF6;

}

.ai-core-center span{

    font-weight:700;

}
.ai-node{

    position:absolute;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:100px;

    background:rgba(18,25,40,.88);

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

    backdrop-filter:blur(18px);

    white-space:nowrap;

    transition:var(--transition);

    box-shadow:

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

}

.ai-node img{

    width:22px;

    height:22px;

}

.ai-node:hover{

    transform:translateY(-6px);

    border-color:#8B5CF6;

}
.node-openai{

    top:20px;

    left:50%;

    transform:translateX(-50%);

}

.node-claude{

    top:120px;

    right:20px;

}

.node-gemini{

    top:50%;

    right:-30px;

}

.node-hubspot{

    bottom:120px;

    right:40px;

}

.node-shopify{

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

}

.node-whatsapp{

    bottom:120px;

    left:30px;

}

.node-gmail{

    top:50%;

    left:-20px;

}

.node-n8n{

    top:120px;

    left:20px;

}

.node-make{

    top:230px;

    left:50%;

    transform:translateX(-50%);

}

.node-zapier{

    bottom:240px;

    left:50%;

    transform:translateX(-50%);

}
.ai-connections{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

}

.ai-connections line{

    stroke:rgba(139,92,246,.25);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:8 10;

}
/*=====================================
 AI ARCHITECTURE
======================================*/

.architecture-board{

    position:relative;

    margin-top:80px;

    padding:80px;

    border-radius:40px;

    overflow:hidden;

    background:
    linear-gradient(180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02));

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

    backdrop-filter:blur(25px);

}

.architecture-row{

    display:flex;

    justify-content:center;

    gap:30px;

    margin:70px 0;

}

.architecture-center{

    display:flex;

    justify-content:center;

    margin:60px 0;

}

.ai-engine{

    width:300px;

    margin:auto;

}

.automation-hub{

    width:240px;

    height:240px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:radial-gradient(circle,
    rgba(124,58,237,.35),
    rgba(124,58,237,.08));

    border:1px solid rgba(124,58,237,.30);

    box-shadow:0 0 80px rgba(124,58,237,.20);

}
.architecture-card{

    width:270px;

    text-align:center;

    padding:32px;

    border-radius:24px;

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

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

    transition:.35s;
    

}

.architecture-card:hover{

    transform:translateY(-10px);

    border-color:rgba(124,58,237,.4);

}

.architecture-card i{

    font-size:38px;

    margin-bottom:20px;

    color:#8B5CF6;

}

.architecture-card.blue i{

    color:#00D4FF;

}

.architecture-card.orange i{

    color:#ff7a59;

}

.architecture-card.green i{

    color:#25D366;

}

.architecture-card.red i{

    color:#ff4d6d;

}
.architecture-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

}

.flow-path{

    fill:none;

    stroke:rgba(124,58,237,.18);

    stroke-width:2;

    stroke-linecap:round;

}
.flow-path{

    stroke-dasharray:8 10;

    animation:dataFlow 5s linear infinite;

}

@keyframes dataFlow{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-180;

    }

}
.ai-engine{

    position:relative;

}

.ai-engine::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:30px;

    background:

    radial-gradient(circle,
    rgba(124,58,237,.35),
    transparent 70%);

    filter:blur(35px);

    z-index:-1;

}
.architecture-card{

    animation:floatCard 6s ease-in-out infinite;

}

.architecture-card:nth-child(even){

    animation-delay:1.2s;

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}
.usecase-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.usecase-card{

    position:relative;

    padding:40px;

}

.usecase-number{

    font-size:48px;

    font-weight:800;

    color:rgba(139,92,246,.18);

    margin-bottom:20px;

}

.usecase-card h3{

    margin-bottom:18px;

}
.process-timeline{

    max-width:900px;

    margin:70px auto 0;

    position:relative;

}

.process-timeline::before{

    content:"";

    position:absolute;

    left:31px;

    top:0;

    height:100%;

    width:2px;

    background:linear-gradient(
        to bottom,
        var(--primary),
        rgba(255,255,255,.08)
    );

    transform:scaleY(0);

    transform-origin:top;

}

.process-item{

    display:flex;

    gap:30px;

    position:relative;

    padding-bottom:60px;

}

.process-circle{

    width:64px;

    height:64px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    background:var(--primary);

    color:#fff;

    position:relative;

    z-index:2;

}

.process-content{

    padding-top:10px;

}

.process-content h3{

    margin-bottom:12px;

}
.timeline-line{

    position:absolute;

    left:31px;

    top:0;

    width:2px;

    height:100%;

    background:linear-gradient(
        to bottom,
        var(--primary),
        rgba(255,255,255,.08)
    );

    transform:scaleY(0);

    transform-origin:top;

}
.process-item{

    transition:.35s;

}

.process-item:hover{

    transform:translateX(12px);

}

.process-item:hover .process-circle{

    box-shadow:0 0 25px rgba(124,58,237,.4);

}
/*=====================================
AI CTA
======================================*/

.ai-cta-card{

    position:relative;

    overflow:hidden;

    padding:90px 70px;

    border-radius:32px;

    text-align:center;

    background:
    linear-gradient(135deg,
    rgba(11,53,89,.95),
    rgba(18,26,43,.95));

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

}

.ai-cta-glow{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top,
    rgba(0,212,255,.18),
    transparent 55%),
    radial-gradient(circle at bottom,
    rgba(124,58,237,.18),
    transparent 55%);

    pointer-events:none;

}

.ai-cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.ai-cta-content h2{

    margin:24px 0;

}

.ai-cta-content p{

    font-size:1.05rem;

    color:var(--gray);

    max-width:650px;

    margin:0 auto 40px;

}

.ai-cta-features{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.cta-feature{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:50px;

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

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

}

.cta-feature i{

    color:var(--secondary);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}
.ai-cta-card{

    animation:ctaFloat 8s ease-in-out infinite;

}

@keyframes ctaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}