/* Saqia Zamzam · shared site styles (zh / ar / privacy). RTL-aware via logical properties. */
:root{
  --ink:#12241f; --mut:#5b6f68; --brand:#0e7a5f; --brand-dark:#0a5c48;
  --bg:#f4f7f5; --card:#ffffff; --line:#e3ebe7; --soft:#eef4f1;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",Tahoma,Arial,"Noto Sans Arabic","Microsoft YaHei",sans-serif;}
a{color:var(--brand);}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;}

/* header */
header.site{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;}
.logo{font-weight:700;font-size:17px;color:var(--brand);text-decoration:none;white-space:nowrap;}
.logo small{display:block;font-weight:600;font-size:11px;color:var(--mut);letter-spacing:.3px;}
nav.main{display:flex;align-items:center;flex-wrap:wrap;}
nav.main a{color:var(--mut);text-decoration:none;margin-inline-start:18px;font-size:14px;}
nav.main a:hover{color:var(--brand);}
nav.main a.lang{border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--brand);}

/* hero */
.hero{padding:64px 0 44px;text-align:center;background:
  radial-gradient(1200px 300px at 50% -80px, #e7f2ee 0%, rgba(231,242,238,0) 70%);}
.hero h1{font-size:34px;line-height:1.4;margin:0 0 16px;}
.hero p{color:var(--mut);font-size:16px;line-height:1.95;max-width:680px;margin:0 auto 26px;}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:600;
  padding:11px 22px;border-radius:10px;border:1px solid transparent;transition:.15s;}
.btn.primary{background:var(--brand);color:#fff;}
.btn.primary:hover{background:var(--brand-dark);}
.btn.ghost{border-color:var(--brand);color:var(--brand);background:transparent;}
.btn.ghost:hover{background:var(--soft);}

/* sections */
section.block{padding:34px 0;}
.kicker{display:block;text-align:center;color:var(--brand);font-weight:700;font-size:13px;letter-spacing:1px;margin:0 0 6px;}
h2.title{text-align:center;font-size:25px;margin:0 0 8px;}
p.lede{text-align:center;color:var(--mut);font-size:15px;line-height:1.85;max-width:640px;margin:0 auto 26px;}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;}
.card .ico{width:40px;height:40px;border-radius:10px;background:var(--soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.card .ico svg{width:22px;height:22px;}
.card h3{margin:0 0 8px;font-size:16px;}
.card p{margin:0;color:var(--mut);font-size:14px;line-height:1.8;}

/* workflow steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;counter-reset:step;}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;}
.step .num{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:14px;}
.step h3{margin:0 0 8px;font-size:15px;}
.step p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.75;}

/* platform */
.platform{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.platform .card h3{color:var(--brand);}
.platform ul{margin:12px 0 0;padding-inline-start:20px;color:var(--mut);font-size:14px;line-height:1.9;}
.note{color:var(--mut);font-size:13px;text-align:center;margin:20px 0 0;line-height:1.8;}

/* footer */
footer.site{border-top:1px solid var(--line);background:var(--card);margin-top:30px;}
footer.site .wrap{padding:22px 20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:var(--mut);font-size:13px;}
footer.site a{color:var(--mut);text-decoration:none;}
footer.site a:hover{color:var(--brand);}

@media (max-width:680px){
  .hero h1{font-size:26px;}
  header.site .wrap{flex-direction:column;align-items:flex-start;}
  nav.main a{margin-inline-start:0;margin-inline-end:16px;}
  h2.title{font-size:21px;}
}