:root{
  --bg:#FAF5F2; --cream:#FFF7EE; --ink:#1C1917; --muted:#78716C;
  --gold:#D97706; --gold2:#F59E0B; --goldsoft:#FDE9C9;
  --wood:#8B5A33; --wood2:#6B4123; --wood3:#4A2C17;
  --green:#128C7E; --wa:#25D366;
  --ar:"Tajawal","Almarai",system-ui,sans-serif;
  --lat:"Calistoga",Georgia,serif;
  --s:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #2a2018 0%, #150f0b 60%, #0d0906 100%);
  font-family:var(--ar); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.app{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px;width:100%}
.stage-wrap{
  width:min(46vh,26vw); aspect-ratio:9/16; position:relative;
  border-radius:26px; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
@media (max-aspect-ratio:1/1){ .stage-wrap{width:min(88vw,52vh)} }
.stage{
  position:absolute; top:0; right:0; width:1080px; height:1920px;
  transform:scale(var(--s)); transform-origin:top right;
  background:var(--bg); overflow:hidden;
}
.scene{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s ease;
}
.scene.is-active{opacity:1;visibility:visible}
.sc-bg{position:absolute;inset:0}
.bg-ivory{background:linear-gradient(160deg,#FFF9F3 0%,#FAF0E4 55%,#F2E2CF 100%)}
.bg-sand{background:linear-gradient(170deg,#F6E7D4 0%,#EED9BE 50%,#E3C9A6 100%)}
.bg-walnut{background:linear-gradient(165deg,#3A2415 0%,#24160C 55%,#120A05 100%)}
.halo{
  position:absolute;width:1400px;height:1400px;left:50%;top:-20%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(217,119,6,.28) 0%,rgba(217,119,6,.06) 45%,transparent 70%);
}
.pad{position:absolute;inset:0;padding:120px 90px;display:flex;flex-direction:column;justify-content:center}
.pad.center{align-items:center;text-align:center}
.chip{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(139,90,51,.12);color:var(--wood2);
  border:1px solid rgba(139,90,51,.25);
  padding:16px 34px;border-radius:999px;font-size:34px;font-weight:700;
}
.chip.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;border-color:transparent}
.chip.line{background:rgba(217,119,6,.14);color:var(--gold2);border-color:rgba(245,158,11,.4)}
.chip svg{width:38px;height:38px}
h1.brand{font-size:112px;line-height:1.12;font-weight:900;letter-spacing:-1px;margin-top:46px}
h1.brand .hl{color:var(--wood);position:relative}
h1.brand .hl:after{
  content:"";position:absolute;right:0;left:0;bottom:-10px;height:14px;border-radius:8px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
}
.s-head{font-size:88px;font-weight:900;line-height:1.2}
.s-head.big{font-size:100px}
.s-head.light{color:#FFF3E2}
.hl{color:var(--gold)}
.tag{font-size:60px;font-weight:800;color:var(--wood2);margin-top:70px}
.rule{width:180px;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold2));margin:56px 0}
.sub{font-size:42px;font-weight:500;color:var(--muted);line-height:1.7}
.addr{font-size:54px;font-weight:700;color:#F3DFC6;line-height:1.9;margin-top:40px}
.note{font-size:40px;font-weight:700;color:var(--wood2);margin-top:56px;display:flex;align-items:center;gap:16px}
.note svg{width:44px;height:44px;color:var(--gold)}
.cta{font-size:46px;font-weight:800;color:var(--wood2);margin-top:60px;line-height:1.7}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.86)}70%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
.scene.is-active .anim{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.scene.is-active .d1{animation-delay:.15s}
.scene.is-active .d2{animation-delay:.45s}
.scene.is-active .d3{animation-delay:.75s}
.scene.is-active .d4{animation-delay:1.05s}
.scene.is-active .d5{animation-delay:1.35s}
.scene.is-active .pad > *{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.scene.is-active .pad > *:nth-child(1){animation-delay:.1s}
.scene.is-active .pad > *:nth-child(2){animation-delay:.35s}
.scene.is-active .pad > *:nth-child(3){animation-delay:.6s}
.scene.is-active .pad > *:nth-child(4){animation-delay:.85s}
.scene.is-active .pad > *:nth-child(5){animation-delay:1.1s}
.scene.is-active .pad > *:nth-child(6){animation-delay:1.35s}
.parts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:auto}
.parts li{
  background:rgba(255,255,255,.72);border:1px solid rgba(139,90,51,.22);
  border-radius:24px;padding:30px 14px;text-align:center;
  font-size:34px;font-weight:800;color:var(--wood2);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  backdrop-filter:blur(8px);box-shadow:0 18px 40px rgba(107,65,35,.14);
}
.parts svg{width:52px;height:52px;color:var(--gold);stroke-width:1.75}
.prices{display:flex;flex-direction:column;gap:34px;margin-top:70px;width:100%}
.pcard{
  background:rgba(255,255,255,.78);backdrop-filter:blur(12px);
  border:1px solid rgba(139,90,51,.18);border-radius:34px;
  padding:52px 40px;box-shadow:0 26px 60px rgba(107,65,35,.16);
  position:relative;overflow:hidden;
}
.pcard.hot{
  background:linear-gradient(135deg,#2B1B10 0%,#4A2C17 100%);
  border-color:rgba(245,158,11,.45);
}
.pcard.hot:after{
  content:"الأكثر طلباً";position:absolute;top:26px;left:-6px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;
  font-size:28px;font-weight:800;padding:10px 30px 10px 40px;border-radius:16px 0 0 16px;
}
.pnum{display:flex;align-items:baseline;gap:18px;justify-content:center}
.pnum span{font-family:var(--lat);font-size:150px;line-height:1;font-weight:400;color:var(--wood2)}
.pcard.hot .pnum span{color:#FFD9A0}
.pnum em{font-size:46px;font-weight:800;font-style:normal;color:var(--gold)}
.plab{font-size:42px;font-weight:700;color:var(--muted);margin-top:18px}
.pcard.hot .plab{color:#EBD3B4}
.btn{
  display:inline-flex;align-items:center;gap:18px;justify-content:center;
  margin-top:64px;padding:34px 56px;border-radius:999px;
  font-size:42px;font-weight:800;text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn svg{width:46px;height:46px}
.btn.ghost{background:rgba(245,158,11,.14);color:var(--gold2);border:2px solid rgba(245,158,11,.5)}
.btn.wa{background:var(--wa);color:#06301a;box-shadow:0 22px 50px rgba(37,211,102,.35)}
.btn:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.3)}
.phones{display:flex;flex-direction:column;gap:26px;width:100%;margin-top:60px}
.phone{
  display:flex;align-items:center;gap:24px;justify-content:center;
  background:#fff;border:1px solid rgba(139,90,51,.18);border-radius:28px;
  padding:36px;box-shadow:0 20px 44px rgba(107,65,35,.14);
}
.phone svg{width:48px;height:48px;color:var(--green)}
.phone span{font-family:var(--lat);font-size:72px;letter-spacing:2px;color:var(--wood2)}
.mapart{position:relative;width:100%;height:280px;margin-top:70px;opacity:.85}
.road{position:absolute;background:rgba(245,158,11,.22);border-radius:6px}
.r1{left:0;right:0;top:110px;height:16px}
.r2{top:0;bottom:0;right:46%;width:16px}
.pin{position:absolute;right:38%;top:70px;width:60px;height:60px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 0 0 18px rgba(245,158,11,.16)}
.pin span{position:absolute;inset:18px;background:#2B1B10;border-radius:50%}
.art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.art svg{width:100%;height:auto;margin-top:-40px}
.art svg .piece{opacity:0}
.scene.is-active .art svg .piece{animation:pop .85s cubic-bezier(.2,.8,.2,1) both}
.scene.is-active .art svg .p1{animation-delay:.5s}
.scene.is-active .art svg .p2{animation-delay:.95s}
.scene.is-active .art svg .p3{animation-delay:1.4s}
.scene.is-active .art svg .p4{animation-delay:1.85s}
.scene.is-active .art svg .p5{animation-delay:2.3s}
.pad{z-index:2}
.pad.top{justify-content:flex-start;padding-top:150px}
.pad.bottom{justify-content:flex-end;padding-bottom:120px}
.art{z-index:1}
.dust{position:absolute;inset:0;overflow:hidden}
.dust i{position:absolute;width:10px;height:10px;border-radius:50%;
  background:rgba(217,119,6,.5);animation:float 9s ease-in-out infinite}
.dust i:nth-child(1){left:14%;top:24%;animation-delay:0s}
.dust i:nth-child(2){left:78%;top:18%;animation-delay:1.4s}
.dust i:nth-child(3){left:32%;top:70%;animation-delay:2.6s}
.dust i:nth-child(4){left:66%;top:60%;animation-delay:3.4s}
.dust i:nth-child(5){left:48%;top:34%;animation-delay:4.2s}
.dust i:nth-child(6){left:86%;top:78%;animation-delay:5.1s}
@keyframes float{0%,100%{transform:translateY(0) scale(1);opacity:.35}
  50%{transform:translateY(-46px) scale(1.5);opacity:.9}}
.bar{width:min(560px,92vw);display:flex;flex-direction:column;gap:12px;align-items:center}
.progress{position:relative;width:100%;height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.pfill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:4px}
.pmarks{position:absolute;inset:0;display:flex}
.pmarks b{flex:1;border-left:1px solid rgba(0,0,0,.45)}
.ctrls{display:flex;align-items:center;gap:10px}
.ctl{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#F5E6D3;display:grid;place-items:center;
  cursor:pointer;transition:transform .2s ease,background .2s ease;
}
.ctl:hover{transform:translateY(-2px);background:rgba(245,158,11,.22)}
.ctl svg{width:20px;height:20px}
.steps{display:flex;gap:8px;margin-right:8px}
.steps button{
  background:none;border:0;color:#C9B49B;font:inherit;font-size:13px;
  font-weight:700;padding:6px 10px;border-radius:999px;cursor:pointer;opacity:.6;
  transition:opacity .2s ease,color .2s ease;
}
.steps button.on{opacity:1;color:var(--gold2);background:rgba(245,158,11,.14)}
.hint{color:#96866f;font-size:13px;text-align:center;line-height:1.7}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important}}
.lucide{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.15em}
.art svg{filter:drop-shadow(0 22px 38px rgba(107,65,35,.25))}