@property --accent { syntax:"<color>"; inherits:true; initial-value:#eb0028; }
@property --deep   { syntax:"<color>"; inherits:true; initial-value:#2a030b; }
:root {
  --accent:#eb0028; --deep:#2a030b;
  --bg:#0b0b10; --text:#f4f4f7; --muted:#9a9aa8; --line:#ffffff14;
}
* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { background:var(--bg); color:var(--text); }
body {
  font-family:system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  font-size:16px; line-height:1.6;
  min-height:100vh; overflow-x:hidden;
}
/* الخلفية في طبقة ثابتة لوحدها عشان السكرول يفضل ناعم على الموبايل */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 560px at 50% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--deep) 55%, var(--bg)) 0%, var(--bg) 75%);
  transform:translateZ(0);
  /* تغيير اللون التدريجي على الخلفية بس، مش على الصفحة كلها */
  transition:--accent 1.2s ease, --deep 1.2s ease;
}
section { max-width:760px; margin:0 auto; padding:0 20px; }

header { text-align:center; padding:48px 20px 8px; }
header h1 { font-size:clamp(26px,5vw,42px); line-height:1.4; }

/* ---------- لوجو PayWise (مرسوم بالكود عشان يفضل حاد في أي حجم) ---------- */
.pw-logo {
  display:inline-flex; align-items:center; gap:14px; direction:ltr;
  text-decoration:none; color:#fff; margin-bottom:18px;
  -webkit-tap-highlight-color:transparent;
}
.pw-mark { position:relative; width:64px; height:64px; flex:0 0 auto; }
.pw-mark svg { position:relative; z-index:1; width:100%; height:100%; overflow:visible; }
/* دواير بتطلع من ورا الـ P زي إشارة الدفع اللاسلكي، بلون البرنامج اللي مفتوح */
.pw-ring {
  position:absolute; inset:2px; border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--accent) 55%, #46f0c8);
  opacity:0; animation:pwRipple 3.6s ease-out infinite;
}
.pw-ring.r2 { animation-delay:1.8s; }
@keyframes pwRipple { 0% { transform:scale(.7); opacity:.65; } 100% { transform:scale(1.9); opacity:0; } }
/* الموجتين اللي جوه الـ P بيظهروا ورا بعض */
.pw-wave { animation:pwWave 2.4s ease-in-out infinite; }
.pw-wave.w2 { animation-delay:.3s; }
@keyframes pwWave { 0%, 15% { opacity:.15; } 40%, 70% { opacity:1; } 100% { opacity:.15; } }
.pw-dot { animation:pwDot 2.4s ease-in-out infinite; transform-origin:43px 45px; }
@keyframes pwDot { 0%, 100% { transform:scale(1); } 35% { transform:scale(1.25); } }
.pw-p { animation:pwBreath 4s ease-in-out infinite; }
@keyframes pwBreath { 0%, 100% { opacity:.92; } 50% { opacity:1; } }

