:root { --p:#1A5FA8;--pd:#0E3F75;--pp:#EBF3FB;--s:#1E7A5C;--sp:#E7F5F0;--a:#E86920;--ap:#FEF0E7;--w:#D4920A;--wp:#FEF7E7;--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) }
a { text-decoration:none }
.tag-p { 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;background:var(--pp);color:var(--p);border:1px solid rgba(26,95,168,.15) }
.tag-s { 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;background:var(--sp);color:var(--s);border:1px solid rgba(30,122,92,.15) }
.bc-inner { max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--n400) }
.bc-inner span { color:var(--p);font-weight:600 }
.page-hero { background:linear-gradient(148deg,#EBF4FE 0%,#F3F8FF 45%,#EBF4FE 100%);padding:72px var(--pad) 60px }
.ph-h1 span { color:var(--p) }
.int-cards { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.int-card { background:var(--white);border:1px solid var(--n200);border-radius:var(--r-lg);padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh-sm);transition:all .2s }
.int-card:hover { border-color:var(--p);box-shadow:var(--sh-md) }
.ic-ico { width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0 }
.ic-name { font-family:var(--fh);font-size:12px;font-weight:700;color:var(--n900) }
.ic-type { font-size:10px;color:var(--n400) }
.ic-badge { font-size:9px;font-weight:700;font-family:var(--fh);padding:2px 8px;border-radius:8px;white-space:nowrap;margin-right:auto }
.sec-cat { background:var(--n50) }
.cat-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px }
.cat { background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);transition:all .25s }
.cat:hover { transform:translateY(-3px);box-shadow:var(--sh-lg) }
.cat-head { padding:22px 26px;display:flex;align-items:center;gap:14px }
.cat-ico { width:50px;height:50px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0 }
.cat-title { font-family:var(--fh);font-size:17px;font-weight:800;color:var(--n900) }
.cat-sub { font-size:12px;color:var(--n600);margin-top:3px }
.cat-body { padding:0 26px 24px }
.cat-items { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.ci { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-md);padding:10px 12px;display:flex;align-items:center;gap:8px;transition:all .2s }
.ci:hover { background:var(--white);border-color:var(--p) }
.ci-ico { width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0 }
.ci-name { font-family:var(--fh);font-size:11px;font-weight:700;color:var(--n900) }
.ci-desc { font-size:9px;color:var(--n600);margin-top:1px }
.ci-badge { font-size:8px;font-weight:700;font-family:var(--fh);padding:2px 7px;border-radius:6px;margin-right:auto;white-space:nowrap }
.sec-api { background:var(--white) }
.api-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:48px }
.api-mock { background:var(--n900);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-lg) }
.api-dots { display:flex;gap:6px;margin-bottom:16px }
.api-dot { width:10px;height:10px;border-radius:50% }
.api-code { font-family:'Courier New',monospace;font-size:12px;line-height:1.8 }
.kw { color:#61DAFB }
.str { color:#98C379 }
.num { color:#D19A66 }
.key { color:#E5C07B }
.cmt { color:#5C6370;font-style:italic }
.ep { color:#C678DD }
.api-feats { display:flex;flex-direction:column;gap:14px }
.af { display:flex;gap:14px;align-items:flex-start;padding:18px;background:var(--n50);border-radius:var(--r-lg);border:1px solid var(--n200) }
.af-ico { width:42px;height:42px;min-width:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px }
.af h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:4px }
.af p { font-size:13px;color:var(--n600);margin:0;line-height:1.6 }
.sec-saudi { background:var(--n50) }
.saudi-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px }
.sa { background:var(--white);border:1px solid var(--n200);border-radius:var(--r-xl);padding:24px 18px;text-align:center;transition:all .25s }
.sa:hover { transform:translateY(-3px);box-shadow:var(--sh-md) }
.sa-ico { width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px }
.sa h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:6px }
.sa p { font-size:12px;color:var(--n600);line-height:1.6;margin-bottom:10px }
.sa-badge { display:inline-block;font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px }
.sec-faq { background:var(--white) }
.faq-list { margin-top:48px;display:flex;flex-direction:column;gap:12px;max-width:800px }
.faq-item { border:1px solid var(--n200);border-radius:var(--r-lg);overflow:hidden }
.faq-q { padding:16px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);background:var(--white);transition:background .2s }
.faq-q:hover,.faq-q.open { background:var(--pp) }
.faq-q.open { color:var(--p) }
.faq-q i { font-size:12px;color:var(--p);transition:transform .3s;flex-shrink:0 }
.faq-q.open i { transform:rotate(180deg) }
.faq-a { display:none;padding:0 20px 16px;font-size:13px;color:var(--n600);line-height:1.75;background:var(--pp) }
.sec-cta { background:linear-gradient(145deg,var(--pd),var(--p),var(--s));text-align:center;padding:80px var(--pad) }
.cta-wrap h2 { font-family:var(--fh);font-size:36px;font-weight:900;color:#fff;margin-bottom:16px;line-height:1.3 }
.cta-wrap p { font-size:16px;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:36px }

@media(max-width:1100px) {
  .ph-inner,.api-grid { grid-template-columns:1fr }
  .cat-grid { grid-template-columns:1fr }
  .saudi-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:768px) {
  section,.sec-cta { padding:56px 20px }
  .cat-items,.int-cards { grid-template-columns:1fr }
  .saudi-grid { grid-template-columns:1fr 1fr }
}

/* قسم «قبل أن تبدأ» — أسئلة تخطيط التكامل. */
.sec-plan { background: var(--white); padding: 80px var(--pad) }
.sec-plan .sec-sub { margin-bottom: 34px }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px }
.plan-card { background: var(--n50); border: 1px solid var(--n200); border-radius: var(--r-lg); padding: 22px 24px }
.plan-n { width: 34px; height: 34px; border-radius: 50%; background: var(--p); color: #fff; font-family: var(--fh); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px }
.plan-card h3 { font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--n900); margin-bottom: 8px; line-height: 1.5 }
.plan-card p { font-size: 14px; line-height: 1.8; color: var(--n600) }
.plan-note { display: flex; gap: 14px; align-items: flex-start; background: var(--pp); border: 1px solid rgba(26,95,168,.14); border-radius: var(--r-lg); padding: 18px 22px; margin-top: 24px }
.plan-note i { color: var(--p); font-size: 18px; margin-top: 3px; flex-shrink: 0 }
.plan-note p { font-size: 14px; line-height: 1.85; color: var(--n800) }
.plan-note a { color: var(--p); text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 768px) { .sec-plan { padding: 52px 20px } }