@font-face{font-family:Alexandria;font-weight:300;font-display:swap;src:url(./fonts/alexandria-300-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Alexandria;font-weight:400;font-display:swap;src:url(./fonts/alexandria-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Alexandria;font-weight:500;font-display:swap;src:url(./fonts/alexandria-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Alexandria;font-weight:600;font-display:swap;src:url(./fonts/alexandria-600-latin.woff2) format('woff2')}

:root{
  --bg:#F5F5F7;--ink:#1D1D1F;--ink-72:rgba(29,29,31,.72);
  --ink-60:rgba(29,29,31,.60);--ink-45:rgba(29,29,31,.45);
  --hairline:rgba(29,29,31,.10);--accent:#2F6AE0;--sky:#5AC8FA;
  --panel:rgba(255,255,255,.88);--font:Alexandria,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);
  font-weight:300;line-height:2;font-size:14px;
  background:
    radial-gradient(720px 420px at 88% -8%,rgba(90,200,250,.12),transparent 66%),
    radial-gradient(580px 390px at 4% 105%,rgba(47,106,224,.08),transparent 64%),
    var(--bg);
}
.wrap{max-width:880px;margin:0 auto;padding:34px 24px 72px}
.bar{
  display:flex;align-items:center;gap:12px;margin:0 auto 24px;padding:11px 16px;
  width:max-content;max-width:100%;border:1px solid rgba(29,29,31,.055);border-radius:18px;
  background:rgba(255,255,255,.76);box-shadow:0 10px 30px rgba(24,39,75,.06);
  backdrop-filter:blur(20px) saturate(1.2);
}
.bar img{width:30px;height:30px;display:block;filter:drop-shadow(0 7px 12px rgba(47,106,224,.18))}
.bar .brand{font-weight:600;letter-spacing:.08em;font-size:12px;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.bar .slogan{color:var(--ink-60);font-size:12px;white-space:nowrap}
.bar .div{width:1px;height:16px;background:var(--hairline)}
.panel{
  position:relative;overflow:hidden;background:var(--panel);border:1px solid rgba(29,29,31,.055);
  border-radius:32px;padding:48px 54px;box-shadow:0 22px 64px rgba(24,39,75,.075),0 2px 8px rgba(24,39,75,.035);
  backdrop-filter:blur(24px) saturate(1.2);
}
.panel::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:12%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--sky),transparent);opacity:.62;
}
h1{font-size:clamp(30px,4.8vw,46px);font-weight:600;letter-spacing:-.045em;margin:0 0 8px;line-height:1.4}
h2{font-size:17px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px;line-height:1.65}
.eyebrow{font-size:11px;font-weight:500;color:var(--accent);margin:0 0 8px}
.updated{color:var(--ink-45);font-size:11.5px;margin:0 0 12px}
p{margin:0 0 12px;color:var(--ink-72)}
ul{margin:0 0 12px;padding-inline-start:20px;color:var(--ink-72)}
li{margin-bottom:7px;padding-inline-start:4px}
.sep{position:relative;margin-top:25px;padding:25px 28px 0 0;border-top:1px solid var(--hairline)}
.sep::before{
  content:'';position:absolute;inset-inline-start:2px;inset-block-start:32px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(47,106,224,.08);
}
a{color:var(--accent);text-underline-offset:3px}
strong{font-weight:500;color:var(--ink)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.foot{margin-top:26px;color:var(--ink-60);font-size:12px}
.nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:22px;border-top:1px solid var(--hairline)}
.nav a{margin:0;padding:8px 12px;border-radius:11px;background:rgba(47,106,224,.065);text-decoration:none;font-size:12px}
::selection{color:#fff;background:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:600px){
  .wrap{padding:18px 12px 48px}
  .bar{width:100%;justify-content:center;margin-bottom:14px;padding-inline:10px}
  .bar .brand{font-size:10px}.bar .slogan{font-size:11px}
  .panel{padding:30px 20px;border-radius:24px}
  .sep{padding-inline-start:24px}
  h1{font-size:30px}
}