*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#05090f;--navy:#0a1120;--amber:#f5b841;--slate:#93a3b8;
}
body{
  background:radial-gradient(120% 60% at 80% -10%,#182a47 0%,rgba(24,42,71,0) 60%),#070c16;
  color:#eef3f9;font-family:'Noto Sans Arabic',system-ui,sans-serif;
  min-height:100vh;padding:56px 20px 80px;
}
header{max-width:1100px;margin:0 auto 44px;text-align:center}
.brand{
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.5px;color:var(--amber);display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(245,184,65,.35);border-radius:999px;padding:8px 18px;
  background:rgba(245,184,65,.08);
}
h1{
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;
  font-size:clamp(26px,4vw,44px);line-height:1.35;margin-top:20px;
}
p.sub{color:var(--slate);font-size:16px;margin-top:12px}
.grid{
  max-width:1100px;margin:0 auto;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
figure{margin:0}
figure img{
  width:100%;display:block;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
  transition:transform .35s ease,box-shadow .35s ease;
}
figure img:hover{transform:translateY(-4px);box-shadow:0 32px 60px -26px rgba(0,0,0,.95)}
figcaption{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-size:13px;color:var(--slate);
}
figcaption a{color:var(--amber);text-decoration:none;font-size:13px}
footer{max-width:1100px;margin:56px auto 0;text-align:center;color:#5d6d84;font-size:13px}