#stc .xs{padding:110px 0;position:relative;overflow:hidden}
#stc .xdark{background:linear-gradient(180deg,var(--n1),var(--n2) 60%,var(--n1));color:#fff}
#stc .xlight{background:var(--g1);color:var(--n2)}
#stc .xlight .lead{color:var(--g3)}#stc .xlight .tag{color:var(--n3)}
#stc .xs .wrap>.tag,#stc .xs .wrap>h2,#stc .xs .wrap>.lead{display:block;width:fit-content;max-width:100%;margin-inline:auto;text-align:center}
#stc .xs .wrap>.tag{display:block}
#stc .xs h2{font-size:clamp(34px,5.8vw,88px);font-weight:800;margin-bottom:18px;max-width:none;width:100%!important;line-height:1.08}
#stc .xs .wrap>.lead{max-width:62ch;font-size:clamp(16px,1.5vw,20px)}
#stc .xs h2 em{font-style:normal;background:linear-gradient(90deg,#7db8ff,#fff 60%,#7db8ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xsh 6s linear infinite}
@keyframes xsh{to{background-position:-200% 0}}#stc .xlight h2 em{background-image:linear-gradient(90deg,#2a6fd1,#12305a 60%,#2a6fd1)}
#stc .xs .lead{margin-bottom:44px}
#stc .xs .tag,#stc .xs h2,#stc .xs .lead{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.8,.2,1)}
#stc .xs.xin .tag,#stc .xs.xin h2,#stc .xs.xin .lead{opacity:1;transform:none}
#stc .xs.xin h2{transition-delay:.08s}#stc .xs.xin .lead{transition-delay:.16s}
/* map */
#stc .xm{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px;align-items:start}
#stc .xmv{position:relative;width:100%;aspect-ratio:800/420;direction:ltr;border:1px solid #7db8ff33;border-radius:26px;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#1b4c8c88,transparent 70%),linear-gradient(#7db8ff14 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,#7db8ff14 1px,transparent 1px) 0 0/40px 40px,#071a35}
#stc .xmv svg{position:absolute;inset:0;width:100%;height:100%}
#stc .xh{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:0;background:#7db8ff33;color:#fff;font:700 13px var(--W);cursor:pointer;display:grid;place-items:center;transition:.3s}
#stc .xh::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--bl);animation:xp 2.2s infinite;pointer-events:none}
#stc .xh.on{background:var(--bl);color:var(--n1);transform:scale(1.18);box-shadow:0 0 0 6px #7db8ff33,0 0 34px #4da3ff99}
#stc .xh:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes xp{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
#stc .xmp{border:1px solid #ffffff1f;border-radius:26px;background:#ffffff0d;backdrop-filter:blur(10px);padding:28px;display:flex;flex-direction:column;gap:10px;min-height:420px;position:relative;overflow:hidden}
#stc .xmp>*{animation:xf .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes xf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#stc .xmp .xi{height:150px;display:grid;place-items:center;margin:-6px 0 4px;border-radius:16px;background:radial-gradient(circle,#4da3ff33,transparent 70%)}
#stc .xmp .xi img{max-height:140px;width:auto;object-fit:contain;filter:drop-shadow(0 18px 24px #0007)}
#stc .xmp small{color:var(--bl);font:600 13px var(--B)}
#stc .xmp h3{font-size:clamp(24px,2.6vw,34px);font-weight:800}
#stc .xmp p{color:var(--g2)}
#stc .xmp .xb{font:600 13px var(--B);color:#fff;opacity:.75}
#stc .xchips{display:flex;flex-wrap:wrap;gap:8px}
#stc .xchips span{padding:6px 12px;border-radius:10px;background:#ffffff12;border:1px solid #ffffff26;font-size:13px}
#stc .xmp .btn{align-self:flex-start;margin-top:auto}
#stc .xdots{display:flex;gap:6px}#stc .xdots i{height:3px;flex:1;border-radius:2px;background:#ffffff22;overflow:hidden}
#stc .xdots i.on{background:var(--bl)}
/* configurator */
#stc .xc{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:start}
#stc .xcf,#stc .xcr{background:#fff;border-radius:26px;padding:28px;box-shadow:0 30px 70px #0a1f3d1f}
#stc .xcf h4{font:700 15px var(--W);margin:0 0 12px;color:var(--n3)}
#stc .xcf h4:not(:first-child){margin-top:24px}
#stc .xo{display:flex;flex-wrap:wrap;gap:8px}
#stc .xo button{font:600 14px var(--B);padding:10px 16px;border-radius:99px;border:1px solid #0a1f3d33;background:#fff;color:var(--n2);cursor:pointer;transition:.25s}
#stc .xo button:hover{border-color:var(--n3);transform:translateY(-2px)}
#stc .xo button.on{background:var(--n2);color:#fff;border-color:var(--n2)}
#stc .xrg{display:flex;align-items:center;gap:14px}
#stc .xrg input{flex:1;accent-color:#12305a}#stc .xrg b{font:800 26px var(--W);min-width:3ch;text-align:center}
#stc .xcr h4{font:800 22px var(--W);margin-bottom:4px}
#stc .xsum{color:var(--g3);margin-bottom:16px}
#stc .xd{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:var(--g1);margin-bottom:10px;animation:xf .5s both}
#stc .xd img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}
#stc .xd b{display:block;font:700 15px var(--W)}#stc .xd span{font-size:13px;color:var(--g3)}
#stc .xcr .btn{margin-top:12px;background:var(--n2);color:#fff}#stc .xcr .btn.g{background:#1f9d55}
#stc .xnote{font-size:12.5px;color:var(--g3);margin-top:12px}
/* extras */
#stc .xbar{position:fixed;inset:0 0 auto;height:3px;z-index:9999;pointer-events:none}
#stc .xbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#4da3ff,#fff)}
#stc .xfab{position:fixed;bottom:18px;z-index:60;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:99px;box-shadow:0 14px 34px #0006;transition:.3s}
#stc .xfab:hover{transform:translateY(-3px)}
#stc .xlang{left:18px;height:44px;padding:0 18px;background:#06142aee;color:#fff;font:700 14px "Cairo","Sora",sans-serif;border:1px solid #ffffff33;backdrop-filter:blur(10px)}
#stc .xwa{right:18px;width:54px;height:54px;background:#25d366;color:#fff}
#stc .xwa svg{width:28px;height:28px}
#stc .why>div{position:relative;overflow:hidden}
#stc .why>div::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:.3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#7db8ff2e,transparent 70%)}
#stc .why>div:hover::after{opacity:1}
/* arabic */
#stc [dir=rtl],#stc[data-lang=ar] .shop,#stc[data-lang=ar] .hs{--W:"Cairo","Segoe UI",sans-serif;--B:"Cairo","Segoe UI",sans-serif}
#stc [dir=rtl]{font-family:var(--B)}
#stc [dir=rtl] h2,#stc [dir=rtl] h3,#stc [dir=rtl] h4,#stc[data-lang=ar] .shop h2,#stc[data-lang=ar] .hs h2{letter-spacing:0;line-height:1.3}

