@font-face{
  font-family:"Rakkas";
  src:url("/assets/Rakkas-Regular.ttf") format("truetype");
  font-display:swap;
}
:root{
  --navy:#0B0F18;--panel:#121826;--gold:#C9A24B;--gold2:#e3c072;--red:#8B1E1E;
  --paper:#E6E2D3;--sepia:#8c7c60;--line:rgba(201,162,75,.18);--ink:#cfc7b5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;color:var(--paper);direction:rtl;line-height:1.9;
  font-family:"SF Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  background:
    radial-gradient(1000px 600px at 78% -6%,#17203a 0%,transparent 55%),
    radial-gradient(800px 520px at 10% 8%,#1a1220 0%,transparent 50%),
    linear-gradient(180deg,#0c1120,#070a11 60%,#05070c);
  overflow-x:hidden;
}
canvas.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1}
.display{font-family:"Rakkas","SF Arabic",serif;font-weight:400;letter-spacing:.5px}

/* Crescent moon — cut with a mask so the removed part is truly transparent */
.moon{position:fixed;top:6vh;inset-inline-start:8vw;width:120px;height:120px;z-index:0;pointer-events:none;
  filter:drop-shadow(0 0 24px rgba(220,230,255,.35))}
.moon::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fffdf4,#efe9d2 46%,#c7bd98);
  -webkit-mask:radial-gradient(circle at 68% 36%, transparent 0 55%, #000 56%);
          mask:radial-gradient(circle at 68% 36%, transparent 0 55%, #000 56%)}
@media(max-width:600px){.moon{width:84px;height:84px;top:4vh}}

/* Logo with red glow (matches the app) */
.logo{width:170px;height:170px;margin:0 auto;position:relative;display:grid;place-items:center}
.logo::before{content:"";position:absolute;width:150%;height:150%;border-radius:50%;
  background:radial-gradient(circle,rgba(139,30,30,.55),rgba(139,30,30,.08) 55%,transparent 72%)}
.logo img{position:relative;width:100%;height:100%;object-fit:contain}

.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.28em;font-weight:700}
h1.title{font-size:clamp(46px,13vw,96px);line-height:1;margin:14px 0 6px;
  background:linear-gradient(180deg,#fff,#cdb989);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:#b7b09f;font-size:clamp(16px,4vw,20px);max-width:32ch;margin:0 auto}

a{color:var(--gold);text-decoration:none}
.pill{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:10px 20px;
  font-size:14px;font-weight:600;color:var(--gold)}
.pill:hover{background:rgba(201,162,75,.08)}

/* Legal document pages */
.doc{max-width:760px;margin:0 auto;padding:44px 22px 80px}
.doc .updated{color:var(--sepia);font-size:13px;margin-bottom:30px}
.doc h1{font-size:clamp(30px,7vw,48px);margin:8px 0 4px}
.doc h2{color:var(--gold2);font-size:20px;margin:28px 0 8px}
.doc p,.doc li{color:var(--ink);font-size:16px}
.doc ul{padding-inline-start:22px;margin:8px 0}.doc li{margin:5px 0}
.doc a{border-bottom:1px solid var(--line)}
.card{background:rgba(18,24,38,.7);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:22px;backdrop-filter:blur(4px)}
.foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--sepia);font-size:13px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}