:root{
  --cream:#faf6ec; --paper:#fffdf7; --ink:#241f18; --muted:#6f6754;
  --emerald:#0e5a4a; --emerald-d:#0a4237; --gold:#c9a227; --gold-l:#e8cd6f; --line:#e7ddc4;
}
:root{ --emerald-d:#0a4237; }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.95; font-size:16.5px;
}
html[lang="en"] .ar{ display:none !important }
html[lang="ar"] .en{ display:none !important }
.wrap{ max-width:880px; margin:0 auto; padding:0 20px }

/* ---------- Header ---------- */
.site-head{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg fill='none' stroke='%23ffffff14' stroke-width='1.4'%3E%3Crect x='17' y='17' width='24' height='24'/%3E%3Crect x='17' y='17' width='24' height='24' transform='rotate(45 29 29)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--emerald-d), var(--emerald) 55%, #14705d);
  color:#f6f1e2; padding:26px 0 30px; border-bottom:4px solid var(--gold);
}
.head-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; margin-inline-end:auto }
.brand svg{ flex:0 0 auto }
.brand-name{ font-weight:800; font-size:1.25rem; letter-spacing:.3px }
.brand-sub{ font-size:.8rem; opacity:.85; margin-top:-4px }
.lang-btn{
  border:1.5px solid var(--gold-l); background:transparent; color:var(--gold-l);
  font-family:inherit; font-weight:700; font-size:.9rem; padding:7px 18px; border-radius:999px; cursor:pointer;
  transition:.2s;
}
.lang-btn:hover{ background:var(--gold-l); color:var(--emerald-d) }
.site-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px }
.site-nav a{
  color:#f2ecd9; text-decoration:none; font-size:.88rem; font-weight:600;
  padding:5px 14px; border-radius:999px; border:1px solid #ffffff2e;
}
.site-nav a:hover, .site-nav a.active{ background:#ffffff1c; border-color:var(--gold-l) }

/* ---------- Content ---------- */
main{ padding:34px 0 10px }
.page-title{ color:var(--emerald); font-size:1.75rem; font-weight:800; margin:0 0 4px }
.badge{
  display:inline-block; background:#0e5a4a12; color:var(--emerald); border:1px solid #0e5a4a2e;
  border-radius:999px; padding:2px 14px; font-size:.8rem; font-weight:700; margin-bottom:10px;
}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:26px 28px; margin:20px 0; box-shadow:0 6px 22px #00000009;
}
.card h2{
  color:var(--emerald); font-size:1.18rem; margin:0 0 10px;
  border-inline-start:4px solid var(--gold); padding-inline-start:12px;
}
.card p{ margin:8px 0 }
.card ul{ margin:8px 0; padding-inline-start:22px }
.card li{ margin:6px 0 }
.card a{ color:var(--emerald); font-weight:700; text-decoration-color:var(--gold) }
strong{ color:var(--emerald-d) }
.note{
  background:#c9a2271a; border:1px dashed var(--gold); border-radius:12px;
  padding:12px 16px; font-size:.92rem; margin-top:12px;
}
.btn{
  display:inline-block; background:linear-gradient(135deg,var(--gold),#b18c1c);
  color:#fffdf4; font-weight:800; text-decoration:none; padding:13px 30px; border-radius:12px;
  box-shadow:0 6px 16px #c9a22745; transition:.2s; font-size:1.02rem;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px #c9a22758 }
.center{ text-align:center }

/* landing cards */
.link-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin:26px 0 }
.link-card{
  background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:26px 22px;
  text-decoration:none; color:var(--ink); text-align:center; transition:.2s; box-shadow:0 6px 22px #00000009;
}
.link-card:hover{ border-color:var(--gold); transform:translateY(-3px) }
.link-card .ic{ font-size:2rem }
.link-card h3{ color:var(--emerald); margin:10px 0 6px; font-size:1.1rem }
.link-card p{ margin:0; font-size:.88rem; color:var(--muted) }

/* ---------- Footer ---------- */
.site-foot{
  margin-top:44px; background:var(--emerald-d); color:#e9e2cd; padding:26px 0 30px;
  border-top:4px solid var(--gold); font-size:.9rem;
}
.site-foot a{ color:var(--gold-l); text-decoration:none; font-weight:700 }
.foot-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between }
@media (max-width:560px){ body{ font-size:15.5px } .card{ padding:20px 18px } }