/*==================================================
AI Ecosystem Hero
==================================================*/

.ai-ecosystem-hero{

    position:relative;

    background:#050708;

    overflow:hidden;

}

.ai-ecosystem-banner{

    position:relative;

    height:520px;

    overflow:hidden;

}

.ai-ecosystem-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.ai-ecosystem-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

}

.ai-ecosystem-content{

    max-width:760px;

}

.ai-ecosystem-content h1{

    margin:0;

    line-height:1.08;

}

.ai-ecosystem-content span{

    display:block;

    color:#64d741;

    font-size:var(--fs-5xl);

    font-weight:normal;

    font-family:'Poppins',sans-serif;

    margin-bottom:10px;

}

.ai-ecosystem-content strong{

    display:block;

    color:#ffffff;

    font-size:var(--fs-5xl);

    font-weight:normal;

    font-family:'Poppins',sans-serif;

}

/*==================================================
Intro
==================================================*/

.ai-ecosystem-intro{

    position:relative;

    background:#000;

    padding:90px 0;

    overflow:hidden;

    box-shadow:

        inset 0 180px 180px -120px rgba(0,180,150,.18),

        inset 0 -180px 180px -120px rgba(0,180,150,.18);

}

/* Left Mesh */

.ai-ecosystem-mesh-left{

    position:absolute;

    left:-140px;

    top:-50px;

    width:550px;

    opacity:.55;

    pointer-events:none;

}

/* Text */

.ai-ecosystem-intro-content{

    position:relative;

    z-index:5;

}

.ai-ecosystem-intro-content p{

    color:#ffffff;

    font-size:var(--fs-lg);

    line-height:1.55;

    font-weight:normal;

    font-family:'Poppins',sans-serif;

    margin-bottom:35px;

}

.ai-ecosystem-intro-content p:last-child{

    margin-bottom:0;

}

/*==================================================
AI ASSISTANT
==================================================*/

.ai-ecosystem-assistant{

    position:relative;

    padding:120px 0;

    background:#07131a;

    overflow:hidden;

    box-shadow:

        inset 0 180px 180px -120px rgba(0,185,165,.22),

        inset 0 -180px 180px -120px rgba(0,185,165,.22);

}

.ai-ecosystem-assistant .container{

    position:relative;

    z-index:5;

}

/*=====================================
Meshes
=====================================*/

.ai-ecosystem-assistant-mesh-left{

    position:absolute;

    left:-180px;

    top:-120px;

    width:550px;

    opacity:.45;

    pointer-events:none;

}

.ai-ecosystem-assistant-mesh-right{

    position:absolute;

    right:-120px;

    bottom:-160px;

    width:500px;

    opacity:.45;

    pointer-events:none;

}

/*=====================================
Box
=====================================*/

.ai-ecosystem-assistant-box{

    display:grid;

    grid-template-columns:50% 50%;

    background:#050708;

    border-radius:30px;

    overflow:hidden;

}

/*=====================================
Video
=====================================*/

.ai-ecosystem-assistant-video{

    background:#050708;

    min-height:620px;

}

.ai-ecosystem-assistant-iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

    background:#000;

}

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

.ai-ecosystem-assistant-content{

    position:relative;

    padding:80px 70px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            rgba(8,82,78,.96) 0%,

            rgba(5,115,95,.96) 100%

        );

}

.ai-ecosystem-assistant-content::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(0,255,180,.14),

            transparent 55%

        );

}

/*=====================================
Icon
=====================================*/

.ai-ecosystem-assistant-icon{

    width:150px;

    margin:0 auto 50px;

    position:relative;

    z-index:5;

}

.ai-ecosystem-assistant-icon img{

    width:100%;

}

/*=====================================
Heading
=====================================*/

.ai-ecosystem-assistant-content h2{

    margin:0 0 35px;

    color:#ffffff;

    font-size:var(--fs-5xl);

    font-family:'Poppins',sans-serif;

    font-weight:normal;

    line-height:1;

    position:relative;

    z-index:5;

}

.ai-ecosystem-assistant-content span{

    display:block;

    color:#80ce0a;

}

