*{margin:0;padding:0;box-sizing:border-box}
:root{
 --rgb-fill:255,255,255;--rgb-shade:0,0,0;--rgb-text:236,224,239;--rgb-label:205,177,212;--rgb-panel:22,16,44;
 --c-void:#08060f;--c-space:#140f2a;--c-deep:#0d0a1c;--c-indigo:#2d1f5e;--c-violet:#7d57a3;
 --c-nebula:#8e6bae;--c-lavender:#a27cb7;--c-pearl-lav:#cdb1d4;--c-pearl:#d8bad8;--c-moon:#6c4b9d;
 --c-shadow-violet:#5c3f86;--c-cosmic:#2e2a6e;
 --text-primary:#fff;--text-body:rgba(var(--rgb-text),.74);--text-muted:rgba(var(--rgb-text),.56);
 --surface-card:rgba(var(--rgb-fill),.055);--surface-hi:rgba(var(--rgb-fill),.1);
 --border-glass:rgba(var(--rgb-fill),.12);--border-subtle:rgba(var(--rgb-fill),.07);
 --glass-blur:blur(26px) saturate(190%) brightness(1.04);
 --grad-heading:linear-gradient(118deg,#f6eff8 0%,#cdb1d4 46%,#a27cb7 100%);
 --grad-button:linear-gradient(135deg,#8e6bae,#5c3f86);
 --shadow-deep:0 26px 64px -18px rgba(var(--rgb-shade),.7);
 --glow:0 0 70px rgba(142,107,174,.3);
 --success:#8fe6b0;--warn:#e8c06a;
 --font-ar:'Noto Kufi Arabic',sans-serif;--font-en:'Inter',system-ui,sans-serif;--font-mono:ui-monospace,'SF Mono',monospace;
 --r-md:12px;--r-lg:18px;--r-xl:26px;--r-2xl:34px;--r-pill:999px;
 --ease:cubic-bezier(.34,1.56,.64,1);--maxw:1220px;
}
/* التمرير الأفقي يُقصّ على html لا على body — لأن overflow على body يكسر position:sticky */
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--c-void);color:var(--text-body);font-family:var(--font-ar);
 font-size:15px;line-height:1.85;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* ── cosmic backdrop ── */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg::before{content:'';position:absolute;inset:0;
 background:radial-gradient(1100px 700px at 78% -8%,rgba(93,63,134,.5),transparent 62%),
            radial-gradient(900px 620px at 8% 22%,rgba(46,42,110,.42),transparent 60%),
            radial-gradient(1000px 780px at 50% 108%,rgba(108,75,157,.34),transparent 64%),
            linear-gradient(180deg,#08060f,#0d0a1c 40%,#0a0715)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;animation:drift 26s ease-in-out infinite}
.orb.a{width:520px;height:520px;background:#5c3f86;top:-140px;inset-inline-end:-90px}
.orb.b{width:440px;height:440px;background:#2e2a6e;top:44%;inset-inline-start:-150px;animation-delay:-9s}
.orb.c{width:400px;height:400px;background:#69478a;bottom:-120px;inset-inline-end:24%;animation-delay:-16s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-34px,44px) scale(1.09)}}
.stars{position:absolute;inset:0;opacity:.5;
 background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 68% 8%,#e5d6ee,transparent),
 radial-gradient(1.5px 1.5px at 84% 42%,#fff,transparent),radial-gradient(1px 1px at 32% 62%,#cdb1d4,transparent),
 radial-gradient(1.3px 1.3px at 54% 88%,#fff,transparent),radial-gradient(1px 1px at 92% 74%,#d8bad8,transparent),
 radial-gradient(1.2px 1.2px at 22% 92%,#fff,transparent),radial-gradient(1px 1px at 46% 32%,#a27cb7,transparent);
 background-size:100% 100%;animation:tw 7s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.5}50%{opacity:.26}}
/* ── primitives ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.glass{background:var(--surface-card);border:1px solid var(--border-glass);
 -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r-xl)}
.en{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.lic{width:1em;height:1em;flex:none}
a{color:inherit;text-decoration:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--r-pill);
 background:rgba(142,107,174,.15);border:1px solid rgba(162,124,183,.3);color:var(--c-pearl-lav);
 font-size:11.5px;font-weight:600;letter-spacing:.2px}
.chip .lic{width:13px;height:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:var(--r-pill);
 font-family:var(--font-ar);font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;
 transition:transform .24s var(--ease),box-shadow .24s,background .2s;white-space:nowrap}
.btn .lic{width:16px;height:16px}
.btn.primary{background:var(--grad-button);color:#fff;box-shadow:0 14px 34px -12px rgba(142,107,174,.8)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(142,107,174,.95)}
.btn.ghost{background:rgba(var(--rgb-fill),.06);border-color:var(--border-glass);color:var(--text-primary)}
.btn.ghost:hover{background:rgba(var(--rgb-fill),.12);transform:translateY(-2px)}
.btn.sm{padding:9px 18px;font-size:12.5px}
h1,h2,h3,h4{font-family:var(--font-ar);color:var(--text-primary);line-height:1.45;font-weight:700}
h2{font-size:clamp(25px,3.6vw,40px);letter-spacing:-.4px}
h3{font-size:19px}
.grad{background:var(--grad-heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:1.6px;
 color:var(--c-lavender);text-transform:uppercase;margin-bottom:16px}
.eyebrow .ln{flex:1;height:1px;background:linear-gradient(90deg,rgba(162,124,183,.42),transparent)}
section{position:relative;padding:clamp(52px,6.6vw,92px) 0}
.lead{font-size:clamp(15px,1.6vw,17px);color:var(--text-body);max-width:64ch;line-height:2.05}
/* ── header ── */
header{position:fixed;top:0;inset-inline:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;
 border-bottom:1px solid transparent}
header.on{background:rgba(12,9,26,.82);-webkit-backdrop-filter:blur(22px) saturate(180%);
 backdrop-filter:blur(22px) saturate(180%);border-bottom-color:var(--border-subtle)}
.nav{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mk{width:38px;height:38px;display:grid;place-items:center}
.brand .mk svg{width:100%;height:100%}
.brand .wd{font-family:var(--font-ar);font-size:17px;font-weight:700;color:var(--text-primary);line-height:1.1}
.brand .wd i{display:block;font-family:var(--font-en);font-style:normal;font-size:8.5px;letter-spacing:3.4px;
 color:var(--c-pearl-lav);opacity:.85;font-weight:500}
.nav .links{display:flex;gap:4px;margin-inline-start:auto}
.nav .links a{padding:9px 15px;border-radius:var(--r-pill);font-size:13.5px;color:var(--text-body);
 transition:color .2s,background .2s}
.nav .links a:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.07)}
.nav .acts{display:flex;gap:9px;align-items:center;flex:none}
.burger{display:none;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--border-glass);
 background:rgba(var(--rgb-fill),.06);color:var(--text-primary);cursor:pointer;place-items:center}
.burger .lic{width:18px;height:18px}
/* الدرج مخفي دائمًا ما لم نكن على شاشة صغيرة والقائمة مفتوحة */
.drawer{display:none}
/* ── hero ── */
.hero{padding-top:clamp(120px,15vw,168px);padding-bottom:0;text-align:center}
.hero h1{font-size:clamp(31px,5.6vw,63px);line-height:1.28;letter-spacing:-1.2px;margin:20px auto 20px;max-width:16ch}
.hero .lead{margin:0 auto;text-align:center}
.hero .cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin:34px 0 16px}
.micro{font-size:12px;color:var(--text-muted);display:flex;gap:9px;justify-content:center;flex-wrap:wrap;align-items:center}
.micro span{display:inline-flex;align-items:center;gap:6px}
.micro .lic{width:13px;height:13px;color:var(--success)}
/* ── device frame ── */
.frame{position:relative;border-radius:var(--r-2xl);overflow:hidden;border:1px solid rgba(var(--rgb-fill),.16);
 background:rgba(10,7,22,.7);box-shadow:0 50px 120px -30px rgba(0,0,0,.92),var(--glow)}
.frame .bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border-subtle);
 background:rgba(var(--rgb-fill),.05)}
.frame .dots{display:flex;gap:6px}
.frame .dots i{width:10px;height:10px;border-radius:50%;background:rgba(var(--rgb-fill),.2)}
.frame .addr{flex:1;text-align:center;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
 background:rgba(var(--rgb-fill),.06);border-radius:var(--r-pill);padding:5px 14px;max-width:340px;margin:0 auto;
 direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame img{display:block;width:100%;height:auto}
.heroshot{max-width:1120px;margin:52px auto 0;position:relative}
.heroshot::after{content:'';position:absolute;inset-inline:6%;bottom:-32px;height:80px;
 background:radial-gradient(ellipse at center,rgba(142,107,174,.42),transparent 72%);filter:blur(26px);z-index:-1}
.fade-b{position:absolute;inset-inline:0;bottom:0;height:36%;
 background:linear-gradient(180deg,transparent,rgba(8,6,15,.92));pointer-events:none}
/* ── stat strip ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);
 border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border-glass)}
.stats div{background:rgba(12,9,26,.72);padding:26px 18px;text-align:center}
.stats b{display:block;font-family:var(--font-mono);font-size:clamp(23px,3vw,31px);color:var(--text-primary);
 letter-spacing:-.5px;margin-bottom:5px}
.stats small{font-size:11.5px;color:var(--text-muted);line-height:1.6}
/* ── pain / answer ── */
.pain{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.pain ul{list-style:none;display:grid;gap:13px}
.pain li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.9}
.pain li .lic{width:17px;height:17px;margin-top:5px;flex:none}
.pain .bad li .lic{color:#e0667e}
.pain .good li .lic{color:var(--success)}
.pcard{padding:30px}
.pcard h3{margin-bottom:16px;font-size:17px}
.pcard.good{border-color:rgba(143,230,176,.24);background:linear-gradient(160deg,rgba(143,230,176,.05),rgba(var(--rgb-fill),.05))}
/* ── feature rows ── */
.frow{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,5vw,64px);align-items:center;
 padding:clamp(38px,5vw,58px) 0}
.frow.rev>.txt{order:2}
.frow .txt h3{font-size:clamp(21px,2.7vw,30px);margin:14px 0 14px;letter-spacing:-.4px}
.frow .txt p{font-size:14.5px;line-height:2.05;color:var(--text-body)}
.frow ul{list-style:none;display:grid;gap:10px;margin-top:20px}
.frow li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-body)}
.frow li .lic{width:15px;height:15px;color:var(--c-lavender);margin-top:5px;flex:none}
.fic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
 background:linear-gradient(135deg,rgba(142,107,174,.3),rgba(92,63,134,.22));border:1px solid rgba(162,124,183,.3);
 color:var(--c-pearl-lav)}
.fic .lic{width:22px;height:22px}
/* ── modules ── */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:13px}
.mod{padding:20px;border-radius:var(--r-lg);background:var(--surface-card);border:1px solid var(--border-subtle);
 transition:transform .25s var(--ease),border-color .25s,background .25s}
