:root { --p:#1A5FA8;--pd:#0E3F75;--pl:#2B7FD4;--pp:#EBF3FB;--s:#1E7A5C;--sl:#27A77D;--sp:#E7F5F0;--a:#E86920;--ap:#FEF0E7;--w:#D4920A;--wp:#FEF7E7;--pu:#6B42D4;--pup:#F0EBFE;--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-p { background:var(--p);color:#fff;box-shadow:0 2px 10px rgba(26,95,168,.25) }
.btn-pu { background:var(--pu);color:#fff }
.btn-pu:hover { background:#5533aa;transform:translateY(-1px) }
.btn-op { background:transparent;color:var(--pu);border:1.5px solid var(--pu) }
.btn-op:hover { background:var(--pup) }
.tag-pu { background:var(--pup);color:var(--pu);border:1px solid rgba(107,66,212,.15) }
.sec-title span { color:var(--pu) }
.bc-inner span { color:var(--pu);font-weight:600 }
.mq-item.on { color:var(--pu);border-bottom-color:var(--pu) }
.page-hero { background:linear-gradient(148deg,#F5F0FF 0%,#FAF7FF 45%,#F0F5FF 100%);padding:72px var(--pad) 60px }
.ph-h1 em { font-style:normal;color:var(--pu) }
.wo-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.wm-bar { background:var(--pu);padding:13px 18px;display:flex;align-items:center;justify-content:space-between }
.wm-title { font-family:var(--fh);font-size:13px;font-weight:700;color:#fff }
.wm-dots { display:flex;gap:5px }
.wm-dots i { display:inline-block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4) }
.wm-body { padding:16px }
.wo-header-card { background:var(--pup);border-radius:var(--r-lg);padding:14px;margin-bottom:14px }
.wo-hc-top { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px }
.wo-hc-title { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--pu) }
.wo-badge { font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px;white-space:nowrap }
.wo-hc-meta { display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:10px;color:var(--n600) }
.wo-hc-meta span { display:flex;align-items:center;gap:5px }
.wo-progress { margin-bottom:14px }
.wo-prog-title { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n600);margin-bottom:8px }
.wo-step { display:flex;align-items:center;gap:10px;font-size:11px;margin-bottom:6px }
.wo-step-ico { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px }
.wo-step-done { background:var(--s);color:#fff }
.wo-step-active { background:var(--pu);color:#fff }
.wo-step-pending { background:var(--n200);color:var(--n600) }
.wo-parts { background:var(--n50);border-radius:8px;padding:10px }
.wp-title { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n600);margin-bottom:8px;display:flex;justify-content:space-between }
.wp-row { display:flex;align-items:center;gap:8px;font-size:10px;padding:5px 0;border-bottom:1px solid var(--n100) }
.wp-row:last-child { border-bottom:none }
.wo-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px }
.ws { background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:8px;text-align:center }
.ws-val { font-family:var(--fh);font-size:16px;font-weight:800;line-height:1 }
.ws-lbl { font-size:8px;color:var(--n400);margin-top:3px;font-family:var(--fh) }
.sec-types { background:var(--n50) }
.types-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px }
.tc { background:var(--white);border-radius:var(--r-xl);padding:28px;border:1px solid var(--n200);box-shadow:var(--sh-sm);transition:all .25s;position:relative;overflow:hidden }
.tc:hover { transform:translateY(-4px);box-shadow:var(--sh-md) }
.tc-stripe { position:absolute;top:0;right:0;left:0;height:4px }
.tc-ico { width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px }
.tc h3 { font-family:var(--fh);font-size:16px;font-weight:800;color:var(--n900);margin-bottom:8px }
.tc p { font-size:13px;color:var(--n600);line-height:1.7;margin-bottom:14px }
.tc-badge { display:inline-block;font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px }
.sec-lifecycle { background:var(--white) }
.lc-wrap { margin-top:48px;display:flex;flex-direction:column;gap:0 }
.lc-row { display:grid;grid-template-columns:60px 3px 1fr;gap:0 20px;align-items:start;padding-bottom:32px;position:relative }
.lc-row:last-child { padding-bottom:0 }
.lc-num { width:60px;height:60px;border-radius:50%;border:3px solid var(--pu);background:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:18px;font-weight:800;color:var(--pu);flex-shrink:0;box-shadow:var(--sh-sm);transition:all .25s;grid-row:1 }
.lc-num.done { background:var(--pu);color:#fff }
.lc-line { width:3px;background:var(--n200);align-self:stretch;margin:60px auto 0;border-radius:3px;grid-column:2;grid-row:1/3 }
.lc-row:last-child .lc-line { display:none }
.lc-content { grid-column:3;grid-row:1 }
.lc-title { font-family:var(--fh);font-size:16px;font-weight:800;color:var(--n900);margin-bottom:6px }
.lc-desc { font-size:13px;color:var(--n600);line-height:1.75;margin-bottom:10px }
.lc-tags { display:flex;gap:6px;flex-wrap:wrap }
.lc-tag { font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:8px;background:var(--pup);color:var(--pu) }
.fc:hover { transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--pu) }
.sec-detail { background:var(--white) }
.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:48px }
.detail-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:12px 18px;display:flex;align-items:center;gap:12px }
.dm-dots { display:flex;gap:5px }
.dm-dots i { display:inline-block;width:8px;height:8px;border-radius:50% }
.dm-title { font-family:var(--fh);font-size:11px;font-weight:700;color:rgba(255,255,255,.9) }
.dm-body { padding:16px }
.dm-section { margin-bottom:14px }
.dm-sec-title { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n600);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--n100);display:flex;justify-content:space-between;align-items:center }
.dm-sec-title a { font-size:9px;color:var(--pu);font-weight:500 }
.dm-field { display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px }
.dm-field-label { color:var(--n400) }
.dm-field-val { font-family:var(--fh);font-weight:600;color:var(--n900) }
.dm-checklist { display:flex;flex-direction:column;gap:5px }
.dm-check { display:flex;align-items:center;gap:8px;font-size:10px }
.dm-check-box { width:14px;height:14px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px }
.dm-check-done { background:var(--s);color:#fff }
.dm-check-pending { background:var(--n200) }
.dm-time-track { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px }
.dm-tt { background:var(--n50);border:1px solid var(--n100);border-radius:8px;padding:8px;text-align:center }
.dm-tt-val { font-family:var(--fh);font-size:13px;font-weight:800;color:var(--pu) }
.dm-tt-lbl { font-size:8px;color:var(--n400);margin-top:2px;font-family:var(--fh) }
.dm-photo-row { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px }
.dm-photo { background:var(--n100);border-radius:8px;height:50px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--n400) }
.dm-photo.done { background:var(--sp);color:var(--s) }
.sec-statuses { background:var(--n50) }
.statuses-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px }
.st { background:var(--white);border-radius:var(--r-lg);padding:20px 14px;text-align:center;border:1px solid var(--n200);transition:all .25s }
.st:hover { transform:translateY(-3px);box-shadow:var(--sh-md) }
.st-ico { width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px }
.st h4 { font-family:var(--fh);font-size:13px;font-weight:700;margin-bottom:5px }
.st p { font-size:11px;color:var(--n600);line-height:1.6;margin:0 }
.sec-reports { background:var(--white) }
.rg { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:22px;transition:all .25s }
.rg:hover { transform:translateY(-3px);box-shadow:var(--sh-md);background:var(--white) }
.sec-checklist { background:var(--n50) }
.checklist-grid { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:48px }
.cl-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.cl-bar { background:var(--s);padding:12px 18px;display:flex;align-items:center;gap:12px }
.cl-title { font-family:var(--fh);font-size:12px;font-weight:700;color:#fff }
.cl-body { padding:16px }
.cl-header { background:var(--sp);border-radius:var(--r-md);padding:10px 14px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center }
.cl-header-title { font-family:var(--fh);font-size:12px;font-weight:700;color:var(--s) }
.cl-progress { display:flex;align-items:center;gap:8px }
.cl-prog-text { font-size:10px;font-family:var(--fh);font-weight:700;color:var(--s) }
.cl-prog-bar { width:60px;height:6px;background:rgba(30,122,92,.2);border-radius:3px;overflow:hidden }
.cl-prog-fill { height:100%;background:var(--s);border-radius:3px }
.cl-item { display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;margin-bottom:6px;font-size:12px;transition:all .2s }
.cl-item.checked { background:var(--sp) }
.cl-item.pending { background:var(--n50);border:1px solid var(--n200) }
.cl-cb { width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px }
.cl-cb.on { background:var(--s);color:#fff }
.cl-cb.off { background:var(--white);border:1.5px solid var(--n400) }
.cl-text { flex:1;font-family:var(--fh);font-weight:600 }
.cl-text.done { color:var(--s);text-decoration:line-through;opacity:.7 }
.cl-note { font-size:10px;color:var(--n400) }
.cl-photo-btn { background:var(--pp);color:var(--p);border:1px solid rgba(26,95,168,.2);border-radius:8px;padding:5px 10px;font-size:10px;font-weight:700;font-family:var(--fh);display:inline-flex;align-items:center;gap:5px;margin-top:8px }
.faq-q:hover { background:var(--pup) }
.faq-q.open { color:var(--pu);background:var(--pup) }
.faq-q i { font-size:12px;color:var(--pu);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(--pup) }
.mg:hover { border-color:var(--pu);transform:translateY(-3px);box-shadow:var(--sh-md) }
.sec-cta { background:linear-gradient(145deg,var(--pu) 0%,#4a2fa0 55%,#2a1a6e 100%);text-align:center;padding:80px var(--pad) }

@media(max-width:1100px) {
  .ph-inner,.detail-grid,.checklist-grid { grid-template-columns:1fr }
  .wo-mock { display:none }
  .types-grid,.feat-grid { grid-template-columns:repeat(2,1fr) }
  .statuses-grid { grid-template-columns:repeat(3,1fr) }
  .reports-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:768px) {
  .types-grid,.feat-grid,.reports-grid { grid-template-columns:1fr }
  .statuses-grid { grid-template-columns:repeat(2,1fr) }
}