.features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem;
}
.feature{
  background: linear-gradient(180deg, rgba(255,255,255,0.8), var(--card));
  padding:1.3rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.04);
  min-height:120px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.feature .ficon{
  width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;
  background:linear-gradient(90deg,var(--brand-accent),var(--brand-primary));color:white;margin-bottom:0.7rem;
  box-shadow:0 8px 18px rgba(211,84,0,0.08);
}
.feature h3{margin:0 0 0.5rem 0;font-size:1.02rem}
.feature p{margin:0;color:var(--muted);font-size:0.94rem}




/* RESPONSIVE - ADD AT END OF FEATURES.CSS */
@media (max-width: 1000px){
  .features{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px){
  .features{
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  
  .feature{
    padding: 1.1rem;
    min-height: auto;
  }
  
  .feature .ficon{
    width: 48px;
    height: 48px;
    margin-bottom: 0.6rem;
  }
  
  .feature h3{
    font-size: 0.95rem;
  }
  
  .feature p{
    font-size: 0.88rem;
  }
}

@media (max-width: 480px){
  .feature{
    padding: 1rem;
  }
  
  .feature .ficon{
    width: 44px;
    height: 44px;
  }
  
  .feature h3{
    font-size: 0.9rem;
  }
  
  .feature p{
    font-size: 0.82rem;
  }
}