/* بيلد بلس — الإصدار 3: لوحة الألوان الجديدة (أبيض + كحلي، ولمسات أحمر غامق وتركوازي وذهبي) + شبكة البصمة التفاعلية */

/* لمسات ثانوية */
.eyebrow { color: var(--teal); }
.eyebrow::before { background: var(--amber); }
.hero .eyebrow { color: #7FD3CC; }
.hero .eyebrow::before { background: #E9B65C; }
.hero h1 span + span { color: #E9B65C; }
.hero-dots button i { background: #E9B65C; }
.svc-n { color: var(--amber); }
.svc::before { background: linear-gradient(270deg, var(--navy), var(--teal)); }
.feat i { background: var(--teal-l); color: var(--teal); }
.feat:nth-child(2) i { background: var(--red-l); color: var(--red); }
.feat:nth-child(3) i { background: var(--amber-l); color: var(--amber); }
.why-badge b { color: var(--red); }
.stat b { color: var(--navy); }
.stat:nth-child(2) b { color: var(--red); }
.stat:nth-child(3) b { color: var(--teal); }
.stat:nth-child(4) b { color: var(--amber); }
.step i { border-color: var(--teal); color: var(--teal); }
.step:hover i { background: var(--teal); color: #fff; }
.steps::before { background: repeating-linear-gradient(90deg, var(--teal) 0 8px, transparent 8px 16px); }
.link-arrow:hover { color: var(--teal); }
.prj-meta .gold { background: var(--teal); }
.note { background: var(--teal-l); border-color: var(--teal); color: #0B4D49; }
.deliv-card h3::before { background: var(--amber); }
.ticks li::before { border-color: var(--teal); }
.vsteps li::before { background: var(--teal-l); color: var(--teal); }
.olist li::before { background: var(--teal-l); color: var(--teal); }
.toc a::before { color: var(--amber); }
.article h2::after { background: linear-gradient(270deg, var(--red), var(--amber)); }
.read-progress i { background: linear-gradient(270deg, var(--red), var(--amber)); }
.post-cat { color: var(--red); }
.style-card-top span { color: var(--teal); }
.city-list b { color: var(--red); }
.ksa-dot { fill: var(--red); }
.ksa-pin:hover .ksa-dot, .ksa-pin.hot .ksa-dot { fill: var(--navy); }
.ksa svg polygon:first-of-type { fill: #EEF3F8; stroke: #C9D6E3; }
.share-btn:hover { border-color: var(--teal); color: var(--teal); }
.compare-handle i { background: var(--red); }
.faq summary::after { color: var(--red); }
.btn-gold:hover { background: var(--teal); }
.page-head { background: var(--sand); }
.page-head::before { background-image: linear-gradient(#DCE5EF 1px, transparent 1px), linear-gradient(90deg, #DCE5EF 1px, transparent 1px); }
.top { background: rgba(255, 255, 255, .94); }
.nav a.on { background: var(--gold-l); color: var(--navy); font-weight: 700; }
.foot { background: #0B2440; }
.foot a:hover { color: #E9B65C; }
.socials a:hover { background: var(--teal); }

/* شريط الدعوة: كحلي مع لمسة ذهبية */
.cta { background: var(--navy); }
.cta .btn-gold { background: #E9B65C; color: var(--ink); }
.cta .btn-gold:hover { background: #fff; color: var(--navy); }
.cta::after { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(233, 182, 92, .35); }
.side-card.dark, .article-cta { background: var(--navy); }

/* شبكة البصمة التفاعلية فوق الواجهة ورؤوس الصفحات وشريط الدعوة */
.net-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero .net-canvas { z-index: 1; }
.hero .wrap, .hero-dots, .hero-tag { z-index: 3; }
.page-head .net-canvas { z-index: 1; opacity: 1; }
.cta .net-canvas { z-index: 0; opacity: 1; }
.cta > *:not(.net-canvas) { z-index: 1; }
.page-head.has-net { background: var(--navy); color: #fff; }
.page-head.has-net::before { background-image: none; }
.page-head.has-net h1 { color: #fff; }
.page-head.has-net p, .page-head.has-net .crumbs { color: rgba(255, 255, 255, .78); }
@media (prefers-reduced-motion: reduce) { .net-canvas { opacity: .5; } }

/* بطاقات الخدمات مع الصور */
.svc.has-img { padding: 0 0 22px; }
.svc.has-img > *:not(.svc-img) { margin-inline: 22px; }
.svc-img { position: relative; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 18px; background: var(--sand); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.svc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17,55,90,.35), transparent 55%); }
.svc:hover .svc-img img { transform: scale(1.07); }
.svc.has-img .svc-n { margin-bottom: 10px; }
.svc.has-img::before { z-index: 2; }