/* ShaheeniX Ultra — iPhone + Android live app demo */
/* ShaheeniX Ultra — iPhone + Android live app demo */
.sxd{position:relative;overflow:hidden;color:#fff;padding:clamp(64px,9vw,110px) 0 clamp(56px,8vw,90px);
  background:radial-gradient(circle at 85% 8%,rgba(0,150,136,.55),transparent 45%),radial-gradient(circle at 10% 90%,rgba(254,159,67,.16),transparent 40%),linear-gradient(180deg,#0b1220,#0d3d63 60%,#0b1220)}
.sxd .sx-h{margin:0 auto 26px;text-align:center}
.sxd .sx-h .eb{color:var(--sun)}
.sxd .sx-h h2{color:#fff}
.sxd .sx-h p{color:rgba(255,255,255,.72);margin-left:auto;margin-right:auto}
/* controls */
.sxd-ctrl{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:26px}
.sxd-seg{position:relative;display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.sxd-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:#d3e6ee;font:600 14.5px var(--body);padding:10px 18px;border-radius:999px;cursor:pointer;transition:color .3s}
.sxd-seg button.on{color:var(--ink)}
.sxd-seg .pill{position:absolute;z-index:0;top:5px;bottom:5px;border-radius:999px;background:var(--sun);box-shadow:0 8px 24px -8px rgba(254,159,67,.8);transition:left .45s var(--ease),width .45s var(--ease)}
.sxd-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sxd-tabs button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#d3e6ee;border-radius:999px;padding:8px 15px;font:600 13.5px var(--body);cursor:pointer;transition:transform .2s,background .3s,color .3s}
.sxd-tabs button:hover{transform:translateY(-2px)}
.sxd-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--royal2),#26a69a);border-color:transparent;box-shadow:0 10px 24px -10px rgba(0,150,136,.9)}
.sxd-tabs .bar{display:block;height:2px;margin-top:5px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.sxd-tabs .bar i{display:block;height:100%;width:0;background:var(--sun)}
.sxd-tabs button.on .bar i{animation:sxdBar var(--dur,6s) linear forwards}
.sxd-stage.paused ~ * .sxd-tabs button.on .bar i,#sxDevices.paused .sxd-tabs button.on .bar i{animation-play-state:paused}
@keyframes sxdBar{
to{width:100%}
}
/* stage */
.sxd-stage{--k:1;--w:300px;--h:640px;position:relative;height:calc(var(--h) * var(--k) + 40px);perspective:1400px;margin:0 auto;max-width:900px}
.sxd-stage::before{content:"";position:absolute;left:50%;top:48%;width:min(720px,90%);height:60%;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,#009688,#26a69a,#FE9F43,#009688);filter:blur(80px);opacity:.42;animation:sxdSpin 14s linear infinite}
@keyframes sxdSpin{
to{transform:translate(-50%,-50%) rotate(360deg)}
}
.sxd-phone{--x:0px;--ry0:0deg;--s:1;--o:1;--rx:0deg;--ry:0deg;--lift:0px;
  position:absolute;left:50%;top:0;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);transform-origin:50% 0;
  transform:translateX(calc(var(--x) * var(--k))) translateY(var(--lift)) scale(calc(var(--s) * var(--k))) rotateY(calc(var(--ry0) + var(--ry))) rotateX(var(--rx));
  opacity:var(--o);transition:transform .9s var(--ease),opacity .6s;transform-style:preserve-3d;will-change:transform}
.sxd-stage.tracking .sxd-phone{transition:transform .25s ease-out,opacity .6s}
.sxd-stage[data-os=both] .ios{--x:-172px;--ry0:14deg;--lift:0px;z-index:2}
.sxd-stage[data-os=both] .android{--x:172px;--ry0:-14deg;--lift:22px;z-index:1}
.sxd-stage[data-os=ios] .ios{--s:1.04;z-index:2}
.sxd-stage[data-os=ios] .android{--x:330px;--ry0:-40deg;--s:.78;--o:0;pointer-events:none}
.sxd-stage[data-os=android] .android{--s:1.04;z-index:2}
.sxd-stage[data-os=android] .ios{--x:-330px;--ry0:40deg;--s:.78;--o:0;pointer-events:none}
.sxd-stage:hover[data-os=both] .ios{--x:-186px}
.sxd-stage:hover[data-os=both] .android{--x:186px}
/* frames */
.sxd-frame{position:absolute;inset:0;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.ios .sxd-frame{border-radius:54px;padding:11px;background:linear-gradient(145deg,#4a4d57,#1d1e23 30%,#2c2e35 70%,#5a5d68)}
.ios .sxd-frame::before{content:"";position:absolute;inset:3px;border-radius:51px;background:#0a0a0c}
.android .sxd-frame{border-radius:38px;padding:9px;background:linear-gradient(145deg,#2b3140,#0f1219 40%,#1b1f2a)}
.android .sxd-frame::before{content:"";position:absolute;inset:2px;border-radius:36px;background:#07080b}
.sxd-btn{position:absolute;width:4px;border-radius:3px;background:linear-gradient(#5a5d68,#2c2e35)}
.ios .sxd-btn.a{left:-3px;top:120px;height:30px}
.ios .sxd-btn.b{left:-3px;top:170px;height:56px}
.ios .sxd-btn.c{left:-3px;top:236px;height:56px}
.ios .sxd-btn.d{right:-3px;top:190px;height:86px}
.android .sxd-btn.a{right:-3px;top:150px;height:70px}
.android .sxd-btn.b{right:-3px;top:240px;height:40px}
.android .sxd-btn.c,.android .sxd-btn.d{display:none}
.sxd-screen{position:relative;z-index:1;height:100%;overflow:hidden;display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;color:#0b1220}
.ios .sxd-screen{border-radius:44px;background:#f2f2f7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Onest",system-ui,sans-serif}
.android .sxd-screen{border-radius:30px;background:#f6f7fb;font-family:Roboto,"Onest",system-ui,sans-serif}
.sxd-glare{position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.28),transparent 45%)}
.sxd-stage.tracking .sxd-glare{opacity:1}
/* status bars */
.sxd-sb{display:flex;align-items:center;justify-content:space-between;flex:none;font-weight:600;position:relative;z-index:3}
.ios .sxd-sb{height:50px;padding:16px 28px 0 34px;font-size:14px}
.ios .sxd-sb .isl{position:absolute;left:50%;top:11px;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;transition:width .5s var(--ease),margin .5s var(--ease)}
.ios .sxd-screen .sxd-sb .isl.big{width:150px;margin-left:-75px}
.android .sxd-sb{height:34px;padding:8px 18px 0;font-size:12px}
.android .sxd-sb .isl{position:absolute;left:50%;top:9px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 2px #1a1d26}
.sxd-sb .ic{display:flex;gap:5px;align-items:center}
.sxd-sb svg{display:block}
.android .sxd-app .sxd-sb,.android.dark-top .sxd-sb{color:#fff}
/* app bars */
.ios .sxd-top{padding:2px 18px 8px}
.ios .sxd-top small{display:flex;align-items:center;gap:6px;color:#6a7386;font-size:12px;font-weight:600}
.ios .sxd-top small i{width:16px;height:16px;border-radius:5px;background:var(--royal);display:inline-block}
.ios .sxd-top h4{font:800 28px/1.1 -apple-system,BlinkMacSystemFont,"Schibsted Grotesk",sans-serif;letter-spacing:-.02em;margin:2px 0 0;color:#0b1220}
.android .sxd-top{display:flex;align-items:center;gap:10px;padding:8px 16px 12px;background:var(--royal);color:#fff;margin-top:-34px;padding-top:44px}
.android .sxd-top h4{flex:1;font:500 19px/1.2 Roboto,"Onest",sans-serif;margin:0;color:#fff}
.android .sxd-top small{display:none}
.android .sxd-top .av{width:30px;height:30px;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:12px}
.ios .sxd-top .av{display:none}
/* views */
.sxd-views{position:relative;flex:1;overflow:hidden}
.sxd-v{position:absolute;inset:0;padding:6px 14px 12px;overflow:hidden;opacity:0;transform:translateX(18px);transition:opacity .45s,transform .55s var(--ease);pointer-events:none}
.android .sxd-v{padding-top:12px}
.sxd-v.on{opacity:1;transform:none;pointer-events:auto}
.sxd-v.on .st{animation:sxdUp .55s var(--ease) both}
.sxd-v.on .st:nth-child(2){animation-delay:.06s}
.sxd-v.on .st:nth-child(3){animation-delay:.12s}
.sxd-v.on .st:nth-child(4){animation-delay:.18s}
.sxd-v.on .st:nth-child(5){animation-delay:.24s}
.sxd-v.on .st:nth-child(6){animation-delay:.3s}
.sxd-v.on .st:nth-child(7){animation-delay:.36s}
@keyframes sxdUp{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
}
.sxd-screen .card{background:#fff;border-radius:16px;padding:12px;margin-bottom:10px}
.ios .sxd-screen .card{box-shadow:0 1px 0 rgba(0,0,0,.04)}
.android .sxd-screen .card{border-radius:14px;box-shadow:0 1px 3px rgba(11,18,32,.08)}
.sxd-screen .hero{background:linear-gradient(135deg,var(--royal),var(--royal2));color:#fff}
.sxd-screen .hero small{color:#a9c8d6;font-size:11px}
.sxd-screen .hero b.big{display:block;font:800 26px/1.15 "Schibsted Grotesk",sans-serif;margin:2px 0 8px}
.sxd-screen .hero .two{display:flex;gap:8px}
.sxd-screen .hero .two span{flex:1;background:rgba(255,255,255,.12);border-radius:10px;padding:6px 8px;font-size:10.5px;color:#d3e6ee}
.sxd-screen .hero .two b{display:block;color:#fff;font-size:13px}
.sxd-screen .g{color:#0f8a5f!important}
.sxd-screen .r{color:#c0392b!important}
.sxd-screen .qa{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.sxd-screen .qa span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:#3a4356}
.sxd-screen .qa span i{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--royal);box-shadow:0 1px 3px rgba(11,18,32,.08)}
.android .sxd-screen .qa span i{border-radius:50%}
.sxd-screen .lh{font-size:11px;font-weight:700;color:#6a7386;text-transform:uppercase;letter-spacing:.06em;margin:4px 2px 6px}
.sxd-screen .lst{list-style:none;margin:0;padding:0;background:#fff;border-radius:16px;overflow:hidden}
.android .sxd-screen .lst{border-radius:14px;box-shadow:0 1px 3px rgba(11,18,32,.08)}
.sxd-screen .lst li{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid #eef0f5}
.sxd-screen .lst li:last-child{border-bottom:0}
.sxd-screen .lst .a{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff;background:var(--c,#009688)}
.sxd-screen .lst .n{flex:1;min-width:0}
.sxd-screen .lst .n b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxd-screen .lst .n small{color:#6a7386;font-size:10.5px}
.sxd-screen .lst .m{font-weight:700;font-size:12.5px;text-align:right}
.sxd-screen .lst .m small{display:block;font-weight:500;color:#6a7386;font-size:9.5px}
.sxd-screen .srch{display:flex;align-items:center;gap:6px;background:#e5e6ec;border-radius:11px;padding:7px 10px;color:#6a7386;margin-bottom:8px;font-size:12px}
.android .sxd-screen .srch{background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(11,18,32,.08)}
.sxd-screen .chips{display:flex;gap:6px;margin-bottom:8px}
.sxd-screen .chips span{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#fff;color:#3a4356;border:1px solid #e1e5ee}
.sxd-screen .chips span.on{background:var(--royal);border-color:var(--royal);color:#fff}
.sxd-screen .acct{display:flex;align-items:center;gap:10px}
.sxd-screen .acct i{width:34px;height:34px;border-radius:10px;background:#fff1d6;color:#8a5a00;display:grid;place-items:center}
.sxd-screen .acct b{display:block;font-size:12.5px}
.sxd-screen .acct small{color:#6a7386;font-size:10.5px}
.sxd-screen .feed{display:flex;flex-direction:column;gap:8px}
.sxd-screen .fi{background:#fff;border-radius:14px;padding:9px 10px;font-size:11.5px;color:#3a4356;box-shadow:0 1px 3px rgba(11,18,32,.06);animation:sxdIn .5s var(--ease) both}
.sxd-screen .fi .t{display:flex;justify-content:space-between;gap:6px;color:#0b1220;font-weight:700;font-size:12px}
.sxd-screen .fi .k{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:5px;margin-bottom:4px;background:#e0f2f1;color:var(--royal)}
.sxd-screen .fi .k.bank{background:#fff1d6;color:#8a5a00}
.sxd-screen .fi .k.ok{background:#dff7ec;color:#0f6b4a}
.sxd-screen .fi .k.ai{background:var(--royal);color:#fff}
.sxd-screen .fi .acts{display:flex;gap:5px;margin-top:6px}
.sxd-screen .fi .acts i{font-style:normal;font-size:10px;padding:4px 8px;border-radius:7px;border:1px solid #cfd5e2;transition:background .3s,color .3s}
.sxd-screen .fi .acts i.on{background:var(--royal);border-color:var(--royal);color:#fff}
@keyframes sxdIn{
from{opacity:0;transform:translateY(-10px) scale(.97)}
to{opacity:1;transform:none}
}
.sxd-screen .inv h5{margin:0;font:800 14px "Schibsted Grotesk",sans-serif}
.sxd-screen .inv .meta{display:flex;justify-content:space-between;color:#6a7386;font-size:10.5px;margin:2px 0 8px}
.sxd-screen .inv table{width:100%;border-collapse:collapse;font-size:11px}
.sxd-screen .inv td{padding:4px 0;border-bottom:1px dashed #e1e5ee}
.sxd-screen .inv td:last-child{text-align:right;font-weight:600}
.sxd-screen .inv .tot td{border:0;padding-top:6px;font-size:13px;font-weight:800;color:var(--royal)}
.sxd-screen .inv .sub td{border:0;color:#6a7386;padding:2px 0;font-weight:500}
.sxd-screen .btns{display:flex;gap:6px;margin-top:8px}
.sxd-screen .btns span{flex:1;text-align:center;padding:8px;border-radius:10px;font-weight:700;font-size:11.5px;background:#e0f2f1;color:var(--royal)}
.sxd-screen .btns span.p{background:#25d366;color:#fff}
.android .sxd-screen .btns span{border-radius:999px}
.sxd-screen .wa{background:#e8ddd3;border-radius:14px;padding:10px;margin-bottom:10px}
.sxd-screen .wa .bub{background:#fff;border-radius:10px 10px 10px 2px;padding:8px 9px;font-size:11.5px;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.sxd-screen .wa .bub .ur{display:block;direction:rtl;text-align:right;font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;font-size:12.5px;margin-bottom:4px;color:#0b1220}
.sxd-screen .wa .bub a{color:#009688;font-weight:600;text-decoration:none}
.sxd-screen .wa .bub small{display:block;text-align:right;color:#6a7386;font-size:9px;margin-top:3px}
.sxd-screen .wa .bub small b{color:#34b7f1}
.sxd-screen .tag{display:inline-block;font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:999px;background:#dff7ec;color:#0f6b4a;white-space:nowrap}
.sxd-screen .tag.w{background:#fff1d6;color:#8a5a00}
.sxd-screen .ai-orb{width:96px;height:96px;margin:14px auto 12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc68f 0,#FE9F43 30%,#009688 62%,#092C4C 100%);position:relative}
.sxd-screen .ai-orb::before,.sxd-screen .ai-orb::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(0,150,136,.35);animation:sxdRing 1.8s infinite}
.sxd-screen .ai-orb::after{animation-delay:.9s}
@keyframes sxdRing{
from{transform:scale(.85);opacity:1}
to{transform:scale(1.4);opacity:0}
}
.sxd-screen .wave{display:flex;justify-content:center;align-items:center;gap:3px;height:26px;margin-bottom:10px}
.sxd-screen .wave i{width:3px;border-radius:3px;background:var(--royal2);animation:sxdWave 1s ease-in-out infinite}
.sxd-screen .wave i:nth-child(odd){animation-delay:.2s}
.sxd-screen .wave i:nth-child(3n){animation-delay:.4s}
@keyframes sxdWave{
0%,100%{height:5px}
50%{height:24px}
}
.sxd-screen .said{text-align:center;font-size:13px;font-weight:600;min-height:38px;color:#0b1220;padding:0 6px}
.sxd-screen .said::after{content:"|";color:var(--royal2);animation:sxdBlink 1s steps(1) infinite;margin-left:1px}
@keyframes sxdBlink{
50%{opacity:0}
}
.sxd-screen .res{opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.sxd-screen .res.show{opacity:1;transform:none}
/* bottom bars */
.sxd-nav{flex:none;display:flex;justify-content:space-around;position:relative;z-index:3}
.sxd-nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;cursor:pointer;color:#8a91a3;padding:0;min-width:44px}
.sxd-nav button span{font-size:9.5px;font-weight:600}
.sxd-nav button.on{color:var(--royal)}
.ios .sxd-nav{height:78px;padding:8px 8px 0;background:rgba(249,249,251,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.08)}
.ios .sxd-nav::after{content:"";position:absolute;left:50%;bottom:8px;width:118px;height:5px;margin-left:-59px;border-radius:3px;background:#0b1220}
.android .sxd-nav{height:74px;padding:10px 4px 0;background:#eef5f6}
.android .sxd-nav button i{display:grid;place-items:center;width:52px;height:28px;border-radius:999px;transition:background .3s}
.android .sxd-nav button.on i{background:#c4e8e4}
.android .sxd-nav button.on{color:#0b1220}
.android .sxd-nav::after{content:"";position:absolute;left:50%;bottom:6px;width:90px;height:4px;margin-left:-45px;border-radius:3px;background:#3a4356;opacity:.6}
.sxd-fab{display:none}
.android .sxd-fab{display:grid;place-items:center;position:absolute;right:14px;bottom:88px;z-index:4;width:50px;height:50px;border-radius:16px;background:var(--sun);color:var(--ink);box-shadow:0 8px 20px -6px rgba(0,0,0,.35)}
/* label + caption */
.sxd-os{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font:600 12px var(--body);color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase}
.sxd-cap{text-align:center;margin-top:20px;min-height:3.4em}
.sxd-cap b{display:block;font:800 20px var(--display);color:#fff}
.sxd-cap span{color:rgba(255,255,255,.72);font-size:15.5px}
.sxd-note{text-align:center;color:rgba(255,255,255,.5);font-size:13px;margin-top:6px}
@media (max-width:900px){
.sxd-stage{--k:.82}
}
@media (max-width:700px){
.sxd-stage{--k:.62}
.sxd-stage[data-os=both] .ios{--x:-150px}
.sxd-stage[data-os=both] .android{--x:150px}
.sxd-os{display:none}
}
@media (max-width:440px){
.sxd-stage{--k:.52}
.sxd-seg button{padding:9px 13px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
.sxd-stage::before,.sxd-screen .ai-orb::before,.sxd-screen .ai-orb::after,.sxd-screen .wave i{animation:none}
.sxd-phone{transition:opacity .3s}
}