/* ==========================================================
   PILLARS — three-column Safety / Efficiency / Reliability
   section (Radar-style pillar layout).
   Markup lives in sections/pillars.html
   ========================================================== */

#pillars.section{
    background:var(--crimson);
    padding:70px 0;   /* adjust to match/undercut your base .section padding */
}

#pillars .eyebrow{
    color:#fff;
}

#pillars .section-head h2{
    color:#fff;
}

.pillars-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.pillar{
    display:flex;
    flex-direction:column;
    gap:24px;
    padding:48px 40px;
    min-height:380px;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.pillar:hover{
    transform:translateY(-8px);
    border-color:var(--crimson);
    box-shadow:
        0 18px 36px rgba(15,23,42,.08),
        0 30px 60px rgba(15,23,42,.06);
}

.pillar .picon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    background:var(--crimson-tint);
    color:var(--crimson);
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.pillar:hover .picon{
    transform:rotate(-8deg) scale(1.08);
}

.pillar h3{
    font-size:23px;
}

.pillar p.desc{
    font-size:15px;
    line-height:1.75;
    color:var(--gray-700);
}

.pillar .check-list li{
    font-size:14px;
}

.pillar .btn-text{
    margin-top:4px;
    font-size:14px;
}

/* Tablet */
@media (max-width:860px){
    .pillars-grid{
        grid-template-columns:1fr;
    }
}

/* Mobile */
@media (max-width:640px){
    .pillar{
        padding:28px;
        min-height:auto;
    }
    .pillar h3{
        font-size:20px;
    }
}