
:root{
  --bg:#07101d;--bg2:#0b1626;--card:#0e1b2e;--text:#f8fbff;--muted:#a8b6ca;
  --line:rgba(255,255,255,.10);--pink:#ff2b91;--purple:#9854ff;--cyan:#2fdcff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 8% 0%,rgba(255,43,145,.11),transparent 27%),
radial-gradient(circle at 92% 0%,rgba(77,83,255,.17),transparent 28%),
linear-gradient(180deg,#07101d,#06101b);
color:var(--text);font-family:Tahoma,"Segoe UI",Arial,sans-serif;line-height:1.65}
body.lang-en{font-family:"Segoe UI",Arial,sans-serif}
a{text-decoration:none;color:inherit} img{display:block;max-width:100%}
.container{width:min(1160px,92%);margin:auto}
header{position:sticky;top:0;z-index:50;background:rgba(7,16,29,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-size:1.3rem;font-weight:900}.brand b{background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));-webkit-background-clip:text;color:transparent}
.links{display:flex;align-items:center;gap:20px;color:#d7dfec}.links a:hover{color:#fff}
.langbtn,.btn{border:1px solid var(--line);border-radius:12px;padding:10px 15px;background:rgba(255,255,255,.05);color:#fff;font-weight:700;cursor:pointer}
.btn.primary{border:0;background:linear-gradient(135deg,var(--pink),var(--purple),var(--cyan));box-shadow:0 12px 30px rgba(99,75,255,.22)}
.hero{padding:92px 0 68px;text-align:center}.hero .pill{display:inline-block;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#d0d9e8}
.hero h1{font-size:clamp(2.8rem,6vw,5.6rem);line-height:1.03;margin:20px auto 16px;max-width:880px}
.hero p{max-width:720px;margin:auto;color:var(--muted);font-size:1.08rem}.hero-actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.section{padding:58px 0}.section h2{font-size:2.15rem;margin:0 0 8px}.lead{color:var(--muted);margin:0 0 28px}
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border-radius:24px;padding:24px;box-shadow:0 22px 65px rgba(0,0,0,.24)}
.apphead{display:flex;align-items:center;gap:16px}.icon{width:76px;height:76px;border-radius:19px;object-fit:cover;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.card h3,.app-title{font-size:1.55rem;margin:0}.subtitle{color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.tag{border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:#dce4f2;background:rgba(255,255,255,.04);font-size:.86rem}
.card p{color:var(--muted)}
.pagehero{padding:62px 0 28px}.pagehero h1{font-size:clamp(2.4rem,5vw,4rem);margin:12px 0 6px}
.pagegrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}
.feature{border-radius:26px;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.32)}
.prose{max-width:860px}.prose h2{margin-top:34px}.prose p,.prose li{color:#c8d2e2}.prose ul{padding-inline-start:22px}
.info{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:20px}
.notice{border-inline-start:4px solid #f4b84d;background:rgba(244,184,77,.08);padding:13px 15px;border-radius:10px;color:#ffe4ac}
.footer{border-top:1px solid var(--line);margin-top:52px;padding:28px 0 38px;color:var(--muted)}.footerin{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.only-en{display:none} body.lang-en .only-ar{display:none} body.lang-en .only-en{display:initial}
body.lang-en [data-block-en]{display:block} body:not(.lang-en) [data-block-en]{display:none}
body.lang-en [data-block-ar]{display:none} body:not(.lang-en) [data-block-ar]{display:block}
@media(max-width:820px){.apps,.pagegrid{grid-template-columns:1fr}.links a{display:none}.hero{padding-top:62px}}
