:root{--ink:#0F1330;--muted:#5A6078;--line:#E6E8F2;--soft:#F6F7FC;--a:#5B4BFF;--b:#1FC8E6;--grad:linear-gradient(135deg,var(--a),var(--b));--night:#0B0E24}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.9;-webkit-font-smoothing:antialiased}
html[lang=en] body{font-family:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif;line-height:1.75}
a{color:var(--a)}
header{background:var(--night)}
.nav{max-width:860px;margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:Inter,sans-serif;font-weight:800;letter-spacing:2px;font-size:15px}
.brand img{width:34px;height:34px}
.brand span{font-weight:300;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lang{border:1px solid rgba(255,255,255,.25);color:#fff;background:none;border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit;font-size:14px}
.hero{background:var(--night);color:#fff;padding:40px 0 56px}
.hero .in{max-width:860px;margin:0 auto;padding:0 20px}
.hero h1{font-size:clamp(28px,5vw,40px);line-height:1.3}
.hero p{color:#9DA2C6;margin-top:8px;font-size:15px}
main{max-width:860px;margin:0 auto;padding:48px 20px 80px}
h2{font-size:21px;margin:36px 0 10px;padding-top:4px}
h2:first-child{margin-top:0}
p,li{color:#2E3350;font-size:16px}
ul{padding-inline-start:22px;margin:8px 0}
li{margin:4px 0}
.box{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-top:12px}
footer{background:#070918;color:#8A8FB3;font-size:14px;padding:24px 0}
footer .in{max-width:860px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:#C9CCE6;text-decoration:none;margin-inline-start:14px}
[data-l]{display:none}
html[lang=ar] [data-l=ar],html[lang=en] [data-l=en]{display:block}
@media (max-width:640px){.nav,.hero .in,main,footer .in{padding-left:16px;padding-right:16px}}