:root{
  --bg:#14130E; --bg-2:#1B1913; --panel:#191710; --line:#312D22; --line-2:#48412F;
  --cream:#F1EBDD; --cream-2:#E4DCC8; --ink:#1B1915;
  --text:#EFEADD; --text-2:#C4BDAB; --muted:#8A836F; --faint:#524C3D;
  --gold:#D8AE55; --gold-2:#EBCF8E; --gold-3:#B0812A; --gold-dim:#5E4B22;
  --sadu-r:#8E2F25; --sadu-k:#0B0A08;
  --red:#E0806F; --amber:#E2955F; --green:#6FBF97; --grey:#9AA5B0;
  --sans:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,Menlo,monospace;
  --w:1080px; --gut:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box;letter-spacing:0}
html{scroll-behavior:smooth}
/* 2026-09-17 (owner): direction is set ONCE, on <html dir> — the markup says rtl and the language switcher writes rtl/ltr
   there. body inherits it; nothing downstream counteracts it. The literal that used to sit here beat the inherited value
   and rendered EN as English text in an RTL layout. */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.78;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,canvas{max-width:100%;display:block}
h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.3;margin:0}
p{margin:0}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
#bgimg{position:fixed;inset:0;z-index:0;pointer-events:none;background:url("brand/sayyad-bg-skyline.jpg") center/cover no-repeat;opacity:.5}
/* 2026-09-16 (owner): on a narrow viewport `cover` scaled the 1920-px photo until one building face filled the frame.
   The picture is corrected, not dimmed: a second CROP of the same file for ≤760px — the middle of the skyline at full
   height (640×1080, cut from the original, same darkening from ::after) — with the horizon held at 70%. Desktop keeps
   the same file and position; the CRT layer stays at every width. A stopgap until the owner's phone design. */
@media (max-width:760px){#bgimg{background-image:url("brand/sayyad-bg-skyline-narrow.jpg");background-position:center 70%}}
#bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,14,.25) 0%,rgba(20,19,14,.7) 45%,rgba(20,19,14,.92) 100%)}
.edge{position:fixed;top:0;bottom:0;width:1px;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(216,174,85,.22) 30%,rgba(216,174,85,.22) 70%,transparent)}
.edge.l{left:22px}.edge.r{right:22px}
.edge i{position:absolute;left:-1px;width:3px;height:120px;background:linear-gradient(180deg,transparent,var(--gold-2),transparent);box-shadow:0 0 12px rgba(216,174,85,.6);animation:edgerun 9s linear infinite;opacity:.8}
.edge.r i{animation-delay:-4.5s}
@keyframes edgerun{0%{top:-140px}100%{top:100%}}
@media (max-width:900px){.edge{display:none}}
#crt{position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.35}

