@font-face{font-family:"Hayyakum Taweel";src:url("hayyakum-taweel-bold.ttf") format("truetype");font-weight:700 900;font-display:swap}
/* Viewfinder HUD: the site reads like a Blackmagic Camera monitor — black glass, orange/gold readouts */
:root{
  --bg:#060608;--panel:#0f0f13;--panel2:#15151b;--line:#24242c;--line2:#34343f;
  --fg:#f4f1ea;--mute:#8e8b97;--dim:#5c5a66;
  --orange:#ff7a1a;--gold:#f5b53d;--rec:#ff3b30;--ok:#3ddc84;
  --grad:linear-gradient(120deg,var(--orange),var(--gold));
  --display:"Hayyakum Taweel","Cairo","Tajawal",system-ui,sans-serif;--body:"Tajawal",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.65;min-height:100vh;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
   radial-gradient(900px 500px at 50% -10%,#ff7a1a1f,transparent 60%),
   radial-gradient(700px 400px at 100% 100%,#f5b53d12,transparent 60%),
   linear-gradient(#ffffff06 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(90deg,#ffffff06 1px,transparent 1px) 0 0/44px 44px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,#00000000 0 3px,#0000001f 3px 4px)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* HUD bar */
.hud{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#060608d9;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hud-in{max-width:1180px;margin:auto;padding-inline:16px;padding-block:9px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.72rem;color:var(--mute);direction:ltr;letter-spacing:.04em}
.hud-in .rec{display:flex;align-items:center;gap:6px;color:var(--fg);font-weight:600}
.hud-in .rec i{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1.2s steps(2) infinite}
.hud-in .tc{color:var(--gold)}
.hud-in .sp{flex:1}
.hud-in b{color:var(--fg);font-weight:600}
.hud-in .hide-s{display:inline}
@media (max-width:620px){.hud-in .hide-s{display:none}}
@keyframes blink{50%{opacity:.25}}

.wrap{position:relative;z-index:1;margin:auto;padding-inline:16px;padding-block:34px 60px}

/* viewfinder frame corners */
.vf{position:relative;padding:28px 22px}
.vf::before,.vf::after,.vf>.c1,.vf>.c2{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--gold);pointer-events:none}
.vf::before{top:0;left:0;border-width:2px 0 0 2px}
.vf::after{top:0;right:0;border-width:2px 2px 0 0}
.vf>.c1{bottom:0;left:0;border-width:0 0 2px 2px}
.vf>.c2{bottom:0;right:0;border-width:0 2px 2px 0}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--orange);direction:ltr;display:inline-flex;gap:8px;align-items:center}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--orange)}
.grad-t{padding-bottom:.12em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
footer.foot{position:relative;z-index:1;text-align:center;font-family:var(--mono);font-size:.72rem;color:var(--dim);padding-block:10px 30px;direction:ltr}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[hidden]{display:none!important}