:root{
  --brand-red:#be1e2d;
  --brand-blue:#11285f;
  --bg:#f7f9fd;
  --card:#ffffff;
  --text:#1b2230;
  --muted:#6b778c;
  --chip:#f5e9ec;
}
*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;font-family:"Tajawal","Cairo","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}
.navbar{background:#ffffff;border-bottom:1px solid #e8ecf3;position:sticky;top:0;z-index:50}
.navbar .wrap{max-width:1140px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.navbar .brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#11285f}
.navbar .links{display:flex;gap:10px;flex-wrap:wrap}
.navbar a{color:#11285f;text-decoration:none;font-weight:700;opacity:.9}
.navbar a:hover{opacity:1}
.topband{background:linear-gradient(90deg,var(--brand-blue),var(--brand-red));height:120px}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.hero{background:var(--card);border:1px solid #e8ecf3;border-radius:20px;box-shadow:0 10px 28px rgba(17,40,95,.09);margin-top:-60px;padding:22px}
.hero h1{font-size:24px;margin:0 0 8px}
.hero p{color:#667085;margin:0 0 10px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.btn.green{background:#21a67a;color:#fff}
.btn.red{background:#be1e2d;color:#fff}
.btn.gray{background:#eef2ff;color:#11285f}
.search{margin:20px 0}
.search input{width:100%;padding:12px 14px;border-radius:999px;border:1px solid #e3e7ef;background:#fff}
.section-title{display:flex;align-items:center;gap:8px;color:#3d475c;margin:10px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #e8ecf3;border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(17,40,95,.06)}
.card img{display:block;width:100%;height:160px;object-fit:cover}
.card .p{padding:14px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--chip);color:#a03b4b;font-weight:800;font-size:12px;margin-bottom:8px}
.card h3{margin:0 0 10px 0;font-size:18px;padding:8px 12px;border:2px solid #cfd6e4;border-radius:12px;background:#ffffff;font-weight:800}
.meta{color:var(--muted);font-size:12px;margin-bottom:8px}
.more{display:inline-block;color:#11285f;text-decoration:none;font-weight:800}
.header{padding:18px 0}
.article{max-width:860px;margin:18px auto;background:var(--card);border:1px solid #e8ecf3;border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(17,40,95,.06)}
.article img.cover{width:100%;height:320px;object-fit:cover}
.content{padding:18px}
.content h1{font-size:28px;margin:10px 0;padding:10px 14px;border:2px solid #cfd6e4;border-radius:14px;background:#ffffff;font-weight:900}
.content h3{margin:16px 0 8px}
.back{display:inline-block;margin:14px 0 6px;text-decoration:none;color:#11285f;font-weight:800}
.footer{padding:28px 0;color:#667085;font-size:13px;text-align:center;border-top:1px solid #e8ecf3;margin-top:22px}