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

.aipage-hero{

    padding:220px 0 200px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.30),
            rgba(255,255,255,.30)
        ),
        url("../assets/ai-hero.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    text-align:center;

}

.aipage-hero-content{

    max-width:950px;

    margin:auto;

}

.aipage-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:999px;

    background:rgba(126,211,33,.12);

    color:var(--primary-dark);

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}

.aipage-hero h1{

    font-size:68px;

    line-height:1.05;

    margin-bottom:30px;

}

.aipage-hero p{

    max-width:850px;

    margin:0 auto;

    font-size:22px;

    color:#0f172a;

}

.aipage-hero-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:40px;

    flex-wrap:wrap;

}

/* =========================================================
INTRO
========================================================= */

.aipage-intro{

    padding:80px 0;

    background:#fff;

}

.aipage-intro-content{

    max-width:950px;

    margin:auto;

}

.aipage-intro-content p{

    font-size:20px;

    line-height:1.9;

    color:var(--text-light);

    margin-bottom:25px;

}

/* =========================================================
CHALLENGES
========================================================= */

.aipage-challenges{

    padding:90px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef4f8
        );

}

.aipage-challenges-grid{

    display:grid;

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

    gap:25px;

}

.aipage-challenge-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 15px 40px rgba(15,23,42,.05);

    transition:.3s;

}

.aipage-challenge-card:hover{

    transform:translateY(-6px);

}

.aipage-icon{

    width:70px;
    height:70px;

    margin:0 auto 20px;

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

    border-radius:18px;

    background:rgba(126,211,33,.10);

}

.aipage-icon i{

    font-size:30px;

    color:#7ED321;

}

.aipage-challenge-card h3{

    font-size:22px;

    margin-bottom:15px;

}

.aipage-challenge-card p{

    color:var(--text-light);

}

/* =========================================================
SOLUTIONS
========================================================= */

.aipage-solutions{

    padding:90px 0;

    background:#fff;

}

.aipage-solutions-grid{

    display:grid;

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

    gap:25px;

}

.aipage-solution-card{

    background:
        linear-gradient(
            180deg,
            #081726,
            #102235
        );

    color:#fff;

    border-radius:24px;

    padding:35px;

    border:1px solid rgba(126,211,33,.12);

}

.aipage-solution-icon{

    width:65px;
    height:65px;

    border-radius:18px;

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

    background:rgba(126,211,33,.12);

    margin-bottom:20px;

}

.aipage-solution-icon i{

    font-size:28px;

    color:#7ED321;

}

.aipage-solution-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.aipage-solution-card p{

    color:rgba(255,255,255,.75);

    margin-bottom:20px;

}

.aipage-solution-card ul{

    margin:0;

    padding:0;

    list-style:none;

}

.aipage-solution-card li{

    position:relative;

    padding-left:18px;

    margin-bottom:10px;

}

.aipage-solution-card li::before{

    content:"";

    position:absolute;

    left:0;
    top:10px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#7ED321;

}

/* =========================================================
LOCAL AI
========================================================= */

.aipage-localai{

    padding:70px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(126,211,33,.08),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #07111E,
            #0B1728
        );

    color:#fff;

    overflow:hidden;

}

.aipage-localai-grid{

    max-width:1200px;

    margin:0 auto;

}

.aipage-localai-content{

    max-width:1000px;

    margin:0 auto;

}

.aipage-localai-content > span{

    display:inline-block;

    color:#7ED321;

    font-weight:700;

    margin-bottom:15px;

}

.aipage-localai-content h2{

    font-size:56px;

    line-height:1.1;

    margin-bottom:25px;

    color:#fff;

}

.aipage-localai-content p{

    color:rgba(255,255,255,.75);

    line-height:1.9;

    font-size:18px;

}

/* =========================================================
LOCAL AI STATS
========================================================= */

.aipage-localai-stats{

    max-width:900px;

    margin:50px auto;

    display:grid;

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

    gap:20px;

}

.aipage-stat-card{

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

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

    border-radius:18px;

    padding:20px;

    text-align:center;

    backdrop-filter:blur(10px);

    transition:.3s;

}

.aipage-stat-card:hover{

    transform:translateY(-5px);

    border-color:rgba(126,211,33,.25);

}

.aipage-stat-card span{

    display:block;

    font-size:32px;

    font-weight:800;

    color:#7ED321;

    margin-bottom:8px;

}

.aipage-stat-card p{

    margin:0;

    font-size:14px;

    color:rgba(255,255,255,.75);

}

/* =========================================================
LOCAL AI DIAGRAM
========================================================= */

.aipage-ai-diagram{
	
    position:relative;

    width:460px;

    height:460px;

    margin:80px auto 0;

}

.aipage-ai-diagram::before{
	
    content:"";

    position:absolute;

    inset:80px;

    border:1px solid rgba(126,211,33,.15);

    border-radius:50%;

}

.aipage-ai-diagram::after{

    content:"";

    position:absolute;

    inset:140px;

    border:1px solid rgba(126,211,33,.10);

    border-radius:50%;

}

.ai-core{

    position:absolute;

    top:50%;
    left:50%;

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

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(126,211,33,.25),
            rgba(126,211,33,.04)
        );

    border:1px solid rgba(126,211,33,.25);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 60px rgba(126,211,33,.12);

}