/* ---- ornament dividers ---- */
.orn{display:flex;align-items:center;gap:14px;max-width:var(--w);margin:0 auto;padding-inline:var(--gut);color:var(--gold)}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim) 20%,var(--gold-dim) 80%,transparent)}
.orn span{font-size:10px;letter-spacing:.4em;padding-inline-start:.4em}
.hair{height:6px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold-dim);background:linear-gradient(90deg,transparent,rgba(216,174,85,.25),transparent)}
.flagline{height:3px;background:linear-gradient(90deg,#00732F 0 25%,#fff 25% 50%,#0B0A08 50% 75%,#FF0000 75%)}

.panel{border:1px solid var(--line);background:var(--panel);position:relative}
.panel::before{content:attr(data-t);position:absolute;top:-9px;inset-inline-start:14px;background:var(--bg);padding:0 8px;font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.12em;direction:ltr}
.panel.arlbl::before{font-family:var(--sans);letter-spacing:0;font-size:12px;font-weight:600}
.tag.ar{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12.5px}
.tag.ar::before{content:"//";font-family:var(--mono);margin-inline-end:8px;color:var(--gold-dim)}
.tag{font-family:var(--mono);font-size:11px;color:var(--gold);direction:ltr;unicode-bidi:isolate;letter-spacing:.14em;text-transform:uppercase;display:inline-block}
.h2{font-size:clamp(24px,3.4vw,38px);margin-top:10px}
.h2 .tw::after{content:"▌";color:var(--gold);animation:blink 1s steps(2) infinite;margin-inline-start:2px}
.lede{color:var(--text-2);max-width:40em;margin-top:12px;font-size:17px}
@keyframes blink{50%{opacity:0}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:600;padding:12px 22px;border:1px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn:hover{background:var(--gold);color:var(--bg)}
.btn.fill{background:var(--gold);color:var(--bg)}
.btn.fill:hover{background:var(--gold-2);transform:translateY(-1px)}
.btn.dim{border-color:var(--line-2);color:var(--text-2)}
.btn.dim:hover{background:var(--line);color:var(--text)}
.btn .m{font-family:var(--mono);font-size:12px;direction:ltr}
:focus-visible{outline:1px dashed var(--gold);outline-offset:3px}
section{padding-block:clamp(56px,8vw,96px);position:relative}
.small{font-size:12.5px;color:var(--muted)}

/* nav — mirrors sayyad.ae header */
.nav{position:sticky;top:0;z-index:20;height:92px;display:flex;align-items:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(20,19,14,.82);border-bottom:1px solid var(--line)}
.nav-inner{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:44px;width:auto}
.links{display:flex;gap:26px;font-size:14px;white-space:nowrap}
.links a{position:relative;display:inline-flex;align-items:center;gap:6px;color:#DCE1E7;padding-block:10px;transition:color .25s}
.links a::after{content:"";position:absolute;inset-inline-start:50%;bottom:2px;width:0;height:2px;background:var(--gold-2);transition:width .25s,inset-inline-start .25s}
.links a:hover,.links a.on{color:var(--gold-2)}
.links a.on::after,.links a:hover::after{width:100%;inset-inline-start:0}
.acts{display:flex;align-items:center;gap:16px;margin-inline-start:auto}
.lang{display:flex;gap:8px;align-items:center;color:#E8EDF2;font-size:13px;background:none;border:0;cursor:pointer;font-family:var(--mono);direction:ltr}
.lang b,.lang span{opacity:.5;transition:opacity .2s,color .2s;font-weight:600}
.lang b.on,.lang span.on{opacity:1;color:var(--gold-2)}
.lang i{width:1px;height:14px;background:var(--gold-dim)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 22px;font-size:13px;font-weight:600;color:var(--text);background:rgba(3,8,13,.55);border:1px solid var(--gold-dim);border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.04);white-space:nowrap;transition:border-color .2s,color .2s}
.gbtn:hover{border-color:var(--gold);color:var(--gold-2)}
@media (max-width:1180px){.links{display:none}}
@media (max-width:560px){.acts .gbtn:first-of-type{display:none}}
/* hero */
.hero{padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(36px,5vw,56px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 28% 40%,rgba(216,174,85,.10),transparent 60%);pointer-events:none}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:1240px;gap:clamp(24px,4vw,64px);align-items:center;position:relative}
.hero h1{font-size:clamp(32px,4.8vw,56px);line-height:1.25}
.hero h1 .g{color:var(--gold)}
.hero .lede{font-size:18px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.trustline{margin-top:18px;font-size:13.5px;color:var(--muted)}
.trustline b{color:var(--gold);font-weight:500;margin-inline:6px}
.frame{position:relative;border:1px solid var(--gold-dim);background:var(--panel);padding:0;width:min(100%,210px);margin-inline-start:auto;margin-inline-end:0}
.frame .asc{aspect-ratio:1/1;position:relative;overflow:hidden}
.frame .asc canvas{width:100%;height:100%}
.frame .corner{position:absolute;width:18px;height:18px;border:2px solid var(--gold)}
.frame .c1{top:-2px;left:-2px;border-right:0;border-bottom:0}.frame .c2{top:-2px;right:-2px;border-left:0;border-bottom:0}
.frame .c3{bottom:-2px;left:-2px;border-right:0;border-top:0}.frame .c4{bottom:-2px;right:-2px;border-left:0;border-top:0}
.frame .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--line);font-size:11px;color:var(--text-2)}
.frame .cap .m{font-family:var(--mono);font-size:11px;color:var(--gold);direction:ltr}
@media (max-width:820px){.hero .grid{grid-template-columns:1fr}}


/* ---- the flying falcon ---- */
#sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.falcon{position:absolute;left:0;top:0;width:230px;will-change:transform;filter:drop-shadow(0 0 14px rgba(216,174,85,.55))}
.falcon .wings{transform-box:view-box;transform-origin:165px 100px;animation:flap .9s ease-in-out infinite}
.falcon.glide .wings{animation-duration:3s;animation-name:glide}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes glide{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
.falcon svg{width:100%;height:auto;overflow:visible}
.trail{position:absolute;font-family:var(--mono);font-size:11px;color:var(--gold);opacity:.8;animation:tfade 1.3s linear forwards;pointer-events:none}
@keyframes tfade{to{opacity:0;transform:translateY(14px)}}
.hero .wrap{position:relative;z-index:2}






@keyframes cyglitch{0%{clip-path:inset(20% 0 60% 0);transform:translateX(-6px)}50%{clip-path:inset(60% 0 10% 0);transform:translateX(6px)}100%{clip-path:none;transform:none}}

/* ---- scan centre ---- */
.center{padding-top:clamp(28px,4vw,48px)}
/* 2026-09-20 (owner): the side panel's grid and row rules lived here for one publish and are gone — retired, not parked. Their
   names are deliberately not spelled: this comment is served, and a byte check of the live CSS must reach zero. */
.sc{border:2px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--ang,0deg),var(--gold-dim) 0%,var(--gold-2) 12%,var(--gold-3) 30%,var(--gold-dim) 50%,var(--gold-2) 62%,var(--gold-3) 80%,var(--gold-dim) 100%) border-box;box-shadow:0 0 0 1px rgba(216,174,85,.08),0 0 60px -20px rgba(216,174,85,.45),inset 0 0 80px -60px rgba(216,174,85,.35);position:relative;animation:scring 9s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes scring{to{--ang:360deg}}
.sc .tick{position:absolute;width:18px;height:18px;border:2px solid var(--gold-2);pointer-events:none;z-index:2;filter:drop-shadow(0 0 6px rgba(216,174,85,.8))}
.sc .t1{top:-6px;right:-6px;border-left:0;border-bottom:0}.sc .t2{top:-6px;left:-6px;border-right:0;border-bottom:0}.sc .t3{bottom:-6px;right:-6px;border-left:0;border-top:0}.sc .t4{bottom:-6px;left:-6px;border-right:0;border-top:0}
@media (prefers-reduced-motion:reduce){.sc{animation:none}}
.sc .top{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.sc .top .t{font-weight:700;font-size:18px;display:flex;align-items:center;gap:10px}
.sc .top .t img{width:24px}
.status{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--text-2);align-items:center}
.status .ch{border:1px solid var(--line-2);padding:5px 12px;background:var(--bg);display:inline-flex;align-items:center;gap:8px}
.status .ch b{color:var(--gold);font-weight:500}
.status .ch.on{border-color:rgba(111,191,151,.4)}
.status span{display:inline-flex;align-items:center;gap:7px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s steps(2) infinite}
.status .m{font-family:var(--mono);font-size:11px;color:var(--gold);direction:ltr}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.tabs button{font-family:var(--sans);font-weight:600;font-size:15px;padding:16px 12px;background:transparent;border:0;border-inline-end:1px solid var(--line);color:var(--text-2);cursor:pointer;display:grid;justify-items:center;gap:6px;position:relative;transition:background .15s}
.tabs button:last-child{border-inline-end:0}
.tabs button .ic{font-family:var(--mono);font-size:22px;color:var(--faint);direction:ltr;line-height:1}
.tabs button.on{color:var(--gold);background:linear-gradient(180deg,rgba(216,174,85,.10),transparent)}
.tabs button.on .ic{color:var(--gold);text-shadow:0 0 14px rgba(216,174,85,.6)}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.tabs button:hover{background:var(--bg-2)}
@media (max-width:640px){.tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.tabs button{padding:14px 4px;font-size:13px;border-bottom:1px solid var(--line)}}
.pane{display:none;padding:22px}
.pane.on{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px}
@media (max-width:820px){.pane.on{grid-template-columns:1fr}}
.in{display:grid;gap:12px;align-content:start}
.in label{font-size:14.5px;color:var(--text-2)}
.field{position:relative;padding:10px}
.field::before,.field::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--gold)}
.field::before{top:0;right:0;border-left:0;border-bottom:0}.field::after{bottom:0;left:0;border-right:0;border-top:0}
.field .b1,.field .b2{position:absolute;width:14px;height:14px;border:2px solid var(--gold)}
.field .b1{top:0;left:0;border-right:0;border-bottom:0}.field .b2{bottom:0;right:0;border-left:0;border-top:0}
textarea,.url{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--text);font-family:var(--sans);font-size:15px;padding:14px;line-height:1.7;resize:vertical;min-height:150px;display:block}
.url{min-height:0;font-family:var(--mono);direction:ltr;text-align:left}
textarea:focus,.url:focus{outline:0;border-color:var(--gold)}
.msgview{background:var(--bg);border:1px solid var(--gold-dim);padding:34px 14px 14px;line-height:1.9;font-size:15px;min-height:150px;display:none;position:relative}
.msgview mark{background:transparent;padding:0 3px;border-bottom:2px solid var(--c,var(--red));color:var(--text);border-radius:2px;transition:background .2s}
.msgview mark.on,.msgview mark:hover{background:rgba(224,128,111,.18)}
.msgview .back{position:absolute;inset-inline-end:10px;top:8px;font-family:var(--mono);font-size:11px;color:var(--gold);cursor:pointer;background:transparent;border:1px solid var(--gold-dim);padding:2px 8px}
.pipe{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--faint);direction:ltr;margin-top:-2px}
.pipe span{display:inline-flex;align-items:center;gap:6px}
.pipe span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .2s,box-shadow .2s}
.pipe span.on{color:var(--gold)}
.pipe span.on::before{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.pipe span.done{color:var(--text-2)}
.pipe span.done::before{background:var(--green)}
.rlist div{cursor:pointer}
.rlist div:hover{border-color:var(--gold-dim)}
.field .beam{position:absolute;left:10px;right:10px;top:10px;height:3px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);box-shadow:0 0 18px 3px rgba(216,174,85,.5);opacity:0;pointer-events:none}
.field.scan .beam{animation:sweep 1.1s ease-in-out 1}
@keyframes sweep{0%{top:10px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 12px);opacity:0}}
.ex{display:flex;flex-wrap:wrap;gap:8px}
.ex button{font-family:var(--sans);font-size:13px;background:transparent;border:1px solid var(--line-2);color:var(--text-2);padding:6px 12px;cursor:pointer}
.ex button:hover{border-color:var(--gold);color:var(--gold)}
.row2{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.drop{border:1px dashed var(--line-2);padding:30px 20px;text-align:center;color:var(--text-2);cursor:pointer;display:grid;gap:6px;justify-items:center;background:var(--bg)}
.drop:hover{border-color:var(--gold)}
.drop .k{font-family:var(--mono);font-size:26px;color:var(--gold)}
.drop img{max-height:180px;border:1px solid var(--line)}
.out{border:1px solid var(--line);background:var(--bg);padding:18px;display:grid;gap:12px;align-content:start;min-height:280px;position:relative}
.out .hd{display:flex;justify-content:space-between;font-family:var(--sans);font-size:12px;color:var(--muted)}
.out .hd b{color:var(--gold);font-weight:500}
.out .empty.ar{direction:rtl;font-family:var(--sans);font-size:13px;text-align:right;color:var(--muted)}
.out .empty{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;color:var(--faint);font-size:12px;white-space:pre;line-height:1.6;text-align:left;overflow-x:auto}
.vrow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.dial{width:74px;height:74px;position:relative;direction:ltr}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:6}
.dial .bg{stroke:var(--line)}
.dial .fg{stroke:var(--c);stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.dial b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:20px;color:var(--c)}
.vlabel{font-weight:700;font-size:20px;color:var(--c)}
.vsub{font-size:13px;color:var(--text-2)}
.rlist{display:grid;gap:6px}
.rlist div{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:8px 10px;border:1px solid var(--line);font-size:14px;animation:rin .5s ease both}
.rlist div:nth-child(2){animation-delay:.15s}.rlist div:nth-child(3){animation-delay:.3s}.rlist div:nth-child(4){animation-delay:.45s}
@keyframes rin{from{transform:translateX(-10px);opacity:.001}to{transform:none;opacity:1}}
.rlist .n{font-family:var(--mono);font-size:11px;color:var(--faint);direction:ltr;padding-top:3px}
.rlist .ev{display:block;font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:11.5px;color:var(--c);text-align:left;margin-top:2px;overflow-wrap:anywhere}
.trace{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:11px;color:var(--muted);white-space:pre;text-align:left;border-top:1px dashed var(--line);padding-top:10px;line-height:1.7}
.trace b{color:var(--gold);font-weight:500}
.share{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qrphone{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border:1px solid var(--line);padding:16px;background:var(--bg)}
.qrphone .ph{width:96px;aspect-ratio:9/18;border-radius:14px;background:#0B0A08;padding:5px}
.qrphone .ph div{background:var(--bg-2);border-radius:10px;height:100%;display:grid;place-items:center}
.qrphone .ph i{width:56%;aspect-ratio:1;background:repeating-conic-gradient(var(--gold) 0 25%,transparent 0 50%) 0 0/20% 20%;border:2px solid var(--gold);display:block}
.qrphone b{display:block;font-weight:700}
.qrphone span{font-size:13.5px;color:var(--text-2)}

.qstrip{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:10px 22px;border-bottom:1px solid var(--line);background:var(--bg);font-size:13px;color:var(--text-2)}
.qstrip .ql{font-weight:700;color:var(--text)}
.qstrip .ql::after{content:':'}
.qstrip b{font-family:var(--mono);color:var(--gold);font-weight:600;font-size:14px;margin-inline-end:4px}
.disc{font-size:12.5px;color:var(--muted);margin-top:14px;padding-inline-start:12px;border-inline-start:2px solid var(--gold-dim);max-width:70em}
/* ---- features film strip ---- */
/* 2026-09-17 (owner): five cards, no remainder. Six tracks; a card spans two; when the count leaves TWO on the last row
   (3n+2 cards) those two span three each, so 5 renders as 3 + 2 with no hole and 6 degrades to a plain 3×2. A count of
   3n+1 would leave one card alone on its row — not the case today; handle it here if a card ever comes or goes. */
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:24px}
.fgrid > .fc{grid-column:span 2}
.fgrid > .fc:nth-last-child(2):nth-child(3n+1),.fgrid > .fc:last-child:nth-child(3n+2){grid-column:span 3}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgrid > .fc,.fgrid > .fc:nth-last-child(2):nth-child(3n+1),.fgrid > .fc:last-child:nth-child(3n+2){grid-column:auto}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fc{border:1px solid var(--line);background:var(--panel);padding:22px;min-height:230px;display:grid;align-content:space-between;gap:16px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.fc:hover{border-color:var(--gold);transform:translateY(-3px)}
.fc .wm{position:absolute;inset-inline-start:-6px;bottom:-22px;font-family:var(--mono);font-size:120px;line-height:1;color:rgba(216,174,85,.06);direction:ltr;pointer-events:none}
.fc .ic{font-family:var(--mono);font-size:26px;color:var(--gold);direction:ltr}
.fc h3{font-size:19px;margin-top:8px}
.fc .en,.tabs .en{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;direction:ltr;margin-top:2px;font-weight:400}
.tabs button .en{font-size:10px}
.fc p{font-size:14.5px;color:var(--text-2);margin-top:6px}
.fc .app{font-family:var(--sans);font-size:11px;color:var(--gold);border:1px solid var(--gold-dim);padding:2px 7px;direction:ltr;display:inline-block;margin-inline-start:8px;vertical-align:middle}
.hint{font-family:var(--mono);font-size:11px;color:var(--muted);direction:ltr;display:flex;gap:8px;align-items:center;margin-top:6px}

/* ---- how: sticky screen ---- */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start;margin-top:24px}
.screen{position:sticky;top:90px;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/3;overflow:hidden}
.screen .tm{position:absolute;inset:0;padding:18px;font-family:var(--mono);letter-spacing:0;unicode-bidi:plaintext;font-size:clamp(10px,1.2vw,13px);line-height:1.6;white-space:pre;color:var(--text-2);opacity:0;transition:opacity .5s;text-align:start}
.screen .tm.on{opacity:1}
/* 2026-09-18 (owner): the sample's frame is a real border, not box-drawing characters — direction cannot break it
   (in EN the Arabic lines had separated from their drawn borders, and AR did the same to English lines). */
.screen .tm .bx{display:inline-block;border:1px solid var(--text-2);padding:2px 10px;margin-inline-start:2ch;text-align:start;vertical-align:top}
.screen .tm b{color:var(--gold);font-weight:500}.screen .tm i{font-style:normal;color:var(--red)}.screen .tm u{text-decoration:none;color:var(--green)}
.steps{display:grid;gap:clamp(40px,8vw,120px);padding-block:20px}
.st{opacity:.45;transition:opacity .4s}
.st.on{opacity:1}
.st .n{font-family:var(--mono);color:var(--gold);font-size:13px;direction:ltr;display:inline-block}
.st h3{font-size:clamp(22px,2.6vw,30px);margin-top:6px}
.st p{font-size:16px;color:var(--text-2);margin-top:8px;max-width:30em}
@media (max-width:760px){.how{grid-template-columns:1fr}.screen{position:relative;top:0}.steps{gap:36px}}

/* ---- demo ---- */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px}
.dm{padding:18px;min-height:300px;display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.dm .hd{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:12px;color:var(--muted)}
.dm .hd b{color:var(--gold);font-weight:500}
.shot{position:relative;background:#E9E4D6;border-radius:6px;padding:14px;color:#1B1915;font-size:14px;line-height:1.7;overflow:hidden;min-height:170px}
.shot .from{display:flex;justify-content:space-between;font-size:12px;color:#7D7769;margin-bottom:6px}
.shot .bub{background:#fff;border-radius:12px 12px 12px 3px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.shot .lnk{color:#1a5fb4;text-decoration:underline;font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
.shot canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.shot.tx canvas{opacity:1}
.ext{background:var(--bg-2);border:1px dashed var(--line-2);padding:14px;font-size:14.5px;color:var(--text-2);min-height:170px;line-height:1.9}
.ext mark{background:transparent;color:var(--red);border-bottom:1px solid var(--red);padding:0 2px}
.ext .c{color:var(--faint);font-size:11px}
.vd{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;border:1px solid var(--line-2);padding:10px 12px}
.vd .sc2{font-family:var(--mono);font-size:20px;color:var(--red);direction:ltr;min-width:44px;text-align:center}
.vd b{font-weight:700;color:var(--red);display:block}
.vd span{font-size:12.5px;color:var(--text-2)}
.rl{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:12px;color:var(--text-2);white-space:pre;line-height:1.7;text-align:left;overflow-x:auto}
.rl i{font-style:normal;color:var(--red)}.rl b{font-weight:500;color:var(--gold)}
.dm .st2{font-family:var(--sans);font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
@media (max-width:760px){.demo{grid-template-columns:1fr}}
.states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
@media (max-width:900px){.states{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stt{padding:16px 18px;border:1px solid var(--line);background:var(--panel);border-top:3px solid var(--c)}
.stt .m{font-family:var(--mono);font-size:11px;color:var(--c);direction:ltr;display:block;margin-bottom:6px}
.stt b{display:block;font-weight:700;font-size:17px}
.stt span{font-size:14px;color:var(--text-2)}
@media (max-width:700px){.states{grid-template-columns:1fr}}

/* ---- app ---- */
.appwrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;margin-top:24px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(216,174,85,.08),transparent 50%),var(--panel);padding:clamp(18px,3vw,32px)}
.appgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
/* 2026-09-20 (owner): six cards — three rows of two, no hole, so nothing spans. The span rule the fifth card carried for one
   publish left with the sixth card's arrival; a span rule with no card to span is an exception that outlives its reason. */
.af{display:grid;gap:4px;padding:16px;border:1px solid var(--line);background:var(--bg);align-content:start}
.af .ic{font-family:var(--mono);font-size:22px;color:var(--gold);direction:ltr}
.af b{font-weight:700;font-size:16px}.af span{font-size:14px;color:var(--text-2)}
.appphone{width:190px;aspect-ratio:9/18.5;border-radius:28px;background:#0B0A08;padding:8px;box-shadow:0 40px 70px -40px rgba(0,0,0,.9),0 0 0 1px rgba(216,174,85,.15)}
/* 2026-09-17 (E, from the owner's screenshot): the design file's own defect — grid + align-content:start sized the rows
   to content, so margin-top:auto on .tabs2 aligned it inside ITS OWN row and never reached the bottom; the lower ~40% of
   the screen was dead. A flex column makes the auto margin mean what it says: the tab strip sits on the bottom edge. */
.appphone .s{background:var(--bg-2);border-radius:22px;height:100%;padding:26px 12px 12px;display:flex;flex-direction:column;gap:9px;position:relative}
.appphone .s::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:6px;border-radius:3px;background:#0B0A08}
.appphone .hd{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.appphone .hd b{color:var(--gold)}
.appphone .l{height:7px;border-radius:2px;background:var(--line)}
.appphone .l.g{height:30px;border-radius:8px;background:var(--gold);display:grid;place-items:center;color:var(--bg);font-size:11px;font-weight:600}
.appphone .l.r{width:44%;background:var(--red)}.appphone .l.gn{width:44%;background:var(--green)}.appphone .l.am{width:44%;background:var(--amber)}
/* 2026-09-17 (owner): the phone shows ALL FOUR scanners as mono chips (messages · links · images · QR) with QR selected, and
   the selected one's viewfinder — the camera the site does not have. A silhouette: tick corners in the scanner panel's shape,
   one sweep line (reuses @keyframes sweep; the reduced-motion block stops it), a destination row with no text. */
.appphone .chips{display:flex;justify-content:space-between;gap:4px;font-family:var(--mono);font-size:8px;letter-spacing:.04em}
.appphone .chips span,.appphone .chips b{border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--faint);font-weight:400;white-space:nowrap}
.appphone .chips b{border-color:var(--gold-dim);color:var(--gold);font-weight:500}
.appphone .vf{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.appphone .vf .tk{position:absolute;width:12px;height:12px;border:2px solid var(--gold-2);filter:drop-shadow(0 0 4px rgba(216,174,85,.7))}
.appphone .vf .k1{top:6px;right:6px;border-left:0;border-bottom:0}.appphone .vf .k2{top:6px;left:6px;border-right:0;border-bottom:0}
.appphone .vf .k3{bottom:6px;right:6px;border-left:0;border-top:0}.appphone .vf .k4{bottom:6px;left:6px;border-right:0;border-top:0}
.appphone .vf .sw{position:absolute;left:12px;right:12px;top:50%;height:2px;opacity:.7;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);box-shadow:0 0 10px 2px rgba(216,174,85,.45);animation:sweep 3.2s ease-in-out infinite}
.appphone .card{border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;gap:6px}
.appphone .tabs2{display:flex;justify-content:space-around;font-size:9px;color:var(--faint);border-top:1px solid var(--line);padding-top:8px;margin-top:auto}.appphone .tabs2 b{color:var(--gold);font-weight:500}
@media (max-width:760px){.appwrap{grid-template-columns:1fr}.appphone{display:none}}
@media (max-width:760px){.appgrid{grid-template-columns:1fr}}   /* 2026-09-20: one column at ≤760 (was 520) — the phone breakpoint the rest of the section uses */
/* 2026-09-16 (owner): two of the four app cards render until Bujasim confirms the others. `.af` is display:grid, which
   would defeat the `hidden` attribute without this. 2026-09-17: the one-column rule for the pair is GONE — measured at 1366,
   it made each card 696px wide at its natural 135px height, and the owner read the width as a void. Two cards in the
   design's own two columns fill one row with no hole; the panel's align-items:center sets the pair against the phone. */
.af[hidden]{display:none}   /* kept: a hidden card must never occupy a grid cell — but no card is hidden any more (2026-09-20) */
/* ---- game ---- */
.gname{display:grid;gap:10px}
.gname[hidden],.gmsg[hidden],.gq[hidden],.gbtns[hidden]{display:none!important}
.gname label{font-weight:700;font-size:16px}
.gnrow{display:grid;grid-template-columns:1fr auto;gap:10px}
.gnrow input{background:var(--bg);border:1px solid var(--line-2);color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 14px;min-width:0}
.gnrow input:focus{outline:0;border-color:var(--gold)}
.lbr.me{background:rgba(216,174,85,.08)}
.lbr.me span:nth-child(2){color:var(--gold);font-weight:700}
.ghead{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.ghead b{color:var(--gold)}
.gb{cursor:pointer;background:transparent}
.gb:hover{background:var(--line)}
.gb.hit{background:var(--green);color:var(--bg)!important;border-color:var(--green)!important}
.gb.miss{background:var(--red);color:var(--bg)!important;border-color:var(--red)!important}
.gfb{font-size:14px;color:var(--text-2);min-height:1.6em}
.gfb b{color:var(--gold)}
.gtimer{height:3px;background:var(--line);overflow:hidden}
.gtimer i{display:block;height:100%;background:var(--gold);width:100%;transform-origin:right;transition:transform 8s linear}
html[dir="ltr"] .gtimer i{transform-origin:left}   /* the bar drains from the start in both directions; transform-origin has no logical form */
.gtimer i.run{transform:scaleX(0)}
.gover{display:grid;gap:8px}
.gover b{font-size:22px;color:var(--gold)}
.lb{padding:14px 18px 0;display:grid}
.lbh,.lbr{display:grid;grid-template-columns:44px 1fr 130px 110px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.lbh span,.lbr span{text-align:start}
.lbh{font-family:var(--sans);font-size:12px;color:var(--muted)}
.lbr .n:first-child{color:var(--gold);font-weight:500}
.lbr .st{letter-spacing:2px}
.lbr .n{font-family:var(--mono);color:var(--text-2)}
.lbr .st{font-family:var(--mono);color:var(--gold-dim);font-size:11px;display:inline-flex;align-items:center;gap:8px}
.lbr .st b{font-family:var(--mono);font-size:15px;color:var(--text);font-weight:500}
.lbr .tt{font-size:12.5px;color:var(--gold-2);border:1px solid var(--gold-dim);padding:2px 8px;width:max-content}
.gamegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px}
.gplay{padding:22px;display:grid;gap:14px;align-content:start}
.gmsg{background:var(--bg);border:1px solid var(--line-2);border-radius:12px 12px 12px 3px;padding:14px 16px;font-size:15px;color:var(--text-2)}
.gq{font-weight:700;font-size:18px}
.gbtns{display:flex;gap:10px}
.board{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:12.5px;white-space:pre;line-height:1.9;color:var(--text-2);padding:16px 18px;overflow-x:auto;text-align:left}
.board .h{color:var(--gold)}
.board .ar{font-family:var(--sans);direction:rtl;unicode-bidi:isolate}
@media (max-width:760px){.gamegrid{grid-template-columns:1fr}}

/* ---- privacy + community ---- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px}
.ledger{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:12.5px;white-space:pre;line-height:1.8;padding:16px 18px;overflow-x:auto;text-align:left}
.ledger .r{color:var(--red)}.ledger .g{color:var(--grey)}.ledger .h{color:var(--gold)}.ledger .d{color:var(--faint)}
.pv{padding:16px 18px;display:grid}
.pv div{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.pv div:last-child{border-bottom:0}
.pv i{font-style:normal;font-family:var(--mono);color:var(--green)}
.pv b{font-weight:700}.pv span{color:var(--text-2)}
.note{font-size:13px;color:var(--muted);margin-top:14px;padding-inline-start:12px;border-inline-start:1px solid var(--gold-dim);max-width:46em}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* ---- community ---- */
.commgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:24px}
.cl{padding:14px 18px;display:grid;gap:0}
.clh,.clr{display:grid;grid-template-columns:1.5fr .5fr 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.clh span,.clr span{text-align:start;justify-self:start}
.clh{font-family:var(--sans)!important;font-size:12px!important;color:var(--muted)}
.clh{font-family:var(--mono);font-size:11px;color:var(--muted)}
.clr .h{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:13px}
.clr .n{font-family:var(--mono)}
.clr .s{font-size:13px;padding:4px 12px;border:1px solid;width:max-content;max-width:100%}.clr .green{color:var(--green);border-color:rgba(111,191,151,.4)}.clr .red{color:var(--red);border-color:rgba(224,128,111,.4)}.clr .amb{color:var(--amber);border-color:rgba(226,149,95,.4)}.clr .grey{color:var(--grey);border-color:rgba(154,165,176,.35)}
.clf{font-size:12px;color:var(--muted);padding-top:10px}
/* 2026-09-16 (owner): four states; one fixed badge column; badges identical in width and height, text centred; the
   column sits at the logical start (right in RTL, left in EN); counts centred; links monospace (above). */
.clh,.clr{grid-template-columns:minmax(0,1fr) 56px 150px}
.clh span:nth-child(2),.clr .n{text-align:center;justify-self:center}
.clr .s{width:100%;box-sizing:border-box;min-height:34px;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:4px 10px;white-space:nowrap}
.howc{display:grid;gap:10px;align-content:start}
.hc{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 14px;border:1px solid var(--line);background:var(--panel)}
.hc .n{font-family:var(--mono);color:var(--gold);font-size:12px;direction:ltr;padding-top:3px}
.hc b{display:block;font-weight:700;font-size:15px}.hc span{font-size:13.5px;color:var(--text-2)}
@media (max-width:760px){.commgrid{grid-template-columns:1fr}}
/* ---- faq ---- */
.faq{margin-top:18px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:baseline;padding:16px 0;cursor:pointer;list-style:none;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq .q{font-family:var(--mono);font-size:12px;color:var(--gold);direction:ltr}
.faq .pm{font-family:var(--mono);color:var(--muted)}
.faq details[open] .pm::before{content:"[-]"}.faq details:not([open]) .pm::before{content:"[+]"}
.faq .a{padding:0 0 18px;padding-inline-start:72px;color:var(--text-2);font-size:15px;max-width:60em}
@media (max-width:600px){.faq summary{grid-template-columns:48px 1fr auto}.faq .a{padding-inline-start:62px}}

/* ---- final + footer ---- */
.final{text-align:center;overflow:hidden}
.final .big{display:inline-block;text-align:left;font-family:var(--mono);direction:ltr;font-size:clamp(6px,1.05vw,12px);line-height:1.15;color:var(--gold-dim);white-space:pre;margin-bottom:20px;will-change:transform}
.final h2{font-size:clamp(26px,4vw,44px)}
.final .lede{margin-inline:auto}
.final .cta{justify-content:center}
.news{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:520px;margin:22px auto 0}
.news input{background:var(--bg);border:1px solid var(--line-2);color:var(--text);font-family:var(--mono);padding:12px 14px;direction:ltr;min-width:0}
.news input:focus{outline:0;border-color:var(--gold)}
footer{border-top:1px solid var(--line);padding-block:32px 22px;font-size:13px;color:var(--muted)}
footer .wrap{display:grid;gap:8px}
footer .row{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a:hover{color:var(--gold)}
footer .m{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

/* stamp */
.stamp{position:absolute;inset-inline-end:18px;top:18px;padding:6px 14px;border:3px solid var(--c);color:var(--c);font-weight:700;font-size:20px;transform:rotate(-12deg) scale(2.2);opacity:0;animation:stampin .5s cubic-bezier(.2,.9,.3,1.2) .6s forwards;pointer-events:none;mix-blend-mode:screen;font-family:var(--sans)}
@keyframes stampin{to{transform:rotate(-12deg) scale(1);opacity:.9}}
/* boot lines between sections */
.boot{max-width:var(--w);margin:0 auto;padding:6px var(--gut) 0;font-family:var(--mono);font-size:12px;color:var(--faint);direction:ltr;text-align:left;unicode-bidi:plaintext}
.boot b{color:var(--gold-dim);font-weight:500}
.boot .cur::after{content:"▌";color:var(--gold);animation:blink 1s steps(2) infinite}
/* receiving indicator */
.recv{font-family:var(--mono);font-size:11px;color:var(--gold);direction:ltr}
/* reveal */
.rv{transform:translateY(16px);opacity:.55;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.rv.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{transform:none;opacity:1}}