a { text-decoration:none }
.btn-p { background:var(--p);color:#fff;box-shadow:0 2px 10px rgba(26,95,168,.25) }
.btn-a { background:var(--a);color:#fff }
.btn-a:hover { background:#c75a18;transform:translateY(-1px) }
.btn-s { background:var(--s);color:#fff }
.btn-s:hover { background:#165c45;transform:translateY(-1px) }
.btn-gh:hover { border-color:var(--p);color:var(--p);background:var(--pp) }
.tag-p { background:var(--pp);color:var(--p);border:1px solid rgba(26,95,168,.15) }
.tag-s { background:var(--sp);color:var(--s);border:1px solid rgba(30,122,92,.15) }
.tag-a { background:var(--ap);color:var(--a);border:1px solid rgba(232,105,32,.15) }
.page-hero { background:linear-gradient(148deg,#EBF4FE 0%,#F5F9FF 45%,#ECF5F1 100%);padding:72px var(--pad) 60px;text-align:center }
.ph-inner { max-width:860px;margin:0 auto }
.ph-h1 { font-family:var(--fh);font-size:44px;font-weight:900;color:var(--n900);line-height:1.25;margin-bottom:18px }
.ph-h1 span { color:var(--p) }
.ph-p { font-size:16px;color:var(--n600);line-height:1.8;margin-bottom:32px;max-width:640px;margin-left:auto;margin-right:auto }
.ph-actions { display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:40px }
.ph-stats { display:flex;gap:32px;flex-wrap:wrap;justify-content:center;padding-top:32px;border-top:1px solid var(--n200) }
.ph-stat span { font-family:var(--fh);font-size:28px;font-weight:800;color:var(--p);display:block;line-height:1 }
.ph-stat small { font-size:12px;color:var(--n400);margin-top:3px;display:block }
.feat-nav { background:var(--white);border-bottom:1px solid var(--n200);position:sticky;top:66px;z-index:100;padding:0 var(--pad) }
.feat-nav-inner { max-width:1400px;margin:0 auto;display:flex;gap:0;overflow-x:auto;scrollbar-width:none }
.feat-nav-inner::-webkit-scrollbar { display:none }
.fn-item { font-family:var(--fh);font-size:13px;font-weight:600;color:var(--n600);padding:14px 18px;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;transition:all .2s;text-decoration:none;display:flex;align-items:center;gap:7px;flex-shrink:0 }
.fn-item:hover { color:var(--p) }
.fn-item.act { color:var(--p);border-bottom-color:var(--p) }
.fn-item i { font-size:13px }
.feat-block { padding:80px var(--pad) }
.feat-block:nth-child(even) { background:var(--n50) }
.fb-inner { max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center }
.fb-inner.rev { direction:ltr }
.fb-inner.rev>* { direction:rtl }
.fb-tag { display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:11px;font-weight:700;padding:4px 14px;border-radius:30px;margin-bottom:14px }
.fb-h2 { font-family:var(--fh);font-size:28px;font-weight:900;color:var(--n900);line-height:1.3;margin-bottom:14px }
.fb-h2 span { color:var(--p) }
.fb-p { font-size:14px;color:var(--n600);line-height:1.8;margin-bottom:24px }
.fb-list { display:flex;flex-direction:column;gap:10px;margin-bottom:28px }
.fb-item { display:flex;align-items:flex-start;gap:12px;padding:10px 14px;background:var(--white);border:1px solid var(--n200);border-radius:var(--r-md);font-size:13px }
.fb-item i { font-size:16px;margin-top:1px;flex-shrink:0 }
.fb-item div { flex:1 }
.fb-item strong { font-family:var(--fh);font-weight:700;color:var(--n900);display:block;margin-bottom:2px }
.fb-item span { font-size:12px;color:var(--n600) }
.mock-panel { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.mock-bar { padding:12px 18px;display:flex;align-items:center;justify-content:space-between }
.mock-bar-dots { display:flex;gap:5px }
.mock-bar-dots i { display:inline-block;width:9px;height:9px;border-radius:50% }
.mock-body { padding:18px }
.mock-title { font-family:var(--fh);font-size:12px;font-weight:700;color:rgba(255,255,255,.9) }
.m-row { display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);font-size:12px;margin-bottom:6px }
.m-badge { font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px;white-space:nowrap }
.m-stat { text-align:center;background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:12px 8px }
.m-stat-val { font-family:var(--fh);font-size:22px;font-weight:800;line-height:1 }
.m-stat-lbl { font-size:9px;color:var(--n400);margin-top:3px;font-family:var(--fh) }
.m-prog-row { margin-bottom:8px }
.m-prog-hd { display:flex;justify-content:space-between;font-size:10px;color:var(--n600);margin-bottom:3px;font-family:var(--fh) }
.m-prog-tr { height:6px;background:var(--n200);border-radius:3px;overflow:hidden }
.m-prog-fl { height:100%;border-radius:3px }
.m-calendar { display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center }
.m-cal-head { font-size:9px;color:var(--n400);font-family:var(--fh);padding:4px 0 }
.m-cal-day { font-size:10px;font-family:var(--fh);padding:5px 0;border-radius:5px;cursor:default }
.m-cal-day.has { background:var(--pp);color:var(--p);font-weight:700 }
.m-cal-day.today { background:var(--p);color:#fff;font-weight:700 }
.m-inv-row { display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--n50);border-radius:var(--r-sm);margin-bottom:6px;font-size:11px }
.m-inv-ico { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0 }
.m-chart-bar { display:flex;align-items:flex-end;gap:6px;height:80px;padding:8px 0 }
.m-bar { flex:1;border-radius:4px 4px 0 0;transition:height .3s }
.m-contract { border:1px solid var(--n200);border-radius:var(--r-md);padding:12px;margin-bottom:8px;font-size:11px }
.m-contract-head { font-family:var(--fh);font-size:12px;font-weight:700;color:var(--n900);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center }
.m-sla-bar { height:8px;background:var(--n200);border-radius:4px;overflow:hidden;margin-top:5px }
.m-sla-fill { height:100%;border-radius:4px }
.sec-int { background:var(--white) }
.int-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px }
.int-card { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:24px;text-align:center;transition:all .25s }
.int-card:hover { transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--p) }
.int-ico { width:56px;height:56px;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-sm);border:1px solid var(--n200);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px }
.int-card h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:5px }
.int-card p { font-size:12px;color:var(--n600);line-height:1.6;margin:0 }
.sec-mobile { background:linear-gradient(145deg,var(--pd) 0%,var(--p) 55%,var(--s) 100%);padding:80px var(--pad) }
.mob-inner { max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center }
.mob-text .tag { background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2) }
.mob-h2 { font-family:var(--fh);font-size:32px;font-weight:900;color:#fff;line-height:1.3;margin-bottom:14px }
.mob-p { font-size:15px;color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:28px }
.mob-feats { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px }
.mf { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:14px;display:flex;align-items:center;gap:10px }
.mf-ico { width:34px;height:34px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0 }
.mf span { font-family:var(--fh);font-size:13px;font-weight:600;color:#fff }
.mob-mockup { background:var(--n900);border-radius:36px;padding:10px;box-shadow:0 28px 60px rgba(0,0,0,.35);max-width:240px;margin:0 auto;border:2px solid rgba(255,255,255,.1) }
.mob-screen { background:var(--white);border-radius:28px;overflow:hidden }
.mob-hd { background:var(--p);padding:12px 14px 10px }
.mob-notch { width:70px;height:5px;background:rgba(0,0,0,.25);border-radius:3px;margin:0 auto 8px }
.mob-hd-row { display:flex;align-items:center;justify-content:space-between }
.mob-hd-title { font-family:var(--fh);font-size:12px;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:2px 8px;border-radius:10px;font-family:var(--fh);font-weight:700 }
.mob-bd { padding:10px 10px 12px }
.mob-task { display:flex;align-items:center;gap:7px;padding:7px 8px;background:var(--n50);border-radius:8px;border:1px solid var(--n100);margin-bottom:5px }
.mob-t-ico { width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0 }
.mob-t-name { font-size:9px;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 7px;border-radius:8px;white-space:nowrap }
.mob-btns { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px }
.mob-btn { background:var(--p);color:#fff;border-radius:8px;padding:7px 6px;text-align:center;font-size:9px;font-weight:700;font-family:var(--fh) }
.mob-btn.out { background:transparent;border:1px solid var(--p);color:var(--p) }
.sec-cta { background:linear-gradient(135deg,var(--pp) 0%,var(--sp) 100%);text-align:center }
.cta-wrap h2 span { color:var(--p) }
.cta-foot { margin-top:20px;font-size:12px;color:var(--n400) }
.cta-foot i { color:var(--s);margin-left:4px }
.ft-col ul li a:hover { color:var(--pl) }

@media(max-width:1100px) {
  .fb-inner,.mob-inner { grid-template-columns:1fr }
  .fb-inner.rev { direction:rtl }
  .int-grid { grid-template-columns:repeat(2,1fr) }
  .mob-feats { grid-template-columns:1fr }
  .mob-mockup { display:none }
}

@media(max-width:768px) {
  section,.feat-block,.sec-mobile { padding:56px 20px }
  .int-grid { grid-template-columns:1fr 1fr }
  .ph-stats { gap:20px }
  .mob-feats { grid-template-columns:1fr 1fr }
}

/* ── قسم القدرات الإضافية ─────────────────────────────────────────
   نصوصه أطول من بطاقات التكاملات، فالمحاذاة يمين لا وسط والشبكة أوسع. */
.sec-caps { background:var(--n50); }
.caps-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px; margin-top:44px; text-align:right;
}
.cap-card {
  background:var(--white); border:1px solid var(--n200);
  border-radius:var(--r-lg); padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:10px; transition:all .25s;
}
.cap-card:hover { border-color:var(--p); box-shadow:var(--sh-md); transform:translateY(-2px); }
.cap-ico {
  width:44px; height:44px; border-radius:12px; background:var(--n50);
  border:1px solid var(--n200); display:flex; align-items:center;
  justify-content:center; font-size:19px; flex:none;
}
.cap-card h4 {
  font-family:var(--fh); font-size:16px; font-weight:800;
  color:var(--n900); margin:0; line-height:1.4;
}
.cap-card p { font-size:13px; color:var(--n600); line-height:1.85; margin:0; }

@media (max-width:768px) {
  .caps-grid { grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .cap-card { padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .cap-card, .cap-card:hover { transition:none; transform:none; }
}