.ai-core i{

    font-size:54px;

    color:#7ED321;

    margin-bottom:12px;

}

.ai-core span{

    font-size:18px;

    font-weight:700;

    color:#fff;

}

.ai-node{

    position:absolute;

    width:130px;

    padding:18px;

    text-align:center;

    border-radius:20px;

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

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

    backdrop-filter:blur(12px);

    transition:.3s;

}

.ai-node:hover{

    transform:scale(1.05);

    border-color:rgba(126,211,33,.25);

}

.ai-node i{

    display:block;

    margin-bottom:10px;

    font-size:28px;

    color:#7ED321;

}

.ai-node span{

    font-size:14px;

    font-weight:600;

    color:#fff;

}

/* TOP */

.ai-docs{

    top:30px;

    left:50%;

    transform:translateX(-50%);

}

/* LEFT */

.ai-kb{

    left:0;

    top:50%;

    transform:translateY(-50%);

}

/* RIGHT */

.ai-chat{

    right:0;

    top:50%;

    transform:translateY(-50%);

}

/* BOTTOM */

.ai-security{

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

}

/* =========================================================
LOCAL AI HIGHLIGHT
========================================================= */

.aipage-localai-highlight{

    font-size:22px;

    line-height:1.8;

    color:#ffffff;

    font-weight:500;

    margin:35px 0;

    padding:20px 0 20px 25px;

    border-left:4px solid #7ED321;

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

    border-radius:0 16px 16px 0;

}

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

@media(max-width:1200px){

    .aipage-localai-stats{

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

    }

}

@media(max-width:992px){

    .aipage-ai-diagram{

        width:380px;

        height:380px;

        margin-top:50px;

    }

}

@media(max-width:768px){

    .aipage-localai-stats{

        grid-template-columns:1fr 1fr;

    }

    .aipage-ai-diagram{

        width:320px;

        height:320px;

    }

    .ai-core{

        width:130px;
        height:130px;

    }

    .ai-core i{

        font-size:36px;

    }

    .ai-node{

        width:100px;

        padding:12px;

    }

    .ai-node span{

        font-size:12px;

    }

}

/* =========================================================
TECH
========================================================= */

.aipage-tech{

    padding:100px 0;

    background:#fff;

}

.aipage-tech-grid{

    display:grid;

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

    gap:20px;

}

.aipage-tech-item{

    background:#f8fafc;

    border-radius:18px;

    padding:25px;

    text-align:center;

    font-weight:700;

    border:1px solid rgba(0,0,0,.05);

}

/* =========================================================
FUTURE
========================================================= */

.aipage-future{

    padding:60px 0;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(126,211,33,.08),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #f8fafc,
            #eef4f8
        );

}

.aipage-future-content{

    max-width:900px;

    margin:auto;

}

.aipage-future span{

    color:#7ED321;

    font-weight:700;

}

.aipage-future h2{

    font-size:54px;

    margin:20px 0;

}

.aipage-future p{

    font-size:20px;

    line-height:1.9;

    color:var(--text-light);

}

.aipage-future::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(
            rgba(126,211,33,.18) 2px,
            transparent 2px
        );

    background-size:50px 50px;

    opacity:.4;

    pointer-events:none;

}
/* =========================================================
FUTURE PILLARS
========================================================= */

.aipage-future-pillars{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.pillar{

    background:#ffffff;

    border-radius:24px;

    padding:35px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);

    transition:.3s;

}

.pillar:hover{

    transform:translateY(-8px);

}

.pillar-icon{

    width:70px;
    height:70px;

    margin:0 auto 20px;

    border-radius:18px;

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

    background:rgba(126,211,33,.10);

}

.pillar-icon i{

    font-size:30px;

    color:#7ED321;

}

.pillar h3{

    font-size:24px;

    margin-bottom:15px;

    color:#0f172a;

}

.pillar p{

    color:#64748b;

    line-height:1.8;

}

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

.aipage-cta{

    padding:70px 0;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #08111f,
            #12223a
        );

    color:#fff;

}

.aipage-cta-content{

    max-width:850px;

    margin:auto;

}

.aipage-cta h2{

    font-size:52px;

    margin-bottom:25px;

}

.aipage-cta p{

    font-size:20px;

    color:rgba(255,255,255,.75);

    margin-bottom:40px;

}

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

@media(max-width:992px){

    .aipage-challenges-grid,
    .aipage-solutions-grid{

        grid-template-columns:1fr;

    }

    .aipage-future-pillars{

        grid-template-columns:1fr;

    }

    .aipage-localai-grid{

        display:block;

        max-width:1100px;

        margin:auto;

    }

    .aipage-tech-grid{

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

    }

    .aipage-hero h1{

        font-size:48px;

    }

}

@media(max-width:768px){

    .aipage-hero{

        padding:180px 0 90px;

    }

    .aipage-hero h1{

        font-size:36px;

    }

    .aipage-hero p{

        font-size:18px;

    }

    .aipage-tech-grid{

        grid-template-columns:1fr;

    }

    .aipage-localai-content h2{

        font-size:36px;

    }

    .aipage-future h2{

        font-size:38px;

    }

    .aipage-cta h2{

        font-size:36px;

    }

}