@font-face{font-family:'Almarai';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/almarai-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Almarai';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/almarai-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Almarai';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/almarai-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Almarai';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/almarai-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Almarai';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/almarai-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Almarai';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/almarai-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Almarai';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/almarai-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Almarai';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/almarai-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cairo-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cairo-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cairo-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cairo-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cairo-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cairo-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/cairo-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/cairo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/tajawal-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/tajawal-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* الشعار */
.hero-tag{display:flex;align-items:center;gap:14px;margin:24px 0 0;font-family:var(--disp);font-size:clamp(19px,1.9vw,26px);font-weight:800;line-height:1.5;color:#fff;letter-spacing:-.2px}
.hero-tag::before{content:"";flex:none;width:36px;height:3px;border-radius:3px;background:var(--signal)}
.hero-tag b{font-weight:800;color:var(--glow,var(--signal))}
@media (max-width:640px){.hero-tag{margin-top:16px;gap:10px}.hero-tag::before{width:24px}}


:root{
  --ink0:#0A0620; --ink:#120B2E; --ink2:#1B1146; --ink3:#2A1D66;
  --royal:#6C4CF5; --royal-d:#5536E0; --glow:#22D3EE; --tint:#EFEBFF;
  --signal:#F28C38; --signal-d:#D9731F; --on-royal:#FFFFFF;
  --paper:#FFFFFF; --mist:#F6F4FD; --line:#E7E3F3; --text:#140F2E; --sub:#57507A;
  --ondark:#CFC8F2; --ondark2:#A49CCB;
  --disp:'Almarai', Tajawal, sans-serif; --body:'Almarai', Tajawal, sans-serif;
}
html[data-theme="ocean"]{--ink0:#03112A;--ink:#06193B;--ink2:#0A2453;--ink3:#123476;--royal:#2563EB;--royal-d:#1D4FD8;--glow:#38BDF8;--tint:#E8F0FE;--mist:#F3F7FD;--line:#E1E8F4;--text:#0B1A33;--sub:#4A5875;--ondark:#C3D3F0;--ondark2:#9DB0D3}
html[data-theme="gold"]{--ink0:#060B1A;--ink:#0A1022;--ink2:#111A36;--ink3:#1E2850;--royal:#F5A524;--royal-d:#E09310;--glow:#6E8BFF;--tint:#FFF4DE;--signal:#6E8BFF;--signal-d:#5573F0;--on-royal:#0A1022;--mist:#F6F7FB;--line:#E4E7F0;--text:#0D1430;--sub:#4A5375;--ondark:#CDD4E6;--ondark2:#A6B0C9}
html[data-theme="coral"]{--ink0:#0E0B1F;--ink:#17132F;--ink2:#221C45;--ink3:#322A63;--royal:#4F46E5;--royal-d:#4338CA;--glow:#F472B6;--tint:#EEEDFD;--signal:#FF6B5A;--signal-d:#E8513F;--mist:#F7F6FC;--line:#E6E4F2;--text:#15122B;--sub:#555377;--ondark:#CBC8EE;--ondark2:#A5A2CC}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:var(--royal);text-decoration:none}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:800;line-height:1.35}
p{margin:0}
.btn-p,.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:700;font-size:17px;min-height:54px;padding:0 30px;border-radius:999px;cursor:pointer;border:0;transition:background .2s,transform .2s}
.btn-p{background:var(--royal);color:var(--on-royal)}.btn-p:hover{background:var(--royal-d)}
.btn-g{background:transparent;color:var(--text);border:1.5px solid #CBD2E3}.btn-g:hover{border-color:var(--text)}
.ltr{direction:ltr;unicode-bidi:isolate}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.sc{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand b{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1}
.brand small{display:block;font-size:13px;color:var(--sub);margin-top:4px}
.brand b{font-family:var(--disp);font-size:22px;letter-spacing:-.2px}.brand em{font-style:normal;color:var(--signal)}
.nav{display:flex;gap:30px;font-weight:500;font-size:16px}
.nav a{color:var(--sub)}.nav a:hover{color:var(--text)}
.hdr-cta{display:flex;align-items:center;gap:14px}
.hdr-cta .tel{color:var(--text);font-weight:700}
.hdr-cta .btn-p{min-height:46px;font-size:15px;padding:0 22px;background:var(--ink)}
@media (max-width:980px){.nav{display:none}.hdr-cta .tel{display:none}}

/* hero */
.hero{padding:84px 0 0}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end}
.hero h1{font-size:clamp(40px,5.4vw,74px);line-height:1.22;letter-spacing:-.5px}
.ver{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;font-size:15px;color:var(--sub)}
.ver b{font-family:var(--disp);color:var(--text);font-size:16px}
.ver i{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(255,107,44,.16)}
.hero-side{display:flex;flex-direction:column;gap:26px;padding-bottom:12px}
.hero-side p{font-size:19px;color:var(--sub);line-height:1.9}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}}

/* stage */
.stage-sec{background:linear-gradient(to bottom,var(--paper) 0,var(--paper) 46%,var(--ink) 46%,var(--ink) 100%);padding:40px 0 0;overflow:hidden}
.stage-sec .lapwrap{margin:0 auto}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:70px;border-top:1px solid rgba(255,255,255,.12)}
.fact{padding:30px 24px 40px;border-left:1px solid rgba(255,255,255,.12);color:#fff}
.fact:last-child{border-left:0}
.fact b{display:block;font-family:var(--disp);font-size:28px;font-weight:600;line-height:1.3}
.fact span{color:var(--sub-d);font-size:15px}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}.fact{border-left:0;border-bottom:1px solid rgba(255,255,255,.12)}}

/* section heads */
.sec{padding:120px 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head h2{font-size:clamp(32px,3.6vw,48px)}
.head p{color:var(--sub);font-size:18px;max-width:520px}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:14px}}

/* activity picker */
.picker{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:stretch}
.acts{display:flex;flex-direction:column;gap:4px}
.act{display:flex;align-items:center;gap:14px;width:100%;text-align:right;font-family:var(--body);font-size:17px;font-weight:600;color:var(--sub);background:transparent;border:0;border-radius:14px;padding:14px 16px;min-height:56px;cursor:pointer;transition:background .2s,color .2s}
.act svg{flex:0 0 24px;stroke:currentColor}
.act:hover{background:var(--mist);color:var(--text)}
.act[aria-selected=true]{background:var(--ink);color:#fff}
.panel{background:var(--mist);border-radius:28px;padding:48px;display:flex;flex-direction:column;gap:24px;position:relative;overflow:hidden;min-height:520px}
.panel .pk{font-size:15px;color:var(--royal);font-weight:700}
.panel h3{font-size:38px}
.panel .pd{color:var(--sub);font-size:18px;max-width:620px}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.plist li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px}
.plist li::before{content:"";flex:0 0 20px;height:20px;margin-top:4px;border-radius:50%;background:var(--royal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;color:var(--on-royal)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14.5px;font-weight:600}
.chips span.opt{color:var(--sub);border-style:dashed}
.panel-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px}
.panel-cta small{color:var(--sub);font-size:15px}
.panel .ghost{position:absolute;left:-30px;bottom:-40px;width:260px;height:260px;stroke:var(--royal);opacity:.07;pointer-events:none}
.panel.swap .anim{animation:sw .45s ease}
@keyframes sw{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.picker{grid-template-columns:1fr}.acts{flex-direction:row;overflow-x:auto;padding-bottom:6px}.act{flex:0 0 auto;width:auto}.panel{padding:28px;min-height:0}.plist{grid-template-columns:1fr}.panel h3{font-size:28px}}