/*=====================================
Text
=====================================*/

.ai-ecosystem-assistant-content p{

    margin:0 0 20px;

    color:#ffffff;

    font-size:var(--fs-lg);

    line-height:1.45;

    font-family:'Poppins',sans-serif;

    font-weight:normal;

    position:relative;

    z-index:5;

}

/*=====================================
Responsive
=====================================*/

@media(max-width:1200px){

    .ai-ecosystem-assistant-content h2{

        font-size:58px;

    }

    .ai-ecosystem-assistant-content p{

        font-size:22px;

    }

}

@media(max-width:991px){

    .ai-ecosystem-assistant-box{

        grid-template-columns:1fr;

    }

    .ai-ecosystem-assistant-video{

        min-height:450px;

    }

    .ai-ecosystem-assistant-content{

        padding:60px 40px;

    }

}

@media(max-width:767px){

    .ai-ecosystem-assistant{

        padding:70px 0;

    }

    .ai-ecosystem-assistant-content h2{

        font-size:42px;

    }

    .ai-ecosystem-assistant-content p{

        font-size:var(--fs-md);

    }

}



/*==================================================
PENX360 SECTION
==================================================*/

.ai-ecosystem-penx{

    position:relative;

    padding:120px 0;

    background:#170304;

    overflow:hidden;

    box-shadow:

        inset 0 180px 180px -120px rgba(170,35,40,.20),

        inset 0 -180px 180px -120px rgba(170,35,40,.20);

}

.ai-ecosystem-penx .container{

    position:relative;

    z-index:5;

}

/*=====================================
Meshes
=====================================*/

.ai-ecosystem-penx-mesh-left{

    position:absolute;

    left:-150px;

    bottom:-180px;

    width:520px;

    opacity:.35;

    pointer-events:none;

}

.ai-ecosystem-penx-mesh-right{

    position:absolute;

    right:-80px;

    top:-150px;

    width:500px;

    opacity:.35;

    pointer-events:none;

}

/*=====================================
Box
=====================================*/

.ai-ecosystem-penx-box{

    display:grid;

    grid-template-columns:50% 50%;

    border-radius:34px;

    overflow:hidden;

    background:#090909;

}

/*=====================================
Left
=====================================*/

.ai-ecosystem-penx-content{

    padding:80px 60px;
    
    background:

        linear-gradient(

            90deg,

            #b72f2f 0%,

            #650017 100%

        );

}

/*=====================================
Heading
=====================================*/

.ai-ecosystem-penx-heading{

    display:flex;

    align-items:center;

    gap:35px;

    margin-bottom:55px;

}

.ai-ecosystem-penx-heading img{

    width:150px;

}

.ai-ecosystem-penx-heading h2{

    margin:0;

    color:#ffffff;

    font-size:var(--fs-5xl);

    font-family:'Poppins';

    font-weight:normal;

}

.ai-ecosystem-penx-heading span{

    color:#80ce0a;

}

/*=====================================
Text
=====================================*/

.ai-ecosystem-penx-text p{

    color:#ffffff;

    font-size:var(--fs-lg);

    line-height:1.4;

    margin-bottom:28px;

    font-family:'Poppins';

    font-weight:normal;

}

.ai-ecosystem-penx-text strong{

    font-size:var(--fs-xl);

    display:block;

    margin-bottom:5px;

    font-weight:normal;

}

/*=====================================
Video
=====================================*/

.ai-ecosystem-penx-video{

    background:#050708;

    min-height:760px;

}

.ai-ecosystem-penx-iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}

/*=====================================
Responsive
=====================================*/

@media(max-width:1200px){

    .ai-ecosystem-penx-heading h2{

        font-size:var(--fs-5xl);

    }

    .ai-ecosystem-penx-text p{

        font-size:21px;

    }

}

@media(max-width:991px){

    .ai-ecosystem-penx-box{

        grid-template-columns:1fr;

    }

    .ai-ecosystem-penx-video{

        min-height:500px;

    }

}