.mod:hover{transform:translateY(-3px);border-color:rgba(162,124,183,.4);background:var(--surface-hi)}
.mod .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px;
 background:rgba(142,107,174,.18);color:var(--c-pearl-lav)}
.mod .ic .lic{width:17px;height:17px}
.mod b{display:block;font-size:14px;color:var(--text-primary);margin-bottom:3px}
.mod i{display:block;font-family:var(--font-en);font-style:normal;font-size:10px;letter-spacing:1.4px;
 color:var(--text-muted);margin-bottom:8px;direction:ltr}
.mod p{font-size:12px;color:var(--text-muted);line-height:1.8}
/* ── compliance band ── */
.band{border-radius:var(--r-2xl);padding:clamp(30px,4.5vw,52px);
 background:linear-gradient(135deg,rgba(46,42,110,.42),rgba(92,63,134,.28));
 border:1px solid rgba(162,124,183,.26)}
.band .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:26px;margin-top:30px}
.band .g>div .lic{width:22px;height:22px;color:var(--c-pearl-lav);margin-bottom:11px}
.band .g b{display:block;color:var(--text-primary);font-size:14.5px;margin-bottom:7px}
.band .g p{font-size:12.5px;color:var(--text-body);line-height:1.9}
/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{padding:28px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:22px;inset-inline-end:24px;
 font-family:var(--font-mono);font-size:44px;font-weight:700;color:rgba(162,124,183,.16);line-height:1}