.pw-word { display:flex; flex-direction:column; align-items:center; line-height:1; }
.pw-word b { font-size:30px; font-weight:900; letter-spacing:3px; }
.pw-word .pay { color:#fff; }
.pw-word .wise {
  background:linear-gradient(90deg, #46f0c8, #3b8cf5, #46f0c8); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pwShine 6s linear infinite;
}
@keyframes pwShine { to { background-position:-200% 0; } }
.pw-word small {
  position:relative; margin-top:9px; padding-top:7px;
  font-size:10.5px; font-weight:600; letter-spacing:6px; color:#9fb3d1; padding-left:6px;
}
.pw-word small::before {
  content:""; position:absolute; top:0; left:50%; width:44px; height:2px; margin-left:-22px;
  border-radius:2px; background:linear-gradient(90deg, #46f0c8, #3b8cf5);
}
@media (max-width:520px) {
  .pw-mark { width:54px; height:54px; }
  .pw-word b { font-size:26px; }
}
header p { color:var(--muted); margin-top:10px; font-size:clamp(16px,2.4vw,18px); }

.track {
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:64px 0 90px; margin:-28px 0 -74px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.track::-webkit-scrollbar { display:none; }
.track::before, .track::after { content:""; flex:0 0 calc((100vw - min(78vw,400px))/2 - 12px); }
.slide {
  position:relative;
  flex:0 0 min(78vw,400px); scroll-snap-align:center; padding:0 12px;
  transform:scale(.88); opacity:.55; -webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.slide.active { transform:scale(1); opacity:1; }

/* ---------- الأختام ---------- */
.stamps {
  position:absolute; z-index:5; top:-14px; right:4px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;
}
.stamp {
  --s:#22c55e; --t:#fff;
  position:relative; overflow:hidden; display:inline-block;
  background:var(--s); color:var(--t);
  font-weight:900; font-size:14px; line-height:1; letter-spacing:1.6px; white-space:nowrap; direction:ltr;
  padding:9px 15px; border-radius:10px;
  outline:2px dashed color-mix(in srgb, var(--t) 80%, transparent); outline-offset:-5px;
  box-shadow:0 10px 22px -8px var(--s), 0 0 0 2px #fff;
  transform:rotate(7deg);
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.stamp.ar { letter-spacing:0; font-size:19px; direction:rtl; padding:9px 18px; text-shadow:0 2px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.35); outline-width:2.5px; }
.stamp:nth-child(even) { transform:rotate(-5deg); }
.stamp::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-130%); animation:stampSheen 3.4s ease-in-out infinite;
}
@keyframes stampSheen { 0%, 55% { transform:translateX(-130%); } 85%, 100% { transform:translateX(130%); } }

/* ---------- الكارت ---------- */
.card {
  container-type:inline-size;
  aspect-ratio:1.586; border-radius:22px; padding:22px; position:relative; overflow:hidden; direction:ltr; color:#fff;
  background:linear-gradient(135deg, var(--c1), var(--c2));
  --glowc:color-mix(in srgb, var(--glow, var(--c1)) 67%, transparent);
  box-shadow:0 26px 60px -18px var(--glowc), 0 2px 0 rgba(255,255,255,.18) inset;
  display:flex; flex-direction:column; justify-content:space-between;
}
.card::before { content:""; position:absolute; inset:-40% -30% auto auto; width:90%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); }
.card::after  { content:""; position:absolute; inset:auto auto -45% -25%; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(0,0,0,.35), transparent 65%); }
.card > * { position:relative; z-index:1; }
.card.redot {
  padding:0;
  background:
    radial-gradient(110% 140% at 12% -10%, #ff6d8f 0%, transparent 44%),
    radial-gradient(90% 110% at 104% 112%, #c90037 0%, transparent 54%),
    linear-gradient(135deg, #f63360 0%, #ee2554 52%, #df1f4b 100%);
  box-shadow:0 26px 60px -18px var(--glowc), 0 2px 0 rgba(255,255,255,.2) inset;
}
.card.redot::before {
  inset:0; width:auto; aspect-ratio:auto; border-radius:0;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.1) 48%, transparent 62%);
}
.card.redot::after {
  inset:auto auto -42% -18%; width:72%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(115,0,24,.24), transparent 68%);
}
.brand-h {
  position:absolute; left:20px; top:16px; height:19px; width:auto;
  filter:brightness(0) invert(1); pointer-events:none;
}
.card-number {
  position:absolute; left:20px; right:20px; top:58%;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:12px; font-size:clamp(12px, 5.2cqw, 20px); letter-spacing:1.6px; white-space:nowrap;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.card-meta {
  position:absolute; left:20px; right:18px; bottom:13px;
  display:flex; align-items:flex-end; gap:22px;
}
.card-meta label { display:block; color:#ffffffd0; font-size:9px; font-size:max(9px, 2.8cqw); letter-spacing:1px; line-height:1.2; }
.card-meta b { display:block; color:#fff; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; font-size:max(12px, 3.6cqw); letter-spacing:1px; margin-top:2px; }
.visa-name { width:58px; width:max(54px, 16cqw); height:auto; margin-left:auto; color:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.card.img {
  padding:0;
  box-shadow:0 26px 60px -18px var(--glowc);
}
.card.img.ring { box-shadow:0 26px 60px -18px var(--glowc), inset 0 0 0 1px #ffffff; }
.card.img::before, .card.img::after { display:none; }
.card.img .face {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; display:block;
}
.kast-info {
  position:absolute; z-index:2; left:20px; bottom:16px;
  display:flex; align-items:baseline; gap:8px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.kast-info b { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:14px; font-size:max(14px, 4cqw); letter-spacing:1.6px; }
.kast-info span { font-size:11px; font-size:max(11px, 3cqw); opacity:.9; }
.card.dpt {
  padding:0;
  background:
    radial-gradient(120% 140% at 12% -10%, #ffffff 0%, transparent 44%),
    linear-gradient(135deg, #fdfdfd 0%, #f2f3f4 55%, #e7e9eb 100%);
  box-shadow:0 26px 60px -18px var(--glowc), inset 0 0 0 1px #fff;
  color:#8c9196;
}
.card.dpt::before {
  inset:0; width:auto; aspect-ratio:auto; border-radius:0;
  background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,.6) 45%, transparent 62%);
}
.card.dpt::after {
  inset:auto auto -46% -20%; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(140,145,150,.08), transparent 68%);
}
.dpt-brand { position:absolute; z-index:2; left:20px; top:15px; display:flex; align-items:flex-start; gap:3px; color:#757b80; }
.dpt-brand b { font-size:22px; font-size:max(20px, 5.5cqw); font-weight:800; letter-spacing:.6px; line-height:1; }
.dpt-brand span { font-size:9px; font-size:max(9px, 2.3cqw); font-weight:600; line-height:1; margin-top:4px; }
.dpt-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.65; pointer-events:none; }
.dpt-number {
  position:absolute; z-index:2; right:20px; top:16px;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:16px; font-size:max(15px, 4.5cqw); letter-spacing:1.4px; color:#5e6469;
}
.dpt-code {
  position:absolute; z-index:1; left:50%; top:27%; width:max-content;
  transform:translateX(-50%);
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:clamp(5px,1.45vw,6.2px); line-height:1.2; letter-spacing:.2px;
  color:#7d8388; white-space:pre; text-align:left; overflow:hidden;
}
.dpt-exp {
  position:absolute; z-index:2; left:20px; bottom:16px;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:14px; font-size:max(13px, 3.8cqw); letter-spacing:1px; color:#5e6469;
}
.dpt-net { position:absolute; z-index:2; right:18px; bottom:13px; text-align:right; color:#9ba1a6; }
.dpt-net .visa-name { display:block; width:60px; width:max(56px, 16cqw); height:auto; margin:0 0 1px auto; color:#9ba1a6; }
.dpt-net span { display:block; font-size:10px; font-size:max(10px, 2.7cqw); letter-spacing:.4px; color:#9ba1a6; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { font-weight:800; font-size:20px; font-size:max(18px, 5cqw); letter-spacing:.5px; }
.tag { font-size:10px; font-size:max(10px, 2.8cqw); letter-spacing:1.6px; opacity:.9; border:1px solid rgba(255,255,255,.5); padding:3px 8px; border-radius:99px; white-space:nowrap; }
.chip {
  width:46px; height:34px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  background-image:
    linear-gradient(90deg, transparent 48%, rgba(0,0,0,.25) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(0,0,0,.25) 49% 51%, transparent 52%),
    linear-gradient(135deg,#f6dd9a,#c9a24a);
}
.num { white-space:nowrap; font-size:14px; font-size:clamp(14px, 5.6cqw, 22px); letter-spacing:2px; font-family:ui-monospace, Menlo, Consolas, monospace; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.bottom { display:flex; justify-content:space-between; align-items:flex-end; font-size:11px; font-size:max(11px, 3.2cqw); opacity:.95; }
.bottom b { display:block; font-size:13px; font-size:max(13px, 3.6cqw); letter-spacing:1px; }
.net { font-style:italic; font-weight:900; font-size:20px; font-size:max(20px, 5.5cqw); letter-spacing:1px; }

/* الضل التقيل للكارت اللي في النص بس، والباقي ضلهم خفيف عشان الحركة تبقى أنعم */
.slide:not(.active) .card { box-shadow:0 12px 24px -16px var(--glowc); }
.slide:not(.active) .card.img.ring,
.slide:not(.active) .card.dpt { box-shadow:0 12px 24px -16px var(--glowc), inset 0 0 0 1px #fff; }

/* ---------- النقط ---------- */
.dots { display:flex; justify-content:center; gap:0; padding:4px 0; }
.dot {
  width:8px; height:8px; box-sizing:content-box; padding:12px 6px; background-clip:content-box;
  border-radius:99px; background-color:#ffffff33; border:0; cursor:pointer; transition:all .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.dot.on { width:26px; background-color:var(--accent); }

.details { text-align:center; padding-top:24px; }
.details h3 { font-size:26px; }
.details .sub { color:var(--muted); margin-top:8px; line-height:1.9; }
.fade { animation:fade .45s ease; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.brand-head {
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:#18070c; padding:7px 14px 7px 11px;
  border-radius:14px; margin:0 auto 14px;
  box-shadow:0 12px 32px -16px #000;
}
.brand-head img { height:22px; width:auto; display:block; }
.brand-head img[src*="jupiter-logo"] { height:28px; }
.brand-head span { font-size:15px; font-weight:800; letter-spacing:.2px; white-space:nowrap; }
.brand-head.dark { background:#121418; color:#fff; border:1px solid #ffffff24; box-shadow:0 12px 32px -16px #000; }
.offer {
  position:relative; overflow:hidden; text-align:center;
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:22px; padding:20px 18px 18px;
  background:
    radial-gradient(80% 110% at 50% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    #ffffff08;
}
/* النور اللي حوالين صندوق العرض: طبقة لوحدها ورا الصندوق بتترسم مرة واحدة
   (بدل ما تترسم مع الصندوق نفسه كل مرة) */
.offer-box { position:relative; }
.offer-box::before {
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  box-shadow:0 24px 70px -32px var(--accent);
  will-change:transform;
}
/* لما الصندوق يخرج من الشاشة، اللمعة والنبض يقفوا */
.offer.idle::after, .offer.idle .offer-badge { animation-play-state:paused; }
.offer::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
  transform:translateX(-130%); animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { transform:translateX(-130%); } 85%, 100% { transform:translateX(130%); } }
.offer-badge {
  position:relative; display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:var(--on-accent, #fff); font-size:12px; font-weight:800; letter-spacing:.6px;
  padding:7px 13px; border-radius:99px; overflow:hidden;
  box-shadow:0 6px 14px -7px var(--accent);
  animation:limited 1.9s ease-in-out infinite;
}
.offer-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--on-accent, #fff); box-shadow:0 0 0 4px color-mix(in srgb, var(--on-accent, #fff) 20%, transparent); }
.offer-badge.hot { background:#f5004a; color:#fff; box-shadow:0 6px 14px -7px #f5004a; }
.offer-badge.hot::before { background:#fff; box-shadow:0 0 0 4px #ffffff33; }
@keyframes limited { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }
.price-line { display:flex; justify-content:center; align-items:center; gap:14px; margin:16px 0 2px; direction:ltr; }
.price-old { font-size:20px; color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px; }
.price-now { font-size:clamp(48px,11vw,64px); line-height:1; font-weight:900; letter-spacing:-2px; direction:ltr; }
.price-now span { color:#fff; }
.price-now .cur { font-size:.5em; vertical-align:top; line-height:1.4; color:var(--accent); }
.price-copy { text-align:right; }
.price-copy strong { display:block; font-size:15px; }
.price-copy small { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.offer-net {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:12px auto 14px; padding:9px 14px; border-radius:12px;
  background:#ffffff0d; border:1px solid var(--line); font-size:14px; color:#dcdce4;
}
.offer-net b { color:#fff; font-size:16px; }
.gift-banner {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:14px auto; padding:13px 18px; border-radius:16px;
  background:linear-gradient(135deg, #ffe08a 0%, #ffc02e 48%, #ff9f1c 100%);
  color:#241400;
  box-shadow:0 18px 45px -20px #ffb703, inset 0 1px 0 #fff9;
  animation:giftPulse 2.4s ease-in-out infinite;
}
.gift-banner::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, #ffffff66 50%, transparent 65%);
  transform:translateX(-130%); animation:giftSheen 3.2s ease-in-out infinite;
}
@keyframes giftPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.015); } }
@keyframes giftSheen { 0%,55% { transform:translateX(-130%); } 85%,100% { transform:translateX(130%); } }
.gift-copy { text-align:right; position:relative; z-index:1; }
.gift-copy strong { display:block; font-size:16px; font-weight:900; }
.gift-copy small { display:block; font-size:12.5px; font-weight:600; opacity:.8; margin-top:2px; }
.gift-amount { position:relative; z-index:1; font-size:38px; font-weight:900; line-height:1; letter-spacing:-2px; direction:ltr; }
.gift-banner.soft {
  background:linear-gradient(135deg, #2a2418, #171a1f);
  border:1px solid #ffc02e66;
  color:#fff;
  box-shadow:0 16px 40px -26px #ffb703aa;
  animation:none;
}
.gift-banner.soft::after { display:none; }
.gift-banner.soft .gift-copy strong { color:#fff; }
.gift-banner.soft .gift-copy small { color:#d8d8df; opacity:.95; }
.gift-banner.soft .gift-amount { color:#ffc02e; font-size:30px; letter-spacing:-1px; }
.codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 14px; text-align:right; }
.code {
  position:relative; border:1px solid var(--line); border-radius:13px;
  background:#ffffff0a; padding:10px 11px 44px;
}
.code.referral {
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 11%, #ffffff08);
  cursor:pointer; transition:transform .2s ease, border-color .2s ease;
}
.code.referral:hover { transform:translateY(-1px); border-color:var(--accent); }
.code.referral:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.code.wide { grid-column:1/-1; }
.code span { display:block; color:var(--muted); font-size:12px; line-height:1.5; }
.code b { display:block; margin:5px 0 4px; color:#fff; font-family:ui-monospace, Consolas, monospace; font-size:19px; letter-spacing:1.2px; text-align:center; direction:ltr; }
.code small { display:block; color:#c9c9d2; font-size:12px; line-height:1.6; }
.copy-code {
  position:absolute; left:8px; bottom:8px; border:1px solid #ffffff2b; background:#ffffff12; color:#fff;
  border-radius:9px; padding:7px 14px; font:inherit; font-size:13px; cursor:pointer;
}
.copy-code.done { background:var(--accent); border-color:var(--accent); color:var(--on-accent, #fff); }
.offer .cta { margin-top:2px; }
.cta-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:3px; }
.cta-row .cta { flex:1 1 160px; }
.fine { display:block; color:var(--muted); font-size:12.5px; line-height:1.8; margin:10px auto 0; max-width:520px; }
.campaign {
  margin-top:18px; text-align:right; padding:14px;
  border:1px solid #f5004a55; border-radius:16px;
  background:linear-gradient(180deg, #f5004a14, #ffffff06);
}
.campaign-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.campaign-top h4 { font-size:16px; color:#fff; }
.campaign .end { flex:0 0 auto; background:#f5004a; color:#fff; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:99px; white-space:nowrap; }
.campaign p { color:#d5d5dd; font-size:13.5px; line-height:1.9; }
.campaign a { color:#fff; font-weight:800; }
.campaign ul { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:3px; }
.campaign li { color:#c7c7d0; font-size:13px; padding-right:13px; position:relative; }
.campaign li::before { content:"•"; position:absolute; right:0; color:#f5004a; }
.wallet-note {
  margin-top:10px; padding:11px 13px; border:1px solid var(--line); border-radius:12px;
  background:#ffffff08; color:#c7c7d0; font-size:13px; line-height:1.9; text-align:right;
}
.wallet-note b { color:#fff; }

.perks { list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; text-align:right; }
.perks li { background:#ffffff0a; border:1px solid var(--line); border-radius:12px; padding:11px 12px; display:flex; gap:8px; align-items:center; font-size:14px; line-height:1.5; }
.perks li::before { content:"✓"; color:var(--accent); font-weight:900; flex:0 0 auto; }

.infos { display:grid; gap:8px; margin-top:12px; text-align:right; }
.info { background:#ffffff0a; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius:14px; padding:14px 16px 12px; }
.info h4 { font-size:16px; font-weight:800; margin-bottom:8px; }
.info ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.info li { color:#d5d5dd; font-size:14px; line-height:1.8; padding-right:16px; position:relative; }
.info li::before { content:"✓"; position:absolute; right:0; color:var(--accent); font-weight:900; }
.info li b { color:#fff; }
/* اللينكات اللي جوه الكلام (زي تليجرام): أبيض وواضح بخط تحته بلون البرنامج */
.info a, .wallet-note a, .strip a, .campaign a {
  color:#fff; font-weight:800; text-decoration:none;
  border-bottom:2px solid color-mix(in srgb, var(--accent) 70%, #fff);
  padding-bottom:1px; direction:ltr; unicode-bidi:isolate;
}
.info a:hover, .wallet-note a:hover, .strip a:hover, .campaign a:hover { border-bottom-color:#fff; }
/* لينكات تليجرام: زرار صغير أزرق فاتح فيه صورة طيارة ورق */
.info a[href*="t.me/"], .wallet-note a[href*="t.me/"], .strip a[href*="t.me/"], .campaign a[href*="t.me/"] {
  display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  background:linear-gradient(135deg, #37aee2, #1e96c8); color:#fff;
  border:0; border-radius:99px; padding:3px 12px 3px 10px; margin:2px 2px;
  font-size:13.5px; font-weight:700; line-height:1.6;
  box-shadow:0 6px 16px -8px #229ed9; transition:transform .2s ease, box-shadow .2s ease;
}
.info a[href*="t.me/"]::before, .wallet-note a[href*="t.me/"]::before, .strip a[href*="t.me/"]::before, .campaign a[href*="t.me/"]::before {
  content:""; width:14px; height:14px; flex:0 0 auto; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11.5 21 4l-3 16-6-4.5-3 3v-5l9-8-11 6.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11.5 21 4l-3 16-6-4.5-3 3v-5l9-8-11 6.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.info a[href*="t.me/"]:hover, .wallet-note a[href*="t.me/"]:hover, .strip a[href*="t.me/"]:hover, .campaign a[href*="t.me/"]:hover {
  transform:translateY(-1px); box-shadow:0 8px 20px -8px #229ed9;
}

.rewards { margin-top:20px; }
.rewards-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.rewards-head h4 { font-size:16px; }
.rewards-head span { color:var(--muted); font-size:12.5px; }
.reward-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; }
.reward { background:linear-gradient(180deg,#ffffff0f,#ffffff07); border:1px solid var(--line); border-radius:14px; padding:12px 6px; }
.reward b { display:block; font-size:clamp(18px,4vw,24px); color:#fff; letter-spacing:-.5px; direction:ltr; }
.reward span { display:block; color:var(--muted); font-size:12.5px; margin-top:3px; }

.strips { display:grid; gap:8px; margin-top:18px; }
.strip { display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:right; background:#ffffff0a; border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.strip p { font-size:14px; line-height:1.8; color:#d9d9e1; }
.strip p b { color:#fff; }
.strip .pill { flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding:5px 10px; border-radius:99px; white-space:nowrap; }
.hashtag { display:inline-block; margin:18px 0 4px; color:var(--accent); font-family:ui-monospace, Consolas, monospace; font-size:14px; letter-spacing:.4px; text-decoration:none; }

.cta {
  display:inline-block; text-decoration:none; color:var(--on-accent, #fff); font-weight:700; font-size:17px;
  background:var(--accent); padding:14px 34px; border-radius:99px;
  box-shadow:0 12px 30px -10px var(--accent); transition:transform .2s ease;
}
.cta:hover { transform:translateY(-2px); }
.cta[aria-disabled="true"] { opacity:.5; pointer-events:none; }
.cta.small { font-size:14px; padding:11px 24px; }
.cta.cta-bonus { display:inline-flex; flex-direction:column; align-items:center; gap:2px; line-height:1.35; padding:12px 30px; }
.cta.cta-bonus small { font-size:12.5px; font-weight:600; opacity:.95; }

.feats { list-style:none; padding:0; margin:22px 0; display:grid; gap:10px; text-align:right; }
.feats li { background:#ffffff0d; border:1px solid var(--line); border-radius:14px; padding:13px 16px; display:flex; gap:12px; align-items:center; }
.feats li::before { content:"✓"; color:var(--accent); font-weight:900; }

.campaign a { direction:ltr; unicode-bidi:isolate; }

footer { text-align:center; color:var(--muted); font-size:13px; padding:48px 20px 36px; line-height:1.9; }
footer b { color:var(--accent); font-family:ui-monospace, Consolas, monospace; }

@media (max-width:520px) {
  .price-line { gap:10px; }
  .price-copy strong { font-size:14px; }
  .codes { grid-template-columns:1fr; }
  .perks li { font-size:13.5px; padding:10px; }
  .strip { align-items:flex-start; flex-direction:column; gap:6px; }
  .strip .pill { align-self:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}