/* Pillars */
.pillars-ai-boxes{ background: var(--black); color: var(--white); padding: 100px 0 140px; position: relative; }
.pillars-ai-boxes:before{ content: ""; position: absolute; top: 250px; left: 50%; margin-left: -700px; width: 1400px; height: 436px; background: url("../../img/homepage/v3/grad.jpg") no-repeat center center; background-size: 100% 100%; }
.pillars-ai-boxes .content{ position: relative; z-index: 10; }

.pillars-ai-boxes .head{ text-align: center; margin-bottom: 60px; }
.pillars-ai-boxes .head .title{ letter-spacing: -1px; position: relative; font-family: var(--hanken); font-size: 42px; font-weight: 600; }
.pillars-ai-boxes .head .title span{ display: block; }
.pillars-ai-boxes .head .title em{ font-style: italic; }
.pillars-ai-boxes .head .title i{ font-size: 20px; position: relative; width: 0; display: inline-block; bottom: 24px; right: 2px; }
.pillars-ai-boxes .head .description{ font-size: 17px; color: var(--white); line-height: 1.6; margin-top: 20px; font-weight: 300; }
.pillars-ai-boxes .head .description span{ display: block; }

.pillars-ai-boxes .ai-agents{ display: flex; justify-content: stretch; gap: 40px; }
.pillars-ai-boxes .ai-agents li{ width: 33.333%; }
.pillars-ai-boxes .ai-agents li .box-border{ background: radial-gradient(177.99% 105.81% at 50.18% 100%, rgba(255, 255, 255, 0) 0%, rgba(181, 192, 255, 0.2) 100%); height: 100%; padding: 1px; border-radius: 20px; }
.pillars-ai-boxes .ai-agents li .box-content{ display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding: 40px; background: radial-gradient(81.48% 81.48% at 51.8% 116.72%, #8673F6 0%, #3C2E91 41.33%, #000000 100%); border-radius: 20px; height: 100%; }
.pillars-ai-boxes .ai-agents li .box-content figure{ width: 100%; height: 130px; margin-bottom: 40px; }
.pillars-ai-boxes .ai-agents li .box-content figure img{ height: 100%; width: auto; }
.pillars-ai-boxes .ai-agents li .box-content h3{ font-size: 26px; margin-bottom: 15px; letter-spacing: -1px; font-weight: 500; }
.pillars-ai-boxes .ai-agents li .box-content h3 span{ display: block; }
.pillars-ai-boxes .ai-agents li .box-content p{ font-size: 16px; color: #F1F3FF; font-weight: 300; line-height: 1.6; }
.pillars-ai-boxes .ai-agents li .box-content .button{ margin-top: 30px; border-radius: 50px; padding: 10px 30px; background: var(--white); color: var(--black); border-color: var(--white); }
.pillars-ai-boxes .ai-agents li .box-content .button:hover{ background: transparent; color: var(--white); border-color: var(--white); }

    .pillars-ai-boxes .ai-agents li.accelerate figure img{}
    .pillars-ai-boxes .ai-agents li.agentic figure img{}
    .pillars-ai-boxes .ai-agents li.data-foundation figure img{}


@media screen and (max-width: 1280px){

    /* Pillars */
    .pillars-ai-boxes .ai-agents li .box-content figure{ height: 150px; }
    .pillars-ai-boxes .ai-agents li .box-content h3{ font-size: 24px; }
    .pillars-ai-boxes .ai-agents li .box-content p{ font-size: 14px; }

}

@media screen and (max-width: 1024px){

    /* Pillars */
    .pillars-ai-boxes{ padding: 100px 0 80px; }
    .pillars-ai-boxes .head .title{ font-size: 32px; }
    .pillars-ai-boxes .head .description{ font-size: 14px; }
    .pillars-ai-boxes .head .description span{ display: inline;} 
    .pillars-ai-boxes .ai-agents{ flex-direction: column; max-width: 450px; margin: 0 auto; }
    .pillars-ai-boxes .ai-agents li{ width: 100%; }

}