/* ============================================================
   Power Bot — نظام تصميم بأسلوب Apple  (apple.css)
   خطوط ضخمة · مساحات واسعة · سكون أنيق · حركة ناعمة
   ============================================================ */

:root{
  /* ألوان أساسية داكنة (Apple-dark) */
  --bg:#000000;
  --bg-2:#060608;
  --surface:#0c0c0f;
  --surface-2:#141418;
  --hair:rgba(255,255,255,.10);
  --hair-soft:rgba(255,255,255,.06);

  --ink:#f5f5f7;          /* نص أساسي */
  --ink-2:#a1a1a6;        /* نص ثانوي */
  --ink-3:#6e6e73;        /* نص خافت */

  /* لمسة البراند (بنفسجي×ذهبي) — مستخدمة بحذر زي Apple */
  --brand:#7c5cff;
  --brand-2:#9d86ff;
  --gold:#f0d27a;
  --brand-glow:rgba(124,92,255,.45);

  --radius:22px;
  --radius-lg:30px;
  --maxw:1120px;
  --readw:820px;
  --ease:cubic-bezier(.22,1,.36,1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --font-display: "Alexandria", var(--font);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--brand);color:#fff}

/* شريط تمرير أنيق */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:20px;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:#3a3a42}

/* ---------------- تخطيط عام ---------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.read{max-width:var(--readw);margin-inline:auto;padding-inline:24px}
section{position:relative}
.pad{padding-block:clamp(80px,12vw,160px)}
.pad-sm{padding-block:clamp(56px,8vw,96px)}
.center{text-align:center}

/* ---------------- تايبوغرافي ---------------- */
.eyebrow{
  font-size:clamp(.95rem,1.6vw,1.28rem);font-weight:600;letter-spacing:0;
  background:linear-gradient(90deg,var(--brand-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.06}
.display{
  font-size:clamp(2.9rem,8.5vw,6.4rem);font-weight:800;line-height:1.02;
  letter-spacing:-.045em;
}
.h-sec{font-size:clamp(2.1rem,5.2vw,3.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.h-card{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.03em}
.lead{
  font-size:clamp(1.1rem,2.1vw,1.55rem);color:var(--ink-2);font-weight:400;
  line-height:1.55;max-width:40ch;margin-inline:auto;letter-spacing:-.01em;
}
.muted{color:var(--ink-2)}
.tiny{font-size:.9rem;color:var(--ink-3)}

/* نص متدرّج راقٍ */
.grad{
  background:linear-gradient(180deg,#ffffff 0%,#c8c8cf 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-brand{
  background:linear-gradient(110deg,var(--brand-2),var(--gold) 55%,var(--brand-2));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{to{background-position:200% center}}

/* ---------------- أزرار ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:1.02rem;border-radius:999px;padding:14px 26px;
  transition:transform .3s var(--ease), background .25s, box-shadow .3s, opacity .2s;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;letter-spacing:0;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 30px var(--brand-glow)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 14px 40px var(--brand-glow)}
.btn-light{background:var(--ink);color:#000}
.btn-light:hover{background:#fff;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-lg{padding:17px 34px;font-size:1.1rem}
.btn-sm{padding:10px 18px;font-size:.9rem}
/* رابط بأسلوب Apple: نص ملوّن + سهم */
.link{display:inline-flex;align-items:center;gap:5px;color:var(--brand-2);font-weight:500;font-size:1.05rem;transition:.2s}
.link .chev{transition:transform .25s var(--ease)}
.link:hover{color:var(--gold)}
.link:hover .chev{transform:translateX(-4px)}   /* RTL: يتحرك يسار */

/* ---------------- نافبار كبسولة عائمة (يُحقن بـ apple.js) ---------------- */
.ap-nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:900;
  display:flex;align-items:center;max-width:calc(100vw - 24px);
  background:rgba(12,12,16,.62);backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--hair);border-radius:999px;padding:7px 8px;
  box-shadow:0 16px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .3s var(--ease), border-color .3s, top .3s;
  animation:navDrop .8s var(--ease) both;
}
@keyframes navDrop{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.ap-nav.scrolled{box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(124,92,255,.12), inset 0 1px 0 rgba(255,255,255,.06);border-color:rgba(124,92,255,.28)}
.ap-nav .inner{display:flex;align-items:center;gap:4px}
.ap-nav .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.98rem;letter-spacing:-.02em;padding:4px 8px 4px 14px}
.ap-nav .brand img,.ap-nav .brand .dot{width:26px;height:26px;border-radius:8px;object-fit:cover}
.ap-nav .brand .dot{background:radial-gradient(circle at 30% 25%,#c7b9ff,var(--brand) 60%,#4a3a70);box-shadow:0 0 14px var(--brand-glow)}
.ap-nav .links{display:flex;align-items:center;gap:2px}
.ap-nav .links a{color:var(--ink-2);font-size:.82rem;font-weight:600;padding:8px 13px;border-radius:999px;transition:.18s}
.ap-nav .links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.ap-nav .cta{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;padding:8px 18px;border-radius:999px;font-size:.82rem;font-weight:700;margin-inline-start:6px;transition:.2s;box-shadow:0 4px 16px var(--brand-glow)}
.ap-nav .cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--brand-glow)}
.ap-nav .burger{display:none;background:none;border:0;color:var(--ink);width:38px;height:38px;cursor:pointer;border-radius:999px}
.ap-nav .burger:hover{background:rgba(255,255,255,.06)}
.ap-nav .burger svg{width:20px;height:20px}
@media(max-width:860px){
  .ap-nav{padding:6px 6px 6px 6px}
  .ap-nav .links,.ap-nav .cta{display:none}
  .ap-nav .burger{display:flex;align-items:center;justify-content:center}
}
/* قائمة الجوال */
.ap-menu{
  position:fixed;inset:0;z-index:899;background:rgba(4,4,6,.97);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  padding:96px 26px 30px;display:flex;flex-direction:column;gap:4px;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s var(--ease);
}
.ap-menu.open{opacity:1;transform:none;pointer-events:auto}
.ap-menu a{font-size:1.5rem;font-weight:700;color:var(--ink);padding:15px 4px;border-bottom:1px solid var(--hair-soft);display:flex;justify-content:space-between;align-items:center}
.ap-menu a .ar{color:var(--ink-3)}

/* ---------------- صفحة مقال / توثيق ---------------- */
.article{max-width:var(--readw);margin-inline:auto;padding-inline:24px}
.article h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.03em;margin:44px 0 14px}
.article h3{font-size:1.25rem;font-weight:700;margin:30px 0 10px}
.article p{color:var(--ink-2);line-height:1.85;margin-bottom:16px;font-size:1.02rem}
.article ul,.article ol{color:var(--ink-2);line-height:1.85;margin:0 22px 18px 0;padding-inline-start:8px}
.article li{margin-bottom:9px}
.article a{color:var(--brand-2);font-weight:500}
.article a:hover{color:var(--gold)}
.article strong{color:var(--ink);font-weight:700}
.article code{background:var(--surface-2);border:1px solid var(--hair-soft);border-radius:6px;padding:2px 7px;font-size:.9em;font-family:ui-monospace,monospace}

/* ---------------- كروت / أسطح ---------------- */
.card{
  background:var(--surface);border:1px solid var(--hair-soft);border-radius:var(--radius);
  padding:34px;transition:transform .4s var(--ease), border-color .3s, background .3s;
}
.card:hover{border-color:var(--hair);transform:translateY(-4px)}
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--hair);border-radius:var(--radius);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);
  font-size:.82rem;font-weight:600;color:var(--ink-2);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#30d158;box-shadow:0 0 10px #30d158;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------------- خلفيات / أضواء ---------------- */
.bg-fade{position:fixed;inset:0;z-index:-3;background:
  radial-gradient(1200px 600px at 50% -10%, rgba(124,92,255,.16), transparent 60%),
  radial-gradient(900px 500px at 90% 20%, rgba(240,210,122,.06), transparent 55%),
  var(--bg);}
.bg-grid{position:fixed;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 70%);
}
.hair-line{height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent);border:0}

/* ---------------- حركة السكرول (reveal) ---------------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------------- فوتر مشترك ---------------- */
.ap-foot{border-top:1px solid var(--hair-soft);padding:64px 0 40px;color:var(--ink-3);font-size:.82rem}
.ap-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px;margin-bottom:44px}
.ap-foot h5{color:var(--ink-2);font-size:.8rem;font-weight:700;margin-bottom:14px;letter-spacing:0}
.ap-foot a{display:block;color:var(--ink-3);padding:5px 0;transition:.16s;font-size:.82rem}
.ap-foot a:hover{color:var(--ink)}
.ap-foot .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:1.05rem;margin-bottom:12px}
.ap-foot .brand img,.ap-foot .brand .dot{width:30px;height:30px;border-radius:9px}
.ap-foot .brand .dot{background:radial-gradient(circle at 30% 25%,#c7b9ff,var(--brand) 60%,#4a3a70)}
.ap-foot .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;border-top:1px solid var(--hair-soft)}
@media(max-width:820px){.ap-foot .cols{grid-template-columns:1fr 1fr;gap:26px}}

/* أدوات */
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}