:root{
  --ink:#0F1433; --indigo:#33439B; --amber:#F2B33D; --paper:#F7F5EF;
  --muted:#62677A; --line:#E2DFD5; --card:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,"Noto Sans Arabic",sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
header.site{
  position:sticky;top:0;z-index:20;background:rgba(247,245,239,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:14px;height:64px}
header.site .brand{display:flex;align-items:center;gap:10px;font-weight:700;
  letter-spacing:-.4px;text-decoration:none;font-size:1.02rem}
nav.site{margin-left:auto;display:flex;gap:24px;font-size:.9rem}
nav.site a{text-decoration:none;color:var(--muted)}
nav.site a:hover{color:var(--ink)}

.hero{padding:84px 0 64px}
.hero .eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 18px}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.5rem);line-height:1.08;letter-spacing:-1.6px;margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--indigo)}
.hero p.lede{font-size:1.12rem;color:var(--muted);max-width:60ch;margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 22px;border-radius:9px;text-decoration:none;
  font-weight:600;font-size:.93rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink)}

section{padding:56px 0;border-top:1px solid var(--line)}
h2.section{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 26px}

.grid{display:grid;gap:18px}
.grid.apps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
a.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,20,51,.09)}
a.card img{width:56px;height:56px;display:block;margin-bottom:16px}
a.card .role{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
a.card h3{margin:6px 0 8px;font-size:1.28rem;letter-spacing:-.4px}
a.card p{margin:0;color:var(--muted);font-size:.92rem}

.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.feature h4{margin:0 0 6px;font-size:.95rem}
.feature p{margin:0;color:var(--muted);font-size:.89rem}

table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
code{background:#EFEDE5;padding:1px 6px;border-radius:5px;font-size:.87em}

.note{background:#FFF8E8;border:1px solid #EFDBA4;border-radius:12px;padding:18px 22px;
  font-size:.9rem;color:#6B5316}
.note b{color:#4A3A0E}

footer.site{border-top:1px solid var(--line);padding:34px 0 56px;color:var(--muted);font-size:.86rem}
footer.site .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

td .btn,td .btn.ghost{padding:6px 14px;font-size:.83rem;border-radius:7px;margin-right:6px}
.apphero{padding:64px 0 40px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.apphero img{width:96px;height:96px}
.apphero h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-1.1px;margin:0 0 6px}
.apphero .role{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}
.apphero p{margin:8px 0 0;color:var(--muted);max-width:62ch}
.pill{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  padding:3px 10px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--muted)}