:root{--ink:#0E3B2E;--leaf:#14583F;--saffron:#F2B632;--sand:#F3ECDC;--paper:#FBF8F0;--muted:#5C6B64;--dark:#09442C;--line:#E3DAC3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;background:var(--sand);color:var(--ink);line-height:1.9;font-size:17px}
a{color:var(--leaf)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.nav{background:var(--dark);color:#fff}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav a{color:#fff;text-decoration:none;font-size:15px;margin-inline-start:20px;opacity:.9}
.nav a:hover{opacity:1;color:var(--saffron)}
.brand{font-family:'Reem Kufi',serif;font-size:26px;color:var(--saffron)!important;margin:0!important;opacity:1!important}
.hero{background:var(--dark);color:#fff;text-align:center;padding:48px 0 72px;border-bottom:8px solid var(--saffron)}
.hero img{width:min(300px,70vw);height:auto;border-radius:20px}
.hero h1{font-family:'Reem Kufi',serif;font-size:clamp(30px,6vw,46px);margin:24px 0 8px;font-weight:600}
.hero p{max-width:560px;margin:0 auto 24px;color:#DCE8E1;font-size:18px}
.badge{display:inline-block;background:var(--saffron);color:var(--ink);font-weight:700;padding:12px 26px;border-radius:999px;font-size:16px}
section{padding:56px 0}
h2{font-family:'Reem Kufi',serif;font-size:30px;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.card h3{margin:0 0 6px;font-size:20px}
.card p{margin:0;color:var(--muted);font-size:16px}
.step{font-family:'Reem Kufi',serif;font-size:34px;color:var(--saffron);line-height:1}
.band{background:var(--ink);color:#fff}
.band .lead{color:#C9D8D0}
.band .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.band .card{background:var(--leaf);border-color:#1d6b4e}
.band .card p{color:#D6E4DC}
footer{background:var(--dark);color:#C9D8D0;padding:32px 0;font-size:15px;text-align:center}
footer a{color:var(--saffron);margin:0 10px;text-decoration:none}
.doc{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 24px;margin:32px 0 56px}
.doc h1{font-family:'Reem Kufi',serif;font-size:34px;margin:0 0 4px}
.doc h2{font-size:23px;margin:30px 0 6px}
.doc p,.doc li{color:#27483C}
.doc ul{padding-inline-start:22px}
.meta{color:var(--muted);font-size:15px}
@media(max-width:600px){body{font-size:16px}section{padding:40px 0}.nav a{margin-inline-start:12px;font-size:14px}}