:root { --p:#1A5FA8;--pd:#0E3F75;--pl:#2B7FD4;--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 }
.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-wh { background:#25D366;color:#fff;box-shadow:0 2px 10px rgba(37,211,102,.3) }
.btn-wh:hover { background:#1da856;transform:translateY(-1px) }
.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) }
.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 }
.demo-page { background:linear-gradient(148deg,#EBF4FE 0%,#F5F9FF 50%,#E7F5F0 100%);min-height:calc(100vh - 66px);padding:60px var(--pad) }
.demo-inner { max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start }
.demo-info h1 { font-family:var(--fh);font-size:38px;font-weight:900;color:var(--n900);line-height:1.25;margin-bottom:18px }
.demo-info h1 span { color:var(--p) }
.demo-info p { font-size:16px;color:var(--n600);line-height:1.8;margin-bottom:32px }
.demo-steps { display:flex;flex-direction:column;gap:16px;margin-bottom:40px }
.ds { display:flex;gap:16px;align-items:flex-start;padding:18px;background:var(--white);border-radius:var(--r-lg);border:1px solid var(--n200);box-shadow:var(--sh-sm) }
.ds-num { width:36px;height:36px;min-width:36px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:16px;font-weight:700 }
.ds h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:4px }
.ds p { font-size:13px;color:var(--n600);margin:0;line-height:1.6 }
.trust-row { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px }
.tb { display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--white);border:1px solid var(--n200);border-radius:var(--r-lg);font-size:12px;font-family:var(--fh);font-weight:600;color:var(--n700,#3a4257) }
.tb i { font-size:14px;color:var(--s) }
.contact-options { display:flex;flex-direction:column;gap:14px;margin-bottom:24px }
.co { background:var(--white);border-radius:var(--r-xl);border:1px solid var(--n200);box-shadow:var(--sh-sm);overflow:hidden;transition:all .25s }
.co:hover { box-shadow:var(--sh-md);transform:translateY(-2px) }
.co-head { padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px }
.co-info { display:flex;align-items:center;gap:14px }
.co-ico { width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0 }
.co-title { font-family:var(--fh);font-size:16px;font-weight:800;color:var(--n900) }
.co-sub { font-size:12px;color:var(--n600);margin-top:2px }
.co-action { font-family:var(--fh);font-size:13px;font-weight:600;padding:10px 20px;border-radius:var(--r-md);border:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .2s }
.demo-form { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);padding:36px;position:sticky;top:84px }
.df-title { font-family:var(--fh);font-size:22px;font-weight:900;color:var(--n900);margin-bottom:6px }
.df-sub { font-size:14px;color:var(--n600);margin-bottom:28px }
.df-field { margin-bottom:18px }
.df-label { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--n800);margin-bottom:6px;display:block }
.df-label span { color:var(--a) }
.df-input { width:100%;border:1.5px solid var(--n200);border-radius:var(--r-md);padding:11px 14px;font-family:var(--fb);font-size:14px;color:var(--n900);background:var(--n50);transition:border-color .2s;outline:none }
.df-input:focus { border-color:var(--p);background:var(--white) }
.df-select { width:100%;border:1.5px solid var(--n200);border-radius:var(--r-md);padding:11px 14px;font-family:var(--fb);font-size:14px;color:var(--n900);background:var(--n50);outline:none;cursor:pointer;appearance:none }
.df-select:focus { border-color:var(--p);background:var(--white) }
.df-row { display:grid;grid-template-columns:1fr 1fr;gap:14px }
.df-check-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.df-check { display:flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--n200);border-radius:var(--r-sm);cursor:pointer;transition:all .2s;font-size:13px;font-family:var(--fh) }
.df-check:hover { border-color:var(--p);background:var(--pp) }
.df-check.sel { border-color:var(--p);background:var(--pp);color:var(--p);font-weight:600 }
.df-check i { font-size:11px;flex-shrink:0 }
.df-submit { width:100%;background:linear-gradient(135deg,var(--p),var(--s));color:#fff;border:none;border-radius:var(--r-lg);padding:15px;font-family:var(--fh);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;box-shadow:0 4px 16px rgba(26,95,168,.3) }
.df-submit:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,95,168,.4) }
.df-note { font-size:11px;color:var(--n400);text-align:center;margin-top:12px }
.df-note i { color:var(--s);margin-left:4px }
.success-state { text-align:center;padding:40px 20px;display:none }
.success-state.show { display:block }
.success-ico { width:80px;height:80px;background:var(--sp);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--s);margin:0 auto 20px }
.faq-mini { margin-top:32px;border-top:1px solid var(--n200);padding-top:24px }
.faq-mini h4 { font-family:var(--fh);font-size:15px;font-weight:700;color:var(--n900);margin-bottom:16px }
.fmq { padding:12px 16px;border:1px solid var(--n200);border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;font-family:var(--fh);font-size:13px;font-weight:600;color:var(--n800);display:flex;justify-content:space-between;align-items:center;transition:all .2s }
.fmq:hover { background:var(--pp);border-color:var(--p);color:var(--p) }
.fmq i { font-size:11px;color:var(--n400) }
.fma { display:none;padding:10px 16px;font-size:12px;color:var(--n600);line-height:1.7;background:var(--pp);border-radius:0 0 var(--r-md) var(--r-md);margin-top:-8px;margin-bottom:8px }
.fma.show { display:block }

@media(max-width:1100px) {
  .demo-inner { grid-template-columns:1fr }
  .demo-form { position:static }
}

@media(max-width:768px) {
  section { padding:56px 20px }
  .demo-page { padding:40px 20px }
  .demo-info h1 { font-size:28px }
  .df-row { grid-template-columns:1fr }
  .df-check-grid { grid-template-columns:1fr }
  .trust-row { flex-direction:column }
}