#stc [dir=rtl] .tag{letter-spacing:0}
@media(max-width:900px){#stc .xm,#stc .xc{grid-template-columns:1fr}#stc .xs{padding:80px 0}#stc .xh{width:32px;height:32px;margin:-16px 0 0 -16px}}
@media(prefers-reduced-motion:reduce){#stc .xh::after,#stc .xmp>*,#stc .xd{animation:none}#stc .xs .tag,#stc .xs h2,#stc .xs .lead{opacity:1;transform:none}}

#stc .xh::before{content:attr(data-l);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);white-space:nowrap;padding:6px 12px;border-radius:8px;background:#fff;color:var(--n2);font:600 12px var(--B);opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 24px #0006;z-index:3}
#stc .xh:hover::before,#stc .xh:focus-visible::before{opacity:1;transform:translate(-50%,0)}
#stc .xh:hover{transform:scale(1.14)}
/* ---------- hero ---------- */
#stc .xhero{position:relative;min-height:max(100svh,680px);display:flex;align-items:center;overflow:hidden;padding:calc(var(--hd,64px) + 40px) 0 90px;background:radial-gradient(ellipse at 70% 30%,#1b4c8c 0,var(--n2) 45%,var(--n1) 85%);isolation:isolate}
#stc .xhero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
#stc .xhglow{position:absolute;z-index:-1;width:60vmax;aspect-ratio:1;right:-18vmax;top:-20vmax;border-radius:50%;background:conic-gradient(from 0deg,#4da3ff00,#4da3ff55,#ffffff22,#4da3ff00 60%);filter:blur(40px);animation:spin 18s linear infinite}
#stc .xhc{position:relative;text-align:center}
#stc .xhc .tag{margin-bottom:26px}
#stc .xhc h1{font-size:clamp(40px,7.6vw,124px);font-weight:800;line-height:1.1;padding-bottom:.1em;max-width:15ch;margin:0 auto 22px;background:linear-gradient(180deg,#fff 30%,#a9c9f5);-webkit-background-clip:text;background-clip:text;color:transparent}
#stc .xrot{display:inline-block;position:relative}
#stc .xrot b{display:inline-block;background:linear-gradient(90deg,#7db8ff,#fff,#7db8ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xsh 4s linear infinite}
#stc .xrot b.in{animation:xsh 4s linear infinite,xup .7s cubic-bezier(.2,.8,.2,1)}
@keyframes xup{from{opacity:0;transform:translateY(.4em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
#stc .xhc .lead{margin:0 auto 34px;max-width:56ch;font-size:clamp(17px,1.7vw,22px)}
#stc .xhb{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}
#stc .xhb .btn{padding:16px 34px;font-size:16px}
#stc .xhs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:900px;margin:0 auto;border:1px solid #ffffff1f;border-radius:22px;overflow:hidden;background:#ffffff1f;backdrop-filter:blur(8px)}
#stc .xhs>div{background:#0a1f3dcc;padding:20px 10px}
#stc .xhs b{display:block;font:800 clamp(26px,3.4vw,44px) var(--W);letter-spacing:-.02em}
#stc .xhs small{color:var(--g2);font-size:13px}
#stc .xcue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:2px solid #ffffff66;border-radius:14px}
#stc .xcue i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:xcue 1.6s infinite}
@keyframes xcue{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(14px)}}
/* ---------- scene polish ---------- */
#stc .cam{transform:translate3d(calc(var(--tx,0)*-18px),calc(var(--ty,0)*-12px),0)}
#stc .ghost{transform:translate(calc(8% - var(--p)*38% + var(--tx,0)*30px),-50%)}
#stc .obj{transform:rotateY(calc(-32deg + var(--p)*64deg)) rotateX(calc(7deg - var(--p)*9deg)) scale(calc(.94 + var(--p)*.26))}
#stc .s h2{background:linear-gradient(180deg,#fff 35%,#a9c9f5);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
#stc .lt .s h2{background-image:linear-gradient(180deg,#0a1f3d 35%,#3b66a8)}
#stc .xnav{position:fixed;right:16px;top:50%;transform:translateY(-50%) translateX(30px);z-index:55;display:flex;flex-direction:column;gap:9px;opacity:0;pointer-events:none;transition:.4s}
#stc .xnav.show{opacity:1;pointer-events:auto;transform:translateY(-50%)}
#stc .xnav button{position:relative;width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid #7db8ff;background:#06142a99;cursor:pointer;transition:.25s}
#stc .xnav button.on{background:#7db8ff;transform:scale(1.5);box-shadow:0 0 12px #4da3ff}
#stc .xnav button::before{content:attr(data-l);position:absolute;right:20px;top:50%;transform:translate(8px,-50%);white-space:nowrap;padding:5px 11px;border-radius:8px;background:#fff;color:#0a1f3d;font:700 11px var(--W);letter-spacing:.04em;opacity:0;pointer-events:none;transition:.25s}
#stc .xnav button:hover::before{opacity:1;transform:translate(0,-50%)}
/* ---------- offer ---------- */
#stc .offer .oc h2{max-width:none;font-size:clamp(36px,5.2vw,78px);line-height:1.04}
#stc .offer .oc .in{display:grid;grid-template-columns:1.15fr 1fr;column-gap:56px;align-items:center}
#stc .offer .oc .in>.tag,#stc .offer .oc .in>h2,#stc .offer .oc .in>.lead,#stc .offer .oc .ocb{grid-column:1;justify-self:start}
#stc .offer .oc .stps{grid-column:2;grid-row:1/5;display:grid;grid-template-columns:1fr!important;gap:14px;margin:0}
#stc .offer .oc .stps>div{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:20px;background:#ffffff0f;border:1px solid #ffffff22;transition:.35s}
#stc .offer .oc .stps>div:hover{background:#ffffff1c;border-color:#7db8ff;transform:translateX(8px)}
#stc .offer .oc .stps small{font:800 28px var(--W);color:var(--bl);min-width:2ch}
#stc .offer .oc .stps b{font:600 18px var(--B)}
#stc .ocb{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
#stc .ocb .btn{margin:0;padding:17px 34px;font-size:16px}
#stc .ocb .big2{position:relative;overflow:hidden}
#stc .ocb .big2::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#4da3ff55,transparent);transform:skewX(-20deg);transition:.7s}
#stc .ocb .big2:hover::before{left:130%}
#stc .ocb .big2::after{content:" \2192"}
#stc [dir=rtl] .ocb .big2::after{content:" \2190"}
@media(max-width:900px){#stc .xhs{grid-template-columns:repeat(2,1fr)}#stc .xnav{display:none}#stc .offer .oc .in{display:block}#stc .offer .oc .stps{margin:26px 0}#stc .xhero{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){#stc .xhglow,#stc .xrot b,#stc .xs h2 em{animation:none}}

#stc .offer .oc .stps b,#stc .offer .oc .stps small{margin:0;line-height:1.2;display:block}