/* /demo — "اكتشف متجرك الإلكتروني قبل أن تبدأ" (design: img4/معرض تصاميم متجر إلكتروني عربي.png) */
.demo-page{
  --ink:#0c1a4b;--royal:#1f56e8;--royal-d:#1236b4;--sky:#dbe8ff;
  background:linear-gradient(180deg,#a7c3fb 0,#bdd1fd 160px,#d3e2ff 340px,#e1ebff 520px,#e6eefe 70%,#dfe9ff 100%);
  background-attachment:scroll;position:relative;
}
.dm-hero svg,.dm-cards svg,.dm-final svg,.pv svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- decoration ---- */
.dm-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.dm-leaf{position:absolute;left:-58px;top:96px;width:200px;height:330px;filter:blur(1.4px);stroke:none}
.dm-leaf path{stroke:none}
.dm-glow{position:absolute;border-radius:50%;filter:blur(40px)}
.dm-glow-1{left:-10%;top:150px;width:60%;height:420px;background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent)}
.dm-glow-2{right:-8%;bottom:120px;width:55%;height:420px;background:radial-gradient(closest-side,rgba(255,255,255,.65),transparent)}
.demo-page main,.demo-page .footer{position:relative;z-index:1}

/* ---- hero ---- */
.dm-hero{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1fr;gap:20px;align-items:center;padding-top:22px;padding-bottom:36px}
.dm-hero-text{padding-inline-start:6px}
.dm-hero h1{position:relative;font-weight:900;line-height:1.2;letter-spacing:-.3px;color:var(--ink)}
.dm-h1a{display:block;font-size:clamp(30px,4.3vw,52px);white-space:nowrap;text-shadow:0 2px 0 rgba(255,255,255,.35)}
.dm-brush{position:relative;display:inline-block;margin-top:8px;padding:2px 44px 8px;font-size:clamp(34px,5vw,62px);line-height:1.2;color:#fff;isolation:isolate}
.dm-brush svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;stroke:none}
.dm-brush svg path:first-child{fill:#1f4ff0;filter:drop-shadow(0 8px 12px rgba(20,60,200,.45))}
.dm-brush .hi{fill:none;stroke:rgba(255,255,255,.22);stroke-width:5}
.dm-line2{position:relative;display:inline-block}
.dm-spark{position:absolute;right:-42px;top:14px;width:44px;height:44px;stroke:#ffc928;stroke-width:4.5}
.dm-hero-text p{margin-top:20px;font-weight:700;font-size:clamp(16px,1.75vw,21px);line-height:1.75;color:var(--ink)}
.dm-badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.dm-pill{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px;border-radius:30px;font-weight:800;font-size:18px;white-space:nowrap}
.dm-pill svg{width:28px;height:28px;flex:none}
.dm-pill-green{color:#fff;background:linear-gradient(180deg,#27a93f,#14772a);box-shadow:0 12px 22px -12px rgba(10,100,30,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.dm-pill-sky{color:#1245c9;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(205,224,255,.85));border:1.5px solid rgba(255,255,255,.9);box-shadow:0 12px 22px -14px rgba(20,60,200,.5)}
.dm-hero-art img{width:100%;height:auto;filter:drop-shadow(0 26px 24px rgba(10,30,120,.38))}

/* ---- cards ---- */
.dm-cards{direction:ltr;position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:48px 12px;padding-top:20px;padding-bottom:30px;--g:12px}
.dm-card{direction:rtl;position:relative;flex:0 0 calc((100% - 2 * var(--g)) / 3);min-width:0;padding:46px 16px 18px;border-radius:30px;text-align:center;
  border:1.5px solid var(--bd);background:linear-gradient(180deg,var(--bg1),var(--bg2));box-shadow:0 24px 40px -26px rgba(20,60,160,.45),inset 0 0 0 5px rgba(255,255,255,.6)}
.dm-card.dm-wide{flex-basis:calc((100% - 2 * var(--g)) * .37)}
.dm-card img{width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 14px 12px rgba(10,30,90,.28))}
.dm-card p{margin-top:8px;font-weight:700;font-size:16px;line-height:1.6;color:var(--ink);min-height:52px}
.c-min{--bd:#d7d2ff;--bg1:#efeeff;--bg2:#fbfbff}
.c-nat{--bd:#bfe3c8;--bg1:#dcf2e2;--bg2:#f4fbf6}
.c-mod{--bd:#c5e6cc;--bg1:#e4f4e6;--bg2:#f6fbf6}
.c-pre{--bd:#e6d6a8;--bg1:#f6eed9;--bg2:#fcf9f0}
.c-biz{--bd:#bcd1fb;--bg1:#dde9ff;--bg2:#f3f7ff}
.dm-tag{position:absolute;top:-24px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px 0 22px;border-radius:24px;color:#fff;
  font-family:Poppins,Tajawal,sans-serif;font-weight:600;font-size:21px;white-space:nowrap;direction:ltr;box-shadow:0 12px 20px -10px rgba(10,30,100,.55),inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1.5px rgba(255,255,255,.28)}
.dm-tag i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.85);font-style:normal;font-size:15px;font-weight:600}
.dm-tag svg{width:28px;height:28px;stroke-width:1.9}
.t-min{background:linear-gradient(180deg,#7452ee,#4a2dce)}
.t-nat{background:linear-gradient(180deg,#2aa543,#147a2c)}
.t-mod{background:linear-gradient(180deg,#13813a,#0a5424)}
.t-pre{background:linear-gradient(180deg,#c99a33,#8d6414)}
.t-biz{background:linear-gradient(180deg,#1c55c9,#0b2f86)}
.dm-btns{display:flex;gap:10px;margin-top:12px}
.dm-try,.dm-pre{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:17px;font-family:inherit;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s}
.dm-try{flex:1.45;font-size:18px;color:#fff;border:0;background:linear-gradient(180deg,#2a63f0,#1237b5);box-shadow:0 14px 24px -14px rgba(20,60,200,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.dm-try svg{width:25px;height:25px;flex:none}
.dm-pre{flex:1;font-size:13.5px;line-height:1.3;color:var(--ink);background:linear-gradient(180deg,#fff,#eef4ff);border:1.5px solid rgba(150,180,240,.55);box-shadow:0 10px 18px -14px rgba(20,60,160,.6),inset 0 1px 0 #fff;padding:0 8px;text-align:start}
.dm-pre svg{width:26px;height:26px;flex:none;stroke-width:1.9;color:var(--ink)}
.dm-try:hover,.dm-pre:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ---- final CTA ---- */
.dm-final{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:34px;padding-bottom:56px}
.dm-final-text h2{font-weight:900;font-size:clamp(22px,2.6vw,31px);line-height:1.3;color:var(--ink)}
.dm-final-text p{margin-top:8px;font-weight:600;font-size:16.5px;line-height:1.75;color:#3a4a78}
.dm-cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;flex:none;min-width:350px;height:82px;padding:0 34px;border-radius:44px;color:#fff;font-weight:900;font-size:30px;white-space:nowrap;
  background:linear-gradient(180deg,#ffb23a,#f47a07);box-shadow:0 0 0 7px rgba(255,255,255,.55),0 24px 36px -14px rgba(240,110,0,.85),inset 0 2px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s}
.dm-cta:hover{transform:translateY(-3px)}
.dm-cta svg{width:38px;height:38px;stroke-width:1.7}
.dm-feats{display:flex;gap:30px;flex:none}
.dm-feats li{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:15px;line-height:1.3;text-align:center;color:var(--ink)}
.dm-feats svg{width:46px;height:46px;stroke-width:1.7;color:#102a78}
.dm-feats li:nth-child(2) svg{fill:#102a78}

/* ---- phone preview ---- */
.pv[hidden]{display:none}
.pv{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:14px}
.pv-back{position:absolute;inset:0;background:rgba(8,16,46,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:pvFade .2s}
.pv-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-height:100%;animation:pvPop .25s cubic-bezier(.2,.9,.3,1.15)}
.pv-bar{display:flex;align-items:center;gap:14px;width:100%;color:#fff;font-weight:800}
.pv-bar b{flex:1;font-family:Poppins,Tajawal,sans-serif;font-size:19px}
.pv-bar a{font-size:14px;font-weight:700;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.pv-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.18)}
.pv-phone{position:relative;width:min(402px,calc(100vw - 28px));height:min(842px,calc(100vh - 92px));padding:11px;border-radius:50px;background:#0b0d12;box-shadow:0 0 0 2px #3a3f4b,0 0 0 5px #1a1d25,0 40px 80px -20px rgba(0,0,0,.7)}
.pv-phone iframe{position:absolute;inset:40px 11px 11px;width:calc(100% - 22px);height:calc(100% - 51px);border:0;border-radius:0 0 40px 40px;background:#fff;display:block}
.pv-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:104px;height:26px;border-radius:14px;background:#000;z-index:2;pointer-events:none}
@keyframes pvFade{from{opacity:0}to{opacity:1}}
@keyframes pvPop{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
body.noscroll{overflow:hidden}

/* ---- responsive ---- */
@media (max-width:1100px){
  .dm-cta{min-width:300px;font-size:26px}
  .dm-feats{gap:20px}
}
@media (max-width:980px){
  .dm-hero{grid-template-columns:1fr;gap:6px;padding-top:12px}
  .dm-hero-text{text-align:center;padding-inline-start:0}
  .dm-badges{justify-content:center}
  .dm-hero-art{max-width:620px;margin-inline:auto}
  .dm-cards{--g:14px}
  .dm-card,.dm-card.dm-wide{flex-basis:calc((100% - var(--g)) / 2)}
  .dm-final{flex-direction:column;text-align:center;gap:26px}
  .dm-feats{order:3}
}
@media (max-width:680px){
  .dm-h1a{white-space:normal}
  .dm-spark{right:-30px;top:8px;width:34px;height:34px}
  .dm-hero-text p br,.dm-final-text p br{display:none}
  .dm-leaf{opacity:.55}
  .dm-brush{padding:2px 28px 6px}
  .dm-pill{height:48px;font-size:16px;padding:0 18px}
  .dm-cards{gap:46px 0}
  .dm-card,.dm-card.dm-wide{flex-basis:100%}
  .dm-cta{min-width:0;width:100%;height:72px;font-size:25px}
  .dm-feats{gap:16px;width:100%;justify-content:space-around}
  .pv-phone{border-radius:44px}.pv-phone iframe{border-radius:0 0 34px 34px}
}