/* الصفحة الرئيسية للمنصة — تصميم مستقل عن واجهات النظام */
@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+060C,U+061B,U+061F}
@font-face{font-family:'Plex';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+060C,U+061B,U+061F}
@font-face{font-family:'Plex';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+060C,U+061B,U+061F}
@font-face{font-family:'Plex';font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+060C,U+061B,U+061F}
@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex';font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'PlexMono';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'PlexMono';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

.lp{
  --paper:#F3EFE7;--paper-2:#EAE4D8;--card:#FBF9F4;--ink:#13110E;--ink-2:#3A352E;--mute:#756E61;--line:#D9D1C1;--line-2:#E6DFD0;
  --teal:#0E5A4F;--teal-2:#1F7A6E;--mint:#D7EBE4;--dark:#0D1412;--dark-2:#162320;--dark-line:#243632;
  --amber:#F2A516;--amber-soft:#FBEBC8;--ok:#1F8A4C;--ok-soft:#DDF1E4;--late:#C8382E;--late-soft:#F9DEDA;
  --f:'Plex','Tajawal',system-ui,sans-serif;--m:'PlexMono',ui-monospace,Menlo,monospace;
  --w:1180px;--r:18px;
  font-family:var(--f);color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body.lp{margin:0;overflow-x:hidden}
.lp a{text-decoration:none}
.lp :where(a,button){color:inherit}
.lp img,.lp svg{display:block;max-width:100%}
.lp button{font:inherit;cursor:pointer}
.lp .num{font-family:var(--m);font-weight:600;font-feature-settings:"tnum";letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate}
.wrap{width:min(var(--w),100% - 40px);margin-inline:auto}
.sec{padding:112px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--m);font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--teal-2);text-transform:uppercase;direction:ltr}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
.h2{font-size:clamp(30px,4.2vw,52px);line-height:1.18;font-weight:700;letter-spacing:-.01em;margin:14px 0 0;max-width:26ch}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:56ch;margin:18px 0 0}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- الأزرار ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;border:1.5px solid var(--ink);font-weight:600;font-size:16px;background:transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-pri{background:var(--ink);color:var(--paper)}
.btn-pri:hover{background:var(--teal);border-color:var(--teal);box-shadow:0 10px 24px rgba(14,90,79,.28)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn .ic{width:20px;height:20px;transition:transform .25s}
.btn:hover .ic.arw{transform:translateX(-4px)}
.btn-sm{height:42px;padding:0 20px;font-size:14.5px}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.btn-amb{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn-amb:hover{background:#ffb938;border-color:#ffb938;box-shadow:0 10px 24px rgba(242,165,22,.3)}

/* ---------- الشريط العلوي ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:18px 0}
.nav.sc{background:rgba(243,239,231,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line);padding:10px 0}
.nav .wrap{display:flex;align-items:center;gap:28px}
.brandlk{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px}
.brandlk img{width:40px;height:40px;border-radius:11px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 auto 0 0;padding:0;font-size:15px;font-weight:500}
.nav ul a{position:relative;padding:6px 0;color:var(--ink-2)}
.nav ul a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--teal-2);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .acts{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.nav .own{font-size:14px;color:var(--mute)}
.nav .own:hover{color:var(--ink)}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;background:transparent;place-items:center}
@media (max-width:900px){
  .nav ul{position:fixed;inset:70px 14px auto 14px;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;margin:0;box-shadow:0 20px 50px rgba(19,17,14,.18);transform:translateY(-14px);opacity:0;pointer-events:none;transition:.25s}
  .nav ul.open{transform:none;opacity:1;pointer-events:auto}
  .nav ul a{display:block;padding:14px 16px;border-radius:12px;font-size:16px}
  .nav ul a::after{display:none}.nav ul a:hover{background:var(--paper)}
  .burger{display:grid}.nav .own{display:none}
}

/* ---------- البطل ---------- */
.hero{padding:150px 0 0;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:calc(100vh - 150px);padding-bottom:70px}
.hero h1{font-size:clamp(40px,6.4vw,86px);line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:20px 0 0}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block;transform:translateY(110%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}.hero h1 .ln:nth-child(3)>span{animation-delay:.24s}
.hero h1 em{font-style:normal;color:var(--teal-2);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;inset:auto 0 .06em 0;height:.13em;background:var(--amber);transform:scaleX(0);transform-origin:right;animation:grow .8s .9s cubic-bezier(.2,.8,.2,1) forwards;z-index:-1}
@keyframes up{to{transform:none}}@keyframes grow{to{transform:scaleX(1)}}
.hero .lead{opacity:0;animation:fade .8s .5s forwards}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;opacity:0;animation:fade .8s .65s forwards}
.hero .proof{display:flex;gap:30px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);opacity:0;animation:fade .8s .8s forwards}
.hero .proof b{display:block;font-family:var(--m);font-size:26px;font-weight:600;direction:ltr;text-align:start}
.hero .proof span{font-size:13.5px;color:var(--mute)}
@keyframes fade{to{opacity:1}}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;min-height:0}.hero{padding-top:118px}}

