/* ==========================================
   WHY ODOO
========================================== */

.odoo{

    padding:6rem 0;

    background:var(--color-surface);

}

.odoo__comparison{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.comparison{

    padding:2.5rem;

    border-radius:24px;

    border:1px solid var(--color-border);

    background:var(--color-background);

}

.comparison--traditional{

    border-left:6px solid #ef4444;

}

.comparison--odoo{

    border-left:6px solid var(--color-primary);

}

.comparison__header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:2rem;

    gap:1rem;

}

.comparison__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:.5rem 1rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}

.comparison__badge--positive{

    background:rgba(37,99,235,.12);

    color:var(--color-primary);

}

.comparison__badge--negative{

    background:rgba(239,68,68,.12);

    color:#dc2626;

}

.comparison__list{

    list-style:none;

    padding:0;

    margin:0;

}

.comparison__list li{

    display:flex;

    gap:.75rem;

    margin-bottom:1rem;

    color:var(--color-text-muted);

}

.comparison__list li::before{

    content:"✕";

    color:#ef4444;

    font-weight:bold;

}

.comparison__list--positive li::before{

    content:"✓";

    color:var(--color-primary);

}

.odoo__benefits{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:2rem;

    margin-top:5rem;

}

.benefit-card{

    padding:2rem;

    border:1px solid var(--color-border);

    border-radius:20px;

    background:var(--color-background);

    transition:.3s;

}

.benefit-card:hover{

    transform:translateY(-6px);

    border-color:var(--color-primary);

}

.benefit-card h3{

    margin-bottom:1rem;

}

.benefit-card p{

    color:var(--color-text-muted);

    line-height:1.8;

}

.odoo__cta{

    text-align:center;

    max-width:800px;

    margin:5rem auto 0;

}

.odoo__cta h3{

    margin-bottom:1rem;

}

.odoo__cta p{

    color:var(--color-text-muted);

    margin-bottom:2rem;

}

@media(max-width:900px){

    .odoo__comparison{

        grid-template-columns:1fr;

    }

}