:root{--bg:#f6f1e7;--ink:#17261f;--muted:#4f5f56;--green:#0f4c3a;--gold:#b58a2a;--card:#fffdf8;--line:#e3dac6;--alt:#efe8d8}
@media (prefers-color-scheme:dark){:root{--bg:#0e1714;--ink:#eee8da;--muted:#a8b4ab;--green:#6fcaa5;--gold:#d9b25a;--card:#15221d;--line:#25362f;--alt:#121f1a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Kufi Arabic","Noto Naskh Arabic","Segoe UI",Tahoma,system-ui,sans-serif;line-height:1.9;font-size:18px}
html[lang=en] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
html[lang=ar] [data-l=en],html[lang=en] [data-l=ar]{display:none}
.top{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto;padding:20px 24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:22px}
.mark{width:34px;height:34px;display:inline-block;border-radius:9px}
.nb{white-space:nowrap}
.nf-sub{font-size:.5em;color:var(--muted)}
.nf-link{color:var(--green)}
.lang{font:inherit;font-size:15px;color:var(--green);background:transparent;border:1.5px solid var(--green);border-radius:999px;padding:6px 18px;cursor:pointer}
.lang:hover,.lang:focus-visible{background:var(--green);color:var(--bg);outline:none}
main{max-width:960px;margin:0 auto;padding:0 24px}
.hero{padding:56px 0 64px}
.kicker{color:var(--gold);font-weight:600;letter-spacing:.04em;margin:0 0 14px}
h1{font-size:clamp(26px,6vw,52px);line-height:1.5;margin:0 0 22px;font-weight:700;color:var(--ink);text-wrap:balance}
html[lang=en] h1{line-height:1.2;letter-spacing:-.01em}
.lead{max-width:36em;font-size:clamp(18px,2.4vw,21px);color:var(--muted);margin:0}
.band{padding:44px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--alt);margin:0 -24px;padding:44px 24px;border-radius:0}
h2{font-size:28px;margin:0 0 22px;color:var(--green)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.cards h3{margin:0 0 8px;font-size:20px;color:var(--ink)}
.cards p{margin:0;color:var(--muted);font-size:17px}
.rules{margin:0;padding:0;list-style:none;counter-reset:r;max-width:42em}
.rules li{counter-increment:r;position:relative;padding:14px 56px 14px 0;border-bottom:1px solid var(--line)}
html[lang=en] .rules li{padding:14px 0 14px 56px}
.rules li:before{content:counter(r);position:absolute;top:14px;inset-inline-start:0;width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:16px;line-height:1}
html[dir=rtl] .rules li:before{right:0;left:auto}html[dir=ltr] .rules li:before{left:0;right:auto}
.rules b{color:var(--ink)}
.plain{max-width:40em;color:var(--muted);margin:0}
.foot{max-width:960px;margin:0 auto;padding:36px 24px 56px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
@media (max-width:560px){body{font-size:17px}h1{font-size:clamp(19px,5.6vw,24px)}.top{padding:14px 18px}main{padding:0 18px}.band.alt{margin:0 -18px;padding:36px 18px}.hero{padding:36px 0 44px}}
@media (prefers-reduced-motion:no-preference){.cards li{transition:transform .2s}.cards li:hover{transform:translateY(-2px)}}