/* styles.css */
:root {
  --primary: #3498db;
  --accent:  #e74c3c;
  --text:    #2c3e50;
  --bg:      #f8f9fa;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Tajawal', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}
header {
  background: var(--primary);
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}
header h1 { font-size:2.5em; }
main { max-width:900px; margin:40px auto; padding:0 20px; }
.features {
  display: flex; flex-wrap:wrap; gap:20px; margin-bottom:30px;
}
.feature {
  background: #fff; flex:1 1 250px; padding:20px; border-radius:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.feature h2 { margin-bottom:10px; }
.cta-btn {
  display:inline-block; padding:15px 30px; background: var(--accent);
  color:#fff; text-decoration:none; border-radius:5px; font-size:1em;
  transition: background 0.3s;
}
.cta-btn:hover { background: #c0392b; }