/* ═══════════ الرموز التصميميّة — Design Tokens ═══════════ */
:root{
  --brand:#0088cc;
  --brand-deep:#006CA3;
  --brand-soft:#E3F2FB;
  --paper:#F7FAFC;
  --card:#FFFFFF;
  --ink:#16222E;
  --muted:#5A6B7A;
  --line:#DCE6EE;
  --hero-a:#081420;
  --hero-b:#0C2537;
  --hero-ink:#EAF3FA;
  --hero-muted:#9FB6C6;
  --hero-line:rgba(255,255,255,.09);
  --shadow:0 12px 40px rgba(8,20,32,.08);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#2FA8E6;
    --brand-deep:#54BCF2;
    --brand-soft:#0E2A3C;
    --paper:#0B141D;
    --card:#101E2A;
    --ink:#E8F0F6;
    --muted:#8FA3B3;
    --line:#1D2F3E;
    --shadow:0 12px 40px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"]{
  --brand:#0088cc; --brand-deep:#006CA3; --brand-soft:#E3F2FB;
  --paper:#F7FAFC; --card:#FFFFFF; --ink:#16222E; --muted:#5A6B7A;
  --line:#DCE6EE; --shadow:0 12px 40px rgba(8,20,32,.08);
}
:root[data-theme="dark"]{
  --brand:#2FA8E6; --brand-deep:#54BCF2; --brand-soft:#0E2A3C;
  --paper:#0B141D; --card:#101E2A; --ink:#E8F0F6; --muted:#8FA3B3;
  --line:#1D2F3E; --shadow:0 12px 40px rgba(0,0,0,.35);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.9; font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* ═══════════ الكرات الضوئيّة — خلفيّة الزجاج ═══════════ */
.orb{
  position:fixed; border-radius:50%; filter:blur(90px);
  z-index:-1; pointer-events:none;
  animation:drift 22s ease-in-out infinite alternate;
}
.orb.o1{width:520px; height:520px; background:rgba(0,136,204,.17); top:-120px; inset-inline-start:-140px}
.orb.o2{width:440px; height:440px; background:rgba(79,189,245,.13); top:38%; inset-inline-end:-170px; animation-delay:-8s}
.orb.o3{width:500px; height:500px; background:rgba(0,108,163,.15); bottom:-180px; inset-inline-start:28%; animation-delay:-15s}
@keyframes drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(40px,-30px) scale(1.08)}
}
h1,h2,h3{font-family:'Cairo',sans-serif; line-height:1.5; text-wrap:balance}
a{color:inherit; text-decoration:none}
ul{list-style:none}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:24px}
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  color:var(--brand); text-transform:uppercase; margin-bottom:14px;
}
section{padding-block:96px}
.sec-head{max-width:640px; margin-bottom:56px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:600; margin-bottom:12px}
.sec-head p{color:var(--muted); font-size:1.05rem}

