:root { --p:#1A5FA8;--pd:#0E3F75;--pl:#2B7FD4;--pp:#EBF3FB;--s:#1E7A5C;--sp:#E7F5F0;--a:#E86920;--ap:#FEF0E7;--w:#D4920A;--wp:#FEF7E7;--r:#C0392B;--rp:#FEE7E7;--n50:#F7F8FA;--n100:#EFF1F5;--n200:#DDE1EA;--n400:#9BA3B2;--n600:#5B6478;--n800:#2C3345;--n900:#151C2C;--white:#fff;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--sh-sm:0 1px 3px rgba(0,0,0,.06);--sh-md:0 4px 14px rgba(0,0,0,.08);--sh-lg:0 12px 40px rgba(0,0,0,.10);--fh:'Cairo',sans-serif;--fb:'IBM Plex Sans Arabic','Cairo',sans-serif;--pad:clamp(20px,6vw,80px) }
.btn-r { background:var(--r);color:#fff;box-shadow:0 2px 10px rgba(192,57,43,.25) }
.btn-r:hover { background:#a93226;transform:translateY(-1px) }
.btn-op { background:transparent;color:var(--r);border:1.5px solid var(--r) }
.btn-op:hover { background:var(--rp) }
.btn-gh:hover { border-color:var(--r);color:var(--r);background:var(--rp) }
.tag-r { background:var(--rp);color:var(--r);border:1px solid rgba(192,57,43,.15) }
.sec-title span { color:var(--r) }
.bc-inner span { color:var(--r);font-weight:600 }
.mq-item.on { color:var(--r);border-bottom-color:var(--r) }
.page-hero { background:linear-gradient(148deg,#FEE7E7 0%,#FFF3F3 45%,#FFF8F0 100%);padding:72px var(--pad) 60px }
.ph-h1 em { font-style:normal;color:var(--r) }
.dash-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.dm-bar { background:var(--pd);padding:13px 18px;display:flex;align-items:center;justify-content:space-between }
.dm-title { font-family:var(--fh);font-size:13px;font-weight:700;color:#fff }
.dm-dots { display:flex;gap:5px }
.dm-dots i { display:inline-block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4) }
.dm-body { padding:16px }
.dash-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px }
.dk { background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:10px 6px;text-align:center }
.dk-val { font-family:var(--fh);font-size:18px;font-weight:800;line-height:1 }
.dk-lbl { font-size:9px;color:var(--n400);margin-top:3px;font-family:var(--fh) }
.dk-trend { font-size:8px;margin-top:2px }
.dash-row2 { display:grid;grid-template-columns:1.5fr 1fr;gap:8px;margin-bottom:8px }
.dc { background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:10px }
.dc-title { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n600);margin-bottom:8px }
.bar-mini { display:flex;align-items:flex-end;gap:4px;height:60px }
.bm { flex:1;border-radius:2px 2px 0 0;transition:height .3s }
.bm-lbl { font-size:7px;color:var(--n400);text-align:center;margin-top:3px;font-family:var(--fh) }
.pie-mock { width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--s) 0% 40%,var(--p) 40% 65%,var(--a) 65% 80%,var(--w) 80% 100%);margin:0 auto 8px;position:relative }
.pie-mock::after { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:var(--n50);border-radius:50% }
.pie-legend { display:flex;flex-direction:column;gap:3px }
.pl-row { display:flex;align-items:center;gap:5px;font-size:8px;color:var(--n600) }
.pl-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0 }
.prog-mini { margin-bottom:5px }
.prog-hd { display:flex;justify-content:space-between;font-size:9px;color:var(--n600);font-family:var(--fh);margin-bottom:2px }
.prog-tr { height:5px;background:var(--n200);border-radius:3px;overflow:hidden }
.prog-fl { height:100%;border-radius:3px }
.sec-types { background:var(--n50) }
.types-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px }
.rt { background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);transition:all .25s }
.rt:hover { transform:translateY(-4px);box-shadow:var(--sh-lg) }
.rt-head { padding:20px 24px;display:flex;align-items:center;gap:14px }
.rt-ico { width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0 }
.rt-title { font-family:var(--fh);font-size:16px;font-weight:800 }
.rt-sub { font-size:11px;opacity:.7;font-family:var(--fh);margin-top:1px }
.rt-body { padding:16px 24px 24px }
.rt-kpis { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px }
.rtk { background:var(--n50);border-radius:8px;padding:10px;text-align:center }
.rtk-val { font-family:var(--fh);font-size:20px;font-weight:800;line-height:1 }
.rtk-lbl { font-size:9px;color:var(--n600);margin-top:3px;font-family:var(--fh) }
.rt-reports { display:flex;flex-direction:column;gap:6px }
.rtr { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n700,#3a4257);padding:6px 10px;border-radius:6px;background:var(--n50) }
.rtr i { font-size:11px;flex-shrink:0 }
.sec-catalog { background:var(--white) }
.catalog-tabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:36px;margin-top:32px }
.ctab { font-family:var(--fh);font-size:13px;font-weight:600;padding:8px 18px;border-radius:20px;border:1.5px solid var(--n200);background:var(--white);color:var(--n600);cursor:pointer;transition:all .2s }
.ctab.on { background:var(--r);color:#fff;border-color:var(--r) }
.catalog-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px }
.cg { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:18px;transition:all .25s }
.cg:hover { transform:translateY(-3px);box-shadow:var(--sh-md);background:var(--white) }
.cg i { font-size:20px;margin-bottom:10px;display:block }
.cg h4 { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--n900);margin-bottom:4px }
.cg p { font-size:11px;color:var(--n600);line-height:1.6;margin:0 }
.sec-dashboards { background:var(--n50) }
.dash-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px }
.dg { background:var(--white);border-radius:var(--r-xl);padding:28px;border:1px solid var(--n200);box-shadow:var(--sh-sm);transition:all .25s }
.dg:hover { transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--r) }
.dg-ico { width:54px;height:54px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px }
.dg h3 { font-family:var(--fh);font-size:16px;font-weight:800;color:var(--n900);margin-bottom:10px }
.dg p { font-size:13px;color:var(--n600);line-height:1.7;margin-bottom:14px }
.dg-list { display:flex;flex-direction:column;gap:7px }
.dg-li { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n700,#3a4257) }
.dg-li i { font-size:11px;color:var(--s);flex-shrink:0 }
.sec-export { background:var(--white) }
.export-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px }
.ex { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-xl);padding:24px;text-align:center;transition:all .25s }
.ex:hover { transform:translateY(-3px);box-shadow:var(--sh-md);background:var(--white) }
.ex-ico { width:60px;height:60px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px }
.ex h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:6px }
.ex p { font-size:12px;color:var(--n600);line-height:1.6;margin-bottom:12px }
.ex-badge { display:inline-block;font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px }
.sec-demo { background:var(--n50) }
.demo-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:48px }
.demo-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.demo-bar { background:var(--r);padding:12px 18px;display:flex;align-items:center;gap:12px }
.demo-dots { display:flex;gap:5px }
.demo-dots i { display:inline-block;width:8px;height:8px;border-radius:50% }
.demo-title { font-family:var(--fh);font-size:11px;font-weight:700;color:rgba(255,255,255,.9) }
.demo-body { padding:16px }
.demo-kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px }
.demo-k { background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:10px;text-align:center }
.demo-k-val { font-family:var(--fh);font-size:18px;font-weight:800;line-height:1 }
.demo-k-lbl { font-size:8px;color:var(--n400);margin-top:3px;font-family:var(--fh) }
.demo-chart { background:var(--n50);border-radius:8px;padding:10px;margin-bottom:10px }
.demo-chart-title { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n600);margin-bottom:8px }
.chart-bars { display:flex;align-items:flex-end;gap:5px;height:70px }
.cb { flex:1;border-radius:2px 2px 0 0 }
.cb-lbl { font-size:7px;color:var(--n400);text-align:center;margin-top:3px;font-family:var(--fh) }
.demo-table { background:var(--n50);border-radius:8px;overflow:hidden }
.demo-th { background:var(--n100);padding:6px 10px;display:grid;grid-template-columns:1fr 60px 60px 60px;gap:6px }
.demo-th span { font-size:8px;font-weight:700;font-family:var(--fh);color:var(--n600) }
.demo-td { padding:7px 10px;display:grid;grid-template-columns:1fr 60px 60px 60px;gap:6px;border-bottom:1px solid var(--n100);font-size:9px;align-items:center }
.demo-td:last-child { border-bottom:none }
.demo-badge { font-size:8px;font-weight:700;font-family:var(--fh);padding:2px 7px;border-radius:6px;text-align:center }
.faq-q:hover { background:var(--rp) }
.faq-q.open { color:var(--r);background:var(--rp) }
.faq-q i { font-size:12px;color:var(--r);transition:transform .3s;flex-shrink:0 }
.faq-a { display:none;padding:0 20px 16px;font-size:13px;color:var(--n600);line-height:1.75;background:var(--rp) }
.sec-cta { background:linear-gradient(145deg,var(--r) 0%,#8b2219 55%,var(--pd) 100%);text-align:center;padding:80px var(--pad) }
.mg:hover { border-color:var(--r);transform:translateY(-3px);box-shadow:var(--sh-md) }

@media(max-width:1100px) {
  .ph-inner,.demo-grid { grid-template-columns:1fr }
  .dash-mock { display:none }
  .types-grid,.dash-grid { grid-template-columns:repeat(2,1fr) }
  .catalog-grid,.export-grid,.more-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:768px) {
  .types-grid,.dash-grid { grid-template-columns:1fr }
  .catalog-grid,.export-grid,.more-grid { grid-template-columns:1fr 1fr }
}