:root{
  --g:#042B25;--g2:#0B4337;--g3:#0F5A4A;--ivory:#FAF7F1;--ivory2:#F2ECE1;
  --rose:#D9668E;--rose2:#B5416A;--roseL:#FCE8EF;--ink:#0A2F28;--muted:#5C6F69;--silver:#CDD3D0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:var(--ivory)}
body{font-family:Tajawal,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
.hidden{display:none!important}

.page{min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% 55%,#fff,transparent 70%),linear-gradient(180deg,#FBF9F4,#F3EEE4)}

/* ===== الهيدر ===== */
.hero{position:relative;background:
  radial-gradient(90% 70% at 50% 30%,rgba(255,255,255,.08),transparent 70%),
  radial-gradient(140% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.3) 100%),var(--g);
  padding:18px 20px 36px;text-align:center;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#8F9993,#EEF1EF 50%,#8F9993)}
.pat{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.8'%3E%3Cpath d='M30 4l7.6 18.4L56 30l-18.4 7.6L30 56l-7.6-18.4L4 30l18.4-7.6z'/%3E%3Crect x='17' y='17' width='26' height='26' transform='rotate(45 30 30)'/%3E%3C/g%3E%3C/svg%3E");background-size:52px 52px}
.logos{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,28px)}
.lg-nahj{width:clamp(78px,21vw,120px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.lg-fit{width:clamp(140px,40vw,220px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.vbar{width:1.5px;align-self:stretch;margin:14px 0;background:linear-gradient(transparent,rgba(205,211,208,.85),transparent)}
.cap{position:relative;margin-top:8px;color:#DDE3E0;font-weight:500;font-size:14px}

.pill{position:relative;z-index:2;align-self:center;margin-top:-26px;display:inline-flex;align-items:center;gap:10px;
  padding:9px 22px 9px 18px;border-radius:99px;background:linear-gradient(180deg,#fff,var(--roseL));
  border:1.5px solid var(--rose);box-shadow:0 6px 16px rgba(181,65,106,.18);white-space:nowrap}
.pill svg{width:20px;height:30px}
.pill span{font-weight:800;font-size:clamp(16px,4.6vw,20px);color:var(--rose2);padding-top:3px}

/* ===== المحتوى ===== */
.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 20px 18px;width:100%;max-width:520px;margin:0 auto}
.screen{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.title{font-weight:800;font-size:clamp(46px,14vw,66px);line-height:1.1;padding-top:6px;
  background:linear-gradient(180deg,var(--g3),#06392F 55%,var(--g));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:4px;font-weight:700;font-size:clamp(17px,4.8vw,20px);color:var(--ink)}

/* المسرح والهدية */
.stage{position:relative;width:200px;height:clamp(140px,22dvh,200px);margin:8px auto 4px;display:flex;align-items:flex-end;justify-content:center}
.rays{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;opacity:0;transform:scale(.4);
  background:repeating-conic-gradient(from 0deg,rgba(217,102,142,.22) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);pointer-events:none}
.gift{position:relative;width:150px;height:170px;animation:float 3.2s ease-in-out infinite;transform-origin:50% 100%;zoom:var(--gz,1)}
.box{position:absolute;bottom:14px;left:8px;right:8px;height:104px;border-radius:8px 8px 12px 12px;
  background:linear-gradient(160deg,#0F5A4A,#063A31 60%,#03241F);box-shadow:inset 0 -10px 18px rgba(0,0,0,.25),0 10px 20px rgba(4,43,37,.25)}
.box::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 40%)}
.rib{position:absolute;top:0;bottom:0;left:50%;width:22px;margin-left:-11px;background:linear-gradient(90deg,#C24C74,#F3A1BD 50%,#C24C74)}
.lid{position:absolute;bottom:112px;left:0;right:0;height:34px;border-radius:7px;z-index:2;
  background:linear-gradient(170deg,#126552,#074236);box-shadow:0 6px 10px rgba(0,0,0,.25);transform-origin:20% 100%}
.lid::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:24px;margin-left:-12px;background:linear-gradient(90deg,#C24C74,#F3A1BD 50%,#C24C74)}
.bow{position:absolute;bottom:30px;width:44px;height:34px;border:9px solid #E07FA2;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;z-index:1}
.bow.l{left:30px;transform:rotate(-28deg)}
.bow.r{right:30px;transform:rotate(28deg)}
.knot{position:absolute;bottom:28px;left:50%;width:20px;height:18px;margin-left:-10px;border-radius:6px;background:#C24C74;z-index:3}
.shadow{position:absolute;bottom:0;left:22px;right:22px;height:14px;border-radius:50%;background:radial-gradient(rgba(4,43,37,.28),transparent 70%)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.gift.shake{animation:shake .5s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg) translateY(-2px)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg) translateY(-3px)}80%{transform:rotate(3deg)}}
.gift.open .lid{animation:lidOff .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes lidOff{to{transform:translate(-60px,-180px) rotate(-55deg);opacity:0}}
.gift.open .box{animation:boxOut .7s .45s ease-in forwards}
@keyframes boxOut{to{transform:scale(.6) translateY(40px);opacity:0}}
.stage.burst .rays{animation:rays 1.6s ease-out forwards}
@keyframes rays{0%{opacity:0;transform:scale(.4) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(70deg)}}

/* الزر */
.cta{position:relative;margin-top:10px;width:100%;max-width:360px;border:0;cursor:pointer;border-radius:18px;padding:19px 22px 17px;
  font-family:inherit;font-weight:800;font-size:clamp(19px,5.4vw,22px);color:#fff;
  background:linear-gradient(180deg,#0F5A4A,var(--g));box-shadow:0 10px 24px rgba(4,43,37,.28),inset 0 1px 0 rgba(255,255,255,.15);overflow:hidden;transition:transform .15s}
.cta::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:sweep 2.8s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-60%}100%{left:130%}}
.cta:active{transform:scale(.97)}
.cta .dots{display:none;gap:7px;justify-content:center}
.cta .dots i{width:9px;height:9px;border-radius:50%;background:#fff;animation:dot 1s infinite}
.cta .dots i:nth-child(2){animation-delay:.15s}.cta .dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.cta.loading .t{display:none}.cta.loading .dots{display:flex}
.cta:disabled{cursor:default}

/* الكوبون */
.kicker{font-weight:800;font-size:clamp(20px,6vw,26px);color:var(--g);margin-bottom:12px}
.card{position:relative;width:100%;max-width:400px;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(4,43,37,.25)}
.card img{width:100%;height:auto;-webkit-touch-callout:default}
.card .shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%)}
.card.reveal{animation:cardIn 1.1s cubic-bezier(.16,1,.3,1) both}
.card.reveal .shine{animation:shine 1.2s .9s ease-in-out}
@keyframes cardIn{0%{opacity:0;transform:perspective(900px) translateY(60px) scale(.55) rotateX(35deg);filter:blur(8px)}60%{filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes shine{to{transform:translateX(120%)}}

.actions{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.actions.reveal{animation:up .7s .8s cubic-bezier(.16,1,.3,1) both}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;cursor:pointer;text-decoration:none;
  border-radius:16px;padding:16px 18px 14px;font-family:inherit;font-weight:800;font-size:17px;line-height:1.3;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn svg{width:22px;height:22px;flex:none;margin-top:-2px}
.btn.primary{background:linear-gradient(180deg,#0F5A4A,var(--g));color:#fff;box-shadow:0 8px 18px rgba(4,43,37,.22)}
.btn.wa{background:linear-gradient(180deg,#2AD46A,#1DA851);color:#fff;box-shadow:0 8px 18px rgba(29,168,81,.25)}
.btn.ghost{background:#fff;color:var(--g);border:1.5px solid rgba(4,43,37,.25);max-width:260px;margin-top:18px}
.hint{font-size:14px;color:var(--muted);line-height:1.6}

/* الرسائل */
.msg-ic{font-size:64px;margin-top:22px}
.msg-t{margin-top:10px;font-weight:800;font-size:24px;color:var(--g)}
.msg-p{margin-top:8px;font-size:17px;line-height:1.7;color:var(--muted);max-width:340px}

/* الفوتر */
.foot{text-align:center;padding:14px 20px calc(12px + env(safe-area-inset-bottom));color:#fff;
  background:linear-gradient(180deg,#DD7398,#C24C74);position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#8F9993,#EEF1EF 50%,#8F9993)}
.foot-l1{font-weight:800;font-size:18px}
.foot-l2{font-weight:500;font-size:15px;opacity:.95;margin-top:2px}
.terms{display:inline-block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.72);text-decoration:none}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.demo-badge{position:fixed;top:10px;left:10px;z-index:60;background:#B5416A;color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px;opacity:.9}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* الصفحة كاملة تبان من أول فتحة */
.stage{--gz:.82}
@media (max-height:720px){.stage{--gz:.66}.title{font-size:clamp(40px,12vw,54px)}.hero{padding-bottom:30px}.lead{font-size:16px}}
@media (max-height:620px){.stage{--gz:.5}.cap{display:none}}