/* =====================================================================
   Sketch · سكتش — sketch.center
   هوية: بنفسجي #533F99 + شريط تركوازي/أصفر/برتقالي
   ملف واحد، RTL و LTR بنفس القواعد عبر الخصائص المنطقية
   ===================================================================== */

/* ---------- 1. المتغيرات ---------- */
:root{
  --purple:#533F99;
  --purple-d:#3E2E77;
  --purple-dd:#241B44;
  --purple-l:#A594F0;
  --teal:#6FC7B3;
  --teal-d:#2E9481;
  --yellow:#FDD700;
  --orange:#F04923;
  --green:#359A3E;
  --blue:#3C60AC;
  --ink:#241F2E;
  --ink-2:#524B48;
  --muted:#6E6880;
  --line:#E7E3F0;
  --bg:#FBFAFD;
  --bg-alt:#F4F1FA;
  --white:#fff;

  --font-ar-head:"El Messiri","Segoe UI",sans-serif;
  --font-ar-body:"Readex Pro","El Messiri","Segoe UI",sans-serif;
  --font-lat:"Space Grotesk","Segoe UI",sans-serif;

  --r:18px;
  --r-sm:12px;
  --shadow:0 1px 2px rgba(36,27,68,.04),0 8px 24px rgba(36,27,68,.06);
  --shadow-lg:0 18px 50px rgba(36,27,68,.14);
  --wrap:1180px;
  --header-h:92px;
}

/* ---------- 2. أساسيات ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ar-body);font-size:16.5px;line-height:1.85;
  font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[lang="en"] body{font-family:var(--font-lat);font-weight:400;line-height:1.7}
h1,h2,h3,h4{font-family:var(--font-ar-head);font-weight:700;line-height:1.3;margin:0}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--font-lat);letter-spacing:-.02em}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 40px,820px)}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--purple);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{inset-inline-start:12px;top:12px}

/* ---------- 3. الشريط اللوني ---------- */
.stripe{display:flex;height:5px;width:100%;direction:ltr}
.stripe i{flex:1;display:block}
.stripe i:nth-child(1){background:var(--purple)}
.stripe i:nth-child(2){background:var(--teal)}
.stripe i:nth-child(3){background:var(--yellow)}
.stripe i:nth-child(4){background:var(--orange)}
/* البنفسجي بيختفي فوق خلفية بنفسجية — بيفتح شوي بالهيرو */
.hero .stripe i:nth-child(1){background:var(--purple-l)}

/* ---------- 4. الترويسة ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(251,250,253,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.site-header.scrolled{border-block-end-color:var(--line);box-shadow:0 6px 24px rgba(36,27,68,.05)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand img{height:60px;width:auto}
.nav{display:flex;gap:26px;margin-inline-start:auto;font-size:15px}
.nav a{color:var(--ink-2);position:relative;padding-block:6px;transition:color .2s}
.nav a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  background:var(--purple);transform:scaleX(0);transform-origin:center;transition:transform .25s;
}
.nav a:hover{color:var(--purple)}
.nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px;margin-inline-start:8px}
.nav .nav-cta{display:none}   /* بتظهر بس داخل قائمة الجوال — والتخصيص لازم يغلب .btn */

