:root{
  --green:#168B6E; --green-dark:#0E6A53; --green-light:#4FB89A;
  --gold:#B89A5E; --gold-dark:#9A7F45;
  --ink:#1A1A1A; --muted:#6B7280; --line:#E7ECEA;
  --bg:#FFFFFF; --bg-soft:#F2FAF7;
  --radius:18px; --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  line-height:1.85; font-size:16px;
}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.nav{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:500}
.brand img{width:38px; height:38px}
.brand b{font-size:20px; color:var(--green-dark)}
.brand small{font-size:11px; letter-spacing:2px; color:var(--gold)}
.nav-links{margin-inline-start:auto; display:flex; gap:18px; font-size:14px; color:var(--muted)}
.nav-links a{color:var(--muted)}

/* Hero */
.hero{max-width:var(--maxw); margin:0 auto; padding:64px 20px 32px; text-align:center}
.hero img{width:104px; height:104px; margin-bottom:18px}
.hero h1{font-size:34px; font-weight:500; margin:0 0 10px; color:var(--ink)}
.hero p{font-size:18px; color:var(--muted); margin:0 auto; max-width:540px}
.badge{display:inline-block; background:var(--bg-soft); color:var(--green-dark); font-size:13px; padding:6px 14px; border-radius:999px; margin-top:18px; border:1px solid var(--line)}

/* Features */
.features{max-width:var(--maxw); margin:0 auto; padding:8px 20px 48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.feat{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.feat .ic{width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px;border:1px solid var(--line)}
.feat h3{margin:0 0 6px; font-size:16px; font-weight:500}
.feat p{margin:0; font-size:14px; color:var(--muted); line-height:1.7}

/* Content (legal) */
.doc{max-width:var(--maxw); margin:0 auto; padding:40px 20px 80px}
.doc h1{font-size:30px; font-weight:500; margin:0 0 6px}
.doc .updated{color:var(--muted); font-size:14px; margin:0 0 32px}
.doc h2{font-size:20px; font-weight:500; color:var(--green-dark); margin:34px 0 10px; padding-top:10px; border-top:1px solid var(--line)}
.doc h3{font-size:16px; font-weight:500; margin:20px 0 6px}
.doc p,.doc li{font-size:15.5px; color:#2c2c2c}
.doc ul{padding-inline-start:22px}
.doc li{margin-bottom:6px}
.callout{background:var(--bg-soft); border:1px solid var(--line); border-inline-start:4px solid var(--gold); border-radius:12px; padding:14px 18px; margin:18px 0; font-size:15px}
.lang-sep{margin:60px 0 0; border:0; border-top:2px dashed var(--line)}

/* Footer */
.footer{border-top:1px solid var(--line); background:var(--bg-soft)}
.footer-in{max-width:var(--maxw); margin:0 auto; padding:28px 20px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; font-size:14px; color:var(--muted)}
.footer-in a{color:var(--muted)}
.footer-in .sp{margin-inline-start:auto}

@media (max-width:520px){
  .hero h1{font-size:28px} .hero p{font-size:16px}
  .nav-links{display:none}
}