@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');
:root{
  --gold:#D4AF6A;
  --gold-soft:#C9A15A;
  --silver:#C8CCD4;
  --ivory:#F5EFE2;
  --ink:#0A0A0A;
  --font-head:'Noto Naskh Arabic',serif;
  --font-body:'Noto Sans Arabic',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000}
body{display:flex;justify-content:center;min-height:100vh}
.post{position:relative;width:1080px;height:1080px;overflow:hidden;background:var(--ink);font-family:var(--font-body);color:var(--ivory)}
.bg{position:absolute;inset:0;background-size:cover;background-position:center}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.58) 0%,rgba(5,5,5,.22) 45%,rgba(5,5,5,.9) 100%)}
.veil2{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 34%,rgba(10,10,10,0) 0%,rgba(5,5,5,.75) 100%)}
.frame{position:absolute;inset:26px;border:1px solid rgba(212,175,106,.55);pointer-events:none}
.frame::before{content:'';position:absolute;inset:6px;border:1px solid rgba(212,175,106,.18)}
.badge{position:absolute;top:96px;left:0;right:0;text-align:center;z-index:3}
.badge span{display:inline-block;font-size:29px;letter-spacing:1px;color:var(--gold);border:1px solid rgba(212,175,106,.6);padding:12px 36px;border-radius:999px;background:rgba(10,10,10,.38);backdrop-filter:blur(8px)}
.copy{position:absolute;left:0;right:0;text-align:center;z-index:3}
.copy h1{font-family:var(--font-head);font-weight:700;font-size:112px;line-height:1.3;color:var(--ivory);text-shadow:0 8px 44px rgba(0,0,0,.65)}
.copy h1 .gold{color:var(--gold)}
.copy .sub{margin-top:24px;font-size:38px;font-weight:300;color:#EAE2CF}
.rule{width:150px;height:2px;margin:36px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.chips{display:flex;justify-content:center;gap:18px;z-index:3}
.chip{border:1px solid rgba(200,204,212,.35);background:rgba(10,10,10,.45);backdrop-filter:blur(10px);border-radius:14px;padding:18px 28px;font-size:28px;color:#EDE7D8;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.chip .dot{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(212,175,106,.95)}
.quote{margin:0 auto;max-width:880px;font-size:27px;font-weight:300;color:#CFC7B4;line-height:1.75;text-align:center;z-index:3}
.cta{position:absolute;left:0;right:0;bottom:104px;text-align:center;z-index:3}
.cta a{display:inline-block;background:linear-gradient(135deg,var(--gold),#A97F3D);color:#171207;font-weight:700;font-size:40px;padding:24px 76px;border-radius:999px;text-decoration:none;box-shadow:0 16px 48px rgba(212,175,106,.38);letter-spacing:.5px;transition:transform .25s ease}
.cta a:hover{transform:translateY(-4px)}
.post.v1 .copy{top:308px}
.post.v1 .chips{position:absolute;left:0;right:0;bottom:262px}
.post.v1 .quote{position:absolute;left:0;right:0;bottom:192px}
.post.v2 .badge{top:80px}
.post.v2 .copy{top:200px}
.post.v2 .bg{background-position:center 32%}
.post.v2 .chips{position:absolute;left:0;right:0;bottom:250px}
.post.v2 .quote{position:absolute;left:0;right:0;bottom:182px}