:root { --bg:#f6f2ea; --card:#fff; --ink:#1d2433; --muted:#6b7280; --line:#e6dfd2; --navy:#1f2a44; --gold:#c49640; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.75 "Segoe UI", Tahoma, "Noto Kufi Arabic", sans-serif; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.narrow { max-width:640px; padding-top:48px; padding-bottom:48px; }
.hero { background:var(--navy); color:#f6f2ea; text-align:center; padding:64px 0 56px; }
.hero h1 { font-size:40px; margin:12px 0 8px; letter-spacing:.3px; }
.lead { font-size:19px; opacity:.92; max-width:700px; margin:0 auto 26px; }
.logo { width:84px; height:84px; border-radius:20px; }
main { display:grid; gap:18px; padding-top:28px; padding-bottom:40px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px;
  box-shadow:0 1px 2px rgba(31,42,68,.05),0 10px 26px rgba(31,42,68,.05); }
h2 { margin:0 0 8px; font-size:22px; } h3 { margin:0 0 6px; font-size:18px; color:var(--navy); }
p { margin:0 0 8px; } .muted { color:var(--muted); } .small { font-size:14px; }
.hero .muted { color:#c9cfdc; }
.btn { display:inline-block; background:var(--gold); color:#1f2a44; font-weight:700; text-decoration:none; border:0;
  border-radius:12px; padding:12px 26px; cursor:pointer; font-size:17px; margin:6px 4px; }
.btn.big { font-size:20px; padding:15px 40px; }
.btn.ghost { background:transparent; border:1px solid var(--navy); color:var(--navy); }
.examples { margin:0; padding-inline-start:20px; } .examples li { margin:4px 0; }
.cta { text-align:center; padding:12px 0; }
.key { direction:ltr; text-align:center; font:700 26px/1.4 Consolas, monospace; letter-spacing:2px; background:#fff;
  border:2px dashed var(--gold); border-radius:14px; padding:18px; margin:16px 0; }
.steps li { margin:6px 0; }
footer { text-align:center; padding:24px 0 40px; }
@media (max-width:600px){ .hero h1{font-size:30px} .lead{font-size:17px} }