/* =====================================================================
   Baderinfo pages (bi-) — نظام تصميم صفحات الخدمات · v2
   يُحمَّل تلقائياً فقط في الصفحات التي تحتوي class="bi".
   يرث ألوان القالب (--brand / --brand-2) ويدعم الوضع الليلي وRTL/LTR.
   ===================================================================== */
.bi{
  --bi-a:var(--cat-a,var(--brand,#0A6FD6)); --bi-b:var(--cat-b,var(--brand-2,#22D3EE)); --bi-c:var(--cat-c,#3EEBFD);
  --bi-navy:#041B33; --bi-navy-2:#07294D;
  --bi-ink:var(--ink,#0B1B2E); --bi-body:var(--body,#3A4A60); --bi-mut:var(--muted,#64748B);
  --bi-bg:var(--bg,#F7FAFD); --bi-bg-2:var(--bg-2,#EEF4FA); --bi-card:var(--surface,#fff);
  --bi-line:var(--line,#E3EAF3); --bi-line-2:var(--line-2,#D3DEEB); --bi-ok:#10B981;
  --bi-r:20px; --bi-r-lg:28px; --bi-wrap:1200px; --bi-gutter:clamp(16px,5vw,40px);
  --bi-shadow:0 1px 2px rgba(8,30,60,.05),0 8px 24px -12px rgba(8,30,60,.12);
  --bi-shadow-lg:0 24px 60px -24px rgba(8,30,60,.28);
  font-family:var(--font,'IBM Plex Sans Arabic','Readex Pro','Segoe UI',Tahoma,sans-serif);
  color:var(--bi-body); line-height:1.85; font-size:1.0625rem; box-sizing:border-box;
}
body.blr-dark .bi,html[data-blrdark="1"] .bi{
  --bi-ink:#EAF2FC; --bi-body:#C3D1E3; --bi-mut:#94A6BE; --bi-bg:#0A1424; --bi-bg-2:#0E1C31; --bi-card:#101F36;
  --bi-line:#1E3150; --bi-line-2:#2A4268; --bi-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
}
body:has(.bi){overflow-x:clip}
.bi *,.bi *::before,.bi *::after{box-sizing:border-box}
.bi h1,.bi h2,.bi h3{font-family:var(--font-head,'Readex Pro','IBM Plex Sans Arabic',sans-serif); color:var(--bi-ink); line-height:1.3; margin:0; letter-spacing:-.01em}
.bi p{margin:0}
.bi a{color:var(--bi-a); text-decoration:none}
.bi img{max-width:100%; height:auto; display:block}
.bi svg{flex:none}

/* المحتوى في المنتصف — والأقسام العريضة تمتد بعرض الشاشة */
.bi > .bi-sec,.bi > .bi-price,.bi > .bi-back,.bi > .bi-two{max-width:calc(var(--bi-wrap) + 2 * var(--bi-gutter)); margin-inline:auto; padding-inline:var(--bi-gutter)}
.bi > .bi-hero,.bi > .bi-cta,.bi > .bi-sec--alt{margin-inline:calc(50% - 50vw); width:100vw; max-width:100vw}
.bi > .bi-sec--alt{background:var(--bi-bg-2); padding:clamp(48px,7vw,88px) var(--bi-gutter); margin-block:0}
.bi > .bi-sec--alt > *{max-width:var(--bi-wrap); margin-inline:auto}
.bi > .bi-sec--alt > .bi-sec__head--c{max-width:760px}

/* ---------- مقدّمة الصفحة (Hero) ---------- */
.bi-hero{position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--bi-navy); margin-bottom:clamp(36px,5vw,64px)}
.bi-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 75% at 85% 0%,color-mix(in srgb,var(--bi-a) 85%,transparent) 0,transparent 60%),
             radial-gradient(45% 60% at 0% 100%,color-mix(in srgb,var(--bi-b) 45%,transparent) 0,transparent 60%),
             linear-gradient(160deg,var(--bi-navy) 0%,var(--bi-navy-2) 100%)}
.bi-hero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 75% 70% at 60% 35%,#000 25%,transparent 80%); mask-image:radial-gradient(ellipse 75% 70% at 60% 35%,#000 25%,transparent 80%)}
.bi-hero__in{max-width:calc(var(--bi-wrap) + 2 * var(--bi-gutter)); margin-inline:auto; padding:clamp(28px,5vw,56px) var(--bi-gutter) clamp(44px,6vw,80px);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,4vw,56px); align-items:center}
.bi-hero h1{color:#fff; font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.18; font-weight:800; margin-top:14px; text-wrap:balance}
.bi-lead{margin-top:16px; font-size:clamp(1rem,1.6vw,1.15rem); color:rgba(226,240,255,.86); max-width:62ch}
.bi-tag{display:inline-flex; align-items:center; gap:.5em; margin-top:18px; padding:.35em 1em; border-radius:999px; font-size:.85rem; font-weight:600; color:#DDF6FF; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16)}
.bi-tag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--bi-c)}
.bi-hero__art{position:relative}
.bi-hero__pts{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.95rem; color:rgba(226,240,255,.85)}
.bi-hero__pts li{display:inline-flex; align-items:center; gap:.5em}
.bi-hero__pts li::before{content:""; width:18px; height:18px; border-radius:6px; background:var(--bi-b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041B33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.bi-hero--slider{background:none; margin-bottom:clamp(36px,5vw,64px)}
.bi-hero--slider::before,.bi-hero--slider::after{display:none}
.bi-hero--slider .bi-bar{position:absolute; inset-inline:0; top:0; z-index:6}

/* شريط المسار واللغات */
.bi-bar{max-width:calc(var(--bi-wrap) + 2 * var(--bi-gutter)); margin-inline:auto; padding:18px var(--bi-gutter) 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.bi-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:.88rem; color:rgba(220,236,255,.75)}
.bi-crumbs a{color:rgba(220,236,255,.85)!important; padding:2px 6px; border-radius:8px; transition:background .2s,color .2s}
.bi-crumbs a:hover{background:rgba(255,255,255,.1); color:#fff!important}
.bi-crumbs i{font-style:normal; opacity:.45}
.bi-crumbs span{color:#fff; padding:2px 6px}
.bi-lang{display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.bi-lang a{padding:3px 12px; border-radius:999px; font-size:.82rem; color:#fff!important; opacity:.8}
.bi-lang a.on{background:#fff; color:var(--bi-navy)!important; opacity:1}
body.blr-trees .bi-lang{display:none}

/* صورة تفاعلية */
.bi-art{position:relative; perspective:1100px}
.bi-art__in{transform-style:preserve-3d; transition:transform .5s cubic-bezier(.22,.61,.36,1); will-change:transform}
.bi-art img{width:100%; max-height:440px; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(0,10,30,.45)); animation:bi-float 7s ease-in-out infinite}
.bi-art img.is-photo{object-fit:cover; aspect-ratio:4/3; border-radius:26px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); animation:none}
.bi-art::before{content:""; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.35),transparent 65%); filter:blur(30px); z-index:-1}
.bi-art::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:26px; background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 60%)}
@keyframes bi-float{50%{transform:translateY(-10px)}}

/* ---------- الأزرار ---------- */
.bi-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.bi-btn[hidden],.bi-form [hidden],.bi-cform [hidden]{display:none!important}
.bi-btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:50px; padding:0 1.6em; border-radius:999px; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-size:1rem; color:#fff!important; background:linear-gradient(135deg,var(--bi-a),var(--bi-b));
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--bi-a) 80%,transparent); transition:transform .2s,box-shadow .25s,filter .2s; text-decoration:none!important; white-space:nowrap}
.bi-btn:hover{transform:translateY(-2px); box-shadow:0 20px 38px -16px color-mix(in srgb,var(--bi-a) 90%,transparent)}
.bi-btn:disabled{opacity:.6; cursor:progress; transform:none}
.bi-btn--ghost{background:transparent; color:var(--bi-ink)!important; border:1.5px solid var(--bi-line-2); box-shadow:none}
.bi-btn--ghost:hover{border-color:var(--bi-a); color:var(--bi-a)!important; box-shadow:none}
.bi-hero .bi-btn--ghost,.bi-cta .bi-btn--ghost{color:#fff!important; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); backdrop-filter:blur(6px)}
.bi-hero .bi-btn--ghost:hover,.bi-cta .bi-btn--ghost:hover{background:#fff; color:var(--bi-navy)!important}

/* ---------- الأقسام ---------- */
.bi-sec{margin-block:clamp(44px,6vw,80px)}
.bi-sec__head{max-width:760px; margin-bottom:clamp(20px,3vw,32px)}
.bi-sec__head--c{text-align:center; margin-inline:auto}
.bi-eyebrow{display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; font-weight:700; color:var(--bi-a); letter-spacing:.02em; margin-bottom:8px}
.bi-eyebrow::before{content:""; width:22px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--bi-a),var(--bi-b))}
.bi-sec h2,.bi-sec > h2{font-size:clamp(1.55rem,3vw,2.25rem); font-weight:800}
.bi-sub{color:var(--bi-mut); margin-top:10px; font-size:1.02rem}

