/* الموقع العام بنفس هوية صفحة "جولة داخل البرنامج": خلفية بيضا هادية، كلام غامق، وبنفسجي للتمييز بس.
   الجزء اللي فوق في كل صفحة بقى شريط بنفسجي خفيف بدل الخلفية البنفسجي المتدرجة بالدواير.
   بيتحمّل بعد الستايل الداخلي لكل صفحة فبيغطي عليه. ثيمات الموقع اللي صاحب المنصة بيختارها
   ([data-site-theme]) بتفضل شغالة زي ما هي، والثيم الافتراضي بيقلب غامق لوحده لو الجهاز على الوضع الليلي. */
:root{ --chip-bg:#F1EEF8; --line-strong:#D3CCE3; }
@media (prefers-color-scheme: dark){
  :root:not([data-site-theme]){
    --purple-900:#C9B8FF; --purple-700:#9B7BEA; --purple-600:#7C5CFC; --purple-500:#9478FF; --purple-400:#A78BFA;
    --purple-tint:#241850; --purple-line:#453770;
    --ink:#F2EEFA; --muted:#B3A9CC; --paper:#140B2E; --card:#1D1240; --line:#34275C;
    --teal:#5EE0C4; --amber:#F5C76B; --chip-bg:#241850; --line-strong:#453770;
    color-scheme:dark;
  }
}

header{background:color-mix(in srgb, var(--paper) 90%, transparent);}

.btn-ghost{background:transparent; border:1.5px solid var(--line-strong); color:var(--purple-700);}
.btn-ghost:hover{background:var(--chip-bg); border-color:var(--line-strong);}

.hero{background:linear-gradient(180deg, var(--purple-tint) 0%, var(--paper) 100%); color:var(--ink); border-bottom:1px solid var(--line);}
.hero .blob{display:none;}
.hero h1{color:var(--ink);}
.hero h1 span{color:var(--purple-700);}
.hero p, .hero p.lead, .hero .hero-note{color:var(--muted);}
.hero .eyebrow{background:var(--card); border:1px solid var(--line); color:var(--purple-700);}
.hero-art{background:var(--card); border:1px solid var(--line); box-shadow:0 24px 50px -24px rgba(44,20,102,.3);}

/* زرار التجربة المجانية جوه القائمة اللي فوق كان بياخد لون لينكات القائمة الرمادي بدل الأبيض */
.nav-links a.btn-grad, .nav-links a.btn-grad:hover{color:#fff;}