:root{
  --navy:#0a0e27; --navy-deep:#060819;
  --purple:#3018f0; --blue:#0048f0; --cyan:#00c0f0;
  --on-navy:#eef2fa; --on-navy-muted:#a9b4cc;
  --ink:#11161f; --ink-muted:#515b6b; --line:#e3e7ee;
  --surface:#ffffff; --surface-sunken:#f7f8fb;
  --sweep:linear-gradient(120deg,var(--purple),var(--blue) 55%,var(--cyan));
  --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
a{color:var(--blue)}
h1,h2,h3{line-height:1.2; text-wrap:balance; margin:0}

header{background:var(--navy); color:var(--on-navy)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.14em; font-size:15px}
.brand img{height:26px; width:auto; display:block}
.bar nav{display:flex; gap:20px; font-size:14px}
.bar nav a{color:var(--on-navy-muted); text-decoration:none}
.bar nav a:hover{color:var(--on-navy)}

.hero{background:var(--navy); color:var(--on-navy); padding-block:72px 88px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--sweep)}
.eyebrow{display:inline-block; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
         color:var(--cyan); border:1px solid rgba(0,192,240,.35); border-radius:999px; padding:5px 12px; margin-bottom:22px}
.hero h1{font-size:clamp(32px,5.2vw,52px); font-weight:650; max-width:18ch}
.hero p{color:var(--on-navy-muted); font-size:clamp(16px,2vw,19px); max-width:58ch; margin:18px 0 0}

section{padding-block:64px}
section.alt{background:var(--surface-sunken); border-block:1px solid var(--line)}
.kicker{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 10px}
h2{font-size:clamp(23px,3vw,30px); font-weight:650}
.lede{color:var(--ink-muted); max-width:62ch; margin:14px 0 0}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px; margin-top:34px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px}
section.alt .card{background:var(--surface)}
.card h3{font-size:17px; font-weight:650}
.card p{margin:8px 0 0; color:var(--ink-muted); font-size:15px}

dl.facts{display:grid; grid-template-columns:max-content 1fr; gap:10px 22px; margin:28px 0 0; font-size:15px}
dl.facts dt{color:var(--ink-muted)}
dl.facts dd{margin:0}
@media (max-width:560px){ dl.facts{grid-template-columns:1fr; gap:2px 0} dl.facts dd{margin-bottom:12px} }

.ar{direction:rtl; text-align:right}
.ar .lede{margin-inline:0}

footer{background:var(--navy-deep); color:var(--on-navy-muted); padding-block:40px; font-size:14px}
footer a{color:var(--on-navy)}
.foot{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:flex-start}
.foot strong{color:var(--on-navy)}