@media(max-width:767px){

    .ai-ecosystem-penx{

        padding:70px 0;

    }

    .ai-ecosystem-penx-content{

        padding:45px 30px;

    }

    .ai-ecosystem-penx-heading{

        flex-direction:column;

        text-align:center;

        gap:20px;

    }

    .ai-ecosystem-penx-heading h2{

        font-size:42px;

    }

    .ai-ecosystem-penx-text p{

        font-size:var(--fs-md);

    }

}


/*==================================================
AI ECOSYSTEM CARDS
==================================================*/

.ai-ecosystem-cards{

    position:relative;

    padding:120px 0;

    overflow:hidden;
    background: #000000;
    /* background:

        linear-gradient(
            90deg,
            #003f42 0%,
            #003f42 50%,
            #2b0b3d 50%,
            #2b0b3d 100%
        ); */

    box-shadow:
        inset 0 180px 180px -120px rgba(0,185,165,.18),
        inset 0 -180px 180px -120px rgba(0,185,165,.18);

}

.ai-card-mesh-left{

    position:absolute;

    left:-120px;

    top:-100px;

    width:500px;

    opacity:.35;

}

.ai-card-mesh-right{

    position:absolute;

    right:-120px;

    bottom:-120px;

    width:450px;

    opacity:.35;

}

/*=====================================
Cards
=====================================*/

.ai-ecosystem-card{

    position:relative;

    border-radius:28px;

    padding:70px 60px;

    min-height:600px;

    overflow:hidden;

    backdrop-filter:blur(20px);

}

.ai-ecosystem-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        radial-gradient(
            circle at top left,
            rgba(255,255,255,.06),
            transparent 45%
        );

    pointer-events:none;
}

.ai-engine-card{

    background:

        linear-gradient(
            90deg,

            rgba(0,185,200,.72) 0%,

            rgba(0,120,120,.65) 45%,

            rgba(0,60,60,.55) 100%
        );

    backdrop-filter:blur(25px);
}

.ai-scanner-card{

    background:

        linear-gradient(
            90deg,

            rgba(135,75,185,.70) 0%,

            rgba(55,45,85,.65) 45%,

            rgba(20,18,35,.60) 100%
        );

    backdrop-filter:blur(25px);
}

/*=====================================
Heading
=====================================*/

.ai-card-heading{

    display:flex;

    align-items:center;

    gap:35px;

    /* margin-bottom:50px; */

}

.ai-card-heading img{

    width:150px;

}

.ai-card-heading h2{

    margin:0;

    font-size:var(--fs-5xl);

    line-height:1;

    color:#ffffff;

    font-family:'Poppins';

    font-weight:normal;

}

.ai-card-heading span{

    /* display:block; */

    color:#80ce0a;

}

/*=====================================
Text
=====================================*/

.ai-ecosystem-card p{

    color:#ffffff;

    font-size:var(--fs-md);

    line-height:1.65;

    margin-bottom:25px;

    font-family:'Poppins';

    font-weight:normal;

}

/*=====================================
Responsive
=====================================*/

@media(max-width:991px){

    .ai-ecosystem-card{

        min-height:auto;

        padding:50px 40px;

    }

    .ai-card-heading h2{

        font-size:42px;

    }

}

@media(max-width:767px){

    .ai-card-heading{

        flex-direction:column;

        text-align:center;

    }

    .ai-card-heading img{

        width:110px;

    }

    .ai-card-heading h2{

        font-size:34px;

    }

    .ai-ecosystem-card p{

        font-size:var(--fs-base);

    }

}



/* tab */

