/* === features.css === */

/* ══════════════════════════════════════
   FEATURE GRID
══════════════════════════════════════ */
.feat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 48px; }
.fc {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: 16px; padding: 26px;
  transition: border-color .3s, transform .25s, box-shadow .3s;
}
.fc:hover { border-color: rgba(153,202,60,.28); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.fc.wide { grid-column: span 2; }
.fc-icon {
  width: 44px; height: 44px; background: var(--gd); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
  border: 1px solid rgba(153,202,60,.12);
}
.fc h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
.fc p  { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.6; }
html[lang="ar"] .fc h3 { font-family:'Cairo',sans-serif; letter-spacing:0; }
html[lang="ar"] .fc p  { font-family:'Cairo',sans-serif; line-height:1.75; }