/* ===========================================================
   بلنكو | نظام التصميم
   Blenco — Design system
   Palette: بنفسجي هوية الشعار + ذهبي دافئ (بريق النظافة)
   Type: El Messiri (display) + IBM Plex Sans Arabic (body)
   =========================================================== */

:root{
  --ink:#241633;          /* نص داكن / عناوين (بنفسجي معتم) */
  --ink-soft:#3D2A52;
  --muted:#6F6383;        /* نص ثانوي */
  --brand:#8B4FC0;        /* البنفسجي الأساسي — من الشعار */
  --brand-deep:#7040A0;   /* بنفسجي غامق — تدرّج الشعار */
  --brand-bright:#A96BE0; /* بنفسجي فاتح للإبراز */
  --sun:#F5B638;          /* ذهبي دافئ — بريق النظافة */
  --mist:#F4EEFB;         /* خلفية فاتحة بنفسجية */
  --mist-2:#F9F5FE;
  --paper:#FDFBFF;        /* أبيض شبه نقي */
  --line:#E7DCF4;         /* حدود */
  --wa:#25D366;           /* واتساب */
  --shadow:0 18px 40px -18px rgba(56,28,86,.30);
  --shadow-sm:0 6px 18px -10px rgba(56,28,86,.26);
  --r:16px; --r-lg:26px; --r-sm:10px;
  --container:1180px;
  --pill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:"El Messiri","IBM Plex Sans Arabic",serif; line-height:1.25; color:var(--ink); margin:0 0 .5em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
p{margin:0 0 1em}
.container{max-width:var(--container); margin-inline:auto; padding-inline:22px}
.muted{color:var(--muted)}
section{position:relative}

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:1rem; border:0;
  padding:.85rem 1.6rem; border-radius:var(--pill); transition:.22s ease;
  white-space:nowrap;
}
.btn svg{width:1.15em; height:1.15em}
.btn-wa{background:var(--wa); color:#fff; box-shadow:0 12px 24px -10px rgba(37,211,102,.6)}
.btn-wa:hover{transform:translateY(-2px); filter:brightness(1.04)}
.btn-call{background:var(--ink); color:#fff}
.btn-call:hover{background:var(--brand-deep); transform:translateY(-2px)}
.btn-brand{background:var(--brand); color:#fff; box-shadow:0 12px 24px -10px rgba(139,79,192,.55)}
.btn-brand:hover{background:var(--brand-deep); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-deep)}
.btn-lg{padding:1rem 2rem; font-size:1.08rem}

/* ---------- شريط علوي ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(251,254,253,.86);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:1.2rem; height:72px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:"El Messiri"; font-weight:700; font-size:1.45rem; color:var(--ink)}
.brand-logo{height:54px; width:auto; display:block}
.brand .mark{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-bright)); color:#fff;
  box-shadow:0 8px 18px -8px rgba(139,79,192,.7); flex:none;
}
.brand .mark svg{width:22px;height:22px}
.brand small{display:block; font-family:"IBM Plex Sans Arabic"; font-weight:500; font-size:.62rem; color:var(--muted); letter-spacing:.04em}
.nav-links{display:flex; gap:.3rem; margin-inline-start:auto}
.nav-links a{padding:.5rem .85rem; border-radius:var(--pill); font-weight:500; color:var(--ink-soft); transition:.18s}
.nav-links a:hover{background:var(--mist); color:var(--brand-deep)}
.nav-cta{display:flex; gap:.5rem; align-items:center}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:.4rem}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.25s}

/* ---------- البطل ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,5.5rem); background:
  radial-gradient(900px 500px at 88% -10%, rgba(169,107,224,.16), transparent 60%),
  radial-gradient(700px 480px at 5% 110%, rgba(112,64,160,.10), transparent 55%),
  var(--paper);
  overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; background:var(--mist); color:var(--brand-deep);
  font-weight:600; font-size:.85rem; padding:.4rem .9rem; border-radius:var(--pill); margin-bottom:1.1rem; border:1px solid var(--line)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(139,79,192,.18)}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem); letter-spacing:-.01em}
.hero h1 .hl{color:var(--brand); position:relative}
.hero h1 .hl::after{content:""; position:absolute; inset-inline:0; bottom:.08em; height:.28em;
  background:linear-gradient(90deg,rgba(245,182,56,.55),rgba(169,107,224,.45)); border-radius:6px; z-index:-1}
.hero-lead{font-size:1.15rem; color:var(--ink-soft); max-width:34rem; margin-bottom:1.6rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.4rem}
.trust-mini{display:flex; flex-wrap:wrap; gap:1.1rem; color:var(--muted); font-size:.9rem}
.trust-mini b{color:var(--ink)}
.trust-mini .ti{display:flex; align-items:center; gap:.4rem}
.trust-mini svg{width:1.05em;height:1.05em;color:var(--brand)}

/* بطاقة عرض السعر الفوري — العنصر المميّز */
.quote-card{
  background:linear-gradient(180deg,#fff,var(--mist-2)); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.quote-card::before{ /* لمعة قطرية خاطفة — تستقر خارج البطاقة تماماً ثم تمرّ بنعومة */
  content:""; position:absolute; top:-60%; inset-inline-start:0; width:34%; height:220%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:rotate(10deg); pointer-events:none;
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{
  0%,78%   {inset-inline-start:-60%; opacity:0}
  80%      {opacity:1}
  92%,100% {inset-inline-start:130%; opacity:0}
}

.quote-card h3{display:flex; align-items:center; gap:.5rem; font-size:1.25rem; margin-bottom:.2rem}
.quote-card h3 svg{width:1.2em;height:1.2em;color:var(--brand)}
.quote-card .qsub{color:var(--muted); font-size:.9rem; margin-bottom:1.1rem}
.field{margin-bottom:.9rem}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; color:var(--ink-soft)}
.field select,.field input,.field textarea{
  width:100%; font-family:inherit; font-size:1rem; padding:.8rem .9rem; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:.18s;
}
.field select:focus,.field input:focus,.field textarea:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(139,79,192,.12)}
.q-row{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.q-result{
  margin:.5rem 0 1rem; padding:.9rem 1.1rem; border-radius:var(--r-sm);
  background:var(--mist); border:1px dashed var(--brand); display:flex; align-items:baseline; justify-content:space-between;
}
.q-result .lbl{color:var(--ink-soft); font-size:.92rem}
.q-result .val{font-family:"El Messiri"; font-weight:700; font-size:1.7rem; color:var(--brand-deep)}
.q-result .val small{font-size:.8rem; color:var(--muted); font-weight:500}
.q-note{font-size:.78rem; color:var(--muted); margin-top:-.4rem}

/* ---------- العناوين القسمية ---------- */
.sec{padding:clamp(3rem,7vw,5rem) 0}
.sec-head{text-align:center; max-width:42rem; margin:0 auto clamp(2rem,4vw,3rem)}
.sec-eyebrow{color:var(--brand); font-weight:700; letter-spacing:.08em; font-size:.85rem; text-transform:uppercase; margin-bottom:.5rem; display:block}
.sec-head h2{font-size:clamp(1.7rem,4vw,2.6rem)}
.sec-head p{color:var(--muted); font-size:1.08rem; margin-top:.4rem}

/* ---------- شريط الوعود ---------- */
.promises{background:var(--ink); color:#fff; padding:clamp(2rem,4vw,2.6rem) 0}
.promises .container{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.promise{display:flex; gap:.8rem; align-items:flex-start}
.promise .ic{width:46px;height:46px;border-radius:12px; background:rgba(169,107,224,.15); color:var(--brand-bright);
  display:grid; place-items:center; flex:none}
.promise .ic svg{width:24px;height:24px}
.promise b{display:block; font-family:"El Messiri"; font-size:1.05rem}
.promise span{color:#a9c9c5; font-size:.88rem}

/* ---------- الخدمات ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.3rem}
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem;
  transition:.25s; position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.svc-card::after{content:""; position:absolute; inset-inline-start:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-bright)); transform:scaleX(0); transform-origin:right; transition:.3s}
.svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.svc-card:hover::after{transform:scaleX(1)}
.svc-ic{width:58px;height:58px;border-radius:16px; display:grid; place-items:center; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--mist),#fff); border:1px solid var(--line); color:var(--brand)}
.svc-ic svg{width:30px;height:30px}
.svc-card h3{font-size:1.3rem; margin-bottom:.4rem}
.svc-card p{color:var(--muted); font-size:.95rem; flex:1}
.svc-meta{display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line)}
.svc-price{font-weight:700; color:var(--brand-deep)}
.svc-price small{color:var(--muted); font-weight:500; font-size:.78rem}
.svc-link{display:inline-flex; align-items:center; gap:.35rem; color:var(--brand-deep); font-weight:600; font-size:.92rem}
.svc-link svg{width:1em;height:1em; transition:.2s}
.svc-card:hover .svc-link svg{transform:translateX(-4px)}

/* ---------- كيف نعمل ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:s}
.step{position:relative; padding:1.4rem; background:var(--mist-2); border-radius:var(--r); border:1px solid var(--line)}
.step::before{counter-increment:s; content:"0" counter(s); position:absolute; top:1rem; inset-inline-end:1.2rem;
  font-family:"El Messiri"; font-weight:700; font-size:2.2rem; color:var(--brand-bright); opacity:.5}
.step .st-ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--brand);margin-bottom:.8rem}
.step .st-ic svg{width:24px;height:24px}
.step b{display:block; font-family:"El Messiri"; font-size:1.1rem; margin-bottom:.3rem}
.step span{color:var(--muted); font-size:.9rem}

/* ---------- مناطق الخدمة ---------- */
.areas{background:linear-gradient(180deg,var(--mist-2),var(--paper))}
.area-chips{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:.5rem}
.chip{background:#fff; border:1px solid var(--line); padding:.55rem 1.1rem; border-radius:var(--pill);
  font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:.4rem}
.chip svg{width:1em;height:1em;color:var(--brand)}

/* ---------- التقييمات ---------- */
.reviews-track{display:flex; gap:1.2rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; scrollbar-width:thin}
.review{scroll-snap-align:start; min-width:min(360px,82vw); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.6rem}
.stars{color:var(--sun); margin-bottom:.7rem; letter-spacing:2px; font-size:1.05rem}
.review p{font-size:1rem; color:var(--ink-soft)}
.reviewer{display:flex; align-items:center; gap:.7rem; margin-top:1rem}
.reviewer .av{width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-bright));
  color:#fff; display:grid; place-items:center; font-family:"El Messiri"; font-weight:700; flex:none}
.reviewer b{display:block; font-size:.95rem}
.reviewer span{color:var(--muted); font-size:.82rem}

/* ---------- الأسئلة الشائعة ---------- */
.faq-wrap{max-width:760px; margin-inline:auto}
.faq{border:1px solid var(--line); border-radius:var(--r); margin-bottom:.8rem; background:#fff; overflow:hidden}
.faq summary{cursor:pointer; padding:1.1rem 1.3rem; font-weight:600; font-family:"El Messiri"; font-size:1.1rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand); font-size:1.5rem; font-weight:400; transition:.2s; flex:none}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 1.3rem 1.2rem; color:var(--muted)}

/* ---------- نموذج التواصل ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-sm)}
.contact-info{display:flex; flex-direction:column; gap:1rem}
.ci-row{display:flex; gap:.9rem; align-items:center; padding:1rem 1.1rem; background:var(--mist-2); border-radius:var(--r); border:1px solid var(--line)}
.ci-row .ic{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--brand);flex:none}
.ci-row .ic svg{width:22px;height:22px}
.ci-row b{display:block; font-size:.95rem}
.ci-row span,.ci-row a{color:var(--muted); font-size:.92rem}
.map-embed{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin-top:1rem; height:230px}
.map-embed iframe{width:100%;height:100%;border:0}
.form-note{padding:.9rem 1.1rem; border-radius:var(--r-sm); font-size:.92rem; margin-bottom:1rem}
.form-note.ok{background:#e7f6ef; color:#0a6b41; border:1px solid #b7e3cd}
.form-note.err{background:#fdeaea; color:#9a2222; border:1px solid #f3c4c4}

/* ---------- CTA كبير ---------- */
.cta-band{background:linear-gradient(135deg,var(--brand-deep),var(--brand)); color:#fff; border-radius:var(--r-lg);
  padding:clamp(2rem,5vw,3.2rem); text-align:center; position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; width:300px;height:300px; border-radius:50%;
  background:rgba(255,255,255,.08); top:-120px; inset-inline-start:-60px}
.cta-band::after{content:""; position:absolute; width:240px;height:240px; border-radius:50%;
  background:rgba(245,182,56,.18); bottom:-110px; inset-inline-end:-40px}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,4vw,2.4rem); position:relative}
.cta-band p{color:rgba(255,255,255,.9); position:relative; max-width:36rem; margin:.5rem auto 1.5rem}
.cta-band .hero-actions{justify-content:center; position:relative}
.cta-band .btn-call{background:#fff; color:var(--brand-deep)}
.cta-band .btn-call:hover{background:var(--ink); color:#fff}

/* ---------- التذييل ---------- */
.footer{background:var(--ink); color:#c5dcd9; padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem; margin-top:2rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem; margin-bottom:2rem}
.footer h4{color:#fff; font-size:1.1rem; margin-bottom:1rem}
.footer a{color:#a9c9c5; display:block; padding:.25rem 0; transition:.18s}
.footer a:hover{color:var(--brand-bright)}
.footer .f-brand{display:flex; align-items:center; gap:.6rem; color:#fff; font-family:"El Messiri"; font-size:1.4rem; margin-bottom:.8rem}
.footer .f-brand .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-bright));display:grid;place-items:center}
.footer .f-brand .mark svg{width:20px;height:20px;color:#fff}
.footer .f-desc{color:#9bbab6; font-size:.92rem; max-width:24rem}
.socials{display:flex; gap:.6rem; margin-top:1rem}
.socials a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;padding:0}
.socials a:hover{background:var(--brand)}
.socials svg{width:20px;height:20px;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:1.2rem; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem; font-size:.85rem; color:#7fa19d}

/* ---------- أزرار عائمة ---------- */
.floats{position:fixed; inset-inline-end:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; gap:.7rem}
.float-btn{width:56px;height:56px;border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow);
  transition:.2s; position:relative}
.float-btn:hover{transform:scale(1.08)}
.float-btn svg{width:28px;height:28px;color:#fff}
.float-wa{background:var(--wa)}
.float-call{background:var(--brand)}
.float-wa::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--wa); z-index:-1;
  animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}

/* ---------- صفحات داخلية (خدمة/مقال) ---------- */
.page-hero{background:
  radial-gradient(700px 380px at 90% -20%, rgba(169,107,224,.14), transparent 60%), var(--mist-2);
  padding:clamp(2rem,5vw,3.2rem) 0; border-bottom:1px solid var(--line)}
.breadcrumb{display:flex; gap:.5rem; align-items:center; color:var(--muted); font-size:.88rem; margin-bottom:1rem; flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand-deep)}
.breadcrumb svg{width:.9em;height:.9em;opacity:.6}
.prose{max-width:760px; margin-inline:auto; font-size:1.06rem; color:var(--ink-soft)}
.prose h2{font-size:1.6rem; margin:1.8rem 0 .6rem}
.prose h3{font-size:1.3rem; margin:1.4rem 0 .5rem}
.prose ul{padding-inline-start:1.4rem; margin:0 0 1rem}
.prose li{margin-bottom:.4rem}
.prose img{border-radius:var(--r); margin:1.2rem 0}
.post-cover{width:100%; max-height:420px; object-fit:cover; border-radius:var(--r-lg); margin-bottom:1.6rem}
.post-meta{color:var(--muted); font-size:.9rem; margin-bottom:1.2rem}

/* بطاقات مقالات */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem}
.post-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:.25s; display:flex; flex-direction:column}
.post-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.post-card .pc-img{height:180px; background:linear-gradient(135deg,var(--brand),var(--brand-bright)); display:grid;place-items:center}
.post-card .pc-img svg{width:48px;height:48px;color:rgba(255,255,255,.85)}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:1.3rem; flex:1; display:flex; flex-direction:column}
.post-card h3{font-size:1.2rem; margin-bottom:.4rem}
.post-card p{color:var(--muted); font-size:.92rem; flex:1}

/* ---------- استجابة الجوال ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .quote-card{order:2}
  .promises .container{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-cta .btn-call{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex; position:absolute; top:72px; inset-inline:0; flex-direction:column;
    background:var(--paper); padding:1rem; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  /* الجوال: زر المراسلة = شعار واتساب فقط (دائري) */
  .nav-cta .btn-wa{width:46px; height:46px; padding:0; border-radius:50%; justify-content:center; font-size:0; gap:0}
  .nav-cta .btn-wa svg{width:24px; height:24px}
  .brand-logo{height:46px}
}
@media(max-width:560px){
  .promises .container,.steps,.footer-grid{grid-template-columns:1fr}
  .q-row{grid-template-columns:1fr}
  .hero-actions .btn{flex:1; justify-content:center}
}

/* ---------- تقليل الحركة ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* تركيز واضح لإمكانية الوصول */
a:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand-bright); outline-offset:2px; border-radius:6px;
}

/* كتلة الدعوة داخل المقالات (يضيفها وكيل المحتوى تلقائياً) */
.post-cta{margin:2.2rem 0 0;padding:1.6rem 1.8rem;background:var(--mist);border:1px solid var(--line);border-inline-start:5px solid var(--brand);border-radius:16px}
.post-cta h3{font-family:"El Messiri";color:var(--ink);margin:0 0 .5rem;font-size:1.35rem}
.post-cta p{margin:.4rem 0;color:var(--ink);line-height:1.9}
.post-cta .btn{margin-top:.6rem}