/* بوابة المنصة — final.html + أقسام l.html؛ تخطيط هيرو ثابت (صورة شمال / كلام يمين) */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--teal:#0eaaa6;
--teal2:#14b8a6;
--or:#f26b1d;
--or2:#ff8a3d;
--ink:#0f2a3a;
--mut:#334155;
}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body.portal-home{
font-family:Cairo,sans-serif;
color:var(--ink);
background:#f4f8fa;
-webkit-font-smoothing:antialiased;
min-height:100vh;
}
a{color:inherit;text-decoration:none}
.lat{font-family:Poppins,sans-serif;direction:ltr;unicode-bidi:isolate}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
/* هيدر عائم */
.hd{position:absolute;top:0;left:0;right:0;z-index:20;padding:0 64px}
.hd .bar{
max-width:1540px;margin:0 auto;height:82px;
background:rgba(255,255,255,.96);border-radius:0 0 28px 28px;
box-shadow:0 12px 30px rgba(15,42,58,.08);
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:0 30px;direction:ltr;min-width:0;
}
.logo{
display:flex;align-items:center;gap:10px;flex-shrink:0;
font-family:Poppins,sans-serif;font-weight:800;font-size:34px;color:#0f2a3a;
white-space:nowrap;
}
.logo img{height:46px;width:auto;display:block;flex-shrink:0}
.nav{
display:flex;gap:56px;direction:rtl;font-weight:700;font-size:19px;color:#1e293b;
flex-shrink:1;min-width:0;justify-content:center;
}
.nav a{position:relative;padding:6px 0;white-space:nowrap;flex-shrink:0}
.nav a.on{font-weight:900}
.nav a.on::after{content:"";position:absolute;right:0;left:0;bottom:-8px;height:4px;border-radius:4px;background:var(--teal)}
.acts{display:flex;gap:14px;direction:rtl;align-items:center;flex-shrink:0}
.b{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;font-weight:800;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.b-or{background:linear-gradient(135deg,var(--or2),var(--or));color:#fff;box-shadow:0 10px 22px rgba(242,107,29,.3)}
.b-wh{background:#fff;color:#0f2a3a;box-shadow:0 4px 14px rgba(15,42,58,.08);border:1px solid #eef2f6}
.acts .b{height:50px;padding:0 34px;font-size:19px}
.burger{display:none;appearance:none;border:0;cursor:pointer;flex-shrink:0}
.portal-signin{display:block;position:relative;flex-shrink:0}
.portal-signin__btn{
background:#fff;color:#0f2a3a;box-shadow:0 4px 14px rgba(15,42,58,.08);border:1px solid #eef2f6;
gap:8px;
}
.portal-signin__btn i{font-size:12px;opacity:.75}
.portal-signin.is-open .portal-signin__btn i{transform:rotate(180deg)}
.portal-signin__menu{
position:absolute;top:calc(100% + 20px);right:0;left:auto;z-index:30;
min-width:240px;max-width:min(280px,calc(100vw - 24px));
background:#fff;border:1px solid #eef2f6;border-radius:14px;
box-shadow:0 16px 36px rgba(15,42,58,.16);padding:8px;display:flex;flex-direction:column;gap:4px;
}
.portal-signin__menu[hidden]{display:none !important}
.portal-signin__item{
display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-align:start;
}
.portal-signin__item:hover{background:#f8fafc}
.portal-signin__ico{
width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;font-size:16px;
}
.portal-signin__ico--store{background:#ecfeff;color:var(--teal)}
.portal-signin__ico--acct{background:#fff7ed;color:var(--or)}
.portal-signin__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.portal-signin__txt b{font-size:14px;font-weight:800;color:#0f2a3a;line-height:1.3}
.portal-signin__txt small{font-size:12px;font-weight:700;color:#64748b;line-height:1.3}
.portal-lang-host{display:flex;align-items:center;flex-shrink:0}
body.portal-home #dido-lang-switch.dido-lang-switch--topbar-pill{
background:#fff;border:1px solid #eef2f6;color:#0f2a3a;box-shadow:0 4px 14px rgba(15,42,58,.08);
white-space:nowrap;
}
body.portal-home #dido-lang-switch.dido-lang-switch--topbar-pill:hover{
border-color:#99f6e4;color:var(--teal);
}
/* هيرو: صورة شمال دائماً، كلام يمين؛ الشريط في الـflow */
.hero{
position:relative;display:flex;flex-direction:column;
min-height:960px;overflow:hidden;background:#f4f8fa;
padding-bottom:34px;
}
.hero .ph{
position:absolute;inset:0 0 120px 0;
-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);
mask-image:linear-gradient(180deg,#000 85%,transparent);
pointer-events:none;
}
.hero .ph picture,.hero .ph img{
display:block;width:100%;height:100%;
}
.hero .ph img{
object-fit:cover;object-position:left 30%;
}
.hero .mist{
position:absolute;inset:0;
/* ثابت: تدرّج من يمين الصفحة (عمود الكلام) */
background:linear-gradient(270deg,rgba(248,250,252,.92) 0%,rgba(248,250,252,.78) 30%,rgba(248,250,252,0) 52%);
pointer-events:none;
}
.hero .stage{
position:relative;z-index:5;
flex:1 0 auto;
padding-top:130px;
min-height:640px;
}
.hero .txt{
margin-left:auto;margin-right:80px;
max-width:min(680px,46vw);width:calc(100% - 160px);
text-align:start;
}
.gift{
display:inline-flex;align-items:center;gap:12px;
background:rgba(241,245,249,.92);border:1px solid #e2e8f0;border-radius:999px;
padding:10px 24px;font-weight:700;font-size:19px;color:#1e293b;
}
.gift i{color:var(--or);font-size:24px}
.gift b{font-weight:900}
.hero h1{font-weight:900;font-size:66px;line-height:1.28;margin-top:30px;color:#0f2a3a;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--teal)}
.sub{font-weight:600;font-size:23px;line-height:1.75;margin-top:22px;color:#1e293b}
.sub b{font-weight:900}
.ctas{display:flex;gap:18px;margin-top:30px;flex-wrap:wrap}
.ctas .b{height:76px;font-size:24px}
.ctas .b-or{padding:0 34px}
.ctas .b-ol{
padding:0 30px;background:rgba(255,255,255,.85);
border:1.5px solid #94a3b8;color:#0f2a3a;
}
.ctas .b-ol i{
width:30px;height:30px;border-radius:50%;background:#0f2a3a;color:#fff;
font-size:12px;display:flex;align-items:center;justify-content:center;padding-left:2px;
}
.apps{display:flex;gap:22px;margin-top:34px;direction:ltr;justify-content:flex-end}
.apps span{
width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:32px;box-shadow:0 8px 16px rgba(15,42,58,.12);flex-shrink:0;
}
.ap-wa{background:linear-gradient(180deg,#5ef17a,#22c55e)}
.ap-sn{background:#FFFC00;color:#fff!important;-webkit-text-stroke:1.5px #111}
.ap-tt{background:#111}
.ap-tt i{text-shadow:-2px -1px 0 #25F4EE,2px 1px 0 #FE2C55}
.ap-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ap-fb{background:#1877F2}
.ap-mt{background:linear-gradient(135deg,#0668E1,#0081FB)}
.strip{
position:relative;z-index:6;
margin:28px 80px 0;
background:#fff;border-radius:30px;box-shadow:0 24px 50px rgba(15,42,58,.12);
display:flex;align-items:center;padding:16px;gap:16px;
flex-shrink:0;
}
.pc{
flex:1.25;min-width:0;height:128px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;
padding:0 32px;position:relative;
}
.pc .t{font-weight:900;font-size:24px;color:#0f2a3a;white-space:nowrap}
.pc .ic{font-size:58px;flex-shrink:0}
.pc .ar{position:absolute;bottom:18px;left:50%;font-size:22px}
.pc-or{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa}
.pc-or .ic,.pc-or .ar{color:#f7892f}
.pc-tl{background:linear-gradient(135deg,#ecfeff,#ccfbf1);border:1px solid #99f6e4;cursor:default}
.pc-tl .ic,.pc-tl .ar{color:var(--teal2)}
.soon{
position:absolute;top:12px;left:16px;background:#0f2a3a;color:#fff;
font-weight:800;font-size:13px;border-radius:999px;padding:2px 10px;white-space:nowrap;
}
.ft{
flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;
font-weight:800;font-size:20px;color:#0f2a3a;border-inline-start:1.5px solid #e2e8f0;text-align:center;
}
.ft:first-of-type{border:0}
.ft i{font-size:40px;color:#0f6b78}
.wave{
position:absolute;left:0;right:0;bottom:0;height:120px;
background:linear-gradient(90deg,#5eead4,#22d3ee);
clip-path:path('M0 90 C 300 30 600 30 900 80 S 1300 120 1440 40 V 120 H0 Z');
opacity:.75;pointer-events:none;
}
/* أقسام تحت الهيرو */
.below section{padding:44px 0}
.h2{font-weight:900;font-size:28px;line-height:1.3;text-align:center;color:#0f2a3a}
.lead{color:var(--mut);font-weight:700;font-size:16px;text-align:center;margin-top:8px;line-height:1.7}
.s2{background:#f0fdfa}
.steps{display:grid;gap:14px;margin-top:22px}
.step{
display:flex;gap:14px;align-items:center;background:#fff;border-radius:20px;
padding:16px;box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.step .n{
flex:none;width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
font-family:Poppins,sans-serif;font-weight:900;font-size:22px;color:#fff;
background:linear-gradient(135deg,var(--teal2),var(--teal));
}
.step b{font-size:18px;font-weight:900;display:block}
.step small{font-size:14px;color:var(--mut);font-weight:700}
/* قسم القوالب — مرجع sections.html #A */
.home-tpls{padding:64px 20px;background:#fff}
.home-tpls .wrap{max-width:1240px;margin:0 auto}
.tpl-lbl{display:block;text-align:center;font-family:Poppins,sans-serif;font-weight:800;font-size:14px;letter-spacing:2px;color:#94a3b8;margin-bottom:6px}
.home-tpls .h2{font-weight:900;font-size:40px;text-align:center;line-height:1.3;color:#0f2a3a}
.home-tpls .h2 em{font-style:normal;color:var(--teal)}
.home-tpls .lead{text-align:center;color:#475569;font-weight:700;font-size:18px;margin-top:8px}
.tplwrap{position:relative}
.tpls2{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;align-items:stretch;max-width:1060px;margin-left:auto;margin-right:auto}
.tc{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.tc .stage{height:350px;display:flex;align-items:flex-start;justify-content:center;width:100%}
.tc .lv{width:168px;zoom:1.36}
.pd-live{pointer-events:none;user-select:none;background:#fff;text-align:center;overflow:hidden;height:251px;display:flex;flex-direction:column}
.pd-live img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;display:block;background:#f1f5f9}
.pd-live .t{font-size:11px;font-weight:800;color:#0f172a;margin:6px 6px 2px;line-height:1.25;height:2.5em;overflow:hidden}
.pd-live .p{font-size:11px;font-weight:900;color:#0f172a;margin:0 6px 6px}
.pd-live-classic{border:1px solid #eee;border-radius:14px;padding:8px}
.pd-live-classic .btns{display:flex;gap:4px;padding:0 2px 2px;margin-top:auto}
.pd-live-classic .btns span{flex:1;border-radius:7px;padding:5px 2px;font-size:8.5px;font-weight:900}
.pd-live-elegant{border:1px solid #e8eef5;border-radius:16px;padding:8px;box-shadow:0 6px 16px rgba(15,23,42,.05)}
.pd-live-elegant .bar{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:2px 2px 0;margin-top:auto}
.pd-live-elegant .ico{width:26px;height:26px;border:1px solid #e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:11px;background:#fff}
.pd-live-elegant .ico.cart{color:#65a30d;border-color:#bbf7d0}
.pd-live-catalog{border:1px solid #eef2f7;border-radius:12px;padding:6px;position:relative}
.pd-live-catalog .media{position:relative}
.pd-live-catalog .heart{position:absolute;top:6px;inset-inline-start:6px;width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;font-size:10px;color:#94a3b8}
.pd-live-catalog .plus{position:absolute;bottom:6px;inset-inline-start:6px;width:22px;height:22px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#0f172a}
.pd-live-catalog .t,.pd-live-catalog .p{text-align:start}
.pd-live-catalog .p{margin-top:auto}
.pd-live-studio{border:0;border-radius:18px;padding:8px;box-shadow:0 10px 24px rgba(15,23,42,.08)}
.pd-live-studio .well{margin:0 0 6px;padding:8px;border-radius:14px;background:linear-gradient(165deg,#f1f5f9,#e8eef5)}
.pd-live-studio .well img{height:auto;aspect-ratio:1/1;background:transparent;border-radius:10px}
.pd-live-studio .cta{display:block;margin:0 4px 2px;border-radius:999px;font-size:9px;font-weight:900;padding:6px 4px;margin-top:auto}
.home-tpls .pd-live .btns .b2,.home-tpls .pd-live-studio .cta{background:#ffd7a8!important;color:#422006!important}
.home-tpls .pd-live .btns .b1{background:#faf7f2!important;color:#1c1917!important;box-shadow:inset 0 0 0 1px #f97316}
.tc .nm{font-weight:900;font-size:21px;margin-top:6px;min-height:1.3em;width:100%;max-width:230px}
.tc .ds{font-weight:600;font-size:14px;color:#475569;margin-top:2px;min-height:44px;line-height:1.55;max-width:230px;width:100%}
.tc .go{margin-top:auto;height:44px;width:100%;max-width:230px;border-radius:12px;border:2px solid var(--teal);color:#0f766e;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff}
.tnav{display:none}
.tdots{display:none}
.tdots i{width:8px;height:8px;border-radius:50%;background:#cbd5e1;display:inline-block;cursor:pointer}
.tdots i.on{background:#0eaaa6;width:22px;border-radius:6px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.mf{background:#fff;border-radius:20px;padding:18px;display:flex;gap:14px;align-items:flex-start;border:1px solid #e2e8f0}
.mf i{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.mf b{display:block;font-weight:900;font-size:16px;color:#0f2a3a}
.mf small{display:block;font-weight:600;font-size:13px;color:#475569;margin-top:2px;line-height:1.6}
.tpl-cta{text-align:center;margin-top:34px}
.tpl-cta .b{height:60px;padding:0 34px;font-size:20px}
.price-stack{max-width:960px;margin:22px auto 0;display:grid;gap:16px;justify-items:center}
.price-stack>.price{margin:0;max-width:460px;width:100%}
.price{
max-width:460px;margin:22px auto 0;border-radius:24px;padding:24px;background:#fff;
box-shadow:0 16px 40px rgba(15,23,42,.1);border:2px solid #ccfbf1;text-align:center;
}
.price .tag{display:inline-block;background:#ccfbf1;color:#0f766e;font-weight:900;border-radius:999px;padding:3px 14px;font-size:14px}
.price .amt{font-weight:900;font-size:44px;margin-top:8px}
.price .amt small{font-size:18px;color:var(--mut)}
.price .plan{font-weight:900;color:var(--teal);margin-top:4px}
.plan-off{display:inline-flex;align-items:center;gap:3px;background:#dc2626;color:#fff;font-weight:800;font-size:12px;line-height:1;padding:5px 9px;border-radius:999px;white-space:nowrap}
.plan-was{color:#94a3b8;text-decoration:line-through;font-weight:800;font-size:16px;white-space:nowrap}
.plan-toprow{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.price .plan-toprow{justify-content:center;margin-top:8px}
.price .plan-was{font-size:20px}
.price .plan-off{font-size:13px}
.price .amt{margin-top:4px}
.price ul{list-style:none;margin:14px 0;text-align:right;display:grid;gap:8px}
html[dir="ltr"] .price ul{text-align:left}
.price li{font-weight:700;font-size:15px}
.price li::before{content:"✓ ";color:var(--teal);font-weight:900}
.price li.off{color:#94a3b8}
.price li.off::before{content:"✕ ";color:#94a3b8}
.price .note{font-size:13px;color:var(--mut);font-weight:700;margin-top:10px}
.price .b{width:100%;height:56px;font-size:18px;margin-top:4px}
.price-stack .price>a.b{
background:linear-gradient(135deg,var(--teal2),var(--teal));
box-shadow:0 10px 22px rgba(14,170,166,.3);
color:#fff;
}
.price-more{
margin-top:4px;font-weight:800;font-size:15px;color:var(--teal);
text-decoration:underline;text-underline-offset:3px;
}
.price-more:hover{color:#0f766e}
.faq{max-width:760px;margin:22px auto 0;display:grid;gap:10px}
.faq details{background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
.faq summary{font-size:16px;font-weight:900;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{font-size:14px;color:var(--mut);font-weight:700;margin-top:8px;line-height:1.7}
.soon-note{text-align:center;font-weight:800;color:var(--mut);font-size:14px;margin-top:16px}
.soon-note span{background:#f1f5f9;border-radius:999px;padding:4px 14px;display:inline-block}
.final{
text-align:center;border-radius:28px;padding:34px 20px;color:#fff;
background:linear-gradient(135deg,#0f766e,#14b8a6);
}
.final .h2{color:#fff}
.final p{font-weight:700;margin:8px 0 18px;opacity:.9}
.final .b{height:56px;padding:0 28px;font-size:19px}
.contact-box{
max-width:560px;margin:0 auto;text-align:center;background:#fff;border-radius:20px;
padding:22px 18px;box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.contact-box a{color:var(--teal);font-weight:900}
.foot{
padding:26px 0 110px;text-align:center;color:#94a3b8;font-size:12px;font-weight:700;
}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;margin-bottom:14px}
.foot .legal a{color:#64748b}
.foot .legal a:hover{color:var(--teal)}
.foot .copy{line-height:1.7}
/* dialog فيديو */
.ad15-dlg{
border:0;padding:0;border-radius:18px;max-width:min(960px,94vw);
width:100%;background:#0f2a3a;color:#fff;
box-shadow:0 30px 80px rgba(15,42,58,.45);
}
.ad15-dlg::backdrop{background:rgba(15,42,58,.55)}
.ad15-dlg__bar{
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px;font-weight:800;font-size:15px;
}
.ad15-dlg__x{
width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.12);
color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.ad15-dlg video{
display:block;width:100%;max-height:min(80vh,720px);background:#000;border-radius:0 0 18px 18px;
}
.nav-drawer{
display:none;position:fixed;inset:0;z-index:40;background:rgba(15,42,58,.4);
}
.nav-drawer.is-open{display:block}
.nav-drawer__panel{
position:absolute;top:0;right:0;width:min(300px,86vw);height:100%;
background:#fff;padding:24px 18px;display:flex;flex-direction:column;gap:16px;
box-shadow:-12px 0 40px rgba(15,42,58,.18);overflow-y:auto;
}
html[dir="ltr"] .nav-drawer__panel{right:auto;left:0;box-shadow:12px 0 40px rgba(15,42,58,.18)}
.nav-drawer__panel a{font-weight:800;font-size:18px;padding:8px 4px;white-space:nowrap}
.nav-drawer__lang{margin-top:8px;padding-top:12px;border-top:1px solid #e2e8f0}
.nav-drawer__close{
align-self:flex-start;width:40px;height:40px;border-radius:11px;border:1px solid #eef2f6;
background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
@media (min-width:900px){
.steps{grid-template-columns:repeat(3,1fr)}
.h2{font-size:36px}
.home-tpls .h2{font-size:40px}
.foot{padding-bottom:40px}
}
/* LTR: قلب محاذاة النص فقط — التخطيط ثابت */
html[dir="ltr"] .nav{direction:ltr}
html[dir="ltr"] .acts{direction:ltr}
html[dir="ltr"] .portal-cta-arrow{transform:scaleX(-1)}
html[dir="ltr"] .ctas .b-ol i{padding-left:0;padding-right:2px}
/* ≤1440: ضغط الهيدر */
@media (max-width:1440px){
.hd{padding:0 28px}
.hd .bar{padding:0 20px;gap:12px}
.nav{gap:28px;font-size:17px}
.acts{gap:10px}
.acts .b{padding:0 22px;font-size:17px;height:46px}
.logo{font-size:28px}.logo img{height:40px}
.hero .txt{margin-right:48px;width:calc(100% - 96px);max-width:min(680px,46vw)}
.strip{margin-left:48px;margin-right:48px}
.hero h1{font-size:56px}
.ctas .b{height:68px;font-size:21px}
}
/* ≤1100: الروابط في البرجر */
@media (max-width:1100px){
.hd{padding:0 16px}
.nav{display:none}
.burger{
display:flex;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid #eef2f6;
align-items:center;justify-content:center;font-size:18px;color:#0f2a3a;
}
.acts .b{height:44px;padding:0 18px;font-size:16px;border-radius:12px}
.hero .stage{padding-top:110px;min-height:560px}
.hero .txt{margin-right:28px;width:calc(100% - 56px)}
.strip{margin-left:28px;margin-right:28px;flex-wrap:wrap}
.pc{flex:1 1 45%;height:100px;padding:0 20px}
.pc .t{font-size:18px;white-space:normal}
.pc .ic{font-size:40px}
.ft{flex:1 1 28%;font-size:14px}
.hero h1{font-size:44px}
.sub{font-size:18px}
.ctas .b{height:60px;font-size:18px}
}
/* موبايل ≤700 */
@media (max-width:700px){
.hd{padding:0 10px}
.hd .bar{height:64px;border-radius:0 0 20px 20px;padding:0 14px;gap:8px}
.logo{font-size:22px}.logo img{height:32px}
.acts{gap:8px}
.acts .b-or,
.acts .portal-lang-host{display:none !important}
.acts .portal-signin__btn{height:40px;padding:0 14px;font-size:15px;border-radius:11px}
.burger{
display:flex;width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid #eef2f6;
align-items:center;justify-content:center;font-size:18px;color:#0f2a3a;
}
html[dir="rtl"] .burger{order:-1}
}
@media (max-width:400px){
.hd{padding:0 10px}
.hd .bar{padding:0 10px;gap:6px}
.acts{gap:6px}
.logo{font-size:18px}.logo img{height:28px}
.acts .portal-signin__btn{height:38px;padding:0 10px;font-size:14px;border-radius:10px}
.burger{width:38px;height:38px;border-radius:10px;font-size:16px}
}
@media (max-width:340px){
.logo{font-size:15px}
.acts .portal-signin__btn{padding:0 8px}
.portal-signin__menu{min-width:220px;max-width:calc(100vw - 16px)}
}
/* تابع موبايل ≤700 — باقي الصفحة */
@media (max-width:700px){
.hero{min-height:0;padding-bottom:20px}
.hero .ph{
position:relative;inset:auto;width:100%;height:480px;
-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);
mask-image:linear-gradient(180deg,#000 66%,transparent);
}
.hero .ph img{object-position:center 20%}
.hero .mist{display:none}
.hero .stage{padding-top:0;min-height:0}
.hero .txt{
margin: -70px 0 0;padding:0 18px;width:auto;max-width:none;
}
.gift{font-size:14px;padding:7px 14px}.gift i{font-size:18px}
.hero h1{font-size:36px;margin-top:16px}
.sub{font-size:16px;margin-top:12px}
.ctas{flex-direction:column;gap:12px;margin-top:20px}
.ctas .b{height:58px;font-size:19px;width:100%}
.apps{gap:10px;margin-top:20px;justify-content:space-between}
.apps span{width:48px;height:48px;font-size:26px;border-radius:13px}
.strip{
margin:26px 14px 0;flex-wrap:wrap;border-radius:24px;padding:12px;gap:10px;
}
.pc{flex:1 1 100%;height:86px;padding:0 20px}
.pc .t{font-size:19px;white-space:nowrap}.pc .ic{font-size:40px}.pc .ar{bottom:10px;font-size:16px}
.ft{flex:1 1 30%;font-size:13px;text-align:center;gap:8px;padding:8px 2px}
.ft i{font-size:28px}
.wave{display:none}
.ad15-dlg{max-width:94vw}
.ad15-dlg video{max-height:78vh}
.home-tpls{padding:44px 16px}
.home-tpls .h2{font-size:28px}
.home-tpls .lead{font-size:15px}
.tplwrap{overflow:hidden}
.tpls2{
display:flex!important;overflow:visible!important;gap:0!important;
margin:26px 0 0!important;padding:4px 0 12px!important;
max-width:none;width:100%;min-width:0;transition:transform .28s ease;will-change:transform;
direction:ltr; /* فهرس الشرائح ثابت؛ الأسهم تنعكس عبر dir */
}
.tc{flex:0 0 100%!important;width:100%;max-width:100%;padding:0 48px;box-sizing:border-box}
.tc .stage{height:330px}
.tc .lv{zoom:1.3}
.tnav{
display:flex;position:absolute;top:150px;width:44px;height:44px;border-radius:50%;
background:#fff;border:1.5px solid #cbd5e1;box-shadow:0 8px 18px rgba(15,42,58,.12);
align-items:center;justify-content:center;font-size:18px;color:#2f3d1f;z-index:3;cursor:pointer;
}
.tnav.prev{right:0}.tnav.next{left:0}
html[dir="ltr"] .tnav.prev{right:auto;left:0}
html[dir="ltr"] .tnav.next{left:auto;right:0}
html[dir="ltr"] .tnav.prev i{transform:scaleX(-1)}
html[dir="ltr"] .tnav.next i{transform:scaleX(-1)}
.tdots{display:flex!important;justify-content:center;gap:8px;margin-top:6px}
.mini{grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.mf{padding:12px;flex-direction:column;gap:8px}
.mf i{width:38px;height:38px;font-size:18px}
.mf b{font-size:14px}.mf small{font-size:12px}
.tpl-cta .b{width:100%;height:56px;font-size:18px}
}
/* —— لوحتك من جوّه (.dsh) — مرجع portal-showcase-section —— */
.dsh{margin-top:46px}
.dsh-head{text-align:center}
.dsh-lbl{display:inline-flex;align-items:center;gap:6px;background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;font-weight:800;font-size:14px;border-radius:999px;padding:4px 14px}
.dsh-head h3{font-weight:900;font-size:32px;color:#0f2a3a;margin-top:10px;line-height:1.35}
.dsh-head h3 em{font-style:normal;color:var(--teal)}
.dsh-head p{color:#475569;font-weight:700;font-size:17px;margin-top:6px}
.dsh-stage{position:relative;max-width:1000px;margin:30px auto 0;padding-bottom:30px}
.dsh-pc{position:relative;width:76%;margin-inline-start:auto;background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(15,42,58,.35),0 0 0 6px rgba(255,255,255,.7)}
.dsh-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#f1f5f9;border-bottom:1px solid #e2e8f0;direction:ltr}
.dsh-bar i{width:10px;height:10px;border-radius:50%;display:block}
.dsh-bar i:nth-child(1){background:#f87171}.dsh-bar i:nth-child(2){background:#fbbf24}.dsh-bar i:nth-child(3){background:#34d399}
.dsh-bar span{margin-inline-start:12px;flex:1;max-width:320px;height:20px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;font:600 11px/18px Poppins,sans-serif;color:#64748b;padding:0 12px}
.dsh-pc img{display:block;width:100%;height:auto}
.dsh-ph{position:absolute;inset-inline-start:170px;bottom:0;width:215px;z-index:2;background:#0f172a;border-radius:38px;padding:9px;box-shadow:0 30px 60px -20px rgba(15,23,42,.55)}
.dsh-ph.m2{inset-inline-start:0;bottom:70px;z-index:1;transform:rotate(-4deg)}
.dsh-ph .sb{display:block;height:22px;background:#fff;border-radius:30px 30px 0 0}
.dsh-ph img{display:block;width:100%;height:auto;border-radius:0 0 30px 30px}
.dsh-ph::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:58px;height:14px;border-radius:999px;background:#0f172a;z-index:2}
.dsh-nav,.dsh-dots{display:none}
.dsh-cap{display:none}
@media (max-width:700px){
.dsh{margin-top:34px}
.dsh-head h3{font-size:24px}.dsh-head p{font-size:15px}
.dsh-stage{padding:0 46px;margin-top:20px}
.dsh-pc,.dsh-ph{display:none;position:relative;inset:auto;width:100%;margin:0 auto}
.dsh-ph,.dsh-ph.m2{width:230px;transform:none;z-index:auto;inset:auto}
.dsh-stage[data-v="pc"] .dsh-pc{display:block}
.dsh-stage[data-v="ph"] .dsh-ph.m1{display:block}
.dsh-stage[data-v="ph2"] .dsh-ph.m2{display:block}
.dsh-nav{
display:flex;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
background:#fff;border:1.5px solid #cbd5e1;box-shadow:0 8px 18px rgba(15,42,58,.12);
align-items:center;justify-content:center;font-size:18px;color:#2f3d1f;z-index:3;cursor:pointer;
}
.dsh-nav.prev{right:0}.dsh-nav.next{left:0}
html[dir="ltr"] .dsh-nav.prev{right:auto;left:0}
html[dir="ltr"] .dsh-nav.next{left:auto;right:0}
html[dir="ltr"] .dsh-nav.prev i{transform:scaleX(-1)}
html[dir="ltr"] .dsh-nav.next i{transform:scaleX(-1)}
.dsh-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dsh-dots i{width:8px;height:8px;border-radius:50%;background:#cbd5e1;display:inline-block}
.dsh-dots i.on{background:#0eaaa6;width:22px;border-radius:6px}
.dsh-cap{display:block;text-align:center;font-weight:800;font-size:14px;color:#0f766e;margin-top:8px}
}
@media (min-width:701px){.dsh-cap{display:none}}
/* —— home v2: ribbon + try + dsh; v1 keeps gift/strip/about/mini —— */
html:not(.home-v1) .gift,
html:not(.home-v1) .strip{display:none!important}
html:not(.home-v1) #about{display:none!important}
html:not(.home-v1) #features .mini{display:none!important}
html.home-v1 .home-ribbon,
html.home-v1 .home-try{display:none!important}
html.home-v1 .dsh{display:none!important}
html.home-v1 #about{display:block}
.home-ribbon{
display:flex;align-items:center;
width:460px;height:60px;max-width:calc(100% + 80px);
margin-top:8px;margin-right:-80px;margin-left:auto;
border-radius:999px 0 0 999px;
background:linear-gradient(270deg,rgba(15,118,110,.58) 0%,rgba(45,190,175,.45) 48%,rgba(220,252,247,.55) 100%);
border-top:1.5px solid rgba(255,255,255,.85);
border-bottom:1.5px solid rgba(255,255,255,.55);
border-left:0;border-right:0;
position:relative;z-index:6;overflow:visible;flex-shrink:0;
}
.home-ribbon::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.08) 28%,transparent 55%);
}
/* en ≥701: نفس هندسة العربي — لازق يمين، دايرة left:-27 (القلب للشمال فقط ≤700) */
.home-ribbon__txt{
flex:1;min-width:0;position:relative;z-index:2;
color:#fff;font-weight:800;font-size:17px;line-height:1.25;
text-shadow:0 1px 2px rgba(15,42,58,.35);
padding:0 18px 0 56px;white-space:nowrap;
}
.home-ribbon__orb{
position:absolute;left:-27px;top:50%;transform:translateY(-50%);z-index:3;
width:76px;height:76px;margin:0;border-radius:50%;
box-shadow:0 0 0 3.5px rgba(255,255,255,.92),0 8px 22px rgba(15,118,110,.35);
}
.home-ribbon__orb::after{
content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;
background:linear-gradient(160deg,rgba(255,255,255,.45),transparent 42%);
}
.home-ribbon__flip{
width:100%;height:100%;border-radius:50%;position:relative;
perspective:180px;transform-style:preserve-3d;
}
.home-ribbon__face{
position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
transform-origin:center center;opacity:0;
}
.home-ribbon__face--tt{background:#111;animation:homeRibbonFaceTT 6s linear infinite}
.home-ribbon__face--fb{background:transparent;animation:homeRibbonFaceFB 6s linear infinite}
.home-ribbon__face--sn{background:#FFFC00;animation:homeRibbonFaceSN 6s linear infinite}
.home-ribbon__face svg,
.home-ribbon__face img{
width:60%;height:60%;object-fit:contain;display:block;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.home-ribbon__face--fb svg,
.home-ribbon__face--fb img{width:92%;height:92%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
/* ثابت 1.5ث + قلب 0.5ث لكل لوجو (دورة 6ث): TT→FB→SN */
@keyframes homeRibbonFaceTT{
0%,25%{opacity:1;transform:rotateY(0deg)}
33.333%{opacity:0;transform:rotateY(-90deg)}
33.334%,100%{opacity:0;transform:rotateY(90deg)}
}
@keyframes homeRibbonFaceFB{
0%,25%{opacity:0;transform:rotateY(90deg)}
33.333%{opacity:1;transform:rotateY(0deg)}
58.333%{opacity:1;transform:rotateY(0deg)}
66.666%{opacity:0;transform:rotateY(-90deg)}
66.667%,100%{opacity:0;transform:rotateY(90deg)}
}
@keyframes homeRibbonFaceSN{
0%,58.333%{opacity:0;transform:rotateY(90deg)}
66.666%{opacity:1;transform:rotateY(0deg)}
91.666%{opacity:1;transform:rotateY(0deg)}
100%{opacity:0;transform:rotateY(-90deg)}
}
@media (prefers-reduced-motion:reduce){
.home-ribbon__face{animation:none!important;opacity:0}
.home-ribbon__face--tt{opacity:1;transform:none}
}
@media (max-width:1440px){
.home-ribbon{margin-right:-48px;max-width:calc(100% + 48px)}
}
@media (max-width:1100px){
.home-ribbon{margin-right:-28px;max-width:calc(100% + 28px)}
}
/* en ≥701 فقط: غامق جنب الدايرة + مسافة نص */
@media (min-width:701px){
html[dir="ltr"] .home-ribbon{
background:linear-gradient(90deg,rgba(15,118,110,.58) 0%,rgba(45,190,175,.45) 48%,rgba(220,252,247,.55) 100%);
}
html[dir="ltr"] .home-ribbon__txt{padding-left:66px}
}
.home-try{
padding:70px 20px;
background:radial-gradient(ellipse 700px 420px at 25% 50%,rgba(20,184,166,.12),transparent 70%),linear-gradient(180deg,#f0fdfa,#fff);
}
.home-try .wrap{
max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;
}
.home-try .lbl{
display:inline-flex;gap:8px;align-items:center;background:#fff7ed;color:#c2410c;
border:1.5px solid #fed7aa;font-weight:900;font-size:14px;border-radius:999px;padding:4px 14px;
}
.home-try h2{font-weight:900;font-size:46px;line-height:1.25;margin-top:12px}
.home-try h2 em{font-style:normal;color:var(--teal)}
.home-try .lead{color:var(--mut);font-weight:700;font-size:18px;margin-top:8px;line-height:1.7}
.home-try .f{margin-top:24px}
.home-try .f label{display:block;font-weight:900;font-size:16px;margin-bottom:8px}
.home-try .in{
width:100%;height:58px;border-radius:16px;border:2px solid var(--teal2);background:#fff;
padding:0 18px;font-weight:800;font-size:20px;font-family:inherit;color:var(--ink);
box-shadow:0 0 0 5px rgba(20,184,166,.12);outline:none;
}
.home-try .cats{display:flex;flex-wrap:wrap;gap:10px}
.home-try .cats button{
display:inline-flex;gap:8px;align-items:center;background:#fff;border:1.5px solid #e2e8f0;
border-radius:14px;padding:9px 16px;font-weight:800;font-size:16px;font-family:inherit;cursor:pointer;color:var(--ink);
}
.home-try .cats button.on{
border-color:var(--teal2);background:#f0fdfa;color:#0f766e;box-shadow:0 0 0 3px rgba(20,184,166,.15);
}
.home-try__col{display:flex;flex-direction:column;min-width:0}
.home-try__col .cta{order:3;align-items:center;text-align:center;margin-top:18px}
.home-try .cta{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.home-try .cta .b{
display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;font-weight:900;
background:linear-gradient(135deg,var(--or2),var(--or));color:#fff;
box-shadow:0 12px 26px rgba(242,107,29,.32);height:64px;padding:0 34px;font-size:21px;
}
.home-try .cta small{font-weight:700;color:var(--mut);font-size:14px}
.home-try .try-steps{
display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:800;font-size:14px;color:#0f766e;margin-top:4px;
}
.home-try .try-steps i{font-size:11px;color:#94a3b8}
.home-try .try-steps em{font-style:normal;color:var(--mut);font-weight:700}
.home-try .stage{position:relative;height:640px}
.home-try .phone{
position:absolute;top:0;inset-inline-end:60px;width:300px;height:620px;background:#0f172a;
border-radius:44px;padding:10px;box-shadow:0 34px 70px rgba(15,23,42,.3);
}
.home-try .scr{width:100%;height:100%;border-radius:35px;overflow:hidden;background:#f8fafc;position:relative}
.home-try .sh{
background:#fff;padding:30px 14px 10px;display:flex;align-items:center;justify-content:space-between;
border-bottom:1px solid #eef2f6;
}
.home-try .sh .nm{display:flex;align-items:center;gap:8px;font-weight:900;font-size:16px;min-width:0}
.home-try .sh .nm-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-try .lg{
width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--teal2),#0f766e);
color:#fff;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.home-try .hero2{margin:10px;border-radius:16px;height:120px;position:relative;overflow:hidden;background:#e2e8f0}
.home-try .hero2 img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:100%}
.home-try .hero2 .t{
position:absolute;inset:auto 0 0 0;padding:10px 12px;
background:linear-gradient(0deg,rgba(15,23,42,.75),transparent);color:#fff;font-weight:900;font-size:15px;
}
.home-try .hero2 .t small{display:block;font-weight:700;font-size:11px;opacity:.9}
.home-try .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 10px}
.home-try .pd-live{height:auto;min-height:0}
.home-try .pd-live img{width:100%;max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.home-try .ad{
position:absolute;bottom:20px;inset-inline-start:0;width:270px;background:#fff;border-radius:18px;
box-shadow:0 26px 54px rgba(15,23,42,.22);overflow:visible;border:1px solid #e2e8f0;transform:rotate(-3deg);
}
.home-try .ad .ah{display:flex;gap:8px;align-items:center;padding:20px 12px 10px}
.home-try .ad .ah .lg{width:30px;height:30px;font-size:14px;border-radius:50%}
.home-try .ad .ah b{font-weight:900;font-size:13px;display:block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-try .ad .ah small{font-weight:700;font-size:11px;color:#64748b}
.home-try .ad .ah .fb{margin-inline-start:auto;width:22px;height:22px;flex-shrink:0}
.home-try .ad .txt{padding:0 12px 8px;font-weight:700;font-size:12.5px;line-height:1.6}
.home-try .ad .im{position:relative;height:170px;overflow:hidden;background:#e2e8f0}
.home-try .ad .im img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:100%}
.home-try .ad .af{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#f8fafc;gap:8px}
.home-try .ad .af b{font-weight:900;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-try .ad .af span{background:#2f3d1f;color:#fff;font-weight:900;font-size:12px;border-radius:8px;padding:5px 12px;flex-shrink:0}
.home-try .ai{
position:absolute;top:-14px;inset-inline-end:14px;white-space:nowrap;z-index:2;
background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-weight:900;font-size:12px;
border-radius:999px;padding:3px 12px;box-shadow:0 8px 16px rgba(124,58,237,.35);
}
.home-try .tag-live{
position:absolute;top:-6px;inset-inline-end:0;background:#0f172a;color:#fff;font-weight:900;
font-size:12px;border-radius:999px;padding:4px 12px;z-index:3;
}
html[dir="ltr"] .home-try .wrap{direction:ltr}
html[dir="ltr"] .home-try .form{order:1}
html[dir="ltr"] .home-try__col{order:2}
/* موبايل ribbon + try — آخر الملف حتى لا تغطيها القواعد العامة */
@media (max-width:700px){
.home-ribbon{
width:240px;height:49px;max-width:calc(100% + 18px);
margin-right:-18px;margin-left:auto;
}
.home-ribbon__orb{width:54px;height:54px;left:-27px}
.home-ribbon__txt{
font-size:13px;font-weight:800;padding:0 12px 0 38px;
white-space:nowrap;overflow:hidden;text-overflow:clip;
}
/* en ≤700: لازق شمال، دايرة عند الطرف الداخلي يمين */
html[dir="ltr"] .home-ribbon{
margin-left:-18px;margin-right:auto;
border-radius:0 999px 999px 0;
background:linear-gradient(90deg,rgba(15,118,110,.58) 0%,rgba(45,190,175,.45) 48%,rgba(220,252,247,.55) 100%);
}
html[dir="ltr"] .home-ribbon__orb{left:auto;right:-27px}
html[dir="ltr"] .home-ribbon__txt{padding:0 38px 0 12px}
.home-try{padding:44px 16px}
.home-try .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
.home-try .form{min-width:0;order:1}
.home-try__col{order:2}
.home-try__col .cta{align-items:stretch;margin-top:22px}
.home-try h2{font-size:31px}
.home-try .lead{font-size:15px;overflow-wrap:anywhere}
.home-try .stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:18px;padding-bottom:8px;min-width:0}
.home-try .phone{position:relative;top:auto;inset-inline-end:auto;transform:none;width:270px;max-width:100%;height:560px}
.home-try .ad{
position:relative;left:auto;bottom:auto;inset-inline-start:auto;width:min(270px,100%);transform:none;margin-top:4px
}
.home-try .cta .b{
width:100%;max-width:100%;height:auto;min-height:58px;padding:14px 18px;
white-space:normal;line-height:1.35;box-sizing:border-box;
}
}