/* الشبكات والبطاقات */
.bi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.bi-grid--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.bi-card{position:relative; display:flex; flex-direction:column; gap:8px; background:var(--bi-card); border:1px solid var(--bi-line); border-radius:var(--bi-r);
  padding:24px; color:inherit!important; box-shadow:var(--bi-shadow); overflow:hidden; isolation:isolate;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
.bi-card::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0),color-mix(in srgb,var(--bi-b) 14%,transparent),transparent 60%)}
a.bi-card:hover{transform:translateY(-6px); box-shadow:var(--bi-shadow-lg); border-color:color-mix(in srgb,var(--bi-a) 35%,var(--bi-line))}
a.bi-card:hover::before,.bi-card--plain:hover::before{opacity:1}
.bi-card h3{font-size:1.15rem; font-weight:700}
.bi-card p{color:var(--bi-mut); font-size:.97rem; line-height:1.8}
.bi-more{margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:.45em; color:var(--bi-a); font-weight:700; font-size:.95rem}
.bi-more::after{content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .25s}
.bi-more:dir(rtl)::after{transform:scaleX(-1)}
a.bi-card:hover .bi-more::after{transform:translateX(4px)}
a.bi-card:hover .bi-more:dir(rtl)::after{transform:scaleX(-1) translateX(4px)}
.bi-ic{display:inline-grid; place-items:center; width:54px; height:54px; border-radius:16px; color:var(--bi-a); margin-bottom:6px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--bi-a) 12%,transparent),color-mix(in srgb,var(--bi-b) 18%,transparent)); transition:transform .3s,background .3s,color .3s}
.bi-ic svg{width:26px; height:26px}
a.bi-card:hover .bi-ic{background:linear-gradient(135deg,var(--bi-a),var(--bi-b)); color:#fff; transform:rotate(-6deg) scale(1.05)}
.bi-card--plain{box-shadow:none; background:color-mix(in srgb,var(--bi-card) 70%,transparent)}
.bi-sec--alt .bi-card--plain{background:var(--bi-card)}
.bi-num{font-family:var(--font-head,'Readex Pro',sans-serif); font-size:.85rem; font-weight:800; color:var(--bi-a); background:color-mix(in srgb,var(--bi-a) 10%,transparent); width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:6px}

/* بطاقات المجالات المميّزة (بنتو) */
.bi-bento{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.bi-bento > .bi-card{grid-column:span 4}
.bi-bento > .bi-card:nth-child(1){grid-column:span 8; background:linear-gradient(135deg,var(--bi-navy),var(--bi-navy-2)); border-color:transparent; color:#fff!important}
.bi-bento > .bi-card:nth-child(1) h3{color:#fff; font-size:1.45rem}
.bi-bento > .bi-card:nth-child(1) p{color:rgba(226,240,255,.82); max-width:52ch}
.bi-bento > .bi-card:nth-child(1) .bi-ic{background:rgba(255,255,255,.12); color:var(--bi-c)}
.bi-bento > .bi-card:nth-child(1) .bi-more{color:var(--bi-c)}
.bi-bento > .bi-card:nth-child(1)::after{content:""; position:absolute; inset-inline-end:-60px; bottom:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--bi-b) 50%,transparent),transparent 65%); z-index:-1}
.bi-bento > .bi-card:nth-child(7){grid-column:span 12}

/* القوائم */
.bi-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.bi-list li{position:relative; background:var(--bi-card); border:1px solid var(--bi-line); border-radius:14px; padding:13px 16px; padding-inline-start:50px; line-height:1.7; transition:border-color .25s,transform .25s}
.bi-list li:hover{border-color:color-mix(in srgb,var(--bi-a) 35%,var(--bi-line)); transform:translateY(-2px)}
.bi-list li::before{content:""; position:absolute; inset-inline-start:14px; top:14px; width:24px; height:24px; border-radius:8px; background:color-mix(in srgb,var(--bi-a) 12%,transparent)}
.bi-list li::after{content:""; position:absolute; inset-inline-start:22px; top:22px; width:8px; height:8px; border-radius:50%; background:var(--bi-a)}
.bi-list--check li::before{background:linear-gradient(135deg,var(--bi-a),var(--bi-b))}
.bi-list--check li::after{inset-inline-start:20px; top:20px; width:12px; height:12px; border-radius:0; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* مراحل العمل — خط زمني */
.bi-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; counter-reset:s; position:relative}
.bi-steps li{position:relative; background:var(--bi-card); border:1px solid var(--bi-line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:12px}
.bi-steps b{display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#fff; font-size:1.05rem; background:linear-gradient(135deg,var(--bi-a),var(--bi-b)); box-shadow:0 10px 22px -10px var(--bi-a)}
.bi-steps li:not(:last-child)::after{content:""; position:absolute; top:41px; inset-inline-start:calc(20px + 52px); inset-inline-end:-16px; height:2px; background:repeating-linear-gradient(90deg,var(--bi-line-2) 0 6px,transparent 6px 12px)}

/* الأسئلة الشائعة */
.bi-faq{display:grid; gap:10px; max-width:900px}
.bi-faq details{background:var(--bi-card); border:1px solid var(--bi-line); border-radius:16px; padding:0 20px; transition:border-color .25s,box-shadow .25s}
.bi-faq details[open]{border-color:color-mix(in srgb,var(--bi-a) 35%,var(--bi-line)); box-shadow:var(--bi-shadow)}
.bi-faq summary{cursor:pointer; list-style:none; font-weight:700; color:var(--bi-ink); padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:12px}
.bi-faq summary::-webkit-details-marker{display:none}
.bi-faq summary::after{content:""; flex:none; width:30px; height:30px; border-radius:10px; background:color-mix(in srgb,var(--bi-a) 10%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6FD6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .3s}
.bi-faq details[open] summary::after{transform:rotate(45deg)}
.bi-faq p{color:var(--bi-mut); padding-bottom:18px; animation:bi-open .35s ease}
@keyframes bi-open{from{opacity:0; transform:translateY(-6px)}}

/* السعر */
.bi-price{position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 24px; padding:clamp(22px,4vw,36px);
  border-radius:var(--bi-r-lg); background:linear-gradient(135deg,color-mix(in srgb,var(--bi-a) 9%,var(--bi-card)),color-mix(in srgb,var(--bi-b) 12%,var(--bi-card))); border:1px solid color-mix(in srgb,var(--bi-a) 25%,var(--bi-line)); margin-block:clamp(40px,6vw,72px)}
.bi > .bi-price{max-width:var(--bi-wrap)}
.bi-price h2{font-size:1.4rem; grid-column:1}
.bi-price p{grid-column:1; color:var(--bi-mut)}
.bi-price .bi-btn{grid-column:2; grid-row:1 / span 2}

/* دعوة لاتخاذ إجراء */
.bi-cta{position:relative; isolation:isolate; overflow:hidden; text-align:center; color:#fff; padding:clamp(56px,8vw,96px) var(--bi-gutter); margin-top:clamp(48px,7vw,88px); margin-bottom:0; background:var(--bi-navy)}
.bi-cta::before{content:""; position:absolute; inset:-40%; z-index:-1; background:conic-gradient(from 180deg at 50% 50%,var(--bi-navy),color-mix(in srgb,var(--bi-a) 75%,var(--bi-navy)),var(--bi-navy),color-mix(in srgb,var(--bi-b) 50%,var(--bi-navy)),var(--bi-navy)); animation:bi-spin 22s linear infinite; opacity:.9}
.bi-cta::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 50% 50%,transparent,var(--bi-navy) 85%)}
@keyframes bi-spin{to{transform:rotate(360deg)}}
.bi-cta h2{color:#fff; font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; max-width:22ch; margin-inline:auto}
.bi-cta p{color:rgba(226,240,255,.85); margin:12px auto 0; max-width:56ch}
.bi-cta .bi-actions{justify-content:center}

.bi-back{margin-block:24px}
.bi-back a{display:inline-flex; align-items:center; gap:.4em; font-weight:600; padding:8px 14px; border-radius:12px; background:var(--bi-bg-2)}
.bi-two{display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(20px,4vw,40px); align-items:start}
.bi-two h2{font-size:1.5rem; margin-bottom:16px}
.bi-two > div{background:var(--bi-card); border:1px solid var(--bi-line); border-radius:var(--bi-r-lg); padding:clamp(20px,3vw,32px); box-shadow:var(--bi-shadow)}
.bi-two .bi-btn--ghost{margin-top:14px}
.bi-two .bi-sub{margin:16px 0 0}
.bi-empty,.bi-placeholder{border:1.5px dashed var(--bi-line-2); border-radius:18px; padding:28px; text-align:center; color:var(--bi-mut); background:var(--bi-card)}

/* ---------- بيانات التواصل ---------- */
.bi-cinfo{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.bi-cinfo a,.bi-cinfo li > div{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; border:1px solid var(--bi-line); background:var(--bi-bg); color:inherit!important; transition:border-color .25s,transform .25s}
.bi-cinfo a:hover{border-color:var(--bi-a); transform:translateY(-2px)}
.bi-cinfo__ic{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--bi-a),var(--bi-b))}
.bi-cinfo small{display:block; color:var(--bi-mut); font-size:.82rem}
.bi-cinfo b{color:var(--bi-ink); font-weight:700}
.bi-map{margin-top:14px; border-radius:18px; overflow:hidden; border:1px solid var(--bi-line)}
.bi-map iframe{display:block; width:100%; height:300px; border:0}

/* ---------- النماذج ---------- */
.bi-form{position:relative; background:var(--bi-card); border:1px solid var(--bi-line); border-radius:var(--bi-r-lg); padding:clamp(20px,3.5vw,40px); box-shadow:var(--bi-shadow)}
.bi-two .bi-form{border:0; padding:0; box-shadow:none; background:transparent}
.bi-sec > .bi-form--request{max-width:920px; margin-inline:auto}
.bi-form__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.bi-field{display:flex; flex-direction:column; gap:7px; margin:0; min-width:0; border:0; padding:0}
.bi-field--full{grid-column:1 / -1}
.bi-field > span,.bi-field > legend{font-weight:600; font-size:.93rem; color:var(--bi-ink)}
.bi-field i{color:#E5484D; font-style:normal}
.bi-field input,.bi-field select,.bi-field textarea{width:100%; font:inherit; font-size:1rem; color:var(--bi-ink); background:var(--bi-bg); border:1.5px solid var(--bi-line); border-radius:14px; padding:12px 14px; transition:border-color .2s,box-shadow .2s,background .2s; min-height:50px}
.bi-field textarea{resize:vertical; min-height:120px; line-height:1.7}
.bi-field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:18px; background-position:left 14px center; padding-inline-end:42px}
.bi-field select:dir(ltr){background-position:right 14px center}
.bi-field input:focus,.bi-field select:focus,.bi-field textarea:focus{outline:none; border-color:var(--bi-a); background:var(--bi-card); box-shadow:0 0 0 4px color-mix(in srgb,var(--bi-a) 16%,transparent)}
.bi-field.is-bad input,.bi-field.is-bad select,.bi-field.is-bad textarea{border-color:#E5484D; box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.bi-err{color:#E5484D; font-size:.84rem}
.bi-field--service select{font-size:1.05rem; font-weight:600; min-height:56px}
.bi-checks > div{display:flex; flex-wrap:wrap; gap:8px}
.bi-chip{position:relative; cursor:pointer}
.bi-chip input{position:absolute; opacity:0; pointer-events:none}
.bi-chip span{display:inline-flex; align-items:center; gap:.4em; padding:8px 14px; border-radius:999px; border:1.5px solid var(--bi-line); background:var(--bi-bg); font-size:.93rem; transition:all .2s}
.bi-chip:hover span{border-color:var(--bi-a)}
.bi-chip input:checked + span{background:linear-gradient(135deg,var(--bi-a),var(--bi-b)); border-color:transparent; color:#fff}
.bi-chip input:focus-visible + span{box-shadow:0 0 0 4px color-mix(in srgb,var(--bi-a) 25%,transparent)}
.bi-form__foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:22px}
.bi-form--request .bi-form__foot{justify-content:flex-end; border-top:1px solid var(--bi-line); padding-top:20px}
.bi-form__msg{display:flex; align-items:center; gap:8px; font-weight:600}
.bi-form__msg:empty{display:none}
.bi-form__msg.is-ok{color:var(--bi-ok)}
.bi-form__msg.is-err{color:#E5484D}
.bi-form--request > .bi-form__msg{margin-top:14px}
.bi-hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.bi-progress{list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px; counter-reset:p}
.bi-progress li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--bi-bg); border:1px solid var(--bi-line); color:var(--bi-mut); font-weight:600; font-size:.92rem; transition:all .3s}
.bi-progress b{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:10px; background:var(--bi-line); color:var(--bi-mut); transition:all .3s}
.bi-progress li.is-on{color:var(--bi-ink); border-color:color-mix(in srgb,var(--bi-a) 35%,var(--bi-line))}
.bi-progress li.is-on b{background:linear-gradient(135deg,var(--bi-a),var(--bi-b)); color:#fff}
.bi-progress li.is-done b{font-size:0}
.bi-progress li.is-done b::after{content:"✓"; font-size:1rem}
.bi-step{display:none; animation:bi-open .4s ease}
.bi-step.is-on{display:block}
.bi-svc-note{margin-top:12px; color:var(--bi-mut); font-size:.92rem}
.bi-svc-note span{color:var(--bi-ok); font-weight:800}
.bi-done{text-align:center; padding:30px 10px}
.bi-done__ic{display:inline-grid; place-items:center; width:84px; height:84px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--bi-ok),#34D399); box-shadow:0 18px 40px -14px var(--bi-ok); animation:bi-pop .5s cubic-bezier(.34,1.56,.64,1)}
.bi-done h3{margin-top:18px; font-size:1.25rem}
@keyframes bi-pop{from{transform:scale(.4); opacity:0}}
.bi-skel{height:52px; border-radius:14px; margin-bottom:14px; background:linear-gradient(90deg,var(--bi-bg-2),var(--bi-bg),var(--bi-bg-2)); background-size:200% 100%; animation:bi-sk 1.2s linear infinite}
.bi-skel--s{width:40%}
@keyframes bi-sk{to{background-position:-200% 0}}

/* ---------- المقالات / المنتجات / الأعمال ---------- */
.bi-card--post,.bi-card--product{padding:0; gap:0}
.bi-card--post > *:not(.bi-thumb),.bi-card--product > *:not(.bi-thumb){margin-inline:20px}
.bi-card--post .bi-more,.bi-card--product .bi-more{margin-bottom:20px}
.bi-thumb{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bi-bg-2); margin-bottom:16px}
.bi-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1)}
a.bi-card:hover .bi-thumb img{transform:scale(1.06)}
.bi-thumb-ph{position:absolute; inset:0; background:linear-gradient(135deg,var(--bi-a),var(--bi-b)); opacity:.25}
.bi-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.83rem; color:var(--bi-mut); margin-bottom:6px}
.bi-meta i{font-style:normal; color:var(--bi-a); background:color-mix(in srgb,var(--bi-a) 10%,transparent); padding:2px 10px; border-radius:999px; font-weight:600}
.bi-price-tag{font-weight:800; color:var(--bi-ink); margin-top:4px}
.bi-price-tag del{opacity:.5; font-weight:500}
.bi-sale{position:absolute; top:12px; inset-inline-start:12px; font-style:normal; background:#E5484D; color:#fff; font-weight:800; padding:2px 10px; border-radius:999px}
.bi-portfolio{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.bi-work{position:relative; display:block; border-radius:var(--bi-r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--bi-bg-2); color:#fff!important; box-shadow:var(--bi-shadow)}
.bi-work__img,.bi-work__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.bi-work:hover .bi-work__img img{transform:scale(1.07)}
.bi-work__cap{position:absolute; inset:auto 0 0; padding:22px; background:linear-gradient(transparent,rgba(4,27,51,.92)); transform:translateY(30%); transition:transform .4s}
.bi-work:hover .bi-work__cap{transform:none}
.bi-work__cap h3{color:#fff; font-size:1.2rem}
.bi-work__cap p{color:rgba(226,240,255,.85); font-size:.93rem; margin-top:6px}
.bi-work__cap .bi-more{color:var(--bi-c)}

/* ---------- ظهور تدريجي ---------- */
.bi-rv{opacity:0; transform:translateY(24px)}
.bi-rv.is-in{opacity:1; transform:none; transition:opacity .7s ease var(--d,0ms),transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
a.bi-card.bi-rv.is-in:hover{transform:translateY(-6px); transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}

/* ---------- الاستجابة ---------- */
@media (max-width:980px){
  .bi-hero__in{grid-template-columns:1fr}
  .bi-hero__art{order:-1; max-width:440px; width:88%; margin-inline:auto}
  .bi-art img{max-height:300px}
  .bi-bento > .bi-card,.bi-bento > .bi-card:nth-child(1){grid-column:span 6}
  .bi-bento > .bi-card:nth-child(1){grid-column:span 12}
  .bi-steps li::after{display:none}
}
@media (max-width:760px){
  .bi{font-size:1rem}
  .bi-two,.bi-form__grid{grid-template-columns:1fr}
  .bi-bento > .bi-card{grid-column:span 12!important}
  .bi-price{grid-template-columns:1fr}
  .bi-price .bi-btn{grid-column:1; grid-row:auto; justify-self:start}
  .bi-progress span{display:none}
  .bi-progress li{justify-content:center}
  .bi-actions .bi-btn{flex:1 1 auto}
  .bi-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .bi *,.bi *::before,.bi *::after{animation:none!important; transition:none!important}
  .bi-rv{opacity:1; transform:none}
}
@media print{
  .bi-hero,.bi-cta{color:#000; background:none}
  .bi-hero::before,.bi-hero::after,.bi-cta::before,.bi-cta::after,.bi-art,.bi-actions,.bi-form{display:none}
  .bi-hero h1,.bi-cta h2{color:#000}
}

/* BI-ICONS:START — مولَّد تلقائياً من build_site.py */
.bi-ic > i{display:block; width:26px; height:26px; background:currentColor; -webkit-mask:var(--bi-i) center/contain no-repeat; mask:var(--bi-i) center/contain no-repeat}
.bi-ic--globe{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a14%2014%200%200%201%200%2018M12%203a14%2014%200%200%200%200%2018%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--phone{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%222.5%22%20width%3D%2210%22%20height%3D%2219%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M11%2018h2%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--receipt{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18l-3-2-3%202-3-2-3%202z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h3%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--palette{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018c1.2%200%202-.8%202-1.8%200-1.2-1-1.6-1-2.7%200-1%20.8-1.5%201.8-1.5H17a4%204%200%200%200%204-4C21%206.6%2017%203%2012%203z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2211%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%227%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%227%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--megaphone{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l7%204V6L7%2010H4a1%201%200%200%200-1%201z%22%2F%3E%3Cpath%20d%3D%22M18%209a4%204%200%200%201%200%206M7%2014l1.5%205h2.5l-1-4.2%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--puzzle{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204a2%202%200%201%201%204%200v1h4a1%201%200%200%201%201%201v4h-1a2%202%200%201%200%200%204h1v4a1%201%200%200%201-1%201h-4v-1a2%202%200%201%200-4%200v1H6a1%201%200%200%201-1-1v-4h1a2%202%200%201%200%200-4H5V6a1%201%200%200%201%201-1h4z%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--rocket{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204.5c2.5-1.2%205.5-1.5%205.5-1.5s-.3%203-1.5%205.5L13%2014l-3-3z%22%2F%3E%3Cpath%20d%3D%22M10%2011l-4%20.5L3.5%2014l4%201M13%2014l-.5%204L10%2020.5l-1-4%22%2F%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%228.5%22%20r%3D%221.3%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--spark{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8z%22%2F%3E%3Cpath%20d%3D%22M19%2015l.7%202%202%20.7-2%20.7-.7%202-.7-2-2-.7%202-.7z%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--grid{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%223.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%2213.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--cart{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M2.5%203h3l2.4%2012h11l2-8H6.6%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--pen{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22%2F%3E%3Cpath%20d%3D%22M13.5%206.5l4%204%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--image{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M21%2016l-5-5-9%209%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--info{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--mail{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3.5%206.5l8.5%206.5%208.5-6.5%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--box{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207.5L12%203l9%204.5v9L12%2021l-9-4.5z%22%2F%3E%3Cpath%20d%3D%22M3%207.5l9%204.5%209-4.5M12%2012v9%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--download{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12M7%2010l5%205%205-5%22%2F%3E%3Cpath%20d%3D%22M4%2017v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--shield{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%204.5-3.4%208-8%209-4.6-1-8-4.5-8-9V6z%22%2F%3E%3Cpath%20d%3D%22M8.5%2012l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--clock{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--chat{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8M8%2013h5%22%2F%3E%3C%2Fsvg%3E")}
.bi-ic--layers{--bi-i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22%2F%3E%3C%2Fsvg%3E")}
/* BI-ICONS:END */

/* =====================================================================
   v4.2 — نموذج الطلب المفصّل (5 خطوات + مراجعة)
   ===================================================================== */
.bi-progress--5 li{padding:9px 10px; font-size:.86rem}
.bi-progress--5 li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:1100px){.bi-progress--5 span{display:none}.bi-progress--5 li{justify-content:center}}
.bi-form__count{margin-inline-end:auto; color:var(--bi-mut); font-size:.88rem; font-weight:600}
.bi-draft{margin:-10px 0 18px; padding:9px 14px; border-radius:12px; background:color-mix(in srgb,var(--bi-a) 8%,var(--bi-card)); color:var(--bi-a); font-size:.9rem; font-weight:600}
.bi-optin{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; border:1.5px solid color-mix(in srgb,var(--bi-a) 22%,var(--bi-line)); background:linear-gradient(135deg,color-mix(in srgb,var(--bi-a) 6%,var(--bi-card)),var(--bi-card)); cursor:pointer; flex-direction:row}
.bi-optin input{width:20px; height:20px; min-height:0; margin-top:3px; accent-color:var(--bi-a); flex:none; padding:0}
.bi-optin span{display:grid; gap:2px; font-weight:500; color:var(--bi-ink); font-size:.95rem}
.bi-optin small{color:var(--bi-mut); font-weight:400; font-size:.85rem}
.bi-optin--req{margin-top:16px; border-style:dashed}
.bi-optin.is-bad{border-color:#E5484D; box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.bi-acc-note{margin:0; padding:12px 16px; border-radius:14px; background:color-mix(in srgb,var(--bi-ok) 9%,var(--bi-card)); color:var(--bi-ink); font-weight:600; font-size:.93rem}
.bi-review__sub{color:var(--bi-mut); margin:0 0 14px}
.bi-review{display:grid; gap:12px}
.bi-review__b{border:1px solid var(--bi-line); border-radius:16px; overflow:hidden; background:var(--bi-card)}
.bi-review__b header{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 16px; background:linear-gradient(90deg,color-mix(in srgb,var(--bi-a) 9%,var(--bi-card)),var(--bi-card))}
.bi-review__b header strong{color:var(--bi-ink)}
.bi-review__edit{border:0; background:none; font:inherit; color:var(--bi-a); font-weight:700; cursor:pointer; padding:4px 8px; border-radius:8px}
.bi-review__edit:hover{background:color-mix(in srgb,var(--bi-a) 10%,transparent)}
.bi-review dl{margin:0; padding:4px 16px 10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0 20px}
.bi-review dl div{padding:8px 0; border-bottom:1px dashed var(--bi-line); min-width:0}
.bi-review dt{color:var(--bi-mut); font-size:.82rem; font-weight:600}
.bi-review dd{margin:0; color:var(--bi-ink); white-space:pre-wrap; word-break:break-word; font-size:.95rem}
.bi-review .is-empty dd{color:var(--bi-mut); font-style:italic}
.bi-done__num{margin:10px 0 0; color:var(--bi-mut)}
.bi-done__num b{color:var(--bi-ink); font-size:1.15rem; letter-spacing:.04em}
.bi-done__note{max-width:46ch; margin:12px auto 0; color:var(--bi-body)}
.bi-done .bi-btn{margin-top:18px}

/* =====================================================================
   v4.2 — ألوان متدرّجة لكل صنف وخدمة (قريبة من لون الموقع)
   كل صنف رئيسي له لونان (--cat-a / --cat-b)، وكل خدمة داخل الصنف تأخذ درجة قريبة منه.
   لتغيير لون صنف: عدّل سطره هنا فقط.
   ===================================================================== */
body.bi-cat-web-design,.bi-card[href*="/services/web-design"]{--cat-a:#0A6FD6; --cat-b:#22D3EE}
body.bi-cat-apps,.bi-card[href*="/services/apps"]{--cat-a:#4F46E5; --cat-b:#38BDF8}
body.bi-cat-management-software,.bi-card[href*="/services/management-software"]{--cat-a:#0E7490; --cat-b:#2DD4BF}
body.bi-cat-graphic-design,.bi-card[href*="/services/graphic-design"]{--cat-a:#7C3AED; --cat-b:#A5B4FC}
body.bi-cat-digital-marketing,.bi-card[href*="/services/digital-marketing"]{--cat-a:#0369A1; --cat-b:#34D399}
body.bi-cat-wordpress-plugins,.bi-card[href*="/services/wordpress-plugins"]{--cat-a:#1D4ED8; --cat-b:#60A5FA}
body.bi-cat-landing-pages,.bi-card[href*="/services/landing-pages"]{--cat-a:#0891B2; --cat-b:#67E8F9}

.bi .bi-card,.bi .bi-steps li,.bi .bi-price{--bi-a:var(--cat-a,var(--brand,#0A6FD6)); --bi-b:var(--cat-b,var(--brand-2,#22D3EE))}
/* درجة مختلفة قليلاً لكل خدمة داخل الشبكة */
.bi .bi-grid > .bi-card:nth-child(4n+2){--bi-a:color-mix(in oklab,var(--cat-a,#0A6FD6) 80%,var(--cat-b,#22D3EE))}
.bi .bi-grid > .bi-card:nth-child(4n+3){--bi-a:color-mix(in oklab,var(--cat-a,#0A6FD6) 84%,#6D28D9); --bi-b:color-mix(in oklab,var(--cat-b,#22D3EE) 80%,#A78BFA)}
.bi .bi-grid > .bi-card:nth-child(4n+4){--bi-a:color-mix(in oklab,var(--cat-a,#0A6FD6) 84%,#0F766E); --bi-b:color-mix(in oklab,var(--cat-b,#22D3EE) 80%,#5EEAD4)}
/* بطاقات بخلفية متدرّجة باهتة وخط علوي ملوّن */
.bi a.bi-card{background:linear-gradient(165deg,color-mix(in srgb,var(--bi-a) 8%,var(--bi-card)) 0%,var(--bi-card) 58%); border-color:color-mix(in srgb,var(--bi-a) 14%,var(--bi-line)); overflow:hidden}
.bi a.bi-card::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--bi-a),var(--bi-b)); opacity:.75; transition:opacity .3s}
.bi a.bi-card:hover::after{opacity:1}
.bi a.bi-card .bi-ic{background:linear-gradient(135deg,color-mix(in srgb,var(--bi-a) 14%,var(--bi-card)),color-mix(in srgb,var(--bi-b) 16%,var(--bi-card)))}
.bi .bi-card h3{transition:color .25s}
.bi a.bi-card:hover h3{color:color-mix(in srgb,var(--bi-a) 85%,var(--bi-ink))}
.bi .bi-bento > a.bi-card:nth-child(1){background:linear-gradient(135deg,var(--bi-navy),color-mix(in srgb,var(--bi-a) 45%,var(--bi-navy-2)))}
body.blr-dark .bi a.bi-card,html[data-blrdark="1"] .bi a.bi-card{background:linear-gradient(165deg,color-mix(in srgb,var(--bi-a) 14%,var(--bi-card)) 0%,var(--bi-card) 60%)}

/* ===================== 4.3: الميزانية بالعملة، المرفقات، نموذج الاتصال ===================== */
.bi-money{display:flex; gap:8px}
.bi-money select:first-child{flex:1}
.bi-field .bi-money__cur{flex:none; width:auto; min-width:86px; font-weight:700; direction:ltr; text-align:center; background:color-mix(in srgb,var(--bi-a) 8%,var(--bi-bg)); color:var(--bi-a); border-color:color-mix(in srgb,var(--bi-a) 25%,var(--bi-line))}

/* المرفقات */
.bi-up{gap:10px}
.bi-up__t{font-weight:600; font-size:.93rem; color:var(--bi-ink)}
.bi-up__drop{display:flex; align-items:center; gap:14px; padding:18px; border:1.5px dashed color-mix(in srgb,var(--bi-a) 40%,var(--bi-line-2)); border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--bi-a) 5%,var(--bi-bg)),color-mix(in srgb,var(--bi-b) 6%,var(--bi-bg))); cursor:pointer; transition:border-color .2s,background .2s,transform .2s}
.bi-up__drop:hover,.bi-up__drop.is-over{border-color:var(--bi-a); background:color-mix(in srgb,var(--bi-a) 10%,var(--bi-bg)); transform:translateY(-1px)}
.bi-up__ic{flex:none; display:grid; place-items:center; width:50px; height:50px; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--bi-a),var(--bi-b)); box-shadow:0 8px 20px -8px var(--bi-a)}
.bi-up__txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.bi-up__txt b{font-weight:600; color:var(--bi-ink)}
.bi-up__txt u{color:var(--bi-a); text-decoration:none; border-bottom:1.5px solid currentColor}
.bi-up__txt small{color:var(--bi-mut); font-size:.83rem; line-height:1.6}
.bi-up__list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.bi-up__list:empty{display:none}
.bi-up__it{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--bi-line); border-radius:14px; background:var(--bi-card); animation:bi-open .3s ease}
.bi-up__ext{flex:none; display:grid; place-items:center; min-width:46px; height:34px; border-radius:10px; font-size:.72rem; font-weight:800; letter-spacing:.03em; color:var(--bi-a); background:color-mix(in srgb,var(--bi-a) 12%,var(--bi-card))}
.bi-up__n{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.bi-up__n b{font-weight:600; color:var(--bi-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.93rem}
.bi-up__n small{color:var(--bi-mut); font-size:.8rem}
.bi-up__bar{display:block; height:4px; border-radius:4px; background:var(--bi-line); overflow:hidden}
.bi-up__bar i{display:block; height:100%; width:4%; background:linear-gradient(90deg,var(--bi-a),var(--bi-b)); transition:width .2s}
.bi-up__it.is-ok .bi-up__bar{display:none}
.bi-up__it.is-ok .bi-up__ext{color:#fff; background:linear-gradient(135deg,var(--bi-a),var(--bi-b))}
.bi-up__it.is-err{border-color:#F5B5B7; background:color-mix(in srgb,#E5484D 6%,var(--bi-card))}
.bi-up__it.is-err small{color:#D93036; font-weight:600}
.bi-up__it.is-err .bi-up__bar{display:none}
.bi-up__x{flex:none; width:32px; height:32px; border-radius:10px; border:0; background:var(--bi-bg-2); color:var(--bi-mut); font-size:1.3rem; line-height:1; cursor:pointer}
.bi-up__x:hover{background:#E5484D; color:#fff}

/* نموذج الاتصال الحديث */
.bi-cform__body{display:flex; flex-direction:column; gap:20px}
.bi-cform__head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.bi-cform__badge{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--bi-ink); background:var(--bi-bg-2); padding:7px 13px; border-radius:999px}
.bi-cform__badge i{width:8px; height:8px; border-radius:50%; background:var(--bi-ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--bi-ok) 22%,transparent); animation:bi-pulse 2s infinite}
@keyframes bi-pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--bi-ok) 0%,transparent)}}
.bi-cform__wa{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:#fff!important; background:linear-gradient(135deg,#16A34A,#25D366); padding:8px 14px; border-radius:999px; box-shadow:0 8px 20px -10px #16A34A}
.bi-cform__wa svg{width:18px; height:18px}
.bi-topics{border:0; margin:0; padding:0; min-width:0}
.bi-topics legend{font-weight:600; font-size:.93rem; color:var(--bi-ink); margin-bottom:10px; padding:0}
.bi-topics > div{display:flex; flex-wrap:wrap; gap:8px}
.bi-topic input,.bi-seg__o input{position:absolute; opacity:0; pointer-events:none}
.bi-topic span{display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border:1.5px solid var(--bi-line); border-radius:14px; background:var(--bi-bg); color:var(--bi-body); font-weight:600; font-size:.93rem; cursor:pointer; transition:all .2s}
.bi-topic span svg{color:var(--bi-mut); transition:color .2s}
.bi-topic:hover span{border-color:color-mix(in srgb,var(--bi-a) 40%,var(--bi-line))}
.bi-topic input:checked + span{border-color:var(--bi-a); color:var(--bi-a); background:color-mix(in srgb,var(--bi-a) 8%,var(--bi-card)); box-shadow:0 6px 16px -10px var(--bi-a)}
.bi-topic input:checked + span svg{color:var(--bi-a)}
.bi-topic input:focus-visible + span,.bi-seg__o input:focus-visible + span{outline:2px solid var(--bi-a); outline-offset:2px}
.bi-seg > div{display:flex; padding:4px; gap:4px; background:var(--bi-bg); border:1.5px solid var(--bi-line); border-radius:14px; min-height:50px}
.bi-seg__o{flex:1; position:relative; display:flex}
.bi-seg__o span{flex:1; display:grid; place-items:center; padding:8px 6px; border-radius:10px; font-weight:600; font-size:.9rem; color:var(--bi-mut); cursor:pointer; transition:all .2s; text-align:center}
.bi-seg__o input:checked + span{background:var(--bi-card); color:var(--bi-a); box-shadow:0 2px 8px -2px rgba(7,26,51,.18)}
.bi-field--msg{position:relative}
.bi-count{align-self:flex-end; font-size:.78rem; color:var(--bi-mut); direction:ltr}
.bi-count.is-ok{color:var(--bi-ok)}
.bi-cform__foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:0}
.bi-cform__privacy{margin:0; color:var(--bi-mut); font-size:.83rem; flex:1 1 220px; display:flex; align-items:center; gap:6px}
.bi-cform__privacy::before{content:""; flex:none; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.bi-btn--send{min-width:180px; justify-content:center}
.bi-btn--send span{transition:transform .2s}
.bi-btn--send:hover span{transform:translateX(-4px)}
[dir=ltr] .bi-btn--send:hover span{transform:translateX(4px)}
.bi-done--contact{padding:20px 0}
.bi-done--contact .bi-btn{margin-top:6px}
@media (max-width:640px){
  .bi-up__drop{padding:14px; gap:10px}
  .bi-up__ic{width:42px; height:42px}
  .bi-topic span{padding:9px 12px; font-size:.88rem}
  .bi-btn--send{width:100%}
  .bi-money__cur{min-width:74px}
}