/* ═══════════ شريط التنقّل ═══════════ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:50;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--hero-a) 72%, transparent);
  border-bottom:1px solid var(--hero-line);
  transition:background .3s;
}
.nav-inner{
  max-width:1120px; margin-inline:auto; padding:14px 24px;
  display:flex; align-items:center; gap:32px;
}
.logo{display:flex; align-items:center; gap:10px; font-family:'Reem Kufi',sans-serif;
  font-size:1.35rem; font-weight:700; color:#fff}
.logo svg,.logo img{flex:none; border-radius:7px}
.nav-links{display:flex; gap:28px; margin-inline-start:auto; font-size:.95rem}
.nav-links a{color:#C6D6E2; transition:color .2s}
.nav-links a:hover, .nav-links a:focus-visible{color:#fff}
.nav .cta-mini{
  background:var(--brand); background:#0088cc; color:#fff; padding:8px 22px;
  border-radius:12px; font-weight:700; font-size:.92rem; transition:filter .2s;
}
.nav .cta-mini:hover{filter:brightness(1.12)}
@media (max-width:820px){ .nav-links{display:none} }

/* ═══════════ الترويسة — Hero ═══════════ */
.hero{
  background:linear-gradient(160deg,var(--hero-a) 0%,var(--hero-b) 100%);
  color:var(--hero-ink); position:relative; overflow:hidden;
  padding-block:170px 110px;
}
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none;
}
.hero::before{width:560px; height:560px; background:rgba(0,136,204,.28); top:-180px; inset-inline-start:-160px}
.hero::after{width:480px; height:480px; background:rgba(79,189,245,.16); bottom:-200px; inset-inline-end:8%}
.hero .waw{
  position:absolute; inset-inline-end:-4rem; top:-6rem;
  font-family:'Reem Kufi',sans-serif; font-size:34rem; font-weight:700;
  color:#0088cc; opacity:.07; user-select:none; pointer-events:none; line-height:1;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; position:relative}
.hero h1{
  font-size:clamp(2.4rem,5.6vw,4rem); font-weight:600; color:#fff;
  margin-bottom:20px;
}
.hero h1 em{font-style:normal; color:#4FBDF5}
.hero .lede{font-size:1.15rem; color:var(--hero-muted); max-width:34em; margin-bottom:36px; font-weight:300}
.hero .lede strong{color:var(--hero-ink); font-weight:600}
.store-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.store-btn{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--hero-line); border-radius:14px;
  padding:10px 20px; background:rgba(255,255,255,.04);
  transition:background .2s, border-color .2s;
}
.store-btn:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.25)}
.store-btn svg{flex:none}
.store-btn .lines{line-height:1.4}
.store-btn .lines small{display:block; font-size:.72rem; color:var(--hero-muted)}
.store-btn .lines b{font-size:1rem; color:#fff; font-weight:700}
.soon{
  font-size:.68rem; font-weight:700; background:#0088cc; color:#fff;
  border-radius:99px; padding:1px 10px; margin-inline-start:4px;
}
.hero-note{margin-top:22px; font-size:.88rem; color:var(--hero-muted); display:flex; align-items:center; gap:8px}
.hero-note svg{flex:none}

/* بطاقة القارئ التوضيحيّة */
.mock{
  background:rgba(14,30,44,.55);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.13); border-radius:22px;
  padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.45); position:relative;
}
.mock-bar{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.mock-bar .dot{width:9px; height:9px; border-radius:50%; background:#22384B}
.mock-bar .title{font-size:.8rem; color:var(--hero-muted); margin-inline-start:auto}
.mock-page{background:#F5F1E8; border-radius:12px; padding:26px 24px; direction:rtl}
.mock-page .ln{height:9px; border-radius:5px; background:#C9C2B2; margin-bottom:13px}
.mock-page .ln.hl{background:linear-gradient(90deg,#8ECDF0,#8ECDF0); outline:6px solid rgba(0,136,204,.22); outline-offset:0}
.mock-page .ln.head{height:15px; background:#8E8674; width:52%}
.chip{
  position:absolute; background:rgba(18,43,61,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#CBE7F8; border:1px solid rgba(79,189,245,.35);
  font-size:.78rem; font-weight:700; border-radius:99px; padding:5px 15px;
  display:flex; gap:7px; align-items:center; box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.chip svg{flex:none}
.chip.c1{top:-16px; inset-inline-start:26px}
.chip.c2{bottom:34%; inset-inline-end:-22px}
.chip.c3{bottom:-16px; inset-inline-start:20%}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:56px}
  .chip.c2{inset-inline-end:-6px}
}

/* ═══════════ الركائز الثلاث ═══════════ */
.pillars{border-bottom:1px solid var(--line)}
.pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px}
.pillar h3{font-size:1.15rem; font-weight:600; margin:14px 0 8px}
.pillar p{color:var(--muted); font-size:.97rem}
.pillar .ico{
  width:46px; height:46px; border-radius:13px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; color:var(--brand);
}
@media (max-width:820px){ .pillars-grid{grid-template-columns:1fr; gap:36px} }

/* ═══════════ المزايا ═══════════ */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{
  background:color-mix(in srgb, var(--card) 55%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:var(--radius);
  padding:28px 26px; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 45%, transparent)}
.feat h3{font-size:1.08rem; font-weight:600; margin:16px 0 8px}
.feat p{color:var(--muted); font-size:.94rem}
.feat .ico{color:var(--brand)}
@media (max-width:900px){ .feat-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .feat-grid{grid-template-columns:1fr} }

/* ═══════════ الأدوات ═══════════ */
.tools{background:color-mix(in srgb, var(--card) 40%, transparent); border-block:1px solid var(--line)}
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.tool{
  display:flex; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--card) 50%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:14px;
  padding:16px 18px; font-weight:600; font-size:.95rem;
  transition:border-color .2s, transform .2s;
}
.tool:hover{border-color:var(--brand); transform:translateY(-2px)}
.tool svg{flex:none; color:var(--brand)}
@media (max-width:900px){ .tools-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .tools-grid{grid-template-columns:1fr} }

/* ═══════════ قسم الذكاء الاصطناعي ═══════════ */
.ai{background:linear-gradient(160deg,var(--hero-a),var(--hero-b)); color:var(--hero-ink); position:relative; overflow:hidden}
.ai::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  filter:blur(110px); background:rgba(0,136,204,.24);
  top:-160px; inset-inline-end:-120px; pointer-events:none;
}
.ai .wrap{position:relative}
.ai-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.ai .eyebrow{color:#4FBDF5}
.ai h2{font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:600; color:#fff; margin-bottom:14px}
.ai p{color:var(--hero-muted); margin-bottom:14px}
.ai ul{margin-top:18px; display:grid; gap:12px}
.ai li{display:flex; gap:12px; align-items:flex-start; color:var(--hero-ink); font-size:.97rem}
.ai li svg{flex:none; margin-top:6px; color:#4FBDF5}
.chat{
  background:rgba(14,30,44,.55);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.13); border-radius:22px; padding:26px;
  display:grid; gap:16px; box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.bubble{max-width:85%; padding:12px 18px; border-radius:16px; font-size:.92rem; line-height:1.8}
.bubble.user{background:#0088cc; color:#fff; justify-self:start; border-end-start-radius:4px}
.bubble.bot{background:#132C3F; color:#D7E9F5; justify-self:end; border-end-end-radius:4px}
.bubble.bot b{color:#7FCBF3}
.chat .hint{font-size:.78rem; color:var(--hero-muted); text-align:center; margin-top:4px}
@media (max-width:900px){ .ai-grid{grid-template-columns:1fr; gap:48px} }

/* ═══════════ المنصّات ═══════════ */
.plat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.plat{
  background:color-mix(in srgb, var(--card) 55%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:var(--radius);
  padding:32px 28px; text-align:center;
}
.plat .ico{color:var(--brand); margin-bottom:14px}
.plat h3{font-size:1.1rem; font-weight:600; margin-bottom:6px}
.plat p{color:var(--muted); font-size:.9rem}
.plat .badge{
  display:inline-block; margin-top:14px; font-size:.76rem; font-weight:700;
  border-radius:99px; padding:3px 14px;
  background:var(--brand-soft); color:var(--brand);
}
@media (max-width:820px){ .plat-grid{grid-template-columns:1fr} }

/* ═══════════ الأسعار ═══════════ */
.pricing{background:color-mix(in srgb, var(--card) 40%, transparent); border-block:1px solid var(--line)}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{
  background:color-mix(in srgb, var(--card) 55%, transparent);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:20px;
  padding:34px 30px; display:flex; flex-direction:column; position:relative;
}
.plan.featured{
  border-color:var(--brand); border-width:2px;
  box-shadow:0 24px 60px rgba(0,136,204,.14);
}
.plan .tag{
  position:absolute; top:-14px; inset-inline-start:28px;
  background:#0088cc; color:#fff; font-size:.75rem; font-weight:700;
  border-radius:99px; padding:3px 16px;
}
.plan h3{font-size:1.2rem; font-weight:600; margin-bottom:14px}
.plan .price{font-size:2.5rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.plan .price small{font-size:.95rem; font-weight:400; color:var(--muted)}
.plan .alt{font-size:.86rem; color:var(--muted); margin:6px 0 22px; min-height:1.6em}
.plan .alt b{color:var(--brand)}
.plan ul{display:grid; gap:11px; margin-bottom:28px}
.plan li{display:flex; gap:10px; align-items:flex-start; font-size:.93rem}
.plan li svg{flex:none; margin-top:6px; color:var(--brand)}
.plan li.no{color:var(--muted)}
.plan li.no svg{color:var(--muted)}
.plan .btn{
  margin-top:auto; text-align:center; border-radius:13px; padding:12px;
  font-weight:700; font-size:.95rem; border:1px solid var(--line);
  transition:filter .2s, background .2s;
}
.plan .btn.solid{background:var(--brand); background:#0088cc; color:#fff; border-color:transparent}
.plan .btn:hover{filter:brightness(1.08); background-color:var(--brand-soft)}
.plan .btn.solid:hover{background:#0088cc}
.price-note{margin-top:28px; text-align:center; color:var(--muted); font-size:.88rem}
@media (max-width:900px){ .price-grid{grid-template-columns:1fr} .plan.featured{order:-1} }

/* ═══════════ الأسئلة الشائعة ═══════════ */
.faq-list{max-width:760px; display:grid; gap:12px}
.faq-list details{
  background:color-mix(in srgb, var(--card) 55%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius:14px;
  padding:18px 24px;
}
.faq-list summary{
  cursor:pointer; font-weight:700; font-size:1rem; list-style:none;
  display:flex; align-items:center; gap:12px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'+'; margin-inline-start:auto; font-size:1.3rem; color:var(--brand);
  transition:transform .2s;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin-top:12px; color:var(--muted); font-size:.95rem}

/* ═══════════ الدعوة الختاميّة + التذييل ═══════════ */
.final{
  background:linear-gradient(160deg,var(--hero-a),var(--hero-b));
  color:#fff; text-align:center;
}
.final h2{font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:600; margin-bottom:14px}
.final p{color:var(--hero-muted); margin-bottom:32px}
.final .store-row{justify-content:center}
footer{background:var(--hero-a); color:var(--hero-muted); border-top:1px solid var(--hero-line)}
.foot-inner{
  max-width:1120px; margin-inline:auto; padding:36px 24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; font-size:.88rem;
}
.foot-inner .logo{font-size:1.1rem}
.foot-links{display:flex; gap:24px; margin-inline-start:auto}
.foot-links a:hover{color:#fff}
.copyright{width:100%; padding-top:14px; border-top:1px solid var(--hero-line); font-size:.8rem}

/* ═══════════ حركة الظهور عند التمرير ═══════════ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .feat, .tool{transition:none}
  .orb{animation:none}
}
a:focus-visible, summary:focus-visible, .btn:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ═══════════ النسخة الإنجليزيّة — LTR ═══════════ */
/* الأنماط أعلاه منطقيّة الاتّجاه (margin-inline…) فتعمل في الاتجاهين. ما يلي
   استثناءان فقط: خطّ لاتيني بدل Cairo/Reem Kufi، ومعاينة المستند تُكتب LTR. */
html[lang="en"] body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] .logo{font-family:'Inter','Segoe UI',system-ui,sans-serif; letter-spacing:-.02em}
html[lang="en"] .mock-page{direction:ltr}