:root { --p:#1A5FA8;--pd:#0E3F75;--pl:#2B7FD4;--pp:#EBF3FB;--s:#1E7A5C;--sp:#E7F5F0;--a:#E86920;--ap:#FEF0E7;--w:#D4920A;--wp:#FEF7E7;--t:#0E7A7A;--tp:#E6FAFA;--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-t { background:var(--t);color:#fff;box-shadow:0 2px 10px rgba(14,122,122,.25) }
.btn-t:hover { background:#0a5858;transform:translateY(-1px) }
.btn-op { background:transparent;color:var(--t);border:1.5px solid var(--t) }
.btn-op:hover { background:var(--tp) }
.btn-gh:hover { border-color:var(--t);color:var(--t);background:var(--tp) }
.tag-t { background:var(--tp);color:var(--t);border:1px solid rgba(14,122,122,.15) }
.sec-title span { color:var(--t) }
.bc-inner span { color:var(--t);font-weight:600 }
.mq-item.on { color:var(--t);border-bottom-color:var(--t) }
.page-hero { background:linear-gradient(148deg,#E6FAFA 0%,#F2FCFC 45%,#EBF4FE 100%);padding:72px var(--pad) 60px }
.ph-h1 em { font-style:normal;color:var(--t) }
.ph-pt i { width:22px;height:22px;background:var(--tp);color:var(--t);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0 }
.tech-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.tm-bar { background:var(--t);padding:13px 18px;display:flex;align-items:center;justify-content:space-between }
.tm-title { font-family:var(--fh);font-size:13px;font-weight:700;color:#fff }
.tm-dots { display:flex;gap:5px }
.tm-dots i { display:inline-block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4) }
.tm-body { padding:16px }
.tm-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px }
.ts { background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:10px 6px;text-align:center }
.ts-val { font-family:var(--fh);font-size:18px;font-weight:800;line-height:1 }
.ts-lbl { font-size:9px;color:var(--n400);margin-top:3px;font-family:var(--fh) }
.tech-list { display:flex;flex-direction:column;gap:8px;margin-bottom:12px }
.tl-row { display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--n50);border-radius:var(--r-md);border:1px solid var(--n200) }
.tl-av { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:15px;font-weight:800;flex-shrink:0 }
.tl-name { font-family:var(--fh);font-size:12px;font-weight:700;color:var(--n900) }
.tl-meta { font-size:9px;color:var(--n400) }
.tl-tasks { font-size:10px;font-weight:700;font-family:var(--fh);min-width:32px;text-align:center }
.tl-status { font-size:9px;font-weight:700;font-family:var(--fh);padding:3px 8px;border-radius:8px;white-space:nowrap }
.tm-prog { margin-bottom:8px }
.tp-hd { display:flex;justify-content:space-between;font-size:10px;color:var(--n600);font-family:var(--fh);margin-bottom:3px }
.tp-tr { height:5px;background:var(--n200);border-radius:3px;overflow:hidden }
.tp-fl { height:100%;border-radius:3px }
.sec-field { background:var(--n50) }
.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px }
.field-features { display:flex;flex-direction:column;gap:16px }
.ff-item { display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--white);border-radius:var(--r-lg);border:1px solid var(--n200);box-shadow:var(--sh-sm);transition:all .25s }
.ff-item:hover { border-color:var(--t);box-shadow:var(--sh-md);transform:translateX(-4px) }
.ff-ico { width:46px;height:46px;min-width:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px }
.ff-item h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:4px }
.ff-item p { font-size:13px;color:var(--n600);margin:0;line-height:1.65 }
.mob-large { background:var(--n900);border-radius:44px;padding:14px;box-shadow:0 32px 80px rgba(0,0,0,.4);max-width:280px;margin:0 auto;border:2px solid rgba(255,255,255,.1) }
.mob-screen { background:var(--white);border-radius:32px;overflow:hidden }
.mob-hd { background:linear-gradient(135deg,var(--t),var(--p));padding:14px 16px 12px }
.mob-notch { width:80px;height:6px;background:rgba(0,0,0,.3);border-radius:3px;margin:0 auto 10px }
.mob-hd-row { display:flex;align-items:center;justify-content:space-between }
.mob-hd-title { font-family:var(--fh);font-size:13px;font-weight:700;color:#fff }
.mob-hd-sub { font-size:9px;color:rgba(255,255,255,.7);margin-top:2px }
.mob-bdg { font-size:9px;background:rgba(255,255,255,.2);color:#fff;padding:3px 10px;border-radius:10px;font-family:var(--fh);font-weight:700 }
.mob-bd { padding:12px }
.mob-task { display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--n50);border-radius:10px;border:1px solid var(--n100);margin-bottom:6px }
.mob-t-ico { width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0 }
.mob-t-name { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n900) }
.mob-t-loc { font-size:8px;color:var(--n400) }
.mob-t-st { font-size:8px;font-weight:700;font-family:var(--fh);padding:2px 8px;border-radius:8px;white-space:nowrap }
.mob-action-bar { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px }
.mob-ab { background:var(--t);color:#fff;border-radius:8px;padding:8px;text-align:center;font-size:9px;font-weight:700;font-family:var(--fh);display:flex;align-items:center;justify-content:center;gap:4px }
.mob-ab.outline { background:transparent;border:1px solid var(--t);color:var(--t) }
.mob-quick-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px }
.mqs { background:var(--n50);border-radius:8px;padding:7px 4px;text-align:center }
.mqs-val { font-family:var(--fh);font-size:14px;font-weight:800;color:var(--t);line-height:1 }
.mqs-lbl { font-size:7px;color:var(--n400);margin-top:2px;font-family:var(--fh) }
.sec-manage { background:var(--white) }
.manage-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px }
.mc { background:var(--white);border-radius:var(--r-xl);padding:28px;border:1px solid var(--n200);box-shadow:var(--sh-sm);transition:all .25s }
.mc:hover { transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--t) }
.mc-ico { width:52px;height:52px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px }
.mc h3 { font-family:var(--fh);font-size:16px;font-weight:800;color:var(--n900);margin-bottom:10px }
.mc p { font-size:13px;color:var(--n600);line-height:1.7;margin-bottom:14px }
.mc-list { display:flex;flex-direction:column;gap:7px }
.mc-li { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n700,#3a4257) }
.mc-li i { font-size:11px;color:var(--t);flex-shrink:0 }
.sec-app { background:linear-gradient(145deg,var(--pd) 0%,var(--t) 60%,var(--s) 100%);padding:80px var(--pad) }
.app-inner { max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center }
.app-tag { background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2) }
.app-h2 { font-family:var(--fh);font-size:32px;font-weight:900;color:#fff;line-height:1.3;margin-bottom:14px }
.app-p { font-size:15px;color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:28px }
.app-features { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px }
.af { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-md);padding:14px;display:flex;align-items:center;gap:10px;transition:all .2s }
.af:hover { background:rgba(255,255,255,.18) }
.af-ico { width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0 }
.af span { font-family:var(--fh);font-size:12px;font-weight:600;color:#fff }
.sec-perf { background:var(--n50) }
.perf-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:48px }
.perf-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.pm-bar2 { background:var(--t);padding:12px 18px;display:flex;align-items:center;gap:12px }
.pm-dots2 { display:flex;gap:5px }
.pm-dots2 i { display:inline-block;width:8px;height:8px;border-radius:50% }
.pm-title2 { font-family:var(--fh);font-size:11px;font-weight:700;color:rgba(255,255,255,.9) }
.pm-body2 { padding:16px }
.pm-tech-card { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:14px;margin-bottom:10px }
.ptc-head { display:flex;align-items:center;gap:10px;margin-bottom:12px }
.ptc-av { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:17px;font-weight:800;flex-shrink:0 }
.ptc-name { font-family:var(--fh);font-size:12px;font-weight:700;color:var(--n900) }
.ptc-role { font-size:10px;color:var(--n400) }
.ptc-score { font-family:var(--fh);font-size:20px;font-weight:800;margin-right:auto;line-height:1 }
.ptc-metrics { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px }
.pm-metric { text-align:center;background:var(--white);border-radius:8px;padding:8px }
.pm-metric-val { font-family:var(--fh);font-size:14px;font-weight:800;line-height:1 }
.pm-metric-lbl { font-size:8px;color:var(--n400);margin-top:2px;font-family:var(--fh) }
.sec-skills { background:var(--white) }
.skills-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px }
.sk { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:22px 16px;text-align:center;transition:all .25s }
.sk:hover { transform:translateY(-3px);box-shadow:var(--sh-md);background:var(--white) }
.sk-ico { width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px }
.sk h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:5px }
.sk p { font-size:11px;color:var(--n600);line-height:1.6;margin:0 }
.faq-q:hover { background:var(--tp) }
.faq-q.open { color:var(--t);background:var(--tp) }
.faq-q i { font-size:12px;color:var(--t);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(--tp) }
.mg:hover { border-color:var(--t);transform:translateY(-3px);box-shadow:var(--sh-md) }
.sec-cta { background:linear-gradient(145deg,var(--t) 0%,#0a5858 50%,var(--pd) 100%);text-align:center;padding:80px var(--pad) }

@media(max-width:1100px) {
  .ph-inner,.field-grid,.app-inner,.perf-grid { grid-template-columns:1fr }
  .tech-mock,.mob-large { display:none }
  .manage-grid,.reports-grid { grid-template-columns:repeat(2,1fr) }
  .skills-grid,.more-grid { grid-template-columns:repeat(2,1fr) }
  .app-features { grid-template-columns:1fr }
}

@media(max-width:768px) {
  section,.sec-app,.sec-cta { padding:56px 20px }
  .manage-grid,.reports-grid { grid-template-columns:1fr }
  .skills-grid { grid-template-columns:1fr 1fr }
}