.lang-toggle{
  border:1px solid var(--line);background:var(--white);color:var(--purple);
  border-radius:999px;padding:7px 14px;font-family:var(--font-lat);
  font-weight:600;font-size:13px;letter-spacing:.06em;transition:.2s;
}
.lang-toggle:hover{border-color:var(--purple);background:var(--purple);color:#fff}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--purple);color:#fff;border:1px solid var(--purple);
  border-radius:999px;padding:11px 22px;font-family:var(--font-ar-head);
  font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s,background .2s;
  white-space:nowrap;
}
html[lang="en"] .btn{font-family:var(--font-lat)}
.btn:hover{background:var(--purple-d);border-color:var(--purple-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(83,63,153,.28)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-lg{padding:14px 30px;font-size:16.5px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;box-shadow:none}
.btn-wa{background:#1FA855;border-color:#1FA855;width:100%}
.btn-wa:hover{background:#178A45;border-color:#178A45;box-shadow:0 10px 24px rgba(31,168,85,.3)}

/* ---------- 6. الهيرو ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#1E1638 0%,#3A2B72 45%,#533F99 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:26px 26px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent);
}
.hero-glow{
  position:absolute;inset-inline-end:-140px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(111,199,179,.35),transparent 62%);filter:blur(20px);
}
.hero-inner{position:relative;padding-block:clamp(72px,11vw,132px) clamp(64px,9vw,110px);text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  font-family:var(--font-lat);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);
}
html[lang="ar"] .eyebrow{font-family:var(--font-ar-head);letter-spacing:.04em;font-size:14px;text-transform:none}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--teal);border-radius:2px}
.eyebrow-dark{color:var(--purple)}
.eyebrow-dark::before{background:var(--orange)}

.hero-title{font-size:clamp(2.1rem,5.4vw,4rem);letter-spacing:-.01em;margin-bottom:22px}
.hero-sub{
  max-width:720px;margin-inline:auto;font-size:clamp(1rem,1.6vw,1.16rem);
  color:rgba(255,255,255,.82);line-height:2;
}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-block:36px 0}
.motto{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-block-start:48px;
  font-family:var(--font-ar-head);font-size:15px;font-weight:600;
  color:rgba(255,255,255,.62);letter-spacing:.08em;
}
.motto i{width:5px;height:5px;border-radius:50%;background:var(--yellow);display:block}

/* ---------- 7. الأقسام ---------- */
.section{padding-block:clamp(64px,8vw,104px)}
.section-alt{background:var(--bg-alt)}
.section-dark{background:linear-gradient(150deg,#2B2054,#4A3789);color:#fff}
.h2{font-size:clamp(1.6rem,3.4vw,2.5rem);margin-bottom:16px;max-width:22ch}
.section-dark .h2,.section-contact .h2{max-width:24ch}
.lede{max-width:70ch;color:var(--muted);font-size:1.03rem;margin-bottom:44px}
.section-dark .lede{color:rgba(255,255,255,.75)}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 8. البطاقات ---------- */
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 24px 26px;box-shadow:var(--shadow);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#D8D0EC}
.card h3{font-size:1.22rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.96rem;line-height:1.8}
.card .q{color:var(--ink);font-weight:500;margin-bottom:8px;font-size:.97rem}
.card-num{
  display:block;font-family:var(--font-lat);font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--purple-l);margin-bottom:14px;
}
.funnel .card{border-block-start:3px solid var(--line)}
.funnel .card:nth-child(1){border-block-start-color:var(--teal)}
.funnel .card:nth-child(2){border-block-start-color:var(--yellow)}
.funnel .card:nth-child(3){border-block-start-color:var(--orange)}
.funnel .card:nth-child(4){border-block-start-color:var(--blue)}
.card-hi{background:linear-gradient(180deg,#fff,#FBF7F5)}
.card-hi .card-num{color:var(--orange)}

.note{
  margin-block-start:26px;padding:20px 24px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--line);
  border-inline-start:4px solid var(--teal-d);color:var(--ink-2);font-size:1rem;
}
.note strong{color:var(--purple);font-weight:600}
.note-strong{border-inline-start-color:var(--orange);background:#FFF9F7;border-color:#F6E0D8}

/* ---------- 9. الخطوات ---------- */
.steps{display:grid;gap:0;counter-reset:s;position:relative}
.step{display:flex;gap:22px;padding-block:24px;border-block-end:1px solid var(--line)}
.step:last-child{border-block-end:0}
.step-n{
  flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);color:var(--purple);
  font-family:var(--font-lat);font-weight:700;font-size:16px;box-shadow:var(--shadow);
}
.step h3{font-size:1.25rem;margin-bottom:6px}
.step p{color:var(--muted);max-width:78ch;font-size:.99rem}
.step:hover .step-n{background:var(--purple);color:#fff;border-color:var(--purple)}

/* ---------- 10. الخدمات ---------- */
.card-srv{padding-block-start:26px}
.ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:18px;color:#fff;
}
.ico svg{width:24px;height:24px}
.ico[data-c="1"]{background:linear-gradient(140deg,#533F99,#7A62D0)}
.ico[data-c="2"]{background:linear-gradient(140deg,#2E9481,#6FC7B3)}
.ico[data-c="3"]{background:linear-gradient(140deg,#3C60AC,#6C8FDA)}
.ico[data-c="4"]{background:linear-gradient(140deg,#F04923,#FB8C4E)}
.ico[data-c="5"]{background:linear-gradient(140deg,#359A3E,#6BC46F)}
.ico[data-c="6"]{background:linear-gradient(140deg,#C9A400,#FDD700)}

/* ---------- 11. القطاعات ---------- */
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills li{
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:11px 22px;font-size:.97rem;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.06);transition:.22s;
}
.pills li:hover{background:rgba(255,255,255,.15);border-color:var(--teal);transform:translateY(-2px)}

/* ---------- 12. المعايير ---------- */
.rules{gap:16px}
.rule{display:flex;gap:14px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px}
.rule span{
  flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:700;background:#E9F6F2;color:var(--teal-d);margin-block-start:3px;
}
.rule:nth-child(3) span,.rule:nth-child(4) span,.rule:nth-child(5) span{background:#FDECE7;color:var(--orange)}
.rule p{font-size:.98rem;color:var(--muted);line-height:1.8}
.rule strong{color:var(--ink);font-weight:600}

/* ---------- 13. الأسئلة الشائعة ---------- */
.faq{display:grid;gap:12px}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq details[open]{border-color:#D5CBEE;box-shadow:var(--shadow)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 22px;font-family:var(--font-ar-head);
  font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:12px;
}
html[lang="en"] .faq summary{font-family:var(--font-lat)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-inline-start:auto;font-family:var(--font-lat);font-size:22px;
  font-weight:400;color:var(--purple);transition:transform .25s;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 22px 22px;color:var(--muted);font-size:.98rem}

/* ---------- 14. التواصل ---------- */
.section-contact{background:linear-gradient(170deg,var(--bg-alt),#EDE8F8)}
.section-contact .eyebrow{color:var(--purple)}
.section-contact .eyebrow::before{background:var(--orange)}
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:start}
.contact-list{margin-block-start:34px;display:grid;gap:20px}
.contact-list li{display:grid;gap:3px}
.ct-label{
  font-family:var(--font-lat);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--purple);
}
html[lang="ar"] .ct-label{font-family:var(--font-ar-head);letter-spacing:.02em;font-size:13px;text-transform:none}
.contact-list a{color:var(--ink);font-weight:500;transition:color .2s}
.contact-list a:hover{color:var(--purple)}
.contact-list span:not(.ct-label){color:var(--ink-2)}

.contact-form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;box-shadow:var(--shadow-lg);display:grid;gap:15px;
}
.contact-form h3{font-size:1.3rem}
.form-hint{color:var(--muted);font-size:.92rem;margin-block-start:-8px}
.contact-form label{display:grid;gap:7px;font-size:.93rem;color:var(--ink-2)}
.contact-form label em{color:var(--muted);font-style:normal;font-size:.86rem}
.contact-form input,.contact-form select,.contact-form textarea{
  font:inherit;font-size:.97rem;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;background:#FCFBFE;color:var(--ink);width:100%;transition:.2s;
}
.contact-form textarea{resize:vertical;min-height:82px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(83,63,153,.1);
}
.form-alt{font-size:.9rem;color:var(--muted);text-align:center}
.form-alt a{color:var(--purple);font-weight:500}

/* ---------- 15. التذييل ---------- */
.site-footer{background:var(--purple-dd);color:rgba(255,255,255,.78)}
.footer-inner{
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;
  padding-block:56px 40px;
}
.site-footer h4{font-size:1rem;color:#fff;margin-bottom:16px}
.f-brand img{height:56px;width:auto;margin-bottom:20px}
.f-brand p{font-size:.92rem;line-height:1.9;color:rgba(255,255,255,.6)}
.f-brand address{
  font-style:normal;display:grid;gap:4px;font-size:.92rem;line-height:1.9;
  color:rgba(255,255,255,.62);max-width:44ch;
}
.f-brand address strong{color:#fff;font-weight:600;font-family:var(--font-ar-head)}
html[lang="en"] .f-brand address strong{font-family:var(--font-lat)}
.f-brand address a{color:rgba(255,255,255,.78);transition:color .2s}
.f-brand address a:hover{color:var(--teal)}
.f-motto{margin-block-start:10px;color:var(--teal)!important;font-family:var(--font-ar-head);letter-spacing:.06em}
.f-nav,.f-contact{display:grid;gap:9px;align-content:start;font-size:.94rem}
.f-nav a,.f-contact a{color:rgba(255,255,255,.72);transition:color .2s;width:fit-content}
.f-nav a:hover,.f-contact a:hover{color:var(--teal)}
.f-contact p{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.8}
.socials{display:flex;gap:10px;margin-block-start:10px}
.socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);transition:.22s;
}
.socials a:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateY(-2px)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-block:20px 26px;border-block-start:1px solid rgba(255,255,255,.1);
  font-size:.85rem;color:rgba(255,255,255,.5);
}
.footer-bottom a{color:rgba(255,255,255,.72)}
.footer-bottom a:hover{color:var(--teal)}
.dev{font-family:var(--font-lat);letter-spacing:.02em}

/* ---------- 16. زر واتساب العائم ---------- */
.wa-float{
  position:fixed;inset-inline-end:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#1FA855;color:#fff;box-shadow:0 10px 28px rgba(31,168,85,.4);
  transition:transform .22s;
}
.wa-float:hover{transform:scale(1.08)}

/* ---------- 17. حركة الظهور ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 18. الاستجابة ---------- */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:38px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .f-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  :root{--header-h:74px}
  .brand img{height:46px}
  /* القائمة صارت منسدلة وخرجت من الصف — فالأزرار هي اللي بتنزاح للطرف الثاني */
  .header-actions{margin-inline-start:auto}
  .burger{display:flex}
  .nav{
    position:fixed;inset-block-start:var(--header-h);inset-inline:0;
    background:var(--white);flex-direction:column;gap:0;padding:8px 20px 20px;
    border-block-end:1px solid var(--line);box-shadow:0 20px 40px rgba(36,27,68,.12);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s;
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding-block:14px;border-block-end:1px solid var(--line);font-size:16px}
  .nav a:last-child{border-block-end:0}
  .nav a::after{display:none}
  .nav a.nav-cta{display:flex;margin-block-start:16px;color:#fff;justify-content:center;border-block-end:0}
  .header-actions .btn-sm{display:none}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .step{gap:16px}
  .step-n{flex-basis:38px;height:38px;font-size:14px}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;justify-content:center}
  .motto{gap:12px;font-size:13.5px}
  .hero-cta .btn{width:100%}
  .wa-float{width:50px;height:50px;inset-inline-end:14px;bottom:14px}
}