/* Niyyah marketing + privacy — brand-matched to the app. */
:root{
  --paper:#FAF8F4; --surface:#FFFFFF; --surface-tint:#F2EFE6;
  --ink:#1A1F1B; --muted:#6B7569; --faint:#8A9183;
  --accent:#2F6B4D; --accent-deep:#1F4A37; --gold:#8E6E3D;
  --divider:#ECE9DF;
  --maxw:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
.nav{padding:22px 0; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; font-size:19px; letter-spacing:-.01em}
.brand .arabic{color:var(--muted); font-size:15px; font-weight:500}
.nav a.ghost{color:var(--muted); font-size:15px}

/* hero */
.hero{text-align:center; padding:64px 0 40px}
.hero .star{margin:0 auto 28px}
.hero h1{font-size:clamp(38px,7vw,68px); font-weight:600; letter-spacing:-.03em; line-height:1.04}
.hero .lede{font-size:clamp(17px,2.4vw,21px); color:var(--muted); max-width:560px; margin:20px auto 0}
.cta{display:inline-flex; align-items:center; gap:10px; margin-top:34px; background:var(--accent);
  color:var(--paper); padding:15px 26px; border-radius:14px; font-weight:600; font-size:16px;
  box-shadow:0 8px 24px rgba(47,107,77,.22); transition:transform .15s ease, box-shadow .15s ease}
.cta:hover{text-decoration:none; transform:translateY(-1px); box-shadow:0 12px 30px rgba(47,107,77,.28)}
.subnote{margin-top:16px; font-size:14px; color:var(--faint)}

/* feature grid */
.features{padding:56px 0}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--divider); border-radius:18px; padding:26px}
.card .ic{width:34px; height:34px; margin-bottom:14px}
.card h3{font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px}
.card p{font-size:14.5px; color:var(--muted)}

/* values strip */
.values{background:var(--surface-tint); border-top:1px solid var(--divider); border-bottom:1px solid var(--divider);
  padding:48px 0; text-align:center}
.values h2{font-size:clamp(24px,4vw,34px); font-weight:600; letter-spacing:-.02em}
.values p{color:var(--muted); max-width:640px; margin:14px auto 0; font-size:16px}
.pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px}
.pill{background:var(--paper); border:1px solid var(--divider); color:var(--ink);
  padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500}

/* footer */
footer{padding:48px 0 64px; text-align:center; color:var(--faint); font-size:14px}
footer .brand{justify-content:center; margin-bottom:14px; color:var(--ink)}
footer a{color:var(--muted)}
.sep{color:var(--divider); margin:0 10px}

/* privacy / doc page */
.doc{padding:48px 0 72px; max-width:760px}
.doc h1{font-size:clamp(30px,5vw,42px); font-weight:600; letter-spacing:-.02em}
.doc .updated{color:var(--faint); font-size:14px; margin-top:8px}
.doc h2{font-size:20px; font-weight:600; margin:36px 0 10px; letter-spacing:-.01em}
.doc p, .doc li{color:#33392f; font-size:16px; margin-top:10px}
.doc ul{padding-left:22px}
.doc .tldr{background:var(--surface-tint); border:1px solid var(--divider); border-radius:16px;
  padding:20px 22px; margin-top:24px}
.doc .tldr strong{color:var(--accent-deep)}
.back{display:inline-block; margin-bottom:24px; color:var(--muted); font-size:15px}