/* تصميم «مدار» للموقع العام. الألوان: forest #04342C، lime #CDEE8F، mint #9FE3C8. الخطوط: Alexandria للعناوين و IBM Plex Sans Arabic للنص */
body{margin:0;background:#020F0C}
a{color:#CDEE8F}a:hover{color:#ffffff}
.o{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:#ffffff;direction:rtl;line-height:1.8;overflow-x:clip;background:#020F0C;--lime:#CDEE8F;--rx:0;--ry:0}
.o h1,.o h2,.o h3,.o .d{font-family:'Alexandria','IBM Plex Sans Arabic',sans-serif;margin:0;letter-spacing:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;font-family:'Alexandria',sans-serif;font-weight:700;font-size:17px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background .3s ease,color .3s ease}
.btn-lime{background:var(--lime);color:#04342C;box-shadow:0 0 0 0 rgba(205,238,143,.0),0 12px 40px rgba(205,238,143,.25)}
.btn-lime:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 6px rgba(205,238,143,.18),0 18px 50px rgba(205,238,143,.4);color:#04342C}
.btn-line{border-color:rgba(255,255,255,.28);color:#ffffff;background:rgba(255,255,255,.04)}
.btn-line:hover{border-color:var(--lime);color:var(--lime)}
.btn-dark{background:#04342C;color:#ffffff}.btn-dark:hover{background:#020F0C;color:var(--lime)}

/* الهيرو */
.hero{position:relative;min-height:1150px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding-top:200px;box-sizing:border-box}
.sky{position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 58%,rgba(31,122,90,.55),rgba(2,15,12,0) 70%);pointer-events:none}
.grid-floor{position:absolute;left:-40%;right:-40%;bottom:-30%;height:62%;transform:perspective(600px) rotateX(74deg);transform-origin:50% 0;background-image:linear-gradient(rgba(205,238,143,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(205,238,143,.22) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);pointer-events:none}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 28% 42%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 74% 22%,rgba(205,238,143,.8),transparent),radial-gradient(1px 1px at 88% 48%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 56% 12%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 40% 30%,rgba(205,238,143,.6),transparent),radial-gradient(1px 1px at 8% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 94% 70%,rgba(255,255,255,.4),transparent);pointer-events:none}
.headline{position:relative;z-index:4;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.big{font-size:104px;line-height:1.08;font-weight:900;max-width:1100px;background:linear-gradient(100deg,#ffffff 0%,#ffffff 40%,var(--lime) 50%,#ffffff 60%,#ffffff 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:999px;border:1px solid rgba(205,238,143,.35);background:rgba(4,52,44,.6);font-size:15px;color:#DDEBE5;backdrop-filter:blur(6px)}
.live{width:10px;height:10px;border-radius:50%;background:var(--lime);display:inline-block}

.stage{position:absolute;left:50%;top:830px;width:0;height:0;z-index:2;perspective:1500px}
.core{position:absolute;left:-270px;top:-270px;width:540px;height:540px;transform-style:preserve-3d;transform:rotateX(calc(var(--ry) * 14deg)) rotateY(calc(var(--rx) * -18deg));transition:transform .4s ease-out}
.gyro{position:absolute;inset:0;transform-style:preserve-3d}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(205,238,143,.75);box-shadow:0 0 30px rgba(205,238,143,.25),inset 0 0 30px rgba(205,238,143,.15)}
.ring.r2{inset:40px;border-color:rgba(255,255,255,.35)}
.ring.r3{inset:80px;border-width:3px}
.ring.r4{inset:120px;border-color:rgba(205,238,143,.4);border-style:dashed}
.heart{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:40px;background:linear-gradient(145deg,var(--lime),#7FBF5A);display:grid;place-items:center;color:#04342C;font-family:'Alexandria',sans-serif;font-weight:900;font-size:44px;box-shadow:0 0 80px rgba(205,238,143,.7),0 0 160px rgba(205,238,143,.35);transform:translateZ(0)}
.orbit{position:absolute;left:-400px;top:-400px;width:800px;height:800px;transform-style:preserve-3d;transform:rotateX(70deg) rotateZ(0)}
.orbit-line{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(205,238,143,.35)}
.pin{position:absolute;width:0;height:0;transform-style:preserve-3d}
.pill{position:absolute;transform:translate(-50%,-50%) rotateZ(0) rotateX(-70deg);white-space:nowrap;padding:10px 18px;border-radius:999px;background:rgba(4,52,44,.92);border:1px solid rgba(205,238,143,.5);font-family:'Alexandria',sans-serif;font-weight:700;font-size:16px;color:#ffffff;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.pill b{color:var(--lime);font-weight:800}
.beam{position:absolute;left:-1px;top:120px;width:2px;height:420px;background:linear-gradient(var(--lime),transparent);opacity:.6;filter:blur(.5px)}
.puddle{position:absolute;left:-320px;top:470px;width:640px;height:110px;border-radius:50%;background:radial-gradient(closest-side,rgba(205,238,143,.35),transparent);filter:blur(10px)}


/* الأقسام */
.sec{padding:150px 0;position:relative}
.kicker{display:inline-block;font-family:'Alexandria',sans-serif;font-weight:700;color:var(--lime);font-size:17px;margin-bottom:14px}
.h2{font-size:64px;line-height:1.15;font-weight:900}
.lede{font-size:20px;color:#A9C7BC;max-width:720px;margin:20px 0 0}

/* بنتو الذكاء الاصطناعي */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:20px;margin-top:64px}
.cell{position:relative;border-radius:30px;padding:30px;background:linear-gradient(180deg,rgba(10,74,62,.55),rgba(4,52,44,.25));border:1px solid rgba(205,238,143,.18);overflow:hidden;text-decoration:none;color:#ffffff;display:flex;flex-direction:column;gap:12px;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .5s ease;transform:perspective(1000px) rotateX(0) rotateY(0)}
.cell:hover{transform:perspective(1000px) rotateX(4deg) rotateY(-6deg) translateY(-8px);border-color:rgba(205,238,143,.7);box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(205,238,143,.25);color:#ffffff}
.cell::after{content:"";position:absolute;inset:-1px;border-radius:30px;background:radial-gradient(400px 200px at 80% 0%,rgba(205,238,143,.18),transparent 60%);pointer-events:none}
.c-wa{grid-column:span 3;grid-row:span 2}
.c-auto{grid-column:span 3}
.c-rep{grid-column:span 2}
.c-erp{grid-column:span 1}
.c-mkt{grid-column:span 6;flex-direction:row;align-items:center;gap:40px}
.cell h3{font-size:26px;font-weight:800;line-height:1.35}
.cell p{margin:0;color:#A9C7BC;font-size:16px}
.chat{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:22px;background:rgba(2,15,12,.6);border:1px solid rgba(205,238,143,.15)}
.msg{max-width:82%;padding:12px 16px;font-size:15px;line-height:1.6}
.msg.in{align-self:flex-start;border-radius:18px 18px 4px 18px;background:rgba(255,255,255,.1)}
.msg.out{align-self:flex-end;border-radius:18px 18px 18px 4px;background:var(--lime);color:#04342C}
.typing{align-self:flex-end;display:flex;gap:5px;padding:12px 16px;border-radius:18px;background:rgba(205,238,143,.2)}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.flow{position:relative;height:110px;margin-top:auto}
.node{position:absolute;top:35px;width:62px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(205,238,143,.4);display:grid;place-items:center;font-size:12px;font-weight:600}
.wire{position:absolute;top:55px;height:2px;background:rgba(205,238,143,.25)}
.spark{position:absolute;top:51px;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:auto}
.bars span{flex:1;border-radius:8px 8px 3px 3px;background:rgba(205,238,143,.3);transform-origin:50% 100%}
.bars span.hi{background:var(--lime)}
.chipv{margin-top:auto;align-self:center;width:84px;height:84px;border-radius:22px;border:2px solid var(--lime);display:grid;place-items:center;position:relative}
.chipv::before,.chipv::after{content:"";position:absolute;inset:-14px;border-radius:30px;border:1px solid rgba(205,238,143,.45)}
.chipv::after{inset:-30px;border-radius:38px;border-color:rgba(205,238,143,.2)}
.write{flex:1;display:flex;flex-direction:column;gap:12px}
.write span{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.18);transform-origin:100% 50%}
.cores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:20px}
.core-l{padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#ffffff;display:flex;flex-direction:column;gap:4px;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.core-l:hover{background:var(--lime);color:#04342C;border-color:var(--lime);transform:translateY(-4px)}
.core-l:hover small{color:#04342C}
.core-l small{color:#A9C7BC;font-size:14px}

/* Vibe coding */
.vibe{background:#04342C;border-radius:44px;padding:72px;margin:0 32px;position:relative;overflow:hidden}
.switch{display:inline-flex;padding:6px;border-radius:999px;background:rgba(2,15,12,.6);border:1px solid rgba(205,238,143,.25);margin-top:36px}
.switch button{font:inherit;font-family:'Alexandria',sans-serif;font-weight:700;font-size:16px;min-height:48px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;background:transparent;color:#DDEBE5;transition:background .3s ease,color .3s ease}
.switch button.on{background:var(--lime);color:#04342C}
.vgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;margin-top:40px;align-items:stretch}
.editor{border-radius:26px;background:#020F0C;border:1px solid rgba(205,238,143,.2);padding:24px;min-height:330px;direction:ltr;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;position:relative;overflow:hidden}
.editor .top{display:flex;gap:8px;margin-bottom:18px}
.editor .top i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.cl{display:flex;align-items:center;gap:12px;height:30px}
.cl em{font-style:normal;color:rgba(255,255,255,.3);width:22px;text-align:right}
.cl span{height:10px;border-radius:5px;background:rgba(205,238,143,.55);transform-origin:0 50%}
.cl span.w{background:rgba(255,255,255,.3)}
.ok{margin-inline-start:auto;font-family:'IBM Plex Sans Arabic',sans-serif;direction:rtl;font-size:12px;color:#04342C;background:var(--lime);border-radius:999px;padding:0 10px;line-height:22px}
.meter{display:flex;flex-direction:column;gap:26px;justify-content:center}
.mrow .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.mtrack{height:22px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.mfill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lime),#9FD56B);transition:width 1.1s cubic-bezier(.6,0,.2,1)}
.mfill.old{background:rgba(221,235,229,.5)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.trio div{border-top:2px solid var(--lime);padding-top:18px}

/* أرقام كبيرة */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.num{font-family:'Alexandria',sans-serif;font-weight:900;font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--lime);direction:ltr;text-align:right}
.num-l{font-size:18px;color:#A9C7BC;margin-top:10px}

/* كاروسيل ثلاثي الأبعاد للأعمال */
.carousel-stage{height:560px;perspective:1800px;position:relative;margin-top:60px}
.carousel{position:absolute;left:50%;top:40px;width:340px;height:420px;margin-left:-170px;transform-style:preserve-3d}
.slide{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:#04342C;border:1px solid rgba(205,238,143,.35);text-decoration:none;color:#ffffff;display:flex;flex-direction:column;backface-visibility:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.slide .scr{flex:1;margin:20px 20px 0;border-radius:16px 16px 0 0;background:#EEF4EF;padding:16px}
.slide .scr .m{height:8px;border-radius:5px;background:#B8D4C6;margin-bottom:9px}
.slide .scr .m.l{background:#CDEE8F;width:42%;height:26px;border-radius:8px}
.slide .cap{padding:20px 22px}
.slide .cap h3{font-size:20px;font-weight:800}
.slide .cap small{color:var(--lime);font-size:14px}
.reflect{position:absolute;left:50%;bottom:0;width:900px;height:80px;margin-left:-450px;border-radius:50%;background:radial-gradient(closest-side,rgba(205,238,143,.25),transparent);filter:blur(12px)}

/* مسار */
.road{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;margin-top:64px}
.road::before{content:"";position:absolute;top:36px;right:0;left:0;height:2px;background:rgba(205,238,143,.25)}
.runner{position:absolute;top:30px;right:0;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 20px 4px rgba(205,238,143,.7)}
.stop{position:relative;display:flex;flex-direction:column;gap:12px}
.stop .n{width:72px;height:72px;border-radius:24px;background:#020F0C;border:2px solid var(--lime);display:grid;place-items:center;font-family:'Alexandria',sans-serif;font-weight:900;font-size:28px;color:var(--lime)}

/* الختام */
.finale{background:var(--lime);color:#04342C;padding:140px 0 0;position:relative;overflow:hidden}
.finale .huge{font-size:120px;line-height:1.05;font-weight:900;color:#04342C}
.lead-card{background:#020F0C;color:#ffffff;border-radius:36px;padding:48px;margin-top:60px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;position:relative;top:80px;box-shadow:0 40px 100px rgba(4,52,44,.45)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-size:14px;color:#DDEBE5;margin-bottom:6px;font-weight:500}
.form input,.form select,.form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;min-height:52px;padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#ffffff}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--lime);border-color:transparent}
.form .full{grid-column:1/-1}
.foot{background:#020F0C;color:#A9C7BC;padding:180px 0 36px}
.foot a{color:#DDEBE5;text-decoration:none}.foot a:hover{color:var(--lime)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.wa{position:fixed;left:24px;bottom:24px;width:62px;height:62px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:30}


/* الرسومات (فيكتور) */
.ill{display:block;width:100%;height:auto;overflow:visible}
.ill-auto{max-width:340px;margin-top:auto;align-self:center}
.ill-rep{max-width:250px;margin-top:auto;align-self:center}
.ill-erp{max-width:150px;margin-top:auto;align-self:center}
.ill-mkt{flex:0 0 280px;max-width:280px}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(205,238,143,.15);font-size:14px;color:#DDEBE5}
.chat-head .avatar{width:40px;height:40px;flex:none}
.chat-head b{font-family:'Alexandria',sans-serif;color:#ffffff;display:block;font-size:15px}
.chat-head small{color:var(--lime);font-size:12px}
.ci{width:46px;height:46px;margin-bottom:10px;color:#CDEE8F}
.ci .acc{fill:var(--lime)}
.core-l:hover .ci{color:#04342C}.core-l:hover .ci .acc{fill:#04342C}
.vhead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.vhead .ill{max-width:420px;justify-self:center}
.stop .ill{max-width:210px;margin:6px 0 4px}
.slide .scr{padding:0;overflow:hidden;background:#EEF4EF}
.slide .scr .ill{height:100%;width:100%}
.lead-ill{max-width:260px}
.flowline{stroke-dasharray:7 9}
.gear,.bars3 rect,.floaty,.floaty2,.rocket,.blink,.typing3 rect,.car,.pulse,.pulse2,.spinner,.waves{transform-box:fill-box;transform-origin:center}
.bars3 rect{transform-origin:50% 100%}
.typing3 rect{transform-origin:0 50%}
@keyframes v-dash{to{stroke-dashoffset:-32}}
@keyframes v-spin{to{transform:rotate(360deg)}}
@keyframes v-bar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes v-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes v-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes v-type{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
@keyframes v-car{0%{transform:translate(-110px,70px)}100%{transform:translate(0,0)}}
@keyframes v-pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes v-wave{0%,100%{opacity:.4}50%{opacity:1}}
.motion .flowline{animation:v-dash 1.4s linear infinite}
.motion .gear{animation:v-spin 6s linear infinite}
.motion .bars3 rect{animation:v-bar 2.6s ease-in-out infinite}
.motion .bars3 rect:nth-child(2){animation-delay:-.5s}.motion .bars3 rect:nth-child(3){animation-delay:-1s}.motion .bars3 rect:nth-child(4){animation-delay:-1.5s}.motion .bars3 rect:nth-child(5){animation-delay:-2s}
.motion .floaty{animation:v-float 4s ease-in-out infinite}
.motion .floaty2{animation:v-float 5s ease-in-out -1.5s infinite}
.motion .rocket{animation:v-float 3s ease-in-out infinite}
.motion .blink{animation:v-blink 4s ease-in-out infinite}
.motion .typing3 rect{animation:v-type 4.5s ease-in-out infinite}
.motion .typing3 rect:nth-child(2){animation-delay:.3s}.motion .typing3 rect:nth-child(3){animation-delay:.6s}.motion .typing3 rect:nth-child(4){animation-delay:.9s}.motion .typing3 rect:nth-child(5){animation-delay:1.2s}
.motion .car{animation:v-car 5s cubic-bezier(.6,0,.4,1) infinite alternate}
.motion .pulse,.motion .pulse2{animation:v-pulse 2s ease-out infinite}
.motion .spinner{animation:v-spin 1.6s linear infinite}
.motion .waves path{animation:v-wave 1.4s ease-in-out infinite}.motion .waves path:nth-child(2){animation-delay:.3s}
@media (max-width:1100px){.vhead{grid-template-columns:1fr}.vhead .ill{max-width:320px}.ill-mkt{flex-basis:auto;max-width:260px}}


/* التنقل المشترك وخدمات الذكاء الاصطناعي */
.topbar{display:block;background:var(--lime);color:#04342C;text-align:center;font-size:14px;font-weight:600;padding:9px 16px;text-decoration:none}
.topbar:hover{color:#04342C;background:#ffffff}
.topbar b{font-family:'Alexandria',sans-serif;font-weight:800}
.nav2{display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(2,15,12,.6);border:1px solid rgba(205,238,143,.18);backdrop-filter:blur(8px)}
.nav2 a{color:#DDEBE5;text-decoration:none;font-size:14px;padding:8px 14px;border-radius:999px;white-space:nowrap}
.nav2 a:hover{color:#ffffff;background:rgba(205,238,143,.12)}
.nav2 a.ai{color:#CDEE8F;font-weight:600}
.nav2 a.on{background:var(--lime);color:#04342C;font-weight:700}
.mstrip{display:none;gap:8px;overflow-x:auto;padding:0 20px 12px;scrollbar-width:none}
.mstrip a{flex:none;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid rgba(205,238,143,.4);color:#CDEE8F;text-decoration:none;background:rgba(2,15,12,.7)}
.mstrip a.on{background:var(--lime);color:#04342C}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:56px}
.flag{position:relative;display:flex;flex-direction:column;gap:14px;border-radius:32px;padding:28px;background:linear-gradient(180deg,rgba(10,74,62,.7),rgba(4,52,44,.35));border:1px solid rgba(205,238,143,.25);text-decoration:none;color:#ffffff;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .5s ease;transform:perspective(1000px) rotateX(0) rotateY(0)}
.flag:hover{transform:perspective(1000px) rotateX(4deg) rotateY(-6deg) translateY(-10px);border-color:var(--lime);box-shadow:0 40px 80px rgba(0,0,0,.45);color:#ffffff}
.flag .ill{max-width:300px;margin:0 auto 6px;height:220px}
.flag h3{font-size:27px;font-weight:900;line-height:1.3}
.flag ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:#C4DCD3;font-size:16px}
.flag li{display:flex;gap:10px;align-items:flex-start}
.flag li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-top:10px}
.flag .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:'Alexandria',sans-serif;font-weight:800;color:var(--lime);font-size:17px}
.flag .go svg{transition:transform .3s ease}.flag:hover .go svg{transform:translateX(-6px)}
.flag .badge-new{position:absolute;top:20px;left:20px;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;background:var(--lime);color:#04342C}
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.use{display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:24px;background:rgba(10,74,62,.4);border:1px solid rgba(205,238,143,.16)}
.use .ui{flex:none;width:52px;height:52px;border-radius:16px;background:rgba(205,238,143,.12);border:1px solid rgba(205,238,143,.35);display:grid;place-items:center}
.use h3{font-size:19px;font-weight:800}
.use p{margin:4px 0 0;color:#A9C7BC;font-size:15px}
.demo{border-radius:36px;background:#04342C;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;margin:0 32px}
.dchat{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:26px;background:#020F0C;border:1px solid rgba(205,238,143,.2)}
.dchat .head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(205,238,143,.15)}
.dchat .head .avatar{width:42px;height:42px}
.dchat .in{align-self:flex-start;max-width:80%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:rgba(255,255,255,.1);font-size:15px}
.dchat .out{align-self:flex-end;max-width:85%;padding:12px 16px;border-radius:18px 18px 18px 4px;background:var(--lime);color:#04342C;font-size:15px}
.dchat .sys{align-self:center;font-size:13px;color:#CDEE8F;border:1px dashed rgba(205,238,143,.5);border-radius:999px;padding:4px 14px}
.wf{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wf span{padding:12px 16px;border-radius:16px;background:#020F0C;border:1px solid rgba(205,238,143,.3);font-weight:600;font-size:15px}
.wf span.hot{background:var(--lime);color:#04342C;border-color:var(--lime)}
.wf i{font-style:normal;color:var(--lime);font-weight:800}
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.reel{aspect-ratio:9/16;border-radius:22px;background:linear-gradient(180deg,#0A4A3E,#020F0C);border:1px solid rgba(205,238,143,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#A9C7BC;font-size:14px;text-align:center;padding:10px}
.reel .pl{width:56px;height:56px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.xsell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.xs{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:24px;border:1px solid rgba(205,238,143,.25);text-decoration:none;color:#ffffff;background:rgba(10,74,62,.35);transition:background .3s ease,transform .3s ease}
.xs:hover{background:var(--lime);color:#04342C;transform:translateY(-4px)}
.xs:hover small{color:#04342C}
.xs .ui{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(205,238,143,.14);display:grid;place-items:center}
.xs b{font-family:'Alexandria',sans-serif;font-size:18px;display:block}
.xs small{color:#A9C7BC;font-size:14px}
.fcol{display:flex;flex-direction:column;gap:10px}
@media (max-width:1100px){.trio,.uses,.xsell{grid-template-columns:1fr 1fr}.demo{grid-template-columns:1fr;padding:40px;margin:0 20px}.nav2{display:none}.mstrip{display:flex}}
@media (max-width:640px){.trio,.uses,.xsell,.reels{grid-template-columns:1fr}.reels{grid-template-columns:repeat(3,minmax(0,1fr))}.demo{padding:24px;margin:0 12px;border-radius:28px}.topbar{font-size:12px}}

.tilt-wrap{width:100%;max-width:480px;transform-style:preserve-3d;transform:rotateX(calc(var(--ry) * -10deg)) rotateY(calc(var(--rx) * 14deg));transition:transform .4s ease-out}

/* الحركة */
@keyframes gyro{from{transform:rotateY(0) rotateX(0)}to{transform:rotateY(360deg) rotateX(360deg)}}
@keyframes ringA{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes ringB{from{transform:rotateX(60deg) rotateY(0)}to{transform:rotateX(60deg) rotateY(-360deg)}}
@keyframes ringC{from{transform:rotateX(-60deg) rotateZ(0)}to{transform:rotateX(-60deg) rotateZ(360deg)}}
@keyframes orbit{from{transform:rotateX(70deg) rotateZ(0)}to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes counter{from{transform:translate(-50%,-50%) rotateZ(0) rotateX(-70deg)}to{transform:translate(-50%,-50%) rotateZ(-360deg) rotateX(-70deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 80px rgba(205,238,143,.7),0 0 160px rgba(205,238,143,.35)}50%{box-shadow:0 0 120px rgba(205,238,143,.9),0 0 240px rgba(205,238,143,.45)}}
@keyframes floor{from{background-position:0 0,0 0}to{background-position:0 80px,0 0}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pop{0%,8%{opacity:0;transform:translateY(10px)}14%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes dots{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes travel{from{right:0}to{right:calc(100% - 10px)}}
@keyframes bars{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes ping{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes type{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
@keyframes spin3d{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
@keyframes run{0%{right:0}100%{right:calc(100% - 14px)}}
@keyframes stream{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slowtype{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.motion .gyro{animation:gyro 26s linear infinite}
.motion .ring.r1{animation:ringA 9s linear infinite}
.motion .ring.r2{animation:ringB 12s linear infinite}
.motion .ring.r3{animation:ringC 15s linear infinite}
.motion .heart{animation:breathe 4s ease-in-out infinite}
.motion .orbit{animation:orbit 40s linear infinite}
.motion .pill{animation:counter 40s linear infinite}
.motion .grid-floor{animation:floor 1.8s linear infinite}
.motion .big{animation:shimmer 3.2s cubic-bezier(.6,0,.3,1) .6s both}
.motion .rise{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.motion .rise.d2{animation-delay:.15s}.motion .rise.d3{animation-delay:.3s}.motion .rise.d4{animation-delay:.45s}
.motion .live{animation:ping 1.6s ease-out infinite}
.motion .msg.m1{animation:pop 9s ease infinite}
.motion .typing{animation:pop 9s ease 1.4s infinite}
.motion .msg.m2{animation:pop 9s ease 2.6s infinite}
.motion .typing span{animation:dots 1s ease-in-out infinite}
.motion .typing span:nth-child(2){animation-delay:.15s}.motion .typing span:nth-child(3){animation-delay:.3s}
.motion .spark{animation:travel 2.6s linear infinite}
.motion .spark.s2{animation-delay:-1.3s}
.motion .bars span{animation:bars 2.8s ease-in-out infinite}
.motion .bars span:nth-child(2){animation-delay:-.4s}.motion .bars span:nth-child(3){animation-delay:-.8s}.motion .bars span:nth-child(4){animation-delay:-1.2s}.motion .bars span:nth-child(5){animation-delay:-1.6s}.motion .bars span:nth-child(6){animation-delay:-2s}
.motion .chipv::before{animation:ping 2.4s ease-out infinite}
.motion .chipv::after{animation:ping 2.4s ease-out 1.2s infinite}
.motion .write span{animation:type 4s ease-in-out infinite}
.motion .write span:nth-child(2){animation-delay:.4s}.motion .write span:nth-child(3){animation-delay:.8s}.motion .write span:nth-child(4){animation-delay:1.2s}
.motion .carousel{animation:spin3d 36s linear infinite}
.carousel-stage:hover .carousel{animation-play-state:paused}
.motion .runner{animation:run 6s cubic-bezier(.6,0,.4,1) infinite}
.motion .cl.ai span{animation:stream .35s ease-out both}
.motion .cl.slow span{animation:slowtype 2.4s steps(12) both}
@media (prefers-reduced-motion:reduce){.motion *,.motion *::before,.motion *::after{animation:none !important;transition:none !important}.big{color:#ffffff}}

/* الشاشات الصغيرة */
@media (max-width:1100px){
.big{font-size:72px}.h2{font-size:48px}.finale .huge{font-size:80px}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.c-wa,.c-auto,.c-rep,.c-erp{grid-column:span 1;grid-row:auto}.c-mkt{grid-column:1/-1}
.cores{grid-template-columns:repeat(3,minmax(0,1fr))}
.vgrid,.lead-card{grid-template-columns:1fr}.vibe{padding:44px;margin:0 20px}
.nums{grid-template-columns:repeat(2,minmax(0,1fr))}.num{font-size:88px}
.foot-grid{grid-template-columns:1fr 1fr}.navlinks{display:none}
}
@media (max-width:640px){
.wrap{padding:0 20px}.sec{padding:96px 0}
.hero{min-height:1000px;padding-top:170px}.big{font-size:44px}.stage{top:720px;transform:scale(.5)}
.bento{grid-template-columns:1fr}.c-mkt{flex-direction:column;align-items:stretch}
.cores{grid-template-columns:1fr 1fr}.trio{grid-template-columns:1fr}
.vibe{padding:26px;border-radius:30px;margin:0 12px}.switch{display:flex}.switch button{flex:1;padding:0 12px}
.num{font-size:64px}
.carousel-stage{height:auto;perspective:none}.carousel{position:static;width:auto;height:auto;margin:0;display:flex;gap:16px;overflow-x:auto;transform:none !important;animation:none !important;padding-bottom:12px}
.slide{position:relative;inset:auto;flex:0 0 260px;height:340px;transform:none !important}
.reflect{display:none}
.road{grid-template-columns:1fr 1fr}.road::before,.runner{display:none}
.finale{padding-top:90px}.finale .huge{font-size:48px}.lead-card{padding:26px;border-radius:26px}.form{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}
}

/* إضافات الموقع الحقيقي */
.skip{position:absolute;right:16px;top:-80px;z-index:50;background:var(--lime);color:#04342C;padding:10px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:16px}
.o :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:8px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form .err{color:#FFB4A8;font-size:14px;margin-top:6px}
.form .note{font-size:13px;color:#A9C7BC;margin:0}
.vgrid .editor .ai-only,.vgrid .editor .old-only{display:contents}
.o[data-vibe="old"] .ai-only,.o:not([data-vibe="old"]) .old-only{display:none}
.slide .scr img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.o header .d{white-space:nowrap}
.btn{white-space:nowrap}
@media (max-width:640px){
  /* الموبايل: الهيرو بيمشي بالترتيب (العنوان ثم النواة) بدل ما النواة تتحط فوق الأزرار */
  .hero{min-height:0;padding-top:205px;padding-bottom:300px}
  .stage{position:relative;left:auto;top:auto;width:0;height:0;align-self:center;margin-top:250px;transform:scale(.5)}
  .o header .btn{min-height:40px !important;padding:0 14px !important;font-size:13px !important}
}

/* النسخة الإنجليزي (LTR): نفس التصميم معكوس */
html[dir=ltr] .o{direction:ltr;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
html[dir=ltr] .o .wa{left:auto;right:24px}
html[dir=ltr] .cl em{text-align:left}
html[dir=ltr] .num{text-align:left}
html[dir=ltr] .runner{right:auto;left:0}
html[dir=ltr] .motion .runner{animation-name:run-ltr}
html[dir=ltr] .motion .spark{animation-name:travel-ltr}
html[dir=ltr] .flag .badge-new{left:auto;right:20px}
html[dir=ltr] .skip{right:auto;left:16px}
html[dir=ltr] .write span{transform-origin:0 50%}
html[dir=ltr] .cl span,html[dir=ltr] .typing3 rect{transform-origin:100% 50%}
html[dir=ltr] .ok{direction:ltr}
@keyframes run-ltr{0%{left:0}100%{left:calc(100% - 14px)}}
@keyframes travel-ltr{from{left:0}to{left:calc(100% - 10px)}}
html[dir=ltr] .big{font-size:84px;letter-spacing:-.02em;max-width:1000px}
@media (max-width:1100px){html[dir=ltr] .big{font-size:60px}}
@media (max-width:640px){html[dir=ltr] .big{font-size:40px}}
@media (max-width:440px){.o header .bname{display:none}}
html[dir=ltr] .hero .headline p{max-width:900px!important}
html[dir=ltr] .go svg{transform:scaleX(-1)}
html[dir=ltr] .ok{white-space:nowrap;flex-shrink:0}