:root { --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#5f6b7a; --line:#e3e6ea; --accent:#1f6feb; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1216; --card:#171b21; --ink:#e6e9ee; --muted:#9aa5b1; --line:#2a313a; --accent:#4c8dff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif; }
header, footer { max-width:860px; margin:0 auto; padding:20px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
header a, footer a { color:var(--muted); text-decoration:none; } header a:hover, footer a:hover { color:var(--ink); }
.brand { font-weight:700; font-size:20px; color:var(--ink) !important; letter-spacing:.01em; }
main { max-width:860px; margin:0 auto; padding:8px 16px 48px; }
h1 { font-size:clamp(28px, 5vw, 42px); line-height:1.2; margin:24px 0 12px; }
h2 { font-size:20px; margin:32px 0 8px; }
.lead { font-size:19px; color:var(--muted); max-width:640px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:28px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
a { color:var(--accent); }
.doc p, .doc li { max-width:720px; }
.small { color:var(--muted); font-size:14px; }
footer { border-top:1px solid var(--line); font-size:14px; }