:root{--bg:#251C16;--bg2:#2D221B;--sunk:#141210;--surf:#3B2E25;--surf2:#30251D;--txt:#fff;--txt2:#C7C0B8;--or:#E95900;--or2:#FF9A3C;--gold:#F5B546;--gold2:#FFD98A;--ok:#4ADE80;--grad:linear-gradient(115deg,#C24500,#E95900 52%,#FF9A3C);--line:rgba(245,181,70,.28);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--txt);font-family:var(--f-ui);line-height:1.8;font-size:15px;padding-bottom:calc(36px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(900px 520px at 78% -6%,rgba(233,89,0,.18),transparent 62%),radial-gradient(800px 600px at 8% 30%,rgba(120,84,58,.22),transparent 64%),linear-gradient(180deg,var(--bg2),var(--bg) 38%,var(--sunk));background-attachment:fixed}
a{color:var(--gold2)}button{font:inherit;color:inherit}
h1,h2,h3,.btn{font-family:var(--f-head)}
.w{max-width:1120px;margin:0 auto;padding:16px}
.bc{font-size:13px;color:var(--txt2);margin:2px 0 18px}.bc a{color:var(--txt2);text-decoration:none}.bc a:hover{color:var(--gold2)}.bc i{opacity:.5;margin:0 6px;font-style:normal}
.hd{text-align:center;margin:6px auto 26px;max-width:680px}
.eb{display:inline-flex;align-items:center;gap:8px;padding:5px 16px;border-radius:999px;font-family:var(--f-head);font-weight:700;font-size:13px;color:var(--gold2);border:1px solid rgba(255,154,60,.5);background:linear-gradient(180deg,rgba(59,46,37,.9),rgba(30,23,18,.95));box-shadow:0 0 18px rgba(233,89,0,.22)}
.eb::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or);box-shadow:0 0 10px var(--or)}
h1{font-size:clamp(26px,5vw,40px);line-height:1.35;margin:14px 0 8px;font-weight:800}h1 em{font-style:normal;color:#FF8A2B}
.hd p{margin:0;color:var(--txt2);font-size:15px}
.gd{display:grid;gap:26px;align-items:start}
@media(min-width:900px){.gd{grid-template-columns:minmax(300px,380px) 1fr;gap:44px}}
/* ---------- المشغّل ---------- */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.stage::before{content:"";position:absolute;left:0;top:6%;width:100%;height:70%;background:radial-gradient(ellipse,rgba(233,89,0,.30),transparent 68%);filter:blur(34px);pointer-events:none;z-index:0}
.phone{position:relative;z-index:1;width:100%;aspect-ratio:600/1300;padding:8px;border-radius:40px;background:linear-gradient(150deg,#6a5546,#2b2019 40%,#15100c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1.5px rgba(245,181,70,.35),0 30px 60px rgba(0,0,0,.55),0 0 46px rgba(233,89,0,.22)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:3px;background:linear-gradient(180deg,#8a7260,#3a2d24)}
.phone::before{left:-3px;top:18%;height:9%}.phone::after{right:-3px;top:24%;height:14%}
.scr{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#000}
video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.bp{position:absolute;inset:0;display:grid;place-items:center;border:0;background:linear-gradient(180deg,rgba(20,14,10,.12),rgba(20,14,10,.5));cursor:pointer;transition:opacity .3s}
.bp[hidden]{display:none}
.bp span{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 10px 30px rgba(233,89,0,.55),inset 0 1px 0 rgba(255,255,255,.35);animation:pulse 2.2s ease-in-out infinite}
.bp svg{width:30px;height:30px;fill:#fff;margin-inline-start:3px}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px rgba(233,89,0,.55),0 0 0 0 rgba(255,154,60,.5)}50%{box-shadow:0 10px 30px rgba(233,89,0,.55),0 0 0 16px rgba(255,154,60,0)}}
.chip{position:absolute;top:14px;inset-inline:0;margin:0 auto;width:max-content;max-width:86%;padding:4px 14px;border-radius:999px;font-family:var(--f-head);font-weight:700;font-size:12.5px;color:#FFE3AE;background:rgba(20,14,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(245,181,70,.4);opacity:0;transform:translateY(-6px);transition:all .3s;pointer-events:none;z-index:2}
.chip.on{opacity:1;transform:none}
.bar{position:relative;z-index:1;width:min(300px,74vw);display:flex;gap:4px;direction:ltr;cursor:pointer;padding:8px 0}
.bar i{position:relative;display:block;height:7px;border-radius:7px;background:rgba(255,255,255,.14);overflow:hidden;transition:height .2s}
.bar:hover i{height:9px}
.bar u{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#C24500,#FF9A3C,#FFD98A);box-shadow:0 0 10px rgba(255,154,60,.6);text-decoration:none}
.bar i.cur{box-shadow:0 0 0 1px rgba(255,202,120,.55)}
.ctl{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.ib{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:linear-gradient(180deg,rgba(59,46,37,.95),rgba(30,23,18,.98));box-shadow:inset 0 0 0 1px rgba(245,181,70,.35),0 6px 14px rgba(0,0,0,.35);transition:transform .25s,box-shadow .25s}
.ib:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,154,60,.7),0 8px 18px rgba(0,0,0,.4),0 0 16px rgba(233,89,0,.3)}
.ib:disabled{opacity:.35;cursor:default}
.ib svg{width:20px;height:20px;fill:var(--gold2)}
.ib.main{width:60px;height:60px;background:var(--grad);box-shadow:0 8px 22px rgba(233,89,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.ib.main svg{width:26px;height:26px;fill:#fff}
.ib.nudge{animation:pulse 1.6s ease-in-out infinite}
.opts{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{padding:7px 16px;border-radius:999px;border:0;cursor:pointer;font-family:var(--f-head);font-weight:700;font-size:13.5px;color:var(--gold2);background:rgba(59,46,37,.85);box-shadow:inset 0 0 0 1px rgba(245,181,70,.35);transition:all .25s}
.pill:hover{box-shadow:inset 0 0 0 1px rgba(255,154,60,.75),0 0 14px rgba(233,89,0,.25);color:#fff}
.pill[aria-pressed="true"]{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(233,89,0,.4)}
/* ---------- القائمة والشرح ---------- */
.side{display:grid;gap:18px}
.now{position:relative;overflow:hidden;padding:22px 22px 20px;border-radius:24px;background:radial-gradient(ellipse 80% 70% at 100% 0%,rgba(233,89,0,.18),transparent 70%),linear-gradient(165deg,rgba(59,46,37,.96),rgba(30,23,18,.98));box-shadow:inset 0 0 0 1px rgba(245,181,70,.3),inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.4)}
.now::before{content:"";position:absolute;left:16%;right:16%;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#FFE3AE,#FF9A3C,#FFE3AE,transparent);box-shadow:0 0 12px rgba(255,154,60,.8)}
.nowin{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-head);font-weight:700;font-size:13px;color:var(--gold2)}
.kk b{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:12px;background:var(--grad);color:#fff;font-size:16px;font-weight:700;box-shadow:0 0 16px rgba(233,89,0,.45)}
.kk em{font-style:normal;color:var(--txt2);font-weight:600}
.fast{display:none;padding:2px 12px;border-radius:999px;font-size:12px;color:#fff;background:rgba(233,89,0,.25);box-shadow:inset 0 0 0 1px rgba(255,154,60,.6)}
.fast.on{display:inline-block}
.now h2{margin:10px 0 6px;font-size:clamp(20px,3.4vw,26px);line-height:1.4;font-weight:800}
.now p{margin:0;font-size:15px;color:#EDE7E0}
.tip{margin-top:12px;padding:10px 14px;border-radius:14px;font-size:13.5px;color:var(--gold2);background:rgba(245,181,70,.08);box-shadow:inset 0 0 0 1px rgba(245,181,70,.22)}
.tip:empty{display:none}
.lst{margin:0;padding:0;list-style:none;display:grid;gap:10px}
@media(min-width:900px){.lst{grid-template-columns:1fr 1fr}}
.st{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:18px;cursor:pointer;text-align:start;background:linear-gradient(165deg,rgba(59,46,37,.82),rgba(34,26,20,.92));box-shadow:inset 0 0 0 1px rgba(245,181,70,.18);transition:transform .3s,box-shadow .3s,background .3s}
.st:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,154,60,.55),0 10px 22px rgba(0,0,0,.35)}
.st .n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;font-family:var(--f-head);font-weight:800;font-size:16px;color:var(--gold2);background:rgba(245,181,70,.1);box-shadow:inset 0 0 0 1px rgba(245,181,70,.3)}
.st .t{flex:1;min-width:0}.st .t b{display:block;font-family:var(--f-head);font-size:15px;font-weight:700;line-height:1.5}.st .t small{display:block;color:var(--txt2);font-size:12.5px;direction:ltr;text-align:start}
.st.done .n{background:rgba(74,222,128,.14);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(74,222,128,.5)}
.st.act{background:radial-gradient(ellipse 90% 120% at 100% 0%,rgba(233,89,0,.28),transparent 70%),linear-gradient(165deg,rgba(75,57,44,.98),rgba(40,30,23,.98));box-shadow:inset 0 0 0 1.5px rgba(255,154,60,.85),0 10px 24px rgba(0,0,0,.4),0 0 22px rgba(233,89,0,.28)}
.st.act .n{background:var(--grad);color:#fff;box-shadow:0 0 16px rgba(233,89,0,.55)}
.cta{margin-top:30px;text-align:center;padding:26px 18px;border-radius:24px;background:radial-gradient(ellipse 70% 120% at 50% 0%,rgba(233,89,0,.2),transparent 70%),linear-gradient(165deg,rgba(59,46,37,.9),rgba(30,23,18,.96));box-shadow:inset 0 0 0 1px rgba(245,181,70,.28)}
.cta h2{margin:0 0 6px;font-size:20px}.cta p{margin:0 0 16px;color:var(--txt2)}
.btn{display:inline-block;text-align:center;padding:13px 28px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 8px 24px rgba(233,89,0,.4)}
.btn.ghost{background:none;box-shadow:inset 0 0 0 1px rgba(245,181,70,.5);color:var(--gold2);margin-inline-start:8px}
@media(max-width:520px){.btn.ghost{margin:10px 0 0}}
.note{display:flex;gap:10px;align-items:flex-start;max-width:560px;margin:0 auto 22px;padding:11px 16px;border-radius:16px;font-size:13.5px;color:#FFE7CF;background:rgba(255,154,60,.1);box-shadow:inset 0 0 0 1px rgba(255,154,60,.45)}

canvas.cv{display:block;width:100%;height:100%;background:#000}
.mc{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none;opacity:0}
.mc svg{position:absolute;left:-3px;top:-2px;width:30px;height:36px;overflow:visible;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,154,60,.75));transform-origin:4px 3px}
.mc i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:3px solid #FF9A3C;background:radial-gradient(circle,rgba(255,154,60,.45),rgba(255,154,60,0) 70%);box-shadow:0 0 18px rgba(255,154,60,.7);opacity:0;transform:scale(.2)}
.mc span{position:absolute;white-space:nowrap;padding:4px 12px;border-radius:999px;font-family:var(--f-head);font-weight:700;font-size:12.5px;color:#FFF4DC;background:linear-gradient(135deg,#C24500,#E95900 55%,#FF9A3C);box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 14px rgba(233,89,0,.5);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.mc span.on{opacity:1;transform:none}
.mc span::after{content:"";position:absolute;width:9px;height:9px;background:#E95900;transform:rotate(45deg);left:50%;margin-left:-4.5px}
.mc span.up::after{bottom:-4px}.mc span.dn::after{top:-4px}

/* ===== الجوال الذائب ===== */
.pw{position:relative;z-index:1;width:min(300px,74vw);margin-bottom:-46px;isolation:isolate}
.pw::before{content:"";position:absolute;left:4%;right:4%;bottom:-3%;height:36%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,19,.5),rgba(233,89,0,.16) 55%,transparent 76%);filter:blur(18px);z-index:-1}
.pw .phone{-webkit-mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.2) 93%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.2) 93%,transparent 100%)}
.pw .phone{background:linear-gradient(150deg,#7a6252,#34271f 38%,#1a130e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1.5px rgba(245,181,70,.4),0 30px 60px rgba(0,0,0,.5),0 0 54px rgba(233,89,0,.28)}
.gl{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 22%,transparent 38%),linear-gradient(180deg,rgba(255,196,130,.10),transparent 30%)}
.mcw{position:absolute;left:8px;right:8px;top:8px;bottom:8px;z-index:3;pointer-events:none}
.bar,.ctl,.opts{position:relative;z-index:2}
.pill#sn[aria-pressed="false"]{color:#C7C0B8;background:rgba(59,46,37,.6);box-shadow:inset 0 0 0 1px rgba(199,192,184,.3)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}