.benefits-grid { display:grid; gap:1.5rem; }
@media(min-width:768px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}
.benefit-card { background:var(--background); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:all .3s; }
.benefit-card:hover { border-color:rgba(255,107,0,.5); box-shadow:0 10px 30px rgba(255,107,0,.05); }
.benefit-inner { display:flex; gap:1rem; }
.benefit-icon { width:3.5rem; height:3.5rem; background:rgba(255,107,0,.1); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s; }
.benefit-card:hover .benefit-icon { background:rgba(255,107,0,.2); }
.benefit-icon svg { width:1.75rem; height:1.75rem; color:var(--primary); }
.benefit-title { font-weight:600; font-size:1.125rem; color:var(--foreground); margin-bottom:.5rem; }
.benefit-desc { font-size:.875rem; color:var(--muted-foreground); line-height:1.6; }
.benefit-icon svg path, 
.benefit-icon svg circle, 
.benefit-icon svg rect, 
.benefit-icon svg polygon {
    fill: none;
    stroke: currentColor;
}

.benefit-icon svg[fill]:not([fill="none"]) path {
    fill: currentColor;
    stroke: none;
}