/* مشهد البيجر */
.scene{position:relative;height:640px;display:grid;place-items:center}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{position:absolute;width:300px;height:300px;border:1.5px solid var(--teal-2);border-radius:50%;opacity:0}
.scene.ready .rings i{animation:ring 2.4s ease-out infinite}
.scene.ready .rings i:nth-child(2){animation-delay:.6s}.scene.ready .rings i:nth-child(3){animation-delay:1.2s}
.rings i.st{opacity:.12;animation:none!important;border-style:dashed}
.rings i.st:nth-child(5){width:460px;height:460px}.rings i.st:nth-child(4){width:600px;height:600px;opacity:.08}
@keyframes ring{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.phone{position:relative;width:292px;height:588px;border-radius:44px;background:var(--ink);padding:11px;box-shadow:0 40px 70px -20px rgba(19,17,14,.45),0 0 0 1.5px #000 inset;z-index:2}
.phone::before{content:"";position:absolute;top:19px;left:50%;width:88px;height:24px;margin-left:-44px;background:#000;border-radius:14px;z-index:3}
.scene.ready .phone{animation:buzz .9s .1s 2}
@keyframes buzz{0%,100%{transform:none}10%{transform:translateX(-5px) rotate(-1.6deg)}20%{transform:translateX(5px) rotate(1.6deg)}30%{transform:translateX(-5px) rotate(-1.6deg)}40%{transform:translateX(5px) rotate(1.6deg)}50%{transform:translateX(-3px) rotate(-1deg)}60%{transform:translateX(3px) rotate(1deg)}70%{transform:none}}
.screen{height:100%;border-radius:34px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;position:relative}
.screen .top{padding:46px 20px 14px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.screen .top img{width:26px;height:26px;border-radius:8px}
.screen .body{flex:1;padding:6px 20px 20px;display:flex;flex-direction:column}
.screen .lab{font-size:12.5px;color:var(--mute)}
.screen .no{font-family:var(--m);font-weight:600;font-size:92px;line-height:1;letter-spacing:-.05em;direction:ltr;text-align:start;margin:2px 0 10px}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:700;background:var(--amber-soft);color:#7A4A00;transition:.4s}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:blink 1.1s infinite}
.scene.ready .pill{background:var(--ok-soft);color:#14612F}.scene.ready .pill i{background:var(--ok);animation:none}
@keyframes blink{50%{opacity:.25}}
.prog{margin:22px 0 8px;height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.prog b{display:block;height:100%;width:0;background:var(--amber);border-radius:inherit;transition:width .3s linear,background .4s}
.scene.ready .prog b{background:var(--ok);width:100%!important}
.screen .tm{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute)}
.screen .tm .num{color:var(--ink);font-size:14px}
.items{margin-top:auto;border-top:1px dashed var(--line);padding-top:12px;font-size:13.5px;display:grid;gap:6px;color:var(--ink-2)}
.items div{display:flex;justify-content:space-between}
.toast{position:absolute;inset:50px 12px auto 12px;background:var(--ink);color:var(--paper);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center;font-size:13.5px;transform:translateY(-140%);transition:transform .55s cubic-bezier(.2,.9,.25,1.2);z-index:4;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.toast .ic{color:var(--amber)}
.toast b{display:block;font-size:14px}
.scene.ready .toast{transform:none}
.scene.done .toast{transform:translateY(-140%)}
.chk{position:absolute;inset:0;background:var(--teal);color:#fff;display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .45s;z-index:3;border-radius:34px}
.scene.done .chk{opacity:1}
.chk svg{width:64px;height:64px;margin:0 auto 12px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chk b{font-size:21px;display:block}.chk span{font-size:13.5px;opacity:.85}
/* بطاقات عائمة */
.tag{position:absolute;z-index:5;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 18px 36px -12px rgba(19,17,14,.28);font-size:13.5px;display:flex;gap:11px;align-items:center;opacity:0;transform:translateY(16px) scale(.96);transition:.55s cubic-bezier(.2,.9,.25,1.1)}
.tag.on{opacity:1;transform:none}
.tag .ic{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--mint);color:var(--teal)}
.tag small{display:block;color:var(--mute);font-size:12px;line-height:1.4}.tag b{display:block;line-height:1.4}
.tag.t1{inset-inline-end:-4px;top:70px}.tag.t2{inset-inline-start:-6px;top:250px}.tag.t3{inset-inline-end:6px;bottom:70px}
.tag.t2 .ic{background:var(--amber-soft);color:#7A4A00}.tag.t3 .ic{background:var(--ok-soft);color:var(--ok)}
@media (max-width:980px){.scene{height:600px;margin-top:20px}.tag.t1{inset-inline-end:2px}.tag.t2{inset-inline-start:0}}
@media (max-width:480px){.phone{transform:scale(.9)}.scene{height:560px}.tag{font-size:12.5px;padding:9px 11px}.tag.t3{display:none}}

/* شريط متحرك */
.tick{border-block:1.5px solid var(--ink);background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap}
.tick .trk{display:inline-flex;gap:0;animation:mq 38s linear infinite;padding-block:15px}
.tick:hover .trk{animation-play-state:paused}
.tick span{display:inline-flex;align-items:center;gap:12px;padding-inline:26px;font-size:15px;font-weight:500}
.tick span::after{content:"";width:7px;height:7px;background:var(--amber);border-radius:50%;margin-inline-start:26px}
.tick .num{color:var(--amber)}
@keyframes mq{to{transform:translateX(50%)}}

/* ---------- المشكلة ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border:1.5px solid var(--ink);border-radius:26px;overflow:hidden;background:var(--card)}
.vs>div{padding:40px 38px}
.vs .old{border-inline-end:1.5px solid var(--ink);background:var(--paper-2)}
.vs h3{font-size:22px;margin:0 0 22px;display:flex;align-items:center;gap:12px}
.vs h3 small{font-family:var(--m);font-size:12px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border-radius:99px;border:1.5px solid currentColor;direction:ltr}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vs li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);font-size:16.5px}
.vs li:first-child{border-top:0}
.vs li .ic{margin-top:3px}
.vs .old li{color:var(--mute)}.vs .old li span{position:relative;display:inline}
.vs .old li span::after{content:"";position:absolute;inset:50% 0 auto 0;height:2px;background:var(--late);transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.vs.in .old li span::after{transform:scaleX(1)}
.vs .old .ic{color:var(--late)}.vs .new .ic{color:var(--ok)}
@media (max-width:820px){.vs{grid-template-columns:1fr}.vs .old{border-inline-end:0;border-bottom:1.5px solid var(--ink)}.vs>div{padding:30px 24px}}

/* ---------- كيف يعمل ---------- */
.how{background:var(--dark);color:var(--paper)}
.how .eyebrow{color:var(--amber)}.how .lead{color:#B9C4BF}
.how .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;margin-top:60px;align-items:start}
.steps{display:grid}
.stp{padding:34px 0 34px 0;border-top:1px solid var(--dark-line);display:grid;grid-template-columns:64px 1fr;gap:6px 18px;opacity:.38;transition:opacity .4s;cursor:pointer}
.stp:last-child{border-bottom:1px solid var(--dark-line)}
.stp.on{opacity:1}
.stp .n{font-family:var(--m);font-size:15px;color:var(--amber);padding-top:5px;direction:ltr;text-align:start}
.stp h3{margin:0;font-size:26px;line-height:1.3}
.stp p{margin:8px 0 0;color:#B9C4BF;font-size:16px;grid-column:2;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s}
.stp.on p{max-height:140px;opacity:1}
.stp .bar{grid-column:2;height:2px;background:var(--dark-line);margin-top:16px;overflow:hidden;display:none}
.stp.on .bar{display:block}.stp .bar i{display:block;height:100%;width:0;background:var(--amber)}
.stp.on .bar i{animation:fill 5.5s linear forwards}
@keyframes fill{to{width:100%}}
.stage{position:sticky;top:96px;height:520px;border-radius:26px;background:var(--dark-2);border:1px solid var(--dark-line);overflow:hidden}
.pn{position:absolute;inset:0;padding:30px;opacity:0;transform:translateY(22px) scale(.985);transition:.6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pn.on{opacity:1;transform:none;pointer-events:auto}
.mock{height:100%;border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;font-size:13.5px}
.mock .mh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;background:var(--card)}
.mock .mh .dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.mock .mh small{margin-inline-start:auto;color:var(--mute);font-weight:500}
.pos{display:grid;grid-template-columns:1.2fr 1fr;flex:1;min-height:0}
.pos .cat{padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-content:start;background:var(--paper)}
.pos .p{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 10px;display:grid;gap:3px;font-weight:600;transition:.25s}
.pos .p small{font-weight:500;color:var(--mute);font-family:var(--m);direction:ltr;text-align:start}
.pos .p.hit{border-color:var(--teal-2);background:var(--mint);transform:scale(.97)}
.pos .tk{border-inline-start:1px solid var(--line);padding:14px;display:flex;flex-direction:column;background:var(--card)}
.pos .tk .r{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.pos .tot{margin-top:auto;display:flex;justify-content:space-between;font-weight:700;font-size:17px;padding-top:10px}
.pos .go{margin-top:10px;background:var(--teal);color:#fff;border-radius:11px;text-align:center;padding:11px;font-weight:700}
.kds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;flex:1;background:var(--paper)}
.kt{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px;display:flex;flex-direction:column;gap:6px;border-top:5px solid var(--amber)}
.kt.ok{border-top-color:var(--ok)}.kt.late{border-top-color:var(--late);background:var(--late-soft);border-color:#EFB8B2}
.kt b{font-size:16px}.kt .tmr{font-family:var(--m);font-weight:600;font-size:22px;direction:ltr;text-align:start}
.kt.late .tmr{color:var(--late);animation:blink 1.2s infinite}
.kt .ln{color:var(--ink-2);font-size:13px;line-height:1.5}
.kt .tg{margin-top:auto;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;align-self:flex-start;background:var(--amber-soft);color:#7A4A00}
.kt.ok .tg{background:var(--ok-soft);color:#14612F}.kt.late .tg{background:var(--late);color:#fff}
.alert{flex:1;display:grid;place-items:center;background:var(--paper)}
.alert .ph{width:230px;border-radius:28px;background:var(--ink);padding:9px}
.alert .ph .s{border-radius:21px;background:#2a2723;height:300px;padding:44px 12px 12px;position:relative;overflow:hidden}
.nt{background:rgba(243,239,231,.96);color:var(--ink);border-radius:15px;padding:11px 12px;display:flex;gap:10px;font-size:12.5px;line-height:1.5;transform:translateY(-30px);opacity:0}
.pn.on .nt{animation:drop .7s .3s cubic-bezier(.2,.9,.25,1.2) forwards}.pn.on .nt:nth-child(2){animation-delay:1.4s}
.nt img{width:30px;height:30px;border-radius:8px}.nt b{display:block;font-size:13px}
@keyframes drop{to{transform:none;opacity:1}}
.tl{padding:22px;display:grid;gap:0;align-content:start;background:var(--paper);flex:1}
.tl .row{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:flex-start;position:relative;padding-bottom:20px}
.tl .row::before{content:"";position:absolute;inset:22px auto 0 10px;width:2px;background:var(--line)}
.tl .row:last-child::before{display:none}
.tl .row i{width:22px;height:22px;border-radius:50%;background:var(--teal);display:block;position:relative;z-index:1;border:4px solid var(--paper);box-shadow:0 0 0 2px var(--teal)}
.tl .row.am i{background:var(--amber);box-shadow:0 0 0 2px var(--amber)}.tl .row.gr i{background:var(--ok);box-shadow:0 0 0 2px var(--ok)}
.tl b{display:block;font-size:15px}.tl small{color:var(--mute)}
.tl .num{font-size:19px;color:var(--teal)}
.pn.on .tl .row{animation:fade .6s both}
.pn.on .tl .row:nth-child(2){animation-delay:.3s}.pn.on .tl .row:nth-child(3){animation-delay:.6s}.pn.on .tl .row:nth-child(4){animation-delay:.9s}
.tl .row{opacity:0}.pn.on .tl .row{opacity:1}
@media (max-width:980px){
  .how .grid{grid-template-columns:1fr;gap:30px}.stage{position:relative;top:0;height:470px;order:-1}.stp h3{font-size:22px}.stp{padding:24px 0}
}
@media (max-width:520px){.pn{padding:14px}.pos{grid-template-columns:1fr}.pos .tk{display:none}.kds{grid-template-columns:1fr 1fr}.kds .kt:nth-child(3){display:none}.stage{height:420px}}

/* ---------- المزايا (شبكة) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:56px}
.bc{grid-column:span 2;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:28px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;display:flex;flex-direction:column;min-height:250px}
.bc:hover{transform:translateY(-5px);box-shadow:6px 6px 0 var(--ink)}
.bc.w4{grid-column:span 4}.bc.w3{grid-column:span 3}.bc.w6{grid-column:span 6}
.bc .ib{width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--teal);display:grid;place-items:center;margin-bottom:18px;border:1.5px solid var(--ink)}
.bc h3{margin:0 0 8px;font-size:21px;line-height:1.35}
.bc p{margin:0;color:var(--ink-2);font-size:15.5px}
.bc.dk{background:var(--teal);color:var(--paper);border-color:var(--ink)}.bc.dk p{color:#CFE6DF}.bc.dk .ib{background:var(--paper);color:var(--teal)}
.bc.am{background:var(--amber-soft)}.bc.am .ib{background:var(--amber)}
.bc .vis{margin-top:auto;padding-top:22px}
.bc .kt{color:var(--ink)}
.mini-k{display:flex;gap:10px}.mini-k .kt{flex:1;padding:9px 10px;border-radius:11px;font-size:12.5px;gap:2px}
.mini-k .kt .tmr{font-size:18px}
.stock{display:grid;gap:11px}
.stock .sr{display:grid;grid-template-columns:78px 1fr 34px;gap:10px;align-items:center;font-size:13px}
.stock .tr{height:9px;border-radius:9px;background:var(--line-2);overflow:hidden;border:1px solid var(--line)}
.stock .tr i{display:block;height:100%;width:var(--v);background:var(--teal-2);transform-origin:right;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.bc.in .stock .tr i{transform:scaleX(1)}.stock .tr i.lo{background:var(--late)}
.qrbox{display:flex;gap:16px;align-items:center}
.qrbox svg{width:84px;height:84px;flex:none}
.inv{font-family:var(--m);font-size:12px;line-height:1.7;direction:ltr;color:var(--ink-2);border:1px dashed var(--ink);border-radius:10px;padding:12px 14px;background:var(--paper)}
.inv{min-width:158px}.inv .rw{display:flex;justify-content:space-between;gap:18px}
.swat{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.swat button{width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:var(--c);transition:.25s;position:relative}
.swat button:hover{transform:scale(1.12)}.swat button.on{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--ink)}
.th{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:center}
.thm{--b:#1F7A6E;--bs:#E3F2EF;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;transition:.4s}
.thm .h{background:#161A1F;color:#fff;padding:11px 14px;display:flex;gap:9px;align-items:center;font-weight:700;font-size:13.5px}
.thm .h i{width:11px;height:11px;border-radius:50%;background:var(--b);transition:.4s}
.thm .c{padding:14px;display:grid;gap:10px}
.thm .c div{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--bs);transition:.4s;font-size:13px;color:#1A1E23}
.thm .c div b{color:var(--b);font-family:var(--m);transition:.4s}
.thm .c .bt{background:var(--b);color:#fff;justify-content:center;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chips span{padding:9px 16px;border:1.5px solid var(--ink);border-radius:99px;font-size:14.5px;font-weight:500;background:var(--card);transition:.2s}
.chips span:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
@media (max-width:980px){.bc,.bc.w3{grid-column:span 3}.bc.w4,.bc.w6{grid-column:span 6}.th{grid-template-columns:1fr}}
@media (max-width:640px){.bc,.bc.w3,.bc.w4,.bc.w6{grid-column:span 6}.bc{padding:22px;min-height:0}}

/* ---------- التحليلات ---------- */
.an{background:var(--paper-2)}
.an .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;margin-top:10px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.kp{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;padding:20px 22px}
.kp b{display:block;font-family:var(--m);font-size:38px;font-weight:600;line-height:1.1;letter-spacing:-.04em;direction:ltr;text-align:start}
.kp span{font-size:14px;color:var(--mute)}.kp.rd b{color:var(--late)}.kp.gn b{color:var(--ok)}
.chart{background:var(--card);border:1.5px solid var(--ink);border-radius:22px;padding:28px;box-shadow:8px 8px 0 var(--ink)}
.chart .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-weight:700;font-size:17px;gap:12px}
.chart .hd small{font-weight:500;color:var(--mute);font-size:12.5px}
.br{display:grid;grid-template-columns:96px 1fr 60px;gap:12px;align-items:center;padding:9px 0;font-size:14.5px}
.br .tr{height:22px;background:var(--paper);border:1px solid var(--line);border-radius:7px;overflow:hidden;position:relative}
.br .tr i{position:absolute;inset:0 0 0 auto;width:var(--v);background:var(--teal-2);border-radius:6px 0 0 6px;transform:scaleX(0);transform-origin:right;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.br .tr i.late{background:var(--late)}
.chart.in .br .tr i{transform:scaleX(1)}
.br .num{font-size:14px;text-align:end}
.chart .lg{display:flex;gap:18px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-size:13px;color:var(--mute)}
.chart .lg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-inline-end:7px;vertical-align:-1px}
.late-box{margin-top:16px;background:var(--late-soft);border:1px solid #EFB8B2;border-radius:12px;padding:13px 16px;font-size:14px;display:flex;gap:12px;align-items:center;color:#7C201A}
@media (max-width:980px){.an .grid{grid-template-columns:1fr;gap:40px}}

/* ---------- البوابات ---------- */
.portals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border:1.5px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--card)}
.pt{padding:32px 26px;border-inline-end:1.5px solid var(--ink);display:flex;flex-direction:column;gap:12px;transition:background .3s,color .3s;position:relative}
.pt:last-child{border-inline-end:0}
.pt:hover{background:var(--ink);color:var(--paper)}.pt:hover p,.pt:hover .path{color:#C8C2B5}.pt:hover .ib{background:var(--amber);color:var(--ink)}
.pt .ib{width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--teal);display:grid;place-items:center;border:1.5px solid currentColor;transition:.3s}
.pt h3{margin:6px 0 0;font-size:21px}
.pt p{margin:0;color:var(--ink-2);font-size:15px;flex:1}
.pt .path{font-family:var(--m);font-size:12px;color:var(--mute);direction:ltr;text-align:start;border-top:1px dashed currentColor;padding-top:12px;margin-top:6px;word-break:break-all}
@media (max-width:980px){.portals{grid-template-columns:1fr 1fr}.pt:nth-child(2){border-inline-end:0}.pt:nth-child(-n+2){border-bottom:1.5px solid var(--ink)}}
@media (max-width:560px){.portals{grid-template-columns:1fr}.pt{border-inline-end:0;border-bottom:1.5px solid var(--ink)}.pt:last-child{border-bottom:0}}

/* ---------- الأمان ---------- */
.secu{background:var(--dark);color:var(--paper)}
.secu .eyebrow{color:var(--amber)}.secu .lead{color:#B9C4BF}
.secu .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;margin-top:50px;align-items:start}
.sl{display:grid;gap:0}
.sl div{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--dark-line)}
.sl div:last-child{border-bottom:1px solid var(--dark-line)}
.sl .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--dark-2);border:1px solid var(--dark-line);color:var(--amber)}
.sl b{display:block;font-size:18px;margin-bottom:3px}.sl span{color:#B9C4BF;font-size:15px}
.term{background:#070B0A;border:1px solid var(--dark-line);border-radius:18px;overflow:hidden;font-family:var(--m);font-size:12.5px;direction:ltr;position:sticky;top:96px}
.term .tb{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid var(--dark-line);align-items:center;color:#7C8D88}
.term .tb i{width:10px;height:10px;border-radius:50%;background:#2A3A36}
.term .tb span{margin-left:10px}
.term pre{margin:0;padding:18px;min-height:330px;color:#9FB3AD;line-height:2;white-space:pre-wrap;font-family:inherit}
.term pre .g{color:#4ADE80}.term pre .a{color:var(--amber)}.term pre .r{color:#F87171}.term pre .d{color:#51635E}
.term pre::after{content:"▍";color:var(--amber);animation:blink 1s infinite}
@media (max-width:980px){.secu .grid{grid-template-columns:1fr}.term{position:static}}

/* ---------- الأسئلة ---------- */
.faq{max-width:860px;margin-top:46px}
.faq details{border-top:1.5px solid var(--ink)}.faq details:last-child{border-bottom:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font-size:20px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none;position:relative;transition:.3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;width:13px;height:1.7px;background:currentColor;transition:.3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--ink);color:var(--paper);transform:rotate(180deg)}.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:hover{color:var(--teal-2)}
.faq .a{overflow:hidden;color:var(--ink-2);font-size:16.5px;padding:0 60px 24px 4px;max-width:70ch;animation:op .4s}
@keyframes op{from{opacity:0;transform:translateY(-6px)}}

/* ---------- الختام ---------- */
.cta-s{background:var(--teal);color:var(--paper);overflow:hidden;position:relative}
.cta-s .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cta-s h2{font-size:clamp(32px,5vw,64px);line-height:1.1;margin:0;font-weight:700;letter-spacing:-.02em}
.cta-s p{font-size:18px;color:#CFE6DF;max-width:48ch;margin:18px 0 0}
.cta-s .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.cta-s .rg{position:relative;height:280px}
.cta-s .rg i{position:absolute;inset:50% auto auto 50%;width:140px;height:140px;margin:-70px;border:1.5px solid var(--paper);border-radius:50%;opacity:0;animation:ring 3.2s ease-out infinite}
.cta-s .rg i:nth-child(2){animation-delay:1s}.cta-s .rg i:nth-child(3){animation-delay:2s}
.cta-s .rg img{position:absolute;inset:50% auto auto 50%;width:96px;height:96px;margin:-48px;border-radius:26px;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
@media (max-width:820px){.cta-s .wrap{grid-template-columns:1fr}.cta-s .rg{height:200px;order:-1}}
.foot{background:var(--ink);color:#B7B0A2;padding:54px 0 36px;font-size:14.5px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot b{color:var(--paper);display:block;margin-bottom:12px;font-size:15.5px}
.foot a{display:block;padding:4px 0;transition:.2s}.foot a:hover{color:var(--amber);transform:translateX(-3px)}
.foot .bm{display:flex;align-items:center;gap:12px;color:var(--paper);font-weight:700;font-size:19px;margin-bottom:12px}.foot .bm img{width:38px;height:38px;border-radius:10px}
.foot .cp{grid-column:1/-1;border-top:1px solid #2B2823;padding-top:22px;margin-top:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
@media (max-width:700px){.foot .wrap{grid-template-columns:1fr}}

/* ---------- نافذة دخول المطعم ---------- */
dialog.dg{border:1.5px solid var(--ink);border-radius:24px;padding:0;background:var(--card);color:var(--ink);width:min(440px,calc(100% - 28px));box-shadow:10px 10px 0 var(--ink);font-family:var(--f)}
dialog.dg::backdrop{background:rgba(19,17,14,.55);backdrop-filter:blur(3px)}
dialog.dg[open]{animation:pop .35s cubic-bezier(.2,.9,.25,1.15)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.dg form{padding:30px;display:grid;gap:16px}
.dg h3{margin:0;font-size:24px}.dg p{margin:0;color:var(--mute);font-size:15px}
.dg .sl2{display:flex;direction:ltr;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.dg .sl2 span{padding:0 12px;display:grid;place-items:center;background:var(--paper-2);color:var(--mute);font-family:var(--m);font-size:13px;border-right:1.5px solid var(--ink)}
.dg .sl2 input{flex:1;border:0;height:52px;padding:0 14px;font:500 17px var(--m);outline:none;background:transparent;min-width:0}
.dg .sl2:focus-within{box-shadow:0 0 0 3px var(--mint)}
.dg .x{position:absolute;inset:14px auto auto 14px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center}
.dg .x:hover{background:var(--ink);color:var(--paper)}
.dg .own2{text-align:center;font-size:14px;color:var(--mute)}.dg .own2 a{color:var(--teal-2);font-weight:600}

/* ---------- ظهور عند التمرير ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.js-off .rv{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.hero h1 .ln>span{transform:none}.hero .lead,.hero .cta,.hero .proof{opacity:1}
}