.step b{display:block;color:var(--text-primary);font-size:16px;margin:0 0 10px}
.step p{font-size:13px;color:var(--text-muted);line-height:1.9}
.step .lic{width:22px;height:22px;color:var(--c-lavender);margin-bottom:14px}
/* ── pricing cards ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{padding:30px;display:flex;flex-direction:column;gap:15px;position:relative;
 transition:transform .25s var(--ease),border-color .25s}
.plan:hover{transform:translateY(-4px)}
.plan.hot{border-color:rgba(162,124,183,.55);box-shadow:0 0 56px rgba(142,107,174,.22);
 background:linear-gradient(165deg,rgba(142,107,174,.12),rgba(var(--rgb-fill),.05))}
.plan .tag{position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(50%);
 padding:5px 15px;border-radius:var(--r-pill);background:var(--grad-button);color:#fff;font-size:10.5px;font-weight:700;
 box-shadow:0 8px 22px -8px rgba(142,107,174,.9);white-space:nowrap}
.plan h3{font-size:19px}
.plan .desc{font-size:12.5px;color:var(--text-muted);line-height:1.85;min-height:44px}
.plan .price{display:flex;align-items:baseline;gap:8px;padding:6px 0 4px}
.plan .price b{font-family:var(--font-mono);font-size:40px;color:var(--text-primary);letter-spacing:-1.5px;line-height:1}
.plan .price small{font-size:12px;color:var(--text-muted)}
.plan .was{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);text-decoration:line-through;opacity:.7}
.plan ul{list-style:none;display:grid;gap:10px;flex:1;margin:4px 0}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:12.8px;color:var(--text-body);line-height:1.75}
.plan li .lic{width:14px;height:14px;color:var(--success);margin-top:4px;flex:none}
/* ── toggle ── */
.tog{display:inline-flex;padding:5px;border-radius:var(--r-pill);background:rgba(var(--rgb-fill),.06);
 border:1px solid var(--border-glass);gap:4px}