.page{display:flex;flex-direction:column;align-items:center; padding:0px 0px 0px; }
.hero{text-align:center;max-width:720px;display:flex;flex-direction:column;gap:12px}
.eyebrow{font-size:13px;letter-spacing:4px;text-transform:uppercase;color:#8fd83e;font-weight:600}
.hero h1{margin:0;font-size:44px;font-weight:600;color:#fff;text-wrap:pretty}
.hero h1 span,.panel h2 span{color:#8fd83e}
.hero p{margin:0;font-size:16px;color:#9aa3a3;font-weight:300}
.tabs{margin-top:0px;display:flex;gap:20px;padding:6px;border-radius:999px;background:#1b1f17;border:1px solid rgba(255,255,255,.08)}
.tab{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;cursor:pointer;font-family:'Poppins',sans-serif;font-size:15px;font-weight:500;border:1px solid transparent;background:transparent;color:#9aa3a3;opacity:.75;transition:all .2s ease}
.tab:hover{opacity:1}
.tab .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.tab[data-tab="engine"] .dot{background:#986900}
.tab[data-tab="scanner"] .dot{background:#986900}
.tab[data-tab="rules"] .dot{background:#986900}
.tab.active{background:#986900;color:#fff;opacity:1}
.tab.active[data-tab="engine"]{border-color:rgba(45,212,196,.5)}
.tab.active[data-tab="scanner"]{border-color:rgba(168,85,247,.5)}
.tab.active[data-tab="rules"]{border-color:rgba(234,179,8,.5)}
.panels{margin-top:40px;width:100%;max-width:880px}
.panel{display:none;animation:fadeUp .35s ease both;border-radius:24px;padding:56px 8px;flex-direction:column;align-items:center;gap:28px;text-align:center}
.panel.active{display:flex}
.panel h2{margin:0;font-size:38px;font-weight:normal;color:#fff}
.panel p{margin:0;font-size:17px;line-height:1.75;font-weight:300;text-wrap:pretty}
.panel .copy{display:flex;flex-direction:column;gap:20px;max-width:640px}
.panel-engine{background:linear-gradient(135deg,#0b4a4a 0%,#072e30 55%,#05191c 100%);border:1px solid rgba(45,212,196,.25)}
.panel-engine p{color:#cfe8e5;font-size:var(--fs-lg);max-width:620px}
.panel-scanner{background:linear-gradient(135deg,#4a2a72 0%,#2a1a4a 55%,#140c26 100%);border:1px solid rgba(168,85,247,.3)}
.panel-scanner p{color:#e3d8f4}
.panel-rules{background:linear-gradient(135deg,#6b5a10 0%,#453a08 55%,#201b04 100%);border:1px solid rgba(234,179,8,.3)}
.panel-rules p{color:#f2e8c8}
.orb{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:orbPulse 3s ease-in-out infinite}
.panel-engine .orb{--glow:rgba(45,212,196,.45);background:radial-gradient(circle at 35% 30%,#0f6b64,#052a28);border:1px solid rgba(45,212,196,.5)}
.panel-scanner .orb{--glow:rgba(168,85,247,.45);background:radial-gradient(circle at 35% 30%,#6d28d9,#2e1065);border:1px solid rgba(196,140,255,.5)}
.panel-rules .orb{--glow:rgba(234,179,8,.4);background:radial-gradient(circle at 35% 30%,#a16207,#422006);border:1px solid rgba(250,204,21,.55)}
.nodes{display:grid;grid-template-columns:repeat(3,10px);gap:8px}
.nodes span{width:10px;height:10px;border-radius:50%;background:#d9fefa}
.nodes span:nth-child(even){background:#5eead4}
.nodes span:nth-child(5){background:#8fd83e}
.eye-outer{width:48px;height:48px;border-radius:50%;border:3px solid #e9d5ff;display:flex;align-items:center;justify-content:center}
.eye-inner{width:26px;height:26px;border-radius:50%;border:3px solid #e9d5ff;display:flex;align-items:center;justify-content:center}
.eye-pupil{width:10px;height:10px;border-radius:50%;background:#8fd83e}
.gear{width:46px;height:46px;border-radius:50%;border:3px dashed #fef3c7;display:flex;align-items:center;justify-content:center}
.gear-core{width:16px;height:16px;border-radius:50%;background:#facc15}
@keyframes orbPulse{0%,100%{box-shadow:0 0 24px 4px var(--glow)}50%{box-shadow:0 0 40px 10px var(--glow)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:720px){.page{padding:40px 16px 64px}.hero h1{font-size:32px}.tabs{flex-wrap:wrap;justify-content:center;border-radius:24px}.panel{padding:36px 24px}.panel h2{font-size:28px}}