/* flow */
.flow-sec{background:var(--mist)}
.flow{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:stretch}
.fcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px}
.fcard h3{font-size:22px}
.fcard .fs{font-size:15px;color:var(--sub)}
.arrow{display:flex;align-items:center;justify-content:center;color:var(--royal)}
.doc{background:var(--mist);border-radius:14px;padding:16px;font-size:14px;font-family:Tajawal,sans-serif;display:flex;flex-direction:column;gap:7px;flex:1}
.doc .dr{display:flex;justify-content:space-between;gap:10px}
.doc .dh{font-weight:800;border-bottom:1px solid var(--line);padding-bottom:8px;display:flex;justify-content:space-between}
.doc .dt{border-top:1px solid var(--line);padding-top:8px;font-weight:800;color:var(--royal)}
.doc .dm{color:var(--sub)}
.jr{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px}
.jr .h{color:var(--sub);font-weight:700}
.guard{margin-top:28px;display:flex;gap:18px;align-items:center;background:var(--ink);color:#fff;border-radius:22px;padding:24px 28px}
.guard svg{flex:0 0 40px}
.guard p{color:var(--ondark)}
.guard b{color:#fff}
@media (max-width:980px){.flow{grid-template-columns:1fr}.arrow{height:48px}.arrow svg{transform:rotate(-90deg)}}

/* features */
.feats{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.feat{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.feat .ic{width:52px;height:52px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:center}
.feat h3{font-family:var(--body);font-size:19px;font-weight:700;margin-bottom:4px}
.feat p{color:var(--sub);font-size:16px}
@media (max-width:860px){.feats{grid-template-columns:1fr}}

/* videos */
.vids{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.vmain,.vsm{display:flex;flex-direction:column;gap:14px;color:var(--text)}
.thumb{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center}
.thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 16px,transparent 16px 32px)}
.thumb .pl{position:relative;width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.vmain:hover .pl,.vsm:hover .pl{transform:scale(1.08)}
.thumb .du{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:2px 10px;font-size:13px}
.thumb .tg{position:absolute;top:16px;right:16px;color:#fff;font-size:14px;font-weight:600;background:rgba(255,255,255,.12);border-radius:8px;padding:4px 12px}
.vmain b{font-family:var(--disp);font-size:26px;font-weight:600}
.vside{display:flex;flex-direction:column;gap:18px}
.vsm{flex-direction:row;align-items:center;gap:16px}
.vsm .thumb{flex:0 0 46%;border-radius:16px}
.vsm .thumb .pl{width:48px;height:48px}
.vsm b{font-size:17px;font-weight:700;display:block}
.vsm small{color:var(--sub);font-size:14px}
@media (max-width:900px){.vids{grid-template-columns:1fr}}

/* steps + faq */
.sf{display:grid;grid-template-columns:1fr 1.25fr;gap:72px}
.steps{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:18px;position:relative;padding-bottom:34px}
.steps li:not(:last-child)::after{content:"";position:absolute;right:23px;top:52px;bottom:4px;width:2px;background:var(--line)}
.steps .n{width:48px;height:48px;border-radius:50%;background:var(--royal);color:var(--on-royal);font-family:var(--disp);font-size:20px;display:flex;align-items:center;justify-content:center}
.steps h3{font-family:var(--body);font-size:20px;font-weight:700}
.steps p{color:var(--sub);font-size:16px}
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:18px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 28px;height:28px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140F2E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--sub);padding:0 0 22px;max-width:620px}
.sf h2{font-size:clamp(30px,3.2vw,42px)}
@media (max-width:900px){.sf{grid-template-columns:1fr;gap:56px}}

/* contact */
.contact{background:var(--ink);color:#fff;padding:110px 0}
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.contact h2{font-size:clamp(36px,4vw,56px)}
.contact .lead{color:var(--ondark);font-size:19px;margin-top:18px}
.clist{margin-top:36px;display:flex;flex-direction:column;gap:4px}
.clist a,.clist span{display:flex;align-items:center;gap:14px;color:#fff;font-size:17px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.clist i{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-style:normal}
.form{background:#fff;color:var(--text);border-radius:28px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font-family:var(--body);font-size:16px;background:var(--mist);border:1.5px solid transparent;border-radius:14px;padding:12px 16px;color:var(--text);min-height:50px;transition:border-color .2s,background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--royal);background:#fff}
.form textarea{resize:vertical;min-height:110px}
.form .note{grid-column:1/-1;color:var(--sub);font-size:14px;text-align:center}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}.form{grid-template-columns:1fr;padding:24px}}

footer{background:var(--ink0);color:var(--ondark2);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-top:34px;padding-bottom:34px}
footer b{color:#fff;font-family:var(--disp)}

.wa{position:fixed;left:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--royal);color:var(--on-royal);border-radius:999px;padding:0 20px 0 14px;height:56px;font-weight:700;box-shadow:0 14px 34px rgba(60,40,160,.35)}
.wa:hover{background:var(--royal-d);color:#fff}
@media (max-width:600px){.wa span{display:none}.wa{padding:0;width:56px;justify-content:center}}

/* pricing */
.pr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-bottom:34px}
.seg2{display:inline-flex;background:var(--mist);border-radius:999px;padding:5px;gap:4px}
.seg2 button{font-family:var(--body);font-size:16px;font-weight:700;border:0;background:transparent;color:var(--sub);border-radius:999px;padding:0 22px;min-height:46px;cursor:pointer}
.seg2 button[aria-pressed=true]{background:var(--ink);color:#fff}
.pr-note{color:var(--sub);font-size:15px}
.plans{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:28px;padding:34px;display:flex;flex-direction:column;gap:18px;background:#fff}
.plan h3{font-size:24px}
.plan .ps{color:var(--sub);font-size:16px}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font-family:var(--disp);font-size:46px;font-weight:800;line-height:1.1}
.price span{color:var(--sub);font-size:16px}
.price small{width:100%;color:var(--sub);font-size:14px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:16px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:0 0 18px;height:18px;margin-top:5px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3BE0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .btn-p,.plan .btn-g{margin-top:auto}
.plan.hot{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 30px 60px rgba(11,20,64,.25)}
.plan.hot .ps,.plan.hot .price span,.plan.hot .price small{color:var(--ondark)}
.plan.hot li::before{background-color:rgba(255,255,255,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.plan.hot .btn-p{background:var(--signal)}.plan.hot .btn-p:hover{background:var(--signal-d)}
.badge{align-self:flex-start;background:var(--signal);color:#fff;font-size:13.5px;font-weight:700;border-radius:999px;padding:4px 14px}
.save{color:var(--signal);font-weight:700}
.ptable{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.prow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line);font-size:17px}
.prow b{font-family:var(--disp);font-size:19px;white-space:nowrap}
.prow small{display:block;color:var(--sub);font-size:14px}
.extras{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.extra{background:var(--mist);border-radius:20px;padding:22px 24px}
.extra b{display:block;font-family:var(--disp);font-size:22px}
.extra span{color:var(--sub);font-size:15px}
@media (max-width:980px){.plans{grid-template-columns:1fr}.ptable{grid-template-columns:1fr}.extras{grid-template-columns:1fr}}

/* clients */
.clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.client{border:1.5px dashed #CBD2E3;border-radius:24px;padding:26px;display:flex;gap:18px;align-items:center;min-height:120px}
.client .lg{flex:0 0 68px;height:68px;border-radius:18px;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px;text-align:center;line-height:1.3}
.client b{display:block;font-size:18px}
.client span{color:var(--sub);font-size:15px}
.cl-note{margin-top:22px;color:var(--sub);font-size:15px;text-align:center}
@media (max-width:900px){.clients{grid-template-columns:1fr}}

/* downloads */
.dls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dl{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px}
.dl.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.dl .di{width:56px;height:56px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:center}
.dl h3{font-family:var(--body);font-size:19px;font-weight:800}
.dl p{color:var(--sub);font-size:15px;flex:1}
.dl.main p{color:var(--ondark)}
.dl .meta{font-size:13.5px;color:var(--sub)}
.dl.main .meta{color:var(--ondark2)}
.dl a.go{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;font-weight:700;background:var(--mist);color:var(--text)}
.dl a.go:hover{background:#E6EAF5}
.dl.main a.go{background:var(--signal);color:#fff}
.req{margin-top:28px;border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 36px;color:var(--sub);font-size:15.5px}
.req b{color:var(--text)}
@media (max-width:1100px){.dls{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.dls{grid-template-columns:1fr}}

/* pricing calculator */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:44px}
.rule{display:grid;grid-template-columns:44px 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
.rn{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.rule b{display:block;font-size:18px;margin-bottom:4px}
.rule p{color:var(--sub);font-size:15.5px}
.calc{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
.cstep{border:0;margin:0 0 26px;padding:0}
.cstep legend{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;margin-bottom:14px;padding:0}
.cstep legend span{width:30px;height:30px;border-radius:50%;background:var(--royal);color:var(--on-royal);font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.cstep legend small{color:var(--sub);font-weight:400;font-size:15px}
.mains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;min-height:64px;transition:border-color .15s,background .15s}
.opt:hover{border-color:#B9C2DA}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .on{font-weight:700;font-size:16px;display:block}
.opt .oi{color:var(--sub);font-size:13.5px;display:block;line-height:1.5}
.opt .op{font-weight:800;white-space:nowrap;font-size:16px}
.opt:has(input:checked){border-color:var(--royal);background:var(--tint);box-shadow:inset 0 0 0 1px var(--royal)}
.opt:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:2px}
.opt.dis{opacity:.5;cursor:not-allowed}
.opt .tag{font-size:12.5px;color:var(--royal);font-weight:700}
.adds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.adds .op::before{content:"+ "}
.devs{display:flex;flex-direction:column;gap:10px}
.dev{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px 16px}
.dev-n b{display:block;font-size:16px}.dev-n small{color:var(--sub);font-size:13.5px}.dev-n small b{display:inline;font-size:13.5px;color:var(--text)}
.dev-c{display:flex;align-items:center;gap:10px}
.dev output{min-width:32px;text-align:center;font-size:20px;font-weight:800}
.stp{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:22px;font-weight:700;cursor:pointer;color:var(--text);font-family:var(--body)}
.stp:hover{border-color:var(--text)}
#devN{min-width:36px;text-align:center;font-size:22px;font-weight:800}
.dev-t{color:var(--sub);font-size:15px}
.sum{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px rgba(11,20,64,.22)}
.sum-h{font-weight:800;font-size:20px}
.sum-lines{display:flex;flex-direction:column;gap:10px;font-size:15.5px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:16px}
.sum-lines div{display:flex;justify-content:space-between;gap:12px}
.sum-lines span{color:var(--ondark)}
.sum-t{display:flex;justify-content:space-between;align-items:baseline}
.sum-t span{font-size:17px;color:var(--ondark)}
.sum-t b{font-size:38px;font-weight:800;line-height:1.1}
.sum-s{color:var(--ondark2);font-size:14px;line-height:1.7}
.sum-hint{background:rgba(233,122,46,.16);border:1px solid rgba(233,122,46,.5);color:#FFD9BF;border-radius:14px;padding:12px 14px;font-size:14.5px}
.sum .btn-p.dis{opacity:.45;pointer-events:none}
.sum .btn-p{background:var(--signal)}.sum .btn-p:hover{background:var(--signal-d)}
.examples{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ex-h{color:var(--sub);font-weight:700}
.ex{font-family:var(--body);font-size:15px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer;color:var(--text)}
.ex:hover{border-color:var(--text)}
@media (max-width:1050px){.calc{grid-template-columns:1fr}.sum{position:static}}
/* license how-it-works */
.lic-sec{background:var(--paper)}
.lic-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.lic-steps li{background:var(--mist);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px;position:relative}
.lic-steps .n{width:40px;height:40px;border-radius:50%;background:var(--royal);color:var(--on-royal);font-weight:800;display:flex;align-items:center;justify-content:center}
.lic-steps b{font-size:18px}
.lic-steps p{color:var(--sub);font-size:15.5px}
.lic-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-top:22px}
.lic-card{border:1px solid var(--line);border-radius:24px;padding:28px;background:#fff}
.lic-card h3{font-size:22px;margin-bottom:14px}
.lic-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lic-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.lic-list li:first-child{border-top:0}
.lic-list span{color:var(--sub)}
.lic-list b{text-align:left}
.lic-card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.lic-card.dark p{color:var(--ondark);font-size:16px}
.lic-card.dark p+p{margin-top:12px}
.lic-card.dark b{color:#fff}
@media (max-width:980px){.lic-steps{grid-template-columns:1fr 1fr}.lic-grid{grid-template-columns:1fr}}
@media (max-width:600px){.lic-steps{grid-template-columns:1fr}}
@media (max-width:760px){.rules{grid-template-columns:1fr}.mains,.adds{grid-template-columns:1fr}}

/* announcement bar */
.annc{background:var(--ink0);color:var(--ondark);font-size:14.5px}
.annc-in{display:flex;align-items:center;gap:14px;height:44px}
.annc-new{flex:0 0 auto;background:var(--signal);color:#fff;font-weight:800;font-size:12.5px;border-radius:999px;padding:2px 12px}
.annc-msgs{position:relative;flex:1;height:44px;overflow:hidden}
.annc-m{position:absolute;inset:0;display:flex;align-items:center;gap:10px;color:var(--ondark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);transition:transform .55s ease,opacity .55s ease}
.annc-m.on{opacity:1;transform:none}
.annc-m.out{opacity:0;transform:translateY(-100%)}
.annc-m span{color:#FFB98A;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.annc-m:hover{color:#fff}
.annc-x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--ondark2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.annc-x:hover{background:rgba(255,255,255,.08);color:#fff}
.annc.hide{display:none}

/* ads carousel */
.ads-sec{padding:110px 0 0}
.ads{position:relative;min-height:470px}
.ad{position:absolute;inset:0;border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:30px;padding:56px 64px;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .7s ease,transform .7s ease,visibility 0s .7s}
.ad.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s ease,visibility 0s}
.ad-a{background:var(--royal);color:var(--on-royal)}
.ad-b{background:var(--ink);color:#fff}
.ad-c{background:#F3E4D8;color:var(--text)}
.ad::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:-140px;bottom:-260px;background:rgba(255,255,255,.07);pointer-events:none}
.ad-c::before{background:rgba(233,122,46,.12)}
.ad-txt{position:relative;display:flex;flex-direction:column;gap:20px}
.ad-k{align-self:flex-start;font-size:14px;font-weight:800;border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.16)}
.ad-c .ad-k{background:var(--signal);color:#fff}
.ad h2{font-size:clamp(28px,3.2vw,44px);line-height:1.35}
.ad p{font-size:18px;line-height:1.85;opacity:.88;max-width:560px}
.ad-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.ad-b1{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;border-radius:999px;font-weight:800;font-size:17px;background:#fff;color:var(--ink)}
.ad-b1:hover{color:var(--royal)}
.ad-c .ad-b1{background:var(--ink);color:#fff}
.ad-price{font-weight:700;opacity:.9}
.ad-vis{position:relative;display:flex;justify-content:center;align-items:center}
.phone{width:250px;background:var(--ink);border-radius:38px;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.35);transform:rotate(-4deg)}
.ph-scr{background:#F4F6FB;border-radius:30px;overflow:hidden;color:var(--text);font-size:12.5px;display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.ph-top{background:var(--ink2);color:#fff;padding:22px 16px 14px;display:flex;flex-direction:column;gap:2px}
.ph-top span{color:var(--ondark2);font-size:11.5px}.ph-top b{font-size:16px}
.ph-top .off{margin-top:6px;align-self:flex-start;background:rgba(233,122,46,.2);color:#FFB98A;border-radius:999px;padding:2px 10px}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px}
.ph-grid span{border-radius:14px;padding:14px 10px;font-weight:800;text-align:center}
.pk1{background:var(--royal);color:var(--on-royal)}.pk2{background:#fff;border:1px solid var(--line)}
.ph-list{display:flex;flex-direction:column;gap:6px;padding:0 12px}
.ph-list div{background:#fff;border-radius:12px;padding:9px 11px;display:flex;flex-direction:column}
.ph-list small{color:var(--sub)}
.ph-sum{margin:0 12px;display:flex;justify-content:space-between;background:var(--tint);border-radius:12px;padding:10px 12px}
.ph-sum b{color:var(--royal);font-size:15px}
.mfg{width:min(380px,100%);background:#fff;color:var(--text);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 40px 80px rgba(0,0,0,.35);font-size:15px}
.mfg-h{display:flex;justify-content:space-between;align-items:center}
.mfg-h b{font-size:18px}.mfg-h span{background:#FFF0E6;color:#B5530F;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:700}
.mfg-p{display:flex;justify-content:space-between;color:var(--sub)}
.mfg-p b{color:var(--text)}
.mfg-bar{height:10px;border-radius:5px;background:var(--tint);overflow:hidden}
.mfg-bar i{display:block;height:100%;background:var(--signal);border-radius:5px}
.mfg-s{display:flex;justify-content:space-between;color:var(--sub);font-size:13.5px}
.mfg-t{font-weight:800;margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
.mfg-r{display:flex;justify-content:space-between}
.mfg-c{display:flex;justify-content:space-between;background:var(--tint);border-radius:12px;padding:10px 12px;margin-top:4px}
.mfg-c b{color:var(--royal)}
.allsys{display:flex;flex-direction:column;align-items:center;gap:22px}
.as-logo{display:flex;align-items:center;gap:14px}
.as-logo b{font-size:30px;font-weight:800}
.as-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:420px}
.as-chips span{background:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;box-shadow:0 6px 16px rgba(11,20,64,.08)}
.ads-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:22px}
.ads-arr{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ads-arr:hover{border-color:var(--text)}
.ads-dots{display:flex;gap:8px}
.ads-dots button{position:relative;width:34px;height:8px;border-radius:4px;border:0;background:#D7DCEA;cursor:pointer;overflow:hidden;padding:0}
.ads-dots button.on::after{content:"";position:absolute;inset:0;right:0;width:0;background:var(--royal);animation:adp 7s linear forwards;color:var(--on-royal)}
.ads.paused ~ .ads-nav .ads-dots button.on::after{animation-play-state:paused}
@keyframes adp{to{width:100%}}
@media (max-width:980px){.ads{min-height:0;display:grid}.ad{position:relative;grid-area:1/1;grid-template-columns:1fr;padding:36px 26px;gap:30px}.phone{width:220px}}
@media (max-width:640px){.annc-m{font-size:13px}.annc-m span{display:none}}
@media (prefers-reduced-motion:reduce){.annc-m,.ad{transition:none}.ads-dots button.on::after{animation:none;width:100%}}

.ads{min-height:560px}
.phone{transform:rotate(-4deg) scale(.9)}
.as-logo b,.brand b{white-space:nowrap}
@media (max-width:980px){.ads{min-height:0}.phone{transform:rotate(-3deg)}}
@media (max-width:600px){.hdr-cta .btn-p{display:none}.brand small{font-size:11.5px}.brand b{font-size:19px}.as-logo b{font-size:24px}}

/* ===== v6: pages, dark hero, tighter rhythm ===== */
[id]{scroll-margin-top:96px}
.page[hidden]{display:none}
.sec{padding:84px 0}
.head{margin-bottom:40px}
.hero{background:var(--ink0);color:#fff;padding:72px 0 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 380px at 82% 20%, color-mix(in srgb, var(--royal) 55%, transparent), transparent 70%),
  radial-gradient(520px 340px at 12% 70%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%);
  pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(36px,4.6vw,62px);color:#fff}
.hero .ver{color:var(--ondark)}.hero .ver b{color:#fff}
.hero-side p{color:var(--ondark)}
.hero-side p .ltr{color:#fff!important}
.hero .btn-g{color:#fff;border-color:rgba(255,255,255,.3)}.hero .btn-g:hover{border-color:#fff}
.hero .btn-g svg circle{fill:#fff!important}.hero .btn-g svg path{fill:var(--ink0)!important}
.hero .btn-p{background:var(--royal);box-shadow:0 10px 30px color-mix(in srgb, var(--royal) 45%, transparent);color:var(--on-royal)}
.stage-sec{background:linear-gradient(to bottom,var(--ink0) 0,var(--ink0) 62%,var(--ink) 62%,var(--ink) 100%);padding:36px 0 0}
.stage-sec .lap{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px color-mix(in srgb, var(--royal) 40%, transparent)}
.facts{margin-top:56px}
.fact span{color:var(--ondark2)}
.ads-sec{padding:84px 0 0}
.panel{min-height:0}
.phero{background:var(--ink0);color:#fff;padding:70px 0 64px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 300px at 85% 0%, color-mix(in srgb, var(--royal) 50%, transparent), transparent 70%),radial-gradient(420px 260px at 10% 100%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 70%);pointer-events:none}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(32px,4vw,52px);color:#fff;margin:14px 0 12px}
.phero p{color:var(--ondark);font-size:19px;max-width:640px}
.crumb{display:flex;gap:10px;color:var(--ondark2);font-size:15px}
.crumb a{color:var(--ondark)}.crumb a:hover{color:#fff}
.gcta{padding:0 0 84px}
.gcta-in{background:var(--royal);color:var(--on-royal);border-radius:32px;padding:44px 52px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.gcta-in::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:-120px;top:-200px;background:rgba(255,255,255,.08)}
.gcta-in>*{position:relative}
.gcta h2{font-size:clamp(26px,2.8vw,36px)}
.gcta p{color:rgba(255,255,255,.85);margin-top:6px}
.gcta-b{display:flex;flex-wrap:wrap;gap:12px}
.gcta .btn-p{background:#fff;color:var(--ink)}.gcta .btn-p:hover{background:var(--tint)}
.btn-w{display:inline-flex;align-items:center;min-height:54px;padding:0 28px;border-radius:999px;font-weight:700;font-size:17px;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-w:hover{color:#fff;border-color:#fff}
.nav a.on{color:var(--text);font-weight:800}
.nav a{position:relative}.nav a.on::after{content:"";position:absolute;right:0;left:0;bottom:-8px;height:3px;border-radius:2px;background:var(--royal);color:var(--on-royal)}
.thm{position:fixed;right:22px;bottom:22px;z-index:61;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(20,15,46,.18);padding:12px 14px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.thm b{font-size:14.5px}.thm small{color:var(--sub);font-weight:400}
.thm-l{display:flex;gap:8px}
.thm-l button{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0}
.thm-l button[aria-pressed=true]{box-shadow:0 0 0 3px var(--text)}
.thm-n{font-size:13px;color:var(--sub);text-align:center}
@media (max-width:600px){.thm{right:12px;bottom:88px;padding:10px}.thm b{display:none}}

.hdr-cta .btn-p{color:#fff}
.gcta .btn-p{color:var(--ink)}
/* ads in the brand palettes */
.ad-a{background:#6C4CF5!important;color:#fff!important}
.ad-b{background:#0A1022!important;color:#fff!important}
.ad-b .ad-k{background:#F5A524;color:#0A1022}
.ad-b .ad-b1{background:#F5A524;color:#0A1022}
.ad-b .mfg-bar i{background:#F5A524}
.ad-c{background:#2563EB!important;color:#fff!important}
.ad-c::before{background:rgba(255,255,255,.08)!important}
.ad-c .ad-k{background:#FF6B5A;color:#fff}
.ad-c .ad-b1{background:#fff;color:#06193B}
.ad-a .ad-b1{color:#2A1D66}
.ad-c .as-chips span{color:#06193B}
.vplayer{width:100%;aspect-ratio:16/9;border-radius:22px;background:#000;display:block;box-shadow:0 30px 60px rgba(20,15,46,.18)}
.vlib{display:flex;flex-direction:column;gap:12px;min-width:0}
.vtabs{display:flex;gap:6px;flex-wrap:wrap}
.vtabs button{font:inherit;font-size:14px;font-weight:700;border:1px solid var(--line,#E3E7F0);background:transparent;color:var(--text);border-radius:999px;padding:6px 14px;cursor:pointer}
.vtabs button.on{background:var(--royal);border-color:var(--royal);color:var(--on-royal,#fff)}
.vlist{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow-y:auto;padding-inline-end:4px}
.vli{font:inherit;display:flex;align-items:center;gap:12px;text-align:right;background:transparent;border:1px solid transparent;border-radius:14px;padding:6px;cursor:pointer;color:var(--text)}
.vli:hover{background:rgba(127,127,160,.08)}
.vli.on{border-color:var(--royal);background:rgba(127,127,160,.1)}
.vli img{width:128px;height:72px;object-fit:cover;border-radius:10px;flex:0 0 auto;background:#111}
.vli b{display:block;font-size:15.5px;font-weight:700}
.vli small{color:var(--sub);font-size:13px}
.vli[hidden]{display:none}
@media (max-width:900px){.vlist{max-height:none}}
.vmeta{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:15px}
.vtag{background:var(--signal);color:#fff;font-weight:800;font-size:12.5px;border-radius:999px;padding:2px 12px}
.vsm{opacity:.75}
/* laptop extras on this page */
.lapwrap{position:relative}
.tilt{transform:perspective(2000px) rotateX(var(--rx,0deg)) scale(var(--sc,1));transform-origin:50% 100%;will-change:transform}
.lap{position:relative;z-index:1;box-shadow:0 50px 100px rgba(11,20,64,.35)}
.lapbase{position:relative;z-index:1}
.rcpt{position:absolute;top:70px;left:-150px;width:214px;background:#fff;color:#1A2140;font-family:Tajawal,sans-serif;font-size:13px;padding:18px 16px 22px;display:flex;flex-direction:column;gap:7px;box-shadow:0 24px 50px rgba(11,20,64,.28);transform:translateX(150px) rotate(0);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .4s;z-index:0}
.rcpt::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:radial-gradient(circle at 6px 0,#fff 6px,transparent 6.5px) 0 0/12px 9px repeat-x}
.lapwrap[data-k=pos] .rcpt-pos,.lapwrap[data-k=res] .rcpt-res{transform:translateX(0) rotate(-5deg);opacity:1}
.r-h{display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:1px dashed #B9C2DA;padding-bottom:8px;gap:1px}
.r-h b{font-size:16px}.r-h small{color:#5A6385;font-size:11.5px}
.r-l{display:flex;justify-content:space-between}
.r-s{color:#5A6385;border-top:1px dashed #B9C2DA;padding-top:6px}
.r-t{font-weight:800;font-size:16px}
.r-big{font-size:15px;font-weight:700;border-bottom:1px dashed #DCE1EE;padding-bottom:6px}
.r-qr{align-self:center;width:62px;height:62px;margin-top:4px;background:conic-gradient(#1A2140 25%,#fff 0 50%,#1A2140 0 75%,#fff 0) 0 0/12px 12px;outline:6px solid #fff;box-shadow:0 0 0 7px #1A2140}
.r-f{text-align:center;color:#5A6385;font-size:12px}
@media (max-width:1300px){.rcpt{display:none}}
.stage-sec .tabs{margin-top:28px}
.stage-sec .tab{background:transparent;color:var(--ondark);border-color:rgba(255,255,255,.18);font-family:var(--body)}
.stage-sec .tab:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.stage-sec .tab.on{background:#fff;color:var(--ink);border-color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tilt{transform:none!important}.rcpt{transition:none}.panel.swap .anim{animation:none}}



.lapwrap{width:100%;max-width:1060px;margin-top:34px;text-align:right}
.lap{background:#0D1430;border-radius:22px 22px 0 0;padding:14px 14px 0;box-shadow:0 -10px 60px rgba(60,40,160,.14)}
.scr{position:relative;overflow:hidden;border-radius:10px 10px 0 0;background:#fff;height:calc(var(--s,1) * 580px)}
.stage{position:absolute;top:0;left:0;width:1032px;height:580px;transform:scale(var(--s,1));transform-origin:0 0;display:flex;font-family:Cairo,Tajawal,sans-serif;font-size:12.5px;color:#0D1430;background:#F7F8FC}
.lapbase{height:18px;margin:0 -3%;background:linear-gradient(#1A2350,#0D1430);border-radius:0 0 18px 18px}
.sb{width:200px;flex:0 0 200px;background:var(--ink2);color:var(--ondark);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.sb-logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;padding:0 8px 14px}
.dot{width:22px;height:22px;border-radius:50%;background:var(--royal);box-shadow:inset 0 0 0 5px #3E5BFF;color:var(--on-royal)}
.sbi{padding:8px 10px;border-radius:8px;transition:background .4s,color .4s}
.sbi.on{background:var(--ink3);color:#fff;font-weight:700}
.sb-user{margin-top:auto;display:flex;gap:8px;align-items:center;padding:10px 8px 0;border-top:1px solid var(--ink3);color:#fff;line-height:1.3}
.sb-user small{color:var(--ondark2)}
.av{width:30px;height:30px;border-radius:50%;background:var(--royal);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--on-royal)}
.mn{flex:1;min-width:0;display:flex;flex-direction:column}
.tb{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#fff;border-bottom:1px solid #E6EAF3}
.tb b{font-family:'Readex Pro',sans-serif;font-size:16px;font-weight:600;min-width:150px}
.srch{background:#F2F4FA;border-radius:8px;padding:7px 12px;color:#7A83A3;flex:1;max-width:300px}
.tb-r{margin-right:auto;display:flex;gap:6px}
.chip{background:#fff;border:1px solid #E3E7F1;border-radius:8px;padding:6px 11px;white-space:nowrap}
.chip.dark{background:var(--ink2);color:#fff;border-color:var(--ink2)}
.slides{position:relative;flex:1}
.slide{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.slide.on{opacity:1;transform:none}
.splash{inset:0;z-index:5;padding:0;background:var(--ink0);align-items:center;justify-content:center;transform:scale(1.03)}
.splash.on{transform:none}
.sp-in{display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff}
.sp-name{font-family:'Readex Pro',sans-serif;font-size:56px;font-weight:700;letter-spacing:-1px}
.sp-name span{font-size:24px;background:var(--signal);border-radius:999px;padding:4px 14px;vertical-align:middle;margin-left:8px}
.sp-sub{color:var(--ondark2);font-size:17px}
.sp-load{width:220px;height:4px;border-radius:2px;background:var(--ink3);overflow:hidden;margin-top:8px}
.sp-load i{display:block;height:100%;width:0;background:var(--signal)}
.splash.on .sp-load i{animation:ld 4.6s linear forwards}
@keyframes ld{to{width:100%}}
.card{background:#fff;border:1px solid #E6EAF3;border-radius:10px;padding:12px;min-width:0}
.ch{font-weight:700;margin-bottom:8px;font-size:13.5px}
.mut{color:#5A6385}.up{color:var(--royal);font-weight:700}.warn{color:#C2410C;font-weight:700}
.big{font-size:21px;font-weight:800;margin:3px 0}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.w2{grid-column:span 2}
.row{display:flex;gap:10px;align-items:stretch}
.bar{display:grid;grid-template-columns:1fr auto;gap:3px 6px;margin-bottom:9px}
.bar i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--royal);box-shadow:0 0 0 0 #fff;color:var(--on-royal)}
.tbl{padding:0;overflow:hidden}
.tr{display:grid;padding:7px 12px;border-top:1px solid #EEF1F7;align-items:center}
.tr.th{background:#F0F3FA;color:#5A6385;font-weight:700;border-top:0}
.c3{grid-template-columns:2fr 1fr 1fr}.c4{grid-template-columns:1fr 2fr 1fr 1fr}
.c6{grid-template-columns:1.4fr 1.2fr 1fr 1fr 1fr 1fr}
.c7{grid-template-columns:.3fr 2fr 1fr .8fr 1fr .8fr 1.1fr}
.tr.add{color:#8F98B8;background:#FAFBFE}
.pill{justify-self:start;border-radius:999px;padding:2px 10px;font-weight:700;font-size:11.5px}
.p-b{background:var(--tint);color:var(--royal)}.p-o{background:#FFEDE3;color:#B5400B}.p-g{background:#EEF0F5;color:#4A5375}
.fld{background:#fff;border:1px solid #DFE4F0;border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.fld small{color:#7A83A3;font-size:10.5px}
.btns{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.btn{border:1px solid #D6DCEA;background:#fff;border-radius:8px;padding:9px 14px;font-weight:700;text-align:center}
.btn.pri{background:var(--royal);border-color:var(--royal);color:var(--on-royal)}
.tot{width:290px;display:flex;flex-direction:column;gap:6px}
.tot>div:not(.ch){display:flex;justify-content:space-between}
.tot .net{border-top:1px solid #E6EAF3;padding-top:8px;font-size:16px;color:var(--royal)}
.seg{display:inline-flex;background:#EEF1F8;border-radius:9px;padding:3px;gap:2px;align-self:flex-start}
.seg span{padding:6px 14px;border-radius:7px}
.seg .on{background:#fff;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mini{display:flex;justify-content:space-between;align-items:center;background:#F3F5FB;border-radius:8px;padding:9px 12px;gap:10px}
.paper{flex:1;background:#fff;border:1px solid #E1E5EF;border-radius:4px;box-shadow:0 12px 30px rgba(15,26,74,.12);padding:20px 22px;display:flex;flex-direction:column;gap:11px;transform:rotate(-1deg);margin:4px 6px}
.ph{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink2);padding-bottom:10px}
.ph div{display:flex;flex-direction:column}.ph b{font-size:15px}.ph small{color:#7A83A3}
.plogo{border:1px dashed #B9C2DA;border-radius:8px;padding:10px 12px;color:#7A83A3;font-size:11px}
.pt{align-self:center;font-family:'Readex Pro',sans-serif;font-weight:700;font-size:17px;background:var(--tint);color:var(--royal);padding:4px 18px;border-radius:999px}
.pr{display:flex;justify-content:space-between}
.pl{border-bottom:1px dotted #CBD3E6;padding-bottom:6px}
.sig{margin-top:auto;display:flex;justify-content:space-between;color:#5A6385}
.sig span{display:flex;flex-direction:column;align-items:center;gap:16px}.sig i{display:block;width:80px;border-top:1px solid #9AA4C0}
.inp{background:#fff;border:1px solid #DFE4F0;border-radius:8px;padding:8px 12px;color:#8F98B8}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pd{background:#fff;border:1px solid #E6EAF3;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px}
.pd i{display:block;height:62px;border-radius:7px}.pd span{color:var(--royal);font-weight:800}
.li{display:flex;justify-content:space-between;border-bottom:1px dashed #E3E7F1;padding:6px 0}
.lg{display:inline-flex;align-items:center;gap:5px;color:#5A6385}.lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.tables{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.tables span{border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;font-weight:800;gap:2px}
.tables small{font-size:11px;font-weight:500}
.tb0{background:#fff;border:1px solid #D6DCEA;color:#5A6385}
.tb1{background:var(--royal);color:var(--on-royal)}.tb2{background:var(--signal);color:#fff}
.tables .sel{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--royal)}
.kan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.col{background:#EEF1F8;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.col.won{background:var(--tint)}
.kh{display:flex;justify-content:space-between;font-weight:700}
.kh b{background:#fff;border-radius:999px;padding:0 8px}
.kc{background:#fff;border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:3px;box-shadow:0 1px 2px rgba(15,26,74,.06)}
.kc small{color:#7A83A3}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.tab{font-family:inherit;font-size:14px;font-weight:700;color:#4A5375;background:#fff;border:1px solid #DDE2EF;border-radius:999px;padding:9px 16px;min-height:42px;cursor:pointer;position:relative;overflow:hidden}
.tab:hover{color:#0D1430;border-color:#B9C2DA}
.tab.on{color:#fff;background:var(--ink2);border-color:var(--ink2)}
.tab.on::after{content:"";position:absolute;bottom:0;right:0;height:3px;background:var(--signal);width:0;animation:pg 5s linear forwards}
.tabs.paused .tab.on::after{animation-play-state:paused}
@keyframes pg{to{width:100%}}
@media (max-width:640px){.tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;margin-top:16px}.tab{flex:0 0 auto;font-size:13px;padding:8px 14px}}
@media (prefers-reduced-motion:reduce){.slide{transition:none;transform:none}.tab.on::after,.splash.on .sp-load i{animation:none}}


/* ===== إضافات النسخة متعددة الصفحات (SEO) — بنفس ألوان وخطوط التصميم المعتمد ===== */
html.annc-off .annc{display:none}
.vli{text-decoration:none}
.vli-ph{width:128px;height:72px;border-radius:10px;background:var(--ink);flex:0 0 auto}
.vplayer{height:auto}
.vpage{font-weight:700;font-size:15px;align-self:flex-start}
.vlib-h{font-size:20px;margin-bottom:4px}
.vids[data-nav] .vlist{max-height:none}
.vmeta-h{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:15px!important;color:var(--ondark2)!important}
.vstep{font-size:17px;color:var(--text);padding-top:10px}
.prose-p{color:var(--sub);font-size:17px;line-height:1.9}
.pmore{display:inline-block;font-weight:800;font-size:15.5px;color:var(--royal);margin-top:4px}
.pmore:hover{text-decoration:underline;text-underline-offset:4px}
.flink{color:var(--text)}.flink:hover{color:var(--royal)}
.phero .crumb a{white-space:nowrap}

/* صفحات الأنشطة */
.lp-intro{display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:start}
.prose h2{font-size:clamp(28px,3vw,40px);margin-bottom:20px}
.prose p{color:var(--sub);font-size:18px;line-height:1.95}
.prose p+p{margin-top:16px}
.lp-card{position:sticky;top:96px;display:flex;flex-direction:column;gap:6px}
.lp-card h3{margin-bottom:6px}
.lp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.lp-row span{color:var(--ondark);font-size:16px}
.lp-row b{font-size:24px;font-weight:800;white-space:nowrap;color:#fff}
.lp-card>p{margin-top:10px}
.lp-addr{display:flex;align-items:flex-start;gap:8px;font-size:16px}
.lp-addr svg{flex:0 0 18px;margin-top:5px}
.lp-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lp-card .btn-p{background:var(--signal);color:#fff}.lp-card .btn-p:hover{background:var(--signal-d)}
.lp-btns .btn-w{color:var(--text);border-color:#CBD2E3}.lp-btns .btn-w:hover{color:var(--text);border-color:var(--text)}
.lp-card .btn-w,.lic-card.dark .btn-w{color:#fff;border-color:rgba(255,255,255,.5)}.lp-card .btn-w:hover{color:#fff;border-color:#fff}
.lp-card .btn-w{gap:8px}
.lp-rel{padding:56px 0}
.lp-rel h2{font-size:24px;margin-bottom:18px}
.rel-chips{display:flex;flex-wrap:wrap;gap:10px}
.rel-chips a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:700;font-size:15.5px;color:var(--text);transition:border-color .2s,color .2s}
.rel-chips a svg{stroke:var(--royal)}
.rel-chips a:hover{border-color:var(--royal);color:var(--royal)}
.lp-btns-l{margin-top:26px}
@media (max-width:900px){.lp-intro{grid-template-columns:1fr;gap:32px}.lp-card{position:static}}
/* «فيديو النظام في 30 ثانية» + «جرّب النظام ده مجانًا شهر» (فوق في صفحة النشاط) */
.sysv-sec{padding:44px 0 8px}
.sysv{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:center}
.sysv-h{display:flex;align-items:center;gap:10px;font-size:clamp(22px,2.4vw,28px);margin-bottom:14px}
.sysv-h svg{stroke:var(--royal);flex:0 0 auto}
.sysv-f{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:0 24px 60px -30px rgba(18,11,46,.55)}
.sysv-player,.sysv-poster{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.sysv-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin-top:12px;font-size:17px}
.sysv-t b{color:var(--text)}
.sysv-d{color:var(--sub);font-size:15px;white-space:nowrap}
.sysv-cta{background:var(--ink);color:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px}
.sysv-cta h3{font-size:clamp(21px,2vw,25px);line-height:1.5;color:#fff}
.sysv-cta ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sysv-cta li{display:flex;align-items:flex-start;gap:10px;color:var(--ondark);font-size:16px;line-height:1.7}
.sysv-cta li svg{flex:0 0 18px;margin-top:5px;stroke:var(--signal)}
.sysv-b{align-self:stretch;justify-content:center;text-align:center;background:var(--signal);color:#fff;margin-top:4px}
.sysv-b:hover{background:var(--signal-d);color:#fff}
@media (max-width:900px){.sysv{grid-template-columns:minmax(0,1fr);gap:22px}.sysv-sec{padding:30px 0 0}.sysv-cta{padding:22px}}

/* الفوتر: روابط الموقع */
footer .wrap.fnav{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:28px 48px;align-items:start;padding-top:48px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.08)}
.fnav h2{font-family:var(--body);font-size:15px;font-weight:800;color:#fff;margin-bottom:12px}
.fnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.fnav a{color:var(--ondark2);font-size:14.5px}.fnav a:hover{color:#fff}
@media (max-width:900px){footer .wrap.fnav{grid-template-columns:1fr;gap:24px}}

/* ===== سابقة أعمالنا ===== */
.cstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--ink);color:#fff;border-radius:28px;overflow:hidden;position:relative;margin-bottom:28px}
.cstats::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 90% 0%,color-mix(in srgb,var(--royal) 45%,transparent),transparent 70%),radial-gradient(360px 200px at 0% 100%,color-mix(in srgb,var(--glow) 18%,transparent),transparent 70%);pointer-events:none}
.cstats>div{position:relative;padding:28px 30px;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:4px}
.cstats>div:last-child{border-left:0}
.cstats b{font-family:var(--disp);font-size:clamp(28px,3.2vw,42px);font-weight:800;line-height:1.2}
.cstats span{color:var(--ondark);font-size:15.5px}
@media (max-width:760px){.cstats{grid-template-columns:1fr}.cstats>div{border-left:0;border-bottom:1px solid rgba(255,255,255,.1);padding:20px 24px}.cstats>div:last-child{border-bottom:0}}
.c-line{margin-top:14px;font-weight:700;color:#fff!important;font-size:17px!important}
.cflt{margin:0 0 22px}
.cflt button[aria-pressed=true]{background:var(--royal);border-color:var(--royal);color:var(--on-royal)}
.cwall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ctile{position:relative;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;min-height:104px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.ctile::after{content:"";position:absolute;left:-40px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--royal) 9%,transparent),transparent 70%);pointer-events:none}
.ctile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,15,46,.10);border-color:color-mix(in srgb,var(--royal) 35%,var(--line))}
.ctile[hidden]{display:none}
.cmono{flex:0 0 58px;width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.5px;color:#fff;background:linear-gradient(140deg,var(--royal),var(--ink3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 22px color-mix(in srgb,var(--royal) 28%,transparent)}
.ctile[data-s=rest] .cmono{background:linear-gradient(140deg,var(--signal),var(--ink3))}
.ctile[data-s=med] .cmono{background:linear-gradient(140deg,var(--glow),var(--ink3))}
.ctile[data-s=retail] .cmono{background:linear-gradient(140deg,var(--royal-d),var(--signal))}
.clogo{flex:0 0 58px;width:58px;height:58px;border-radius:18px;object-fit:contain;background:var(--mist)}
.cinfo{display:flex;flex-direction:column;gap:6px;min-width:0}
.cname{font-size:17.5px;font-weight:700;line-height:1.45}
.cmeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cchip{display:inline-flex;align-items:center;gap:6px;background:var(--mist);border-radius:999px;padding:3px 12px 3px 10px;font-size:13.5px;font-weight:700;color:var(--sub)}
.cchip svg{stroke:var(--royal);flex:0 0 auto}
.cplace{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--sub)}
.cplace svg{stroke:var(--signal)}
@media (max-width:1000px){.cwall{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cwall{grid-template-columns:1fr}.ctile{min-height:0;padding:16px 18px}}
.csecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.csec{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px}
.csec .ic{width:52px;height:52px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:center}
.csec h3{font-size:21px}
.csec p{color:var(--sub);font-size:16px;flex:1}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.tcard{margin:0;background:var(--mist);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:18px}
.tcard blockquote{margin:0;font-size:18px;line-height:1.9}
.tcard figcaption b{display:block}.tcard figcaption span{color:var(--sub);font-size:14.5px}
.c-join{padding-top:0}
.c-join .gcta-in .btn-p{background:#fff;color:var(--ink)}.c-join .gcta-in .btn-p:hover{background:var(--tint)}
.c-join .gcta-in h2{font-size:clamp(26px,2.8vw,36px)}.c-join .gcta-in p{color:rgba(255,255,255,.85);margin-top:6px}
#wall{padding-bottom:64px}

/* شريط أسماء العملاء المتحرك (الرئيسية) */
.cmarq{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cmarq-t{display:flex;width:max-content;animation:cmarq 38s linear infinite}
.cmarq:hover .cmarq-t{animation-play-state:paused}
.cmarq-g{display:flex;gap:12px;padding-inline-end:12px}
.cmarq-i{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px 8px 10px;font-weight:700;font-size:16px;color:var(--text)}
.cmarq-i i{font-style:normal;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:13.5px;color:#fff;background:linear-gradient(140deg,var(--royal),var(--ink3))}
@keyframes cmarq{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.cmarq{-webkit-mask-image:none;mask-image:none}.cmarq-t{animation:none;width:auto;flex-wrap:wrap}.cmarq-g{flex-wrap:wrap;justify-content:center}.cmarq-g[aria-hidden]{display:none}}
.c-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
#clients .cstats{margin-bottom:22px}
.flow-sec .feat .ic{background:#fff}
.nw{white-space:nowrap}
.csecs{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.csecs{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.csecs{grid-template-columns:1fr}}
/* سطر الثقة تحت أزرار الهيرو + منذ في الفوتر */
.hero-trust{display:flex;align-items:center;gap:10px;font-size:15.5px!important;line-height:1.6!important;color:var(--ondark2)!important}
.hero-trust svg{flex:0 0 18px;stroke:var(--glow)}
.fsince{font-size:13px;color:var(--ondark2);font-weight:400;margin-inline-start:4px}
.c-wall-h{margin:44px 0 22px}
.c-wall-h h2{font-size:clamp(26px,2.8vw,36px)}
.cstats.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cstats>div[hidden]{display:none}
@media (max-width:1000px){.cstats.n4{grid-template-columns:repeat(2,minmax(0,1fr))}.cstats.n4>div{border-left:0!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.1)}.cstats.n4>div:nth-child(n+3){border-bottom:0}}
@media (max-width:420px){.cstats.n4>div{padding:18px 18px}.cstats.n4 b{font-size:26px}}
/* حاسبة الأسعار: الاسم والموبايل (اختياري) فوق زرار الواتساب — 16px عشان الموبايل مايعملش zoom */
.sum-who{display:flex;flex-direction:column;gap:8px;scroll-margin-top:110px}
.sum-who-h{margin:0;font-size:14.5px;font-weight:700;color:#fff}
.sum-who-h small{font-weight:400;color:var(--ondark2);font-size:13px}
.sum-who-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sum-in{display:block;min-width:0}
.sum-in .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sum-in input{width:100%;min-width:0;min-height:48px;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 14px;transition:border-color .15s,background .15s}
.sum-in input::placeholder{color:var(--ondark2);opacity:1}
.sum-in input:focus{outline:none;border-color:var(--signal);background:rgba(255,255,255,.11);box-shadow:0 0 0 3px rgba(242,140,56,.25);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 30%,transparent)}
.sum-in input[dir=ltr]{text-align:left}
html[dir=rtl] .sum-in input[dir=ltr]:placeholder-shown{text-align:right}
.sum-who-e{color:#FFD9BF;font-size:13.5px;line-height:1.5}
@media (max-width:340px){.sum-who-f{grid-template-columns:1fr}}
/* عرض الترقية لعملائنا الحاليين (بيظهر بس لو الخصم متحط من لوحة التحكم) */
.upg-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;max-width:100%;background:rgba(242,140,56,.14);background:color-mix(in srgb,var(--signal) 16%,transparent);border:1px solid rgba(242,140,56,.55);border-color:color-mix(in srgb,var(--signal) 60%,transparent);color:#FFD9BF;border-radius:14px;padding:8px 12px;font-size:14px;font-weight:700;line-height:1.45;text-decoration:none}
.upg-badge svg{flex:0 0 16px;stroke:var(--signal)}
.upg-badge:hover{background:color-mix(in srgb,var(--signal) 28%,transparent);color:#fff}
.upg-sec{padding-top:0}
.upg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px 28px;align-items:center;background:linear-gradient(135deg,#fff 0%,#FFF6EC 100%);border:1.5px solid rgba(242,140,56,.45);border-color:color-mix(in srgb,var(--signal) 45%,transparent);border-radius:28px;padding:28px 30px;box-shadow:0 20px 50px -30px rgba(20,15,46,.35)}
.upg-pct{width:112px;height:112px;border-radius:50%;background:var(--signal);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--signal) 70%,transparent)}
.upg-pct b{font-size:36px;font-weight:800;direction:ltr}
.upg-pct span{font-size:15px;font-weight:700}
.upg-txt h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 8px;line-height:1.35}
.upg-txt p{margin:0 0 6px;color:var(--sub);font-size:16px;line-height:1.7}
.upg-txt .upg-v b{color:var(--text)}
.upg-txt .upg-n{font-size:14px;color:var(--mute,var(--sub))}
.upg-b{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:#1FA855!important;color:#fff}
.upg-b svg{flex:0 0 20px}
@media (max-width:860px){.upg{grid-template-columns:auto minmax(0,1fr);padding:22px}.upg-b{grid-column:1/-1;justify-content:center;min-height:52px}.upg-pct{width:88px;height:88px}.upg-pct b{font-size:28px}}
@media (max-width:480px){.upg{grid-template-columns:1fr;text-align:center}.upg-pct{margin:0 auto}}

/* ===== الهيدر: كلمة MODERN تحت «Smart Pro 12.1» =====
   أزرق هادي متناسق مع الكحلي/البنفسجي والأيقونة البرتقالي — لكل ثيم درجة، وكلهم ≥ 4.5:1 على خلفية الهيدر
   (أبيض، وأسوأ حالة الهيدر الشفاف فوق الهيرو الغامق ≈ #DCDDE2) */
:root{--mod:#2B56C8}
[data-theme="ocean"]{--mod:#1D4FD8}
[data-theme="gold"]{--mod:#2E4FC2}
[data-theme="coral"]{--mod:#3A55C8}
.brand small.b-mod{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.35em;text-transform:uppercase;color:var(--mod);line-height:1;margin-top:6px;direction:ltr;text-align:start;unicode-bidi:isolate}
html[dir=rtl] .brand small.b-mod{text-align:right;margin-right:-.35em}
@media (max-width:600px){.brand small.b-mod{font-size:11px;letter-spacing:.32em;margin-top:5px}html[dir=rtl] .brand small.b-mod{margin-right:-.32em}}

/* «جرّب البرنامج شهر»: كود التجربة بعد التسجيل (فورم التواصل) */
.form .pv-note{font-size:13px;margin-top:-8px}
.trial-ok{grid-column:1/-1;background:var(--mist);border:1.5px solid var(--royal);border-radius:20px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.trial-ok .t-new{display:flex;flex-direction:column;gap:12px;align-items:center}
.trial-ok .t-h{margin:0;font-weight:800;color:var(--sub);font-size:15px}
.trial-ok .t-code{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.trial-ok .t-code b{font-family:var(--disp);font-size:clamp(38px,9vw,52px);letter-spacing:.14em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr;user-select:all}
.trial-ok .t-copy{font-family:var(--body);font-weight:700;font-size:15px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #CBD2E3;background:#fff;color:var(--text);cursor:pointer}
.trial-ok .t-copy:hover{border-color:var(--text)}
.trial-ok .t-say{margin:0;font-weight:700;font-size:16px;color:var(--text)}
.trial-ok .t-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.trial-ok .t-btns a{flex:1 1 220px;max-width:100%}
.trial-ok .t-nodl{margin:0;color:var(--sub);font-size:14px}

/* «فيديوهات نشاطك» (صفحة الدعم): كارت الكود + عناوين المجموعات في قايمة الفيديوهات */
.myv{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 18px;background:var(--mist);border:1px solid var(--line);border-radius:20px;padding:16px 20px;margin:0 0 22px}
.myv-h{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:17px;color:var(--text)}
.myv-ic{width:32px;height:32px;border-radius:10px;background:var(--royal);color:var(--on-royal);display:grid;place-items:center;flex:none}
.myv-p{grid-column:1;margin:0;color:var(--sub);font-size:15px;line-height:1.7}
.myv-f{grid-column:2;grid-row:1/span 2;display:flex;gap:8px;align-items:center}
.myv-f input{width:150px;min-height:48px;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:0 14px;font:inherit;font-size:18px;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--text);text-align:center}
.myv-f input:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 4px rgba(108,76,245,.12)}
.myv-f .btn-p{min-height:48px;font-size:15px;padding:0 20px}
.myv-err{grid-column:1/-1;margin:0;color:#B4231A;font-weight:700;font-size:14px}
.myv-x{grid-column:2;grid-row:1/span 2;font:inherit;font-size:14px;font-weight:700;color:var(--royal);background:transparent;border:1.5px solid var(--line);border-radius:999px;min-height:42px;padding:0 16px;cursor:pointer}
.myv-x:hover{border-color:var(--royal)}
.myv.on{background:var(--tint);border-color:rgba(108,76,245,.25)}
.vgrp{margin:6px 0 0;padding:6px 6px 2px;font-size:13.5px;font-weight:800;color:var(--royal);display:flex;align-items:center;gap:8px}
.vgrp:first-child{margin-top:0}
.vgrp::before{content:"";width:16px;height:3px;border-radius:3px;background:var(--signal);flex:none}
.vgrp[hidden]{display:none}
@media (max-width:700px){.myv{grid-template-columns:minmax(0,1fr);padding:16px}.myv-f,.myv-x{grid-column:1;grid-row:auto}.myv-f input{flex:1 1 0;width:0;min-width:0}.myv-x{justify-self:start}}

/* ===== صفحة الأسعار — النظام النهائي (النظام ← الحسابات ← الأقسام ← الأجهزة) ===== */
.ph-tag{margin:0 0 8px;font-weight:800;color:var(--glow,var(--signal));font-size:17px;letter-spacing:.2px}
.pr-rule{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px}
.pr-rule li{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 18px;font-weight:700;font-size:15.5px}
.pr-rule li b{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.pr-rule li{position:relative}
.pr-rule li+li::before{content:"←";position:absolute;inset-inline-start:-22px;top:50%;transform:translateY(-50%);color:var(--sub);font-weight:800}
html[dir=ltr] .pr-rule li+li::before{content:"→"}
.pr-cc{margin-bottom:18px}
.seg-cc{flex-wrap:wrap}
.seg-cc button{padding:0 18px}
.gulf{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin:0 0 26px}
.gulf b{display:block;margin-bottom:6px;font-size:16px}
.gulf ul{margin:0;padding-inline-start:20px;color:var(--text);font-size:15px;line-height:1.8}
.cnote{margin:10px 0 0;color:var(--sub);font-size:14px;line-height:1.6}
.acc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acc-o{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .15s}
.acc-o input{position:absolute;opacity:0;pointer-events:none}
.acc-o:has(input:checked){border-color:var(--royal);background:var(--tint);box-shadow:inset 0 0 0 1px var(--royal)}
.acc-o:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:2px}
.acc-o.dis{opacity:.55;cursor:not-allowed}
.acc-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.acc-h b{font-size:16.5px}.acc-h .op{font-weight:800;white-space:nowrap;font-size:15px}
.acc-o ul{margin:0;padding-inline-start:18px;color:var(--sub);font-size:13.5px;line-height:1.7;columns:2;column-gap:18px}
.acc-o small{color:var(--royal);font-weight:700;font-size:13px}
.dev-inc{background:var(--mist)}.dev-inc .dev-c b{font-size:15px;color:var(--royal)}
.sum-d{display:flex;flex-direction:column;gap:8px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:12px}
.sum-d div{display:flex;justify-content:space-between;gap:12px}.sum-d span{color:var(--ondark)}
.sum-d .dsc b,.sum-d .dsc span{color:#9FE6B8;font-weight:800}
.sum-y{color:var(--ondark2);font-size:13.5px;line-height:1.6;margin-top:-6px}
.lp-from{margin:0 0 6px;font-size:15px;color:var(--ondark)}.lp-from b{font-size:26px;color:#fff;display:block;line-height:1.3}
.lp-eg{font-size:13px;color:var(--ondark2);margin:4px 0 0}
.pex-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pex{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.pex-t{font-size:17px}
.pex-d{margin:0;color:var(--sub);font-size:14px;line-height:1.7;flex:1}
.pex-v{margin:0;font-size:26px;font-weight:800;color:var(--text)}
.pex-v .q{display:none;font-size:17px;color:var(--royal)}
.pex-b{align-self:flex-start;min-height:42px;font:700 14.5px var(--body);padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer}.pex-b:hover{background:var(--royal);color:var(--on-royal)}
.nw{white-space:nowrap}
.pr-acc h2{font-size:22px;margin-bottom:10px}
.pr-acc .prose-p{margin:0 0 10px}
/* من بره مصر: «اطلب عرض سعر» مكان الأرقام */
html[data-pm=quote] .pex .amt{display:none}
html[data-pm=quote] .pex-v .q{display:inline}
html[data-pm=quote] .pex-d{display:none}
html[data-pm=quote] [data-eg-only],html[data-pm=gx] [data-eg-only]{display:none}
html[data-pm=quote] .sum-t b{font-size:26px}
html[data-pm=quote] .sum-lines div b{display:none}
@media (max-width:1100px){.pex-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.acc2{grid-template-columns:1fr}.pex-l{grid-template-columns:1fr}.pr-rule li{font-size:14.5px;padding:7px 14px 7px 16px}.seg-cc button{padding:0 14px;font-size:15px;min-height:42px}}
@media (max-width:420px){.acc-o ul{columns:1}.pr-rule{gap:8px}.pr-rule li+li::before{display:none}}
html[data-pm=quote] .calc .opt .op,html[data-pm=quote] .acc-h .op{font-size:13px;font-weight:700;color:var(--royal);white-space:normal;max-width:84px;text-align:center;line-height:1.35}
html[data-pm=quote] #sumMiniT{font-size:15px;line-height:1.3}
@media (max-width:760px){.pr-cc .seg2.seg-cc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;border-radius:18px}.seg-cc button{padding:0 4px;font-size:14px;border-radius:14px}}
html[data-pm=quote] .amt-pre{display:none}
@media (max-width:760px){.pex-sec .head{display:block}.pex-sec .head p{margin-top:8px}}
.sum-code{margin:0;background:rgba(159,230,184,.12);border:1px solid rgba(159,230,184,.45);border-radius:14px;padding:10px 14px;color:#DFF7E8;font-size:14.5px}
.sum-code b{font-size:20px;letter-spacing:1px;color:#fff;margin-inline-start:6px}.sum-code small{display:block;color:var(--ondark2);font-size:13px;margin-top:2px}
.sum-tier{margin:0;font-weight:800;font-size:15px;color:var(--glow,#FFD9BF)}
html[data-pm=quote] .sum-tier{display:none}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tier{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px}
.tier-e{font-size:30px;line-height:1}.tier b{font-size:19px}.tier p{margin:0;color:var(--sub);font-size:14.5px;line-height:1.6;flex:1}
.tier-p{font-weight:800;color:var(--royal);font-size:15px}
.tier-d{background:var(--ink);color:#fff;border-color:var(--ink)}
.dtbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:4px}.dtbl th{color:var(--ondark);font-weight:700;text-align:start;padding:4px 0}.dtbl td{padding:7px 0;border-top:1px solid rgba(255,255,255,.14)}.dtbl td+td,.dtbl th+th{text-align:end;font-weight:800}
.pr-notes{margin:22px 0 0;padding-inline-start:20px;color:var(--text);font-size:15px;line-height:1.9}
.tw-cmp{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:#fff}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.cmp th,.cmp td{padding:13px 16px;text-align:start;vertical-align:top;border-top:1px solid var(--line);line-height:1.6}
.cmp thead th{border-top:0;background:var(--mist);font-size:16px}.cmp thead th small{display:block;font-weight:600;color:var(--sub);font-size:13px}
.cmp tbody th{font-weight:700;width:24%;color:var(--text)}.cmp td{color:var(--sub)}.cmp .ok{color:#16A34A;font-weight:800;font-size:18px}
.sf1 h2{margin-bottom:18px}
@media (max-width:1100px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tiers{grid-template-columns:1fr}.cmp{font-size:14px}.cmp th,.cmp td{padding:10px 12px}}
.sum-dev{display:block;margin-top:8px}
.sum-dev-h{display:block;color:var(--ondark2);font-size:12.5px;line-height:1.5;margin-top:4px}

/* ===== English (LTR): same design, mirrored direction ===== */
html[dir=ltr] .act,html[dir=ltr] .vli{text-align:left}
html[dir=ltr] .fact{border-left:0;border-right:1px solid rgba(255,255,255,.12)}
html[dir=ltr] .fact:last-child{border-right:0}
@media (max-width:900px){html[dir=ltr] .fact{border-right:0}}
html[dir=ltr] .cstats>div{border-left:0;border-right:1px solid rgba(255,255,255,.1)}
html[dir=ltr] .cstats>div:last-child{border-right:0}
@media (max-width:760px){html[dir=ltr] .cstats>div{border-right:0}}
html[dir=ltr] .steps li:not(:last-child)::after{right:auto;left:23px}
html[dir=ltr] .lic-list b{text-align:right}
html[dir=ltr] .wa{left:auto;right:22px}
html[dir=ltr] .ad::before{left:auto;right:-140px}
html[dir=ltr] .panel .ghost{left:auto;right:-30px}
html[dir=ltr] .ctile::after{left:auto;right:-40px}
html[dir=ltr] .gcta-in::before{left:auto;right:-120px}
html[dir=ltr] .ads-dots button.on::after{right:auto;left:0}
html[dir=ltr] .tab.on::after{right:auto;left:0}
html[dir=ltr] .arrow svg{transform:scaleX(-1)}
@media (max-width:980px){html[dir=ltr] .arrow svg{transform:rotate(-90deg)}}
html[dir=ltr] .ads-arr svg{transform:scaleX(-1)}
html[dir=ltr] .phone{transform:rotate(4deg) scale(.9)}
@media (max-width:980px){html[dir=ltr] .phone{transform:rotate(3deg)}}
html[dir=ltr] .phero::before{background:radial-gradient(520px 300px at 15% 0%, color-mix(in srgb, var(--royal) 50%, transparent), transparent 70%),radial-gradient(420px 260px at 90% 100%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 70%)}
html[dir=ltr] .hero::before{background:radial-gradient(600px 380px at 18% 20%, color-mix(in srgb, var(--royal) 55%, transparent), transparent 70%),radial-gradient(520px 340px at 88% 70%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%)}
html[dir=ltr] .cmarq-t{animation-name:cmarq-ltr}
@keyframes cmarq-ltr{to{transform:translateX(-50%)}}
html[dir=ltr] .hero h1{letter-spacing:-1px;line-height:1.12}
html[dir=ltr] .phero h1{letter-spacing:-.5px;line-height:1.2}
html[dir=ltr] .hero-tag{letter-spacing:0}
html[dir=ltr] body{line-height:1.7}
html[dir=ltr] .prose p,html[dir=ltr] .hero-side p{line-height:1.75}
html[dir=ltr] .faq summary::after{flex:0 0 28px}
/* language switch + original client names */
.lsw{font-weight:700;color:var(--sub);font-size:15px;border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;white-space:nowrap}
.lsw:hover{color:var(--text);border-color:var(--text)}
html[dir=rtl] .lsw{font-family:Almarai,sans-serif}
html[dir=ltr] .lsw{font-family:Almarai,Tajawal,sans-serif}
@media (max-width:600px){.hdr-cta .lsw{padding:4px 11px;font-size:14px}}
.lsw-f{color:var(--ondark2)}.lsw-f:hover{color:#fff}
.corig{display:block;font-size:13px;color:var(--sub);line-height:1.4;margin-top:-4px}
.lp-alt{display:block;font-size:12.5px;color:var(--ondark2);margin-top:2px}
.lhint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:62;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 14px 34px rgba(20,15,46,.3);font-size:15px;max-width:calc(100% - 32px)}
html[dir=rtl] .lhint{padding:8px 18px 8px 8px}
.lhint a{color:#fff;font-weight:800;background:var(--royal);border-radius:999px;padding:6px 14px;white-space:nowrap}
.lhint button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:16px;line-height:1}
@media (max-width:600px){.lhint{bottom:90px;font-size:14px}}
html[dir=ltr] .corig{text-align:left}
html[dir=ltr] .hero-tag{flex-wrap:wrap;column-gap:10px;row-gap:2px}
/* English program mock (laptop) */
html[dir=ltr] .lapwrap{text-align:left}
.stage[dir=ltr] .tb-r{margin-right:0;margin-left:auto}
.stage[dir=ltr] .paper{transform:rotate(1deg)}
html[dir=ltr] .rcpt{left:auto;right:-150px;transform:translateX(-150px)}
html[dir=ltr] .lapwrap[data-k=pos] .rcpt-pos,html[dir=ltr] .lapwrap[data-k=res] .rcpt-res{transform:translateX(0) rotate(5deg)}

/* ===== Responsive pass: full-width on large screens, easy on phones (AR + EN) ===== */

/* --- container: wider and fluid; backgrounds stay full-bleed on the sections --- */
.wrap{max-width:1600px;width:100%;padding-inline:clamp(16px,4vw,64px)}
.hdr .wrap{gap:clamp(12px,2vw,28px)}
.nav{gap:clamp(18px,2.2vw,36px)}
/* readable line length inside text blocks */
.prose p,.hero-side p,.head p,.phero p,.csec p,.feat p,.faq details p,.ad p,.prose-p,.lic-card p{max-width:70ch}
.head{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}

/* --- wide screens --- */
@media (min-width:1280px){
  .feats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
  .cwall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1600px){
  .feats{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:44px}
  .cwall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mains{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calc{grid-template-columns:1fr 420px}
  .vids{grid-template-columns:1.9fr 1fr}
  .vlist{max-height:560px}
  .lapwrap{max-width:1280px}
  .picker{grid-template-columns:360px 1fr}
  .hero h1{font-size:clamp(56px,3.9vw,76px)}
  .phero h1{font-size:clamp(48px,3vw,60px)}
  .lp-intro{grid-template-columns:1.6fr 1fr;gap:80px}
  .ads{min-height:600px}
  .ad{padding:64px 84px}
  .csecs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sf{gap:96px}
}
@media (min-width:1900px){ .lapwrap{max-width:1380px} }

/* --- tablet --- */
@media (min-width:861px) and (max-width:1279px){ .feats{grid-template-columns:1fr 1fr;column-gap:36px} }
@media (max-width:860px){ .feats{grid-template-columns:minmax(0,1fr)} .feat{grid-template-columns:48px minmax(0,1fr)} }

/* --- header: hamburger + full-screen drawer (< 980px) --- */
.mtoggle{display:none;width:48px;height:48px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.mtoggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
.mtoggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mtoggle[aria-expanded=true] span:nth-child(2){opacity:0}
.mtoggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mdrawer{position:fixed;inset:0;z-index:90;background:rgba(10,6,32,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mdrawer[hidden]{display:none}
.mdrawer-in{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) clamp(16px,5vw,28px) calc(20px + env(safe-area-inset-bottom));overflow-y:auto}
.mdrawer-h{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mdrawer-h b{font-size:18px}
.mclose{width:48px;height:48px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:26px;line-height:1;cursor:pointer;color:var(--text)}
.mnav{display:flex;flex-direction:column}
.mnav a{display:flex;align-items:center;min-height:56px;padding:0 6px;font-size:19px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line)}
.mnav a.on{color:var(--royal)}
.mnav a.on::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--royal);margin-inline-end:12px}
.mdrawer-f{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}
.mdrawer-f .btn-p,.mdrawer-f .btn-g{width:100%;min-height:54px}
.mdrawer-f .btn-g{color:var(--text)}
.lsw-m{align-self:center;font-size:16px;padding:10px 22px;min-height:44px;display:inline-flex;align-items:center}
html.m-open{overflow:hidden}
@media (max-width:980px){ .mtoggle{display:inline-flex} }
@media (max-width:600px){ .hdr-cta .lsw{display:none} .hdr .wrap{height:68px} }

/* --- bottom action bar on phones --- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:fixed;inset-inline:0;bottom:0;z-index:70;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,15,46,.08)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border-radius:14px;font-weight:800;font-size:14px;color:var(--text);background:var(--mist)}
  .mbar a svg{stroke:currentColor}
  .mbar .mb-wa{background:#1FAF53;color:#fff}
  .mbar .mb-q{background:var(--royal);color:var(--on-royal)}
  .wa{display:none!important}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .lhint{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* --- phones: type, spacing, no overflow --- */
@media (max-width:760px){
  body{font-size:16.5px;line-height:1.8}
  .sec{padding:60px 0}
  .head{margin-bottom:28px}
  .head h2{font-size:clamp(26px,7.2vw,34px)}
  .head p,.prose p,.hero-side p{font-size:16.5px}
  .phero{padding:44px 0 40px}
  .phero h1{font-size:clamp(28px,8vw,38px)}
  .phero p{font-size:17px}
  .hero{padding-top:44px}
  .hero h1{font-size:clamp(32px,9vw,42px)}
  .crumb{flex-wrap:wrap;row-gap:2px}
  .phero .crumb a{white-space:normal}
  .btn-p,.btn-g,.btn-w{min-height:52px}
  .hero-ctas .btn-p,.hero-ctas .btn-g{width:100%}
  .lp-btns .btn-p,.lp-btns .btn-w,.lp-btns .btn-g{flex:1 1 100%}
  .gcta-in{padding:30px 22px;border-radius:24px}
  .gcta-b{width:100%}.gcta-b a{flex:1 1 100%;justify-content:center}
  .c-cta a{flex:1 1 100%;justify-content:center}
  .cstats b{font-size:30px}
  .chips span{font-size:14px}
  .vli small,.cchip,.cplace,.opt .oi,.dev-n small,.dev-n small b,.dl .meta{font-size:14px}
  .fnav a{font-size:15px;display:inline-block;padding:4px 0}
  footer .wrap{padding-top:26px;padding-bottom:26px}
  img,video,svg{max-width:100%}
  .rel-chips a{min-height:44px}
}
@media (max-width:380px){ .wrap{padding-inline:14px} .brand small{display:none} }

/* --- calculator on phones: big targets, easy currency switch, sticky total --- */
.sum-mini{display:none}
@media (max-width:1050px){
  .sum-mini{display:flex;align-items:center;gap:12px;position:sticky;bottom:12px;z-index:6;margin-top:18px;background:var(--ink);color:#fff;border-radius:18px;padding:10px 10px 10px 18px;box-shadow:0 14px 30px rgba(20,15,46,.28)}
  html[dir=rtl] .sum-mini{padding:10px 18px 10px 10px}
  .sum-mini span{color:var(--ondark);font-size:15px}
  .sum-mini b{font-size:22px;font-weight:800;margin-inline-end:auto}
  .sum-mini .btn-p{min-height:46px;padding:0 18px;font-size:15px;background:var(--signal);color:#fff}
}
@media (max-width:760px){
  .sum-mini{bottom:calc(84px + env(safe-area-inset-bottom))}
  .pr-top{flex-direction:column;align-items:stretch;gap:10px}
  .seg2{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .seg2 button{min-height:52px;font-size:16px}
  .opt{min-height:68px;padding:14px}
  .opt .on{font-size:16.5px}
  .opt .op{font-size:16.5px}
  .opt::before{content:"";flex:0 0 26px;height:26px;border-radius:8px;border:2px solid var(--line);background:#fff}
  .opt:has(input:checked)::before{background:var(--royal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--royal)}
  .stp{width:52px;height:52px}
  .dev{padding:14px}
  .sum{padding:24px}
  .rules .rule{padding:18px}
}

/* --- videos on phones: full width, swipe playlist, scrolling chips --- */
@media (max-width:900px){
  .vids{gap:16px}
  .vmain b,.vmain .vt{font-size:21px}
  .vtabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vtabs::-webkit-scrollbar{display:none}
  .vtabs button{flex:0 0 auto;min-height:44px;padding:8px 16px;font-size:15px}
  .vlist{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;gap:12px;-webkit-overflow-scrolling:touch}
  .vli{flex:0 0 min(72%,280px);flex-direction:column;align-items:stretch;scroll-snap-align:start;padding:8px;border:1px solid var(--line);background:#fff}
  .vli img,.vli-ph{width:100%;height:auto;aspect-ratio:16/9}
  .vli b{font-size:15.5px}
  .vli[hidden]{display:none}
  .vids[data-nav] .vlist{flex-direction:row}
}

/* --- laptop mock: lighter on phones (still auto-rotates) --- */
@media (max-width:640px){
  .stage-sec{padding-top:20px}
  .lapwrap{margin-top:18px}
  .stage-sec .lap{padding:7px 7px 0;border-radius:14px 14px 0 0;box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .scr{border-radius:6px 6px 0 0}
  .lapbase{height:10px}
  .tilt{transform:none!important;will-change:auto}
  .facts{margin-top:28px}
  .fact{padding:18px 14px 22px}
  .fact b{font-size:21px}
  .ads-sec{padding-top:56px}
  .ad{padding:28px 20px}
  .ad h2{font-size:clamp(24px,7vw,30px)}
  .ads{min-height:0}
  .phone{width:200px}
  .panel{padding:22px;border-radius:22px}
  .panel h3{font-size:24px}
  .act{min-height:48px;font-size:15.5px}
}

/* --- forms --- */
.form input,.form select,.form textarea{font-size:16px}
@media (max-width:760px){ .form{padding:20px;gap:14px} .form input,.form select{min-height:52px} .contact{padding:64px 0} .clist a{min-height:52px} }

/* --- tables / lists → stacked on phones --- */
@media (max-width:560px){
  .lic-list li{flex-direction:column;gap:2px}
  .lic-list b{text-align:start}
  .lp-row{flex-wrap:wrap}
  .req{flex-direction:column;gap:8px}
}
/* the global CTA card is itself a .wrap with a background — keep it a rounded card inside the content width */
.gcta .wrap.gcta-in{width:calc(100% - 2 * clamp(16px,4vw,64px));max-width:calc(1600px - 2 * clamp(16px,4vw,64px));padding-inline:clamp(22px,3.5vw,56px)}

/* ===== Hero: text + laptop side by side (≥1100px), stacked below ===== */
.hero-text{display:flex;flex-direction:column}
.hero-split .hero-side{padding-bottom:0;margin-top:24px}
.hero-mock{display:flex;flex-direction:column;align-items:center;min-width:0}
.hero-mock .lapwrap{width:100%;margin-top:28px}
.hero-mock .lap{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 90px color-mix(in srgb, var(--royal) 38%, transparent)}
.hero-mock .tabs{margin-top:20px}
.hero-mock .tab{background:transparent;color:var(--ondark);border-color:rgba(255,255,255,.18);font-family:var(--body)}
.hero-mock .tab:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.hero-mock .tab.on{background:#fff;color:var(--ink);border-color:#fff}
.hero-split .rcpt{display:none}  /* بيظهر بس جنب اللابتوب على الديسكتوب (تحت) */
.stage-sec.split{background:linear-gradient(to bottom,var(--ink0),var(--ink));padding-top:8px}
.stage-sec.split .facts{margin-top:24px}
.hero:has(.hero-split){padding-bottom:36px}
@media (min-width:1100px){
  .hero:has(.hero-split){padding-top:clamp(32px,4.5vh,64px);padding-bottom:clamp(28px,4vh,56px)}
  .hero-split{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;gap:clamp(36px,4vw,80px)}
  .hero-split h1{font-size:clamp(34px,3.25vw,62px);line-height:1.25}
  html[dir=ltr] .hero-split h1{line-height:1.12}
  .hero-split .ver{margin-bottom:18px}
  .hero-split .hero-tag{margin-top:18px}
  .hero-split .hero-side p{font-size:clamp(16px,1.15vw,19px)}
  .hero-split .hero-side{gap:20px}
  .hero-mock .lapwrap{margin-top:0;max-width:none}
  .hero-mock .tilt{--rx:0deg}
  .hero-mock .tabs{margin-top:16px;gap:6px}
  .hero-mock .tab{font-size:13px;padding:7px 13px;min-height:36px}
}
@media (min-width:1100px) and (max-height:820px){
  .hero-split h1{font-size:clamp(32px,3vw,46px)}
  .hero-split .hero-side p{font-size:16px;line-height:1.75}
  .hero-split .btn-p,.hero-split .btn-g{min-height:48px}
}
@media (min-width:1600px){ .hero-mock .lapwrap{max-width:none} }
@media (max-width:1099px){ .hero-split{grid-template-columns:minmax(0,1fr)} .hero-mock{margin-top:12px;width:100%;max-width:820px;margin-inline:auto} .hero-split .hero-side{margin-top:22px} }

/* ===== Floating receipt anchored to the laptop's outer bottom corner (two-column hero only) =====
   الإيصال لازق في ركن اللابتوب البراني تحت: شمال في العربي، يمين في الإنجليزي — جوه عمود اللابتوب ومايلمسش الكلام ولا التابات */
@media (min-width:1100px){
  .hero-split .hero-mock{align-items:stretch}
  .hero-split .hero-mock .lapwrap{width:84%;margin-inline-start:0;margin-inline-end:auto}
  html .hero-split .rcpt{display:flex;top:auto;bottom:0;left:calc(-19% + 24px);right:auto;z-index:2;
    scale:.7;transform-origin:0 100%;transform:translateX(56px) rotate(0);
    box-shadow:0 18px 40px rgba(6,4,24,.45)}
  html .hero-split .lapwrap[data-k=pos] .rcpt-pos,html .hero-split .lapwrap[data-k=res] .rcpt-res{transform:translateX(0) rotate(-5deg);opacity:1;
    animation:rcptFloat 4.5s ease-in-out .9s infinite}
  html[dir=ltr] .hero-split .rcpt{left:auto;right:calc(-19% + 24px);transform-origin:100% 100%;transform:translateX(-56px) rotate(0)}
  html[dir=ltr] .hero-split .lapwrap[data-k=pos] .rcpt-pos,html[dir=ltr] .hero-split .lapwrap[data-k=res] .rcpt-res{transform:translateX(0) rotate(5deg)}
}
@keyframes rcptFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* reduced motion: الإيصال ثابت (من غير دخول ولا طفو) — ظاهر على طول، وإيصال المطبخ بيبدله في شريحة المطاعم */
@media (min-width:1100px) and (prefers-reduced-motion:reduce){
  html .hero-split .rcpt{transition:none;animation:none!important}
  html .hero-split .rcpt-pos{transform:rotate(-5deg);opacity:1}
  html[dir=ltr] .hero-split .rcpt-pos{transform:rotate(5deg)}
  html .hero-split .lapwrap[data-k=res] .rcpt-pos{opacity:0}
}

/* ===== شرايح اللابتوب الإضافية (site-src/slides.js) ===== */
.sb{gap:1px;padding:12px 10px}
.sb-logo{padding-bottom:8px}
.sbi{padding:5px 10px;font-size:12px;line-height:1.55}
.c5x{grid-template-columns:.9fr 1.4fr 1fr 1fr 1.1fr}
.c7p{grid-template-columns:2fr .7fr .9fr .9fr .6fr .8fr .9fr}
.c6g{grid-template-columns:1.6fr .7fr 1fr 1fr 1.1fr 1.2fr}
.c6f{grid-template-columns:1.2fr 1.2fr 1fr 1fr .8fr 1.1fr}
.c6m{grid-template-columns:1.4fr .8fr 1fr .7fr .8fr 1.1fr}
.tr.on{background:color-mix(in srgb,var(--royal) 7%,#fff)}
.tr .pill i,.tr i.pill{font-style:normal}
.alert{display:flex;align-items:center;gap:8px;background:#FFF4EC;border:1px solid #FFD9C2;color:#9A3A0A;border-radius:10px;padding:8px 12px}
.alert .btn{margin-inline-start:auto;padding:5px 12px;border-color:#FFC9A8;background:#fff;color:#9A3A0A}
.tick{background:var(--ink2);color:#fff;border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;min-width:118px}
.tick small{color:var(--ondark2);font-size:11px}
.tick b{font-size:20px;font-weight:800;line-height:1.3}
.tick i{font-style:normal;font-size:11.5px;color:#4ADE80}
/* phone frames (mobile apps slide) */
.phn{width:208px;height:420px;border-radius:30px;background:#0D1430;padding:9px;box-shadow:0 14px 34px rgba(15,26,74,.22);flex:0 0 auto}
.phn-in{height:100%;border-radius:22px;background:#F3F5FB;overflow:hidden;display:flex;flex-direction:column;gap:7px;padding:0 0 10px;font-size:11.5px}
.ph-top{background:var(--royal);color:var(--on-royal);padding:16px 12px 10px;display:flex;flex-direction:column;gap:2px}
.ph-top b{font-size:13.5px}.ph-top small{opacity:.85;font-size:10.5px}
.ph-card{background:#fff;border-radius:10px;margin:0 8px;padding:8px 9px;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 2px rgba(15,26,74,.06)}
.ph-card b{font-weight:800}
.ph-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.ph-row.tt{border-top:1px dashed #E3E7F1;padding-top:5px;color:var(--royal)}
.ph-g2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 8px}
.ph-g2 .ph-card{margin:0}.ph-g2 b{font-size:15px}
.ph-btn{margin:auto 8px 0;background:var(--royal);color:var(--on-royal);border-radius:10px;padding:8px;text-align:center;font-weight:700}
.ph-ap{border-top:1px solid #EEF1F7;padding-top:6px;display:flex;flex-direction:column;gap:5px}
.ph-ok,.ph-no{flex:1;text-align:center;border-radius:7px;padding:4px 0;font-weight:700}
.ph-ok{background:var(--royal);color:var(--on-royal)}.ph-no{background:#EEF1F8;color:#4A5375}

/* ===== التابات: أيقونة + اسم قصير =====
   ديسكتوب (الهيرو بعمودين): صفين متساويين 6 × 2 — تابلت وموبايل: صف واحد بيتسحب بالعرض */
.tabs .tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tabs .tab svg{flex:0 0 auto;opacity:.85}
.tabs .tab.on svg{opacity:1}
@media (min-width:1100px){
  .hero-mock .tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%;margin-top:14px}
  .hero-mock .tab{flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:6px 4px;border-radius:12px;font-size:12px;line-height:1.25;white-space:normal;text-align:center}
  .hero-mock .tab span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-mock .tab svg{width:18px;height:18px}
}
@media (min-width:1100px) and (max-height:820px){
  .hero-mock .tab{min-height:48px;padding:5px 3px;font-size:11.5px}
  .hero-mock .tab svg{width:16px;height:16px}
}
@media (max-width:1099px){
  .hero-mock .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;width:100%;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .hero-mock .tab{flex:0 0 auto;scroll-snap-align:center;font-size:13px;padding:8px 14px;min-height:40px}
}

/* ===== شاشة حادة على الشاشات عالية الكثافة و4K =====
   بدل transform: scale() (اللي كروم بيرسمه كصورة وبعدين يصغّرها فيطلع مغبّش) بنستخدم zoom:
   النص والخطوط بتترسم بحجمها النهائي مباشرة. والارتفاع متقرّب لبكسل صحيح (--sh من الـ JS) فمفيش حواف نص بكسل. */
@supports (zoom:2){
  .stage{transform:none;zoom:var(--s,1)}
  .scr{height:var(--sh,calc(var(--s,1) * 580px))}
}
/* اللابتوب في الهيرو ثابت (من غير ميل 3D ولا will-change) — فمفيش طبقة مرسومة كصورة */
.hero-mock .tilt{transform:none!important;will-change:auto;position:relative}
.hero-mock .lap{transform:none}
/* خط العناوين جوه الشاشة: Almarai المحمّل عندنا بوزن حقيقي (بدل Readex Pro اللي مش محمّل) */
.tb b,.pt,.sp-name{font-family:var(--disp)}
.tb b{font-weight:700}
.pt{font-weight:800}
.sp-name{font-weight:800}
.tables span{font-weight:800}.tables small{font-weight:400}