.tog button{padding:9px 22px;border-radius:var(--r-pill);border:0;background:transparent;cursor:pointer;
 font-family:var(--font-ar);font-size:13px;font-weight:600;color:var(--text-muted);transition:.22s}
.tog button.on{background:var(--grad-button);color:#fff;box-shadow:0 8px 22px -10px rgba(142,107,174,.9)}
.tog .sv{font-size:10px;color:var(--success);margin-inline-start:6px}
/* ── faq ── */
.faq{display:grid;gap:11px;max-width:850px;margin:0 auto}
.q{border-radius:var(--r-lg);background:var(--surface-card);border:1px solid var(--border-subtle);overflow:hidden;
 transition:border-color .22s,background .22s}
.q[open]{border-color:rgba(162,124,183,.34);background:var(--surface-hi)}
.q summary{padding:19px 24px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
 font-size:14.5px;font-weight:600;color:var(--text-primary)}
.q summary::-webkit-details-marker{display:none}
.q summary .lic{width:17px;height:17px;color:var(--c-lavender);transition:transform .25s var(--ease);
 margin-inline-start:auto;flex:none}
.q[open] summary .lic{transform:rotate(180deg)}
.q .a{padding:0 24px 21px;font-size:13.5px;color:var(--text-body);line-height:2.05}
/* ── final cta ── */
.final{text-align:center;border-radius:var(--r-2xl);padding:clamp(42px,6vw,76px) 26px;
 background:linear-gradient(150deg,rgba(92,63,134,.4),rgba(46,42,110,.3));
 border:1px solid rgba(162,124,183,.3);box-shadow:var(--glow)}
.final h2{margin-bottom:16px}
.final .lead{margin:0 auto 30px}
/* ── footer ── */
footer{border-top:1px solid var(--border-subtle);padding:52px 0 34px;margin-top:24px}
.fcols{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:34px;margin-bottom:38px}
.fcols h4{font-size:12.5px;color:var(--text-primary);margin-bottom:15px;letter-spacing:.3px}
.fcols ul{list-style:none;display:grid;gap:10px}
.fcols a{font-size:12.5px;color:var(--text-muted);transition:color .2s}
.fcols a:hover{color:var(--c-pearl-lav)}
.fcols p{font-size:12.5px;color:var(--text-muted);line-height:2;max-width:36ch}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;
 border-top:1px solid var(--border-subtle);font-size:11.5px;color:var(--text-muted)}
/* ── reveal ── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
/* ── responsive ── */
@media(max-width:960px){
 .nav .links{display:none}
 .burger{display:grid}
 .nav .acts .hideM{display:none}
 .pain,.frow,.steps,.plans{grid-template-columns:1fr!important}
 .frow.rev>.txt{order:0}
 .stats{grid-template-columns:1fr 1fr}
 .fcols{grid-template-columns:1fr 1fr}
 .drawer{position:fixed;inset:0;z-index:110;background:rgba(10,7,22,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:none;flex-direction:column;
  padding:88px 26px 26px;gap:6px}
 body.menu .drawer{display:flex}
 .drawer a{padding:15px 18px;border-radius:var(--r-md);font-size:16px;color:var(--text-primary);
  border:1px solid var(--border-subtle)}
 .drawer .btn{margin-top:12px}
}
@media(max-width:560px){
 .stats{grid-template-columns:1fr}
 .fcols{grid-template-columns:1fr}
 .hero .cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important;transition-duration:.01ms!important}
 .rv{opacity:1;transform:none}
}

.sx-0{width:38px}
.sx-1{padding:30px 0 0}
.sx-2{margin:16px 0 34px}
.sx-3{padding-top:20px}
.sx-4{margin-bottom:8px}
.sx-5{margin-top:16px}
.sx-6{margin:16px 0 32px}
.sx-7{margin-top:14px}
.sx-8{margin-bottom:34px}
.sx-9{text-align:center;margin-top:32px}
.sx-10{text-align:center;font-size:12px;color:var(--text-muted);margin-top:14px}
.sx-11{margin-bottom:32px}
.sx-12{margin-top:18px}
.sx-13{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.sx-14{margin-bottom:16px}
.sx-15{display:flex;gap:18px}