/*
 * موقع الشركة العميلة: قالبان بنفس البنية.
 * "طاقة" (power): داكن بلمعة لون الشركة ومسارات كهرباء. "مخطط هندسي" (blueprint): لوحات مرقّمة فاتحة وواجهة ليلية.
 * الألوان من هوية الشركة: --brand ودرجاته (--b50..--b950) واللون الثاني (--c50..--c950)، و--on-brand لنص الأزرار.
 */

/* ===== متغيرات القالبين ===== */
[data-theme="power"] {
  --bg: #0e0f10; --bg-2: #131416; --card: #17181a; --card-2: #1e2023; --line: rgba(255, 255, 255, .08); --line-2: #34373c;
  --text: #ebe7e1; --muted: #a2a5aa; --head: #fff; --steel: #7b8087;
  --pri: var(--brand); --pri-2: var(--b400); --pri-3: var(--b300); --pri-dim: color-mix(in oklab, var(--brand) 14%, transparent);
  --hero-bg: #0d0e0f; --hero-text: #fff; --ok: #47d68a;
  --display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --radius: 0px;
}
[data-theme="blueprint"] {
  --bg: #f7f3ee; --bg-2: #ede7e0; --card: #fff; --card-2: #faf8f5; --line: #e2d9d1; --line-2: #d6ccc3;
  --text: #1b1416; --muted: #6d6466; --head: #1b1416; --steel: #8d8587;
  --pri: var(--brand); --pri-2: color-mix(in oklab, var(--brand) 80%, #fff); --pri-3: var(--b300); --pri-dim: color-mix(in oklab, var(--brand) 9%, #fff);
  --hero-bg: var(--b950); --hero-text: #fff; --ok: #2f9e63; --glow: #ffd59a;
  --display: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --radius: 0px;
}

/* ===== الأساس ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.biz { background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 17px; line-height: 1.85; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1260px; margin: 0 auto; padding: 0 36px; position: relative; }
.num { font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.skip { position: absolute; top: -60px; right: 16px; z-index: 100; background: var(--pri); color: var(--on-brand); padding: 10px 16px; }
.skip:focus { top: 12px; }
.bz-preview { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: #fff3cd; color: #5c4400; font-size: 14px; font-weight: 600; position: relative; z-index: 40; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; padding: 15px 26px; border: 1px solid transparent; transition: .25s; white-space: nowrap; cursor: pointer; }
.btn svg { flex: none; }
.btn-pri { background: var(--pri); color: var(--on-brand); }
.btn-pri:hover { filter: brightness(1.08); }
.btn-ghost { border-color: color-mix(in oklab, var(--text) 30%, transparent); color: var(--head); }
.btn-ghost:hover { border-color: var(--pri); }
.btn-glow { background: var(--glow, var(--pri-3)); color: #1a0f05; }
[data-theme="power"] .btn-pri { background: linear-gradient(135deg, var(--b300), var(--b400) 35%, var(--brand)); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-inline: 32px; }

/* لافتة رقم اللوحة (طابع المخططات) */
.sheet { display: inline-flex; align-items: stretch; font-family: var(--display); font-size: 12.5px; font-weight: 700; margin-bottom: 18px; border: 1px solid currentColor; color: var(--pri); }
.sheet b { background: var(--pri); color: var(--on-brand); padding: 2px 10px; direction: ltr; }
.sheet span { padding: 2px 12px; }
[data-theme="power"] .sheet { border: 0; gap: 12px; align-items: center; color: var(--pri-2); }
[data-theme="power"] .sheet b { background: none; color: var(--steel); padding: 0; font-weight: 400; order: 2; }
[data-theme="power"] .sheet span { padding: 0; display: flex; align-items: center; gap: 10px; }
[data-theme="power"] .sheet span::before { content: ""; width: 30px; height: 2px; background: var(--pri); }

h1, h2, h3, h4 { font-family: var(--display); color: var(--head); }
h2 { font-weight: 800; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.5; letter-spacing: -.3px; }
h2 em { font-style: normal; color: var(--pri); }
[data-theme="power"] h2 em, [data-theme="power"] .glow { padding: .2em 0 .3em; background: linear-gradient(100deg, var(--b300), var(--b400) 40%, var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.bz-sec { padding: 110px 0; }
.bz-sec.tight { padding-top: 50px; }
.bz-sec.alt { background: var(--bg-2); }
[data-theme="blueprint"] .bz-sec.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.bz-head-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; margin-bottom: 52px; }
.bz-head-row p { color: var(--muted); font-size: 17px; }
.bz-more { display: flex; justify-content: center; margin-top: 44px; }
.bz-empty { display: flex; align-items: center; gap: 12px; padding: 28px; border: 1px dashed var(--line-2); color: var(--muted); background: var(--card); }

/* ===== الرأس ===== */
.bz-head { position: relative; z-index: 30; background: var(--hero-bg); color: #fff; transition: background .3s; }
.bz-head.over { position: absolute; inset-inline: 0; top: 0; background: transparent; }
.bz-preview + .bz-head.over { top: 40px; }
.bz-head .wrap { display: flex; align-items: center; gap: 34px; height: 96px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.bz-logo { display: flex; align-items: center; gap: 14px; flex: none; min-width: 0; }
.bz-logo img { height: 50px; width: auto; max-width: 120px; object-fit: contain; }
.bz-logo img.on-light { background: #fff; padding: 5px 8px; border-radius: 8px; }
.bz-logo .wm { display: flex; flex-direction: column; line-height: 1.25; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, .2); white-space: nowrap; }
.bz-logo .wm b { font-family: var(--display); font-weight: 800; font-size: 18px; color: #fff; }
.bz-logo .wm span { font-size: 9.5px; letter-spacing: 1.8px; color: var(--pri-3); direction: ltr; text-align: right; font-weight: 600; text-transform: uppercase; }
.bz-nav { display: flex; gap: 30px; flex: 1; justify-content: center; font-size: 15.5px; white-space: nowrap; }
.bz-nav a { opacity: .78; position: relative; padding: 6px 0; }
.bz-nav a:hover, .bz-nav a.on { opacity: 1; }
.bz-nav a.on::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--pri-2); }
[data-theme="blueprint"] .bz-nav a.on::after { background: var(--glow); }
.bz-phone { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e3dcd6; }
.bz-phone svg { color: var(--pri-3); }
.bz-cta { padding: 11px 20px; font-size: 14px; }
[data-theme="blueprint"] .bz-cta { background: var(--glow); color: #1a0f05; }
.bz-burger { display: none; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; place-items: center; cursor: pointer; }
/* القائمة الطويلة (أكثر من 5 روابط) تتقارب عشان ما تزحم الرأس. وفي الشاشات الأصغر من الكمبيوتر يختفي الجوال من الرأس
   (موجود في التذييل وصفحة التواصل)، وتحت 1180 تنطوي القائمة في زر القائمة. */
.bz-head .wrap:has(.bz-nav.many) { gap: 26px; }
.bz-nav.many { gap: 22px; font-size: 15px; }
@media (max-width: 1400px) {
  .bz-head .wrap { gap: 24px; }
  .bz-nav { gap: 22px; font-size: 15px; }
  .bz-phone, .bz-live { display: none; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .bz-burger { display: grid; flex: none; }
  .bz-nav { display: none; position: absolute; top: 96px; inset-inline: 0; flex-direction: column; gap: 0; background: var(--hero-bg); padding: 8px 40px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); z-index: 5; }
  .bz-head.open .bz-nav { display: flex; }
  .bz-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .bz-nav a.on::after { display: none; }
  .bz-cta { margin-inline-start: auto; }
}

/* ===== الواجهة: طاقة ===== */
.hero { position: relative; overflow: hidden; color: var(--hero-text); }
.hero h1 { font-weight: 800; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.4; letter-spacing: -.5px; margin: 24px 0 20px; color: #fff; }
.hero h1 .ln { display: block; }
.hero .lead { font-size: 18.5px; color: #cdc8c2; max-width: 580px; font-weight: 300; }
.hero .ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero .btn-ghost, .pj-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
[data-theme="power"] .hero .btn-ghost { background: rgba(14, 15, 16, .6); backdrop-filter: blur(4px); }
.hero-power h1 .ln { white-space: nowrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 14px; }

.hero-power { min-height: 900px; background: radial-gradient(900px 640px at 22% 52%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 62%), linear-gradient(180deg, #121315, #0d0e0f); }
.hero-power .eyebrow { color: var(--pri-2); padding: 9px 16px; border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent); background: var(--pri-dim); }
.traces { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.traces .tr { fill: none; stroke: color-mix(in oklab, var(--brand) 18%, transparent); stroke-width: 1.4; }
.traces .pad { fill: #0e0f10; stroke: color-mix(in oklab, var(--brand) 40%, transparent); stroke-width: 1.4; }
.traces .pulse { fill: none; stroke: var(--b300); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 24 900; animation: run 7s linear infinite; filter: drop-shadow(0 0 5px var(--b300)); }
.traces .p1 { animation-duration: 9s; animation-delay: -3s; } .traces .p2 { animation-duration: 6s; animation-delay: -1s; } .traces .p3 { animation-duration: 8s; animation-delay: -5s; }
@keyframes run { to { stroke-dashoffset: -924; } }
.hero-power .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; min-height: 900px; padding-top: 96px; }
.bolt-wrap { position: relative; height: 720px; }
.bolt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bolt-svg .edge { fill: none; stroke: url(#edgeG); stroke-width: 2.5; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 2.4s .2s ease-out forwards; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--brand) 60%, transparent)); }
.bolt-svg .edge2 { fill: none; stroke: color-mix(in oklab, var(--brand) 30%, transparent); stroke-width: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark { animation: spark 2.8s ease-in-out infinite; }
@keyframes spark { 50% { opacity: .35; } }
.tag { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(23, 24, 26, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); font-family: var(--display); font-size: 14px; color: #fff; white-space: nowrap; }
.tag i { width: 36px; height: 36px; display: grid; place-items: center; background: var(--pri-dim); border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent); color: var(--pri-2); flex: none; }
.tag small { display: block; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 11.5px; color: var(--muted); }
.tag .live-dot, .chip i, .live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 0; box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.t1 { top: 150px; right: -8px; } .t2 { top: 420px; left: -10px; } .t3 { bottom: 70px; right: 30px; }

/* ===== الواجهة: مخطط هندسي ===== */
.hero-blueprint { background: radial-gradient(900px 420px at 50% 62%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--b950) 80%, #000) 0%, var(--b950) 45%, color-mix(in oklab, var(--brand) 45%, var(--b950)) 80%, var(--b950) 100%); }
.hero-blueprint .stars { position: absolute; inset: 0 0 40% 0; background-image: radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 28% 12%, rgba(255, 255, 255, .4), transparent), radial-gradient(1.4px 1.4px at 46% 30%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 63% 18%, rgba(255, 255, 255, .45), transparent), radial-gradient(1px 1px at 78% 8%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.2px 1.2px at 88% 26%, rgba(255, 255, 255, .4), transparent); pointer-events: none; }
.hero-blueprint .hero-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; padding-top: 160px; }
.hero-blueprint .eyebrow { color: var(--b200); font-weight: 500; }
.hero-blueprint .eyebrow i { width: 40px; height: 1px; background: var(--b300); }
/* المقر فوق العنوان: أيقونة موقع بلون الإضاءة، والمدينة بارزة والمنطقة أفتح. */
.hero-blueprint .eyebrow.loc { gap: 14px; padding: 6px 18px 6px 6px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .07)); backdrop-filter: blur(4px); }
.hero-blueprint .eyebrow.loc .pin { display: grid; place-items: center; width: 34px; height: 34px; background: var(--glow); color: var(--b950); }
.hero-blueprint .eyebrow.loc b { color: #fff; font-weight: 700; font-size: 15.5px; }
.hero-blueprint .eyebrow.loc .sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .3); }
.hero-blueprint .eyebrow.loc span { color: var(--b200); font-size: 14.5px; }
.hero-blueprint h1 .glow { color: var(--glow); }
.hero-blueprint .lead { color: #e2cdd1; }
.tblock { border: 1px solid rgba(255, 255, 255, .28); font-size: 13.5px; background: rgba(0, 0, 0, .25); backdrop-filter: blur(6px); }
.tblock .tt { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .28); font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--glow); }
.tblock .tt b { direction: ltr; color: #fff; border: 1px solid rgba(255, 255, 255, .4); padding: 1px 8px; font-size: 12px; }
.tblock dl div { display: grid; grid-template-columns: 92px 1fr; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tblock dl div:last-child { border-bottom: 0; }
.tblock dt { padding: 10px 16px; color: var(--b300); border-inline-end: 1px solid rgba(255, 255, 255, .14); }
.tblock dd { padding: 10px 16px; color: #fff; font-weight: 500; }
.tblock dd.num { text-align: right; }
.pano { position: relative; margin-top: 50px; }
.pano-svg { display: block; width: 100%; height: auto; }
.pano-svg [fill="#2c0e15"] { fill: color-mix(in oklab, var(--b950) 70%, var(--brand)); }
.pano-svg [fill="#1a070c"] { fill: var(--b950); }
.pano-svg [fill="#3a1219"] { fill: color-mix(in oklab, var(--b950) 60%, var(--brand)); }
.pano-svg [fill="#5c1a22"], .pano-svg .tag-no { fill: var(--brand); }
.pano-svg .tag-t { fill: var(--brand); font-family: var(--display); }
.pano-svg text { font-family: var(--display); }
.pano-svg .bld .w { fill: color-mix(in oklab, var(--glow) 55%, transparent); stroke: none; }
.pano .flow { stroke-dasharray: 46 300; animation: flow 6s linear infinite; }
.pano .flow.f2 { animation-duration: 8s; }
.pano .flow.f3 { stroke-dasharray: 30 260; animation-duration: 5s; }
@keyframes flow { to { stroke-dashoffset: -692; } }
.pano .lamp { animation: lamp 4s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .75; } }
.swipe { display: none; }

/* ===== شريط الأرقام ===== */
.bz-metrics { position: relative; z-index: 3; margin-top: -70px; }
.bz-metrics .box { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); }
.mtr { position: relative; padding: 28px 26px; border-inline-start: 1px solid var(--line); }
.mtr:first-child { border-inline-start: 0; }
.mtr .u { position: absolute; top: 12px; inset-inline-end: 16px; font-size: 10.5px; color: var(--steel); letter-spacing: 1px; font-family: var(--display); direction: ltr; }
.mtr .lcd { display: block; font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.15; color: var(--pri); }
.mtr .lcd small { font-size: 16px; font-weight: 600; margin-inline-start: 4px; }
[data-theme="power"] .mtr .lcd { color: var(--b300); text-shadow: 0 0 18px color-mix(in oklab, var(--brand) 50%, transparent); }
.mtr .l { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ===== بطاقات المشاريع ===== */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); transition: .3s; }
.pcard:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 55%, transparent); box-shadow: 0 30px 50px -35px rgba(0, 0, 0, .55); }
.pcard-img { position: relative; height: 210px; overflow: hidden; background: var(--bg-2); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: .6s; }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-ph { display: grid; place-items: center; height: 100%; color: var(--pri-2); background: linear-gradient(0deg, var(--pri-dim), transparent), repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--brand) 14%, transparent) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--brand) 14%, transparent) 23px 24px), var(--bg-2); }
.pcard-ph i { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); background: var(--card); opacity: .9; }
.pgrid.c2 { grid-template-columns: repeat(2, 1fr); }
.pgrid.c1 .pcard { display: grid; grid-template-columns: 1.1fr .9fr; }
.pgrid.c1 .pcard-img { height: auto; min-height: 300px; }
.chip { position: absolute; top: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(14, 15, 16, .78); color: #fff; font-family: var(--display); font-size: 12.5px; font-weight: 600; backdrop-filter: blur(6px); }
.chip i { width: 8px; height: 8px; }
.st-done .chip i { background: var(--pri-3); animation: none; }
.st-soon .chip i, .st-hold .chip i { background: #f0b429; animation: none; }
.pcard-bd { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard h3 { font-size: 18px; font-weight: 700; line-height: 1.6; }
.pcard-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.pcard-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pcard-meta svg { color: var(--pri-2); }
.pcard-now { margin-top: 12px; font-size: 14.5px; color: var(--text); font-weight: 500; flex: 1; }
.bar { height: 6px; background: color-mix(in oklab, var(--text) 10%, transparent); margin-top: 14px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(270deg, var(--brand), var(--pri-3)); }
.pcard-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pcard-foot b { font-family: var(--display); color: var(--head); font-size: 15px; }

/* ===== الخدمات ===== */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc { background: var(--card); border: 1px solid var(--line); padding: 0 24px 26px; }
.svc-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; margin-bottom: 18px; border-bottom: 1px dashed var(--line-2); font-family: var(--display); font-size: 12.5px; color: var(--steel); }
.svc-top .led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
[data-theme="blueprint"] .svc-top .led { border-radius: 0; background: var(--brand); box-shadow: none; transform: rotate(45deg); }
.svc-img { width: 100%; height: 140px; object-fit: cover; margin-bottom: 16px; }
.svc h3 { font-size: 17.5px; font-weight: 700; line-height: 1.55; margin-bottom: 6px; }
.svc p { font-size: 14.5px; color: var(--muted); }
.svc ul { list-style: none; margin-top: 10px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.svc li::before { content: "— "; color: var(--pri); }

/* ===== من نحن ===== */
.bz-about { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: start; }
.bz-about p { color: var(--muted); margin-top: 14px; }
.vm { display: grid; gap: 14px; }
.vm div { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--pri); padding: 22px 24px; }
.vm h4 { font-size: 17px; margin-bottom: 6px; }
.vm p { margin: 0; font-size: 15px; }

/* ===== رأس الصفحات الداخلية ===== */
.phead { background: var(--hero-bg); color: #fff; padding: 64px 0 48px; }
.phead .sheet { color: var(--pri-3); }
[data-theme="blueprint"] .phead .sheet b { background: var(--pri-3); color: var(--b950); }
.phead h1 { color: #fff; font-size: clamp(32px, 4vw, 54px); font-weight: 800; }
.phead p { color: #cfc6c4; max-width: 640px; margin-top: 8px; }
/* صفحة القسم: المسار واسم الصفحة. */
.page-head { padding: 56px 0 46px; }
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: rgba(255, 255, 255, .62); }
.crumbs a { color: var(--pri-3); transition: .2s; }
.crumbs a:hover { color: #fff; }
.crumbs svg { opacity: .55; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.filters a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .22); font-family: var(--display); font-size: 14px; color: #e8e2dd; }
.filters a .num { font-size: 12px; color: var(--pri-3); }
.filters a.on { background: var(--pri); border-color: var(--pri); color: var(--on-brand); }
.filters a.on .num { color: inherit; opacity: .8; }
.list-filters { margin-bottom: 30px; }
.list-filters .filters { margin-top: 0; }
[data-theme="blueprint"] .list-filters .filters a:not(.on) { border-color: var(--line); color: var(--text); }

/* ===== صفحة المشروع ===== */
.pj-hero { position: relative; background: var(--hero-bg); color: #fff; padding: 46px 0 0; overflow: hidden; }
.pj-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; filter: grayscale(.3); }
.pj-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--hero-bg) 8%, transparent 70%); pointer-events: none; }
.pj-hero .wrap { z-index: 2; }
.pj-hero .back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #d8d1cc; margin-bottom: 26px; }
.pj-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.pj-hero .chip { position: static; background: rgba(255, 255, 255, .1); }
.pj-hero h1 { color: #fff; font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; line-height: 1.45; margin: 16px 0 8px; }
.pj-hero .now { font-size: 18px; color: var(--pri-3); font-family: var(--display); font-weight: 600; }
.pj-hero .upd { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; color: #b9b1ad; }
.ring { position: relative; width: 190px; height: 190px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); }
.ring circle { fill: none; stroke-width: 9; }
.ring .trk { stroke: rgba(255, 255, 255, .12); }
.ring .val { stroke: var(--pri-3); stroke-dasharray: calc(var(--p) * 1) 100; stroke-linecap: round; filter: drop-shadow(0 0 8px color-mix(in oklab, var(--brand) 60%, transparent)); }
.ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring b { font-family: var(--display); font-size: 42px; font-weight: 800; line-height: 1.1; color: #fff; }
.ring span { font-size: 13px; color: #cfc6c4; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); }
.facts div { padding: 20px 22px 26px 0; border-inline-start: 1px solid rgba(255, 255, 255, .12); padding-inline-start: 22px; }
.facts div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts dt { font-size: 13px; color: #b9b1ad; }
.facts dd { font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff; }

.journey { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); position: relative; overflow-x: auto; padding-bottom: 6px; }
.journey li { position: relative; padding-top: 46px; padding-inline-end: 22px; }
.journey li::before { content: ""; position: absolute; top: 16px; inset-inline: 0; height: 3px; background: var(--line-2); }
.journey li.done::before { background: var(--pri); }
.journey li.now::before { background: linear-gradient(270deg, var(--pri) 50%, var(--line-2) 50%); }
.journey li:last-child::before { inset-inline-end: auto; width: 20px; }
.journey .dot { position: absolute; top: 4px; inset-inline-start: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 3px solid var(--line-2); color: var(--on-brand); z-index: 1; }
.journey .done .dot { background: var(--pri); border-color: var(--pri); }
.journey .now .dot { border-color: var(--pri); box-shadow: 0 0 0 6px var(--pri-dim); }
.journey .now .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pri); animation: pulse 2s infinite; }
.journey h4 { font-size: 16.5px; font-weight: 700; line-height: 1.55; }
.journey .next h4 { color: var(--muted); }
.journey .when { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.journey .now h4 { color: var(--pri); }
.journey .bar { margin-top: 10px; max-width: 160px; }

.stage-t { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 26px 0 14px; }
.stage-t:first-of-type { margin-top: 0; }
.stage-t i { width: 12px; height: 12px; background: var(--steel); }
.stage-t i.during { background: #f0b429; } .stage-t i.after { background: var(--ok); } .stage-t i.before { background: var(--pri); }
.stage-t .num { font-size: 13px; color: var(--muted); font-weight: 400; }
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photos .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.photos img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.photos .ph:hover img { transform: scale(1.05); }
.photos .ph span { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 12px 8px; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent); color: #fff; font-size: 13px; }
.pj-about { max-width: 860px; }
.pj-about p { color: var(--text); margin-top: 12px; }

/* ===== التذييل ===== */
.bz-foot { background: var(--hero-bg); color: #c9c1bd; font-size: 15px; padding: 0 0 30px; }
[data-theme="power"] .bz-foot { background: #08090a; border-top: 1px solid var(--line); }
.bz-foot-cta { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 70px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.bz-foot-cta h2 { color: #fff; font-size: clamp(26px, 2.8vw, 38px); }
.bz-foot-cta p { color: #bdb4b0; margin-top: 6px; }
.bz-foot-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.bz-foot-acts .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .28); }
[data-theme="blueprint"] .bz-foot-cta h2 em { color: var(--glow); }
.bz-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding: 56px 0 0; }
.bz-foot h5 { font-family: var(--display); color: #fff; font-size: 16px; margin-bottom: 16px; }
.bz-foot ul { list-style: none; display: grid; gap: 8px; }
.bz-foot a:hover { color: #fff; }
.tag-line { margin-top: 16px; }
.bz-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }

/* ===== عارض الصور ===== */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8, 8, 9, .94); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb-fig { max-width: min(1100px, 92vw); text-align: center; color: #ddd; }
.lb-fig img { max-height: 80vh; margin: 0 auto; }
.lb-fig figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 14px; }
.lb-x, .lb-nav { position: absolute; background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 18px; }
.lb-x { top: 20px; left: 20px; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }

/* ===== الجوال ===== */
@media (max-width: 960px) {
  body.biz { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .bz-head .wrap { height: 76px; gap: 12px; }
  .bz-logo { flex: 1; }
  .bz-logo .wm { overflow: hidden; }
  .bz-logo .wm b { overflow: hidden; text-overflow: ellipsis; }
  .bz-logo img { height: 38px; }
  .bz-burger { flex: none; }
  .bz-logo .wm b { font-size: 15px; }
  .bz-logo .wm span { font-size: 7.5px; letter-spacing: 1px; }
  .bz-phone, .bz-cta { display: none; }
  .bz-burger { display: grid; margin-inline-start: auto; }
  .bz-nav { display: none; position: absolute; top: 74px; inset-inline: 0; flex-direction: column; justify-content: flex-start; gap: 0; background: var(--hero-bg); padding: 8px 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; }
  .bz-head.open .bz-nav { display: flex; }
  .bz-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .bz-nav a.on::after { display: none; }

  .hero-power { min-height: 0; }
  .hero-power .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 110px; padding-bottom: 110px; gap: 10px; }
  .hero h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .hero-power h1 .ln { white-space: normal; }
  .hero .lead { font-size: 16.5px; }
  .hero .ctas .btn { flex: 1; }
  .bolt-wrap { height: 420px; margin-inline: -10px; }
  .t1 { top: 36px; right: 0; max-width: 92%; white-space: normal; } .t2 { top: 250px; left: 0; } .t3 { display: none; }
  .tag { padding: 9px 12px; font-size: 12.5px; }

  .hero-blueprint .hero-top { grid-template-columns: 1fr; gap: 30px; padding-top: 110px; }
  .pano { margin-top: 26px; }
  .pano-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pano-scroll::-webkit-scrollbar { display: none; }
  .pano-svg { width: 1100px; max-width: none; }
  .swipe { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12.5px; color: var(--b300); padding: 10px 0 80px; background: var(--b950); }

  .bz-metrics { margin-top: -60px; }
  .bz-metrics .box { grid-template-columns: 1fr 1fr; }
  .mtr { padding: 20px 18px; border-inline-start: 0; border-top: 1px solid var(--line); }
  .mtr:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .mtr:nth-child(-n+2) { border-top: 0; }
  .mtr:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mtr .lcd { font-size: 30px; }

  .bz-sec { padding: 76px 0; }
  .bz-head-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 34px; }
  .pgrid { grid-template-columns: 1fr; gap: 16px; }
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc { padding: 0 16px 18px; }
  .bz-about { grid-template-columns: 1fr; gap: 30px; }

  .pj-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ring { width: 150px; height: 150px; }
  .ring b { font-size: 32px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div { padding: 14px 0 16px; padding-inline-start: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .facts div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .journey { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .journey li { padding: 0 44px 26px 0; padding-inline-start: 44px; padding-inline-end: 0; }
  .journey li::before { top: 0; bottom: 0; inset-inline-start: 13px; inset-inline-end: auto; width: 3px; height: auto; }
  .journey li:last-child::before { display: none; }
  .journey li.now::before { background: linear-gradient(180deg, var(--pri) 50%, var(--line-2) 50%); }
  .journey .dot { top: 0; }
  .photos { grid-template-columns: 1fr 1fr; gap: 8px; }

  .bz-foot-cta { grid-template-columns: 1fr; padding: 54px 0; }
  .bz-foot-acts { justify-content: flex-start; }
  .bz-foot-acts .btn { flex: 1 1 100%; }
  .bz-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .bz-foot-grid > div:first-child { grid-column: 1 / -1; }
  .lb-prev, .lb-next { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bolt-svg .edge { stroke-dashoffset: 0; }
}

/* =====================================================================
 * أقسام الصفحة الرئيسية منقولة من التصميم المعتمد كما هي (co/mock: sadara.html لقالب "طاقة"،
 * وnorth.html لقالب "المخطط الهندسي")، والألوان من هوية الشركة. متغيرات --s-* من تصميم صدارة،
 * و--n-* من تصميم الشمال، ومعرّفة في القالبين حتى يشتغل أي قسم في أي قالب.
 * ===================================================================== */
[data-theme="power"] {
  --s-ink: #0e0f10; --s-coal: #17181a; --s-line: rgba(255, 255, 255, .08); --s-white: #fff;
  --s-cu: var(--brand); --s-cu2: var(--b400); --s-cu3: var(--b300); --s-cudim: color-mix(in oklab, var(--brand) 14%, transparent);
  --s-text: #ebe7e1; --s-muted: #a2a5aa; --s-steel: #7b8087; --s-ok: #47d68a;
  --n-night: #0b0c0d; --n-mar: var(--brand); --n-wine: var(--b600); --n-rose: var(--b200); --n-rose2: var(--b400); --n-glow: var(--b300);
  --n-paper: #131416; --n-stone: #121315; --n-card: #17181a; --n-ink: #fff; --n-ink2: #a2a5aa; --n-gray: #7b8087; --n-rule: rgba(255, 255, 255, .08); --n-ruled: rgba(255, 255, 255, .12);
}
[data-theme="blueprint"] {
  --s-ink: #f7f3ee; --s-coal: #fff; --s-line: #e2d9d1; --s-white: #1b1416;
  --s-cu: var(--brand); --s-cu2: var(--brand); --s-cu3: var(--b400); --s-cudim: color-mix(in oklab, var(--brand) 9%, #fff);
  --s-text: #1b1416; --s-muted: #6d6466; --s-steel: #8d8587; --s-ok: #2f9e63;
  --n-night: color-mix(in oklab, var(--b950) 72%, #000); --n-mar: var(--brand); --n-wine: var(--b500); --n-rose: var(--b200); --n-rose2: var(--b400); --n-glow: #ffd59a;
  --n-paper: #f7f3ee; --n-stone: #ede7e0; --n-card: #fff; --n-ink: #1b1416; --n-ink2: #4b4043; --n-gray: #8d8587; --n-rule: #e2d9d1; --n-ruled: rgba(255, 255, 255, .12);
}
[data-theme="power"] body.biz { line-height: 1.8; }

/* ===== العناوين ===== */
[data-theme="power"] h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.4; color: #fff; }
[data-theme="blueprint"] h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.55; color: var(--n-ink); }
[data-theme="blueprint"] h2 em { color: var(--n-mar); }
[data-theme="blueprint"] .on-dark h2 { color: #fff; }
[data-theme="blueprint"] .on-dark h2 em { color: var(--n-glow); }
.mk-sec { padding: 130px 0; position: relative; }
.mk-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; margin-bottom: 64px; }
.mk-head.solo { grid-template-columns: 1fr; }
.mk-head p { color: var(--s-muted); font-size: 17.5px; }
[data-theme="blueprint"] .mk-head p { color: var(--n-ink2); }
[data-theme="blueprint"] .on-dark .mk-head p { color: #d9c2c6; }
.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 14px; color: var(--s-cu2); font-weight: 600; margin-bottom: 18px; }
.kicker svg { width: 16px; height: 16px; flex: none; }
.kicker .n { color: var(--s-steel); font-weight: 400; }
.kicker .live-dot { width: 9px; height: 9px; }
.sheet { margin-bottom: 22px; }
.sheet b { padding: 3px 10px; }
.sheet span { padding: 3px 12px; }
[data-theme="blueprint"] .sheet { color: var(--n-mar); }
[data-theme="blueprint"] .sheet b { background: var(--n-mar); color: #fff; }
[data-theme="blueprint"] .on-dark .sheet { color: var(--n-rose); }
[data-theme="blueprint"] .on-dark .sheet b { background: var(--n-rose); color: var(--n-night); }
.sheet.is-live { align-items: center; }
.sheet .live-dot { width: 9px; height: 9px; margin-inline: 10px 2px; }

/* ===== الرأس: مؤشر الطوارئ (طاقة) ===== */
.bz-live { white-space: nowrap; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #d8d4ce; border: 1px solid var(--s-line); padding: 8px 14px; background: rgba(255, 255, 255, .03); }
.bz-live .live-dot { width: 8px; height: 8px; }
.bz-live b { font-family: var(--display); font-weight: 600; }
.bz-logo img { flex: none; display: block; }
.bz-logo img.on-light { height: 50px; max-width: 140px; padding: 5px 9px; object-fit: contain; }
.bz-logo .wm { min-width: 0; }
[data-theme="power"] .bz-logo img { height: 52px; }
[data-theme="power"] .bz-logo .wm b { font-size: 20px; }
[data-theme="blueprint"] .bz-logo img { height: 54px; }

/* ===== الواجهة (طاقة): الشرائح والبطاقات ===== */
.hero-power .eyebrow svg { width: 16px; height: 16px; }
.hero-power .chips { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.hero-power .hchip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--s-line); background: rgba(255, 255, 255, .025); font-size: 13.5px; color: #d9d5cf; }
.hero-power .hchip svg { width: 18px; height: 18px; color: var(--s-cu2); }
.tag i.live-dot { width: 10px; height: 10px; border: 0; background: var(--s-ok); }
.tag i svg { width: 18px; height: 18px; }

/* ===== شاشة العداد (طاقة) ===== */
.meter { position: relative; z-index: 3; margin-top: -80px; }
.meter .box { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: #121315; border: 1px solid var(--s-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
[data-theme="blueprint"] .meter .box { background: #fff; box-shadow: 0 40px 70px -40px rgba(19, 6, 10, .55); }
.meter .mtr { padding: 30px 26px; border-inline-start: 1px solid var(--s-line); position: relative; }
.meter .mtr:first-child { border-inline-start: 0; }
.meter .lcd { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.1; color: var(--s-cu3); text-shadow: 0 0 18px color-mix(in oklab, var(--brand) 45%, transparent); }
[data-theme="blueprint"] .meter .lcd { color: var(--n-mar); text-shadow: none; }
.meter .lcd small { font-size: 16px; font-weight: 600; color: var(--s-cu2); margin-inline-start: 4px; text-shadow: none; }
.meter .l { color: var(--s-muted); font-size: 13.5px; margin-top: 8px; }
.meter .u { position: absolute; top: 14px; inset-inline-end: 16px; font-size: 10.5px; color: var(--s-steel); letter-spacing: 1px; font-family: var(--display); direction: ltr; }
.strip-gap { height: 0; }

/* ===== شريط الاعتمادات (المخطط الهندسي) ===== */
.seals { position: relative; z-index: 5; margin-top: -54px; }
.seals .row { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; background: var(--n-card); box-shadow: 0 40px 70px -40px rgba(19, 6, 10, .55); }
.seal { display: flex; align-items: center; gap: 16px; padding: 24px 26px; border-inline-start: 1px solid var(--n-rule); }
.seal:first-child { border-inline-start: 0; }
.seal .ring { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--n-mar); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 12px; color: var(--n-mar); line-height: 1.15; text-align: center; position: relative; flex: none; }
.seal .ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--n-mar) 45%, transparent); }
.seal b { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--n-ink); }
.seal span { font-size: 13px; color: var(--n-gray); }
.seal.v30 { background: var(--n-mar); color: #fff; }
.seal.v30 b { color: #fff; }
.seal.v30 .n { font-family: var(--display); font-size: 34px; font-weight: 800; color: var(--n-glow); line-height: 1; }
.seal.v30 span { color: var(--n-rose); }

/* ===== الشركاء ===== */
.partners { padding: 100px 0 30px; }
.partners .wrap { display: grid; grid-template-columns: 170px 1fr; gap: 40px; align-items: center; }
.partners h5 { font-family: var(--display); font-size: 15px; color: var(--n-mar); line-height: 1.6; font-weight: 700; }
[data-theme="power"] .partners h5 { color: var(--s-cu2); }
.partners h5 small { display: block; font-family: 'IBM Plex Sans Arabic', sans-serif; color: var(--n-gray); font-size: 13px; font-weight: 400; }
.p-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.p-row .p { padding: 6px 26px; border-inline-start: 1px solid var(--n-rule); }
.p-row .p img { height: 40px; width: auto; margin-bottom: 8px; }
.p-row .p b { display: block; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--n-ink); line-height: 1.6; }
.p-row .p span { font-size: 13px; color: var(--n-gray); }

/* ===== من نحن (طاقة) ===== */
.about-pw .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about-pw .grid.no-media { grid-template-columns: 1fr; }
.about-pw .big { font-size: 21px; color: #dcd8d2; font-weight: 300; margin: 22px 0 18px; }
.about-pw p { color: var(--s-muted); }
.about-pw .vm, .about-bp .vm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.vm div { padding: 24px; background: var(--s-coal); border: 1px solid var(--s-line); border-top: 2px solid var(--s-cu); }
.vm h4 { font-family: var(--display); font-size: 17px; color: var(--s-white); margin-bottom: 8px; }
.vm p { font-size: 15px; line-height: 1.8; color: var(--s-muted); }
.collage { position: relative; height: 540px; z-index: 0; }
.collage .a { position: absolute; top: 0; inset-inline-end: 0; width: 74%; height: 72%; object-fit: cover; }
.collage .b { position: absolute; bottom: 0; inset-inline-start: 0; width: 54%; height: 50%; object-fit: cover; border: 8px solid var(--s-ink); }
.collage .frame { position: absolute; top: 26px; inset-inline-end: -20px; width: 74%; height: 72%; border: 2px solid var(--s-cu); z-index: -1; }
.collage.one { height: 480px; }
.collage.one .a, .collage.one .frame { width: 92%; height: 88%; }
.collage .since { position: absolute; bottom: 34px; inset-inline-end: 26px; background: var(--s-cu); color: var(--on-brand); padding: 16px 22px; font-family: var(--display); }
.collage .since b { display: block; font-size: 34px; font-weight: 900; line-height: 1; }
.collage .since span { font-size: 13px; font-weight: 600; }
.timeline { margin-top: 90px; position: relative; display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); }
.timeline::before { content: ""; position: absolute; top: 13px; inset-inline: 0; height: 2px; background: linear-gradient(270deg, var(--s-cu), color-mix(in oklab, var(--brand) 15%, transparent)); }
.tl-sec .timeline { margin-top: 0; }
.step { position: relative; padding-top: 44px; padding-inline-end: 30px; }
.step::before { content: ""; position: absolute; top: 4px; inset-inline-start: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--s-ink); border: 2px solid var(--s-cu); box-shadow: 0 0 0 5px color-mix(in oklab, var(--brand) 12%, transparent); }
.step.now::before { background: var(--s-cu); }
.step b { display: block; font-family: var(--display); font-size: 15px; color: var(--s-cu2); }
.step h4 { font-family: var(--display); font-size: 18px; color: var(--s-white); margin: 4px 0 6px; font-weight: 600; }
.step p { font-size: 14.5px; color: var(--s-muted); }

/* ===== من نحن (المخطط الهندسي) ===== */
.about-bp .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: start; }
.about-bp .grid.no-media { grid-template-columns: 1fr; }
.about-bp .lede { font-family: var(--display); font-size: 24px; line-height: 1.85; font-weight: 600; margin: 28px 0 26px; color: var(--n-ink); }
.about-bp .lede em { font-style: normal; color: var(--n-mar); }
.about-bp p { color: var(--n-ink2); margin-bottom: 16px; }
.quote { margin-top: 30px; padding: 26px 30px; background: var(--n-stone); border-inline-start: 4px solid var(--n-mar); font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.8; color: var(--n-ink); }
[data-theme="power"] .quote { background: var(--s-cudim); border-color: var(--s-cu); font-size: 17px; }
.quote small { display: block; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; font-weight: 500; color: var(--n-gray); margin-top: 6px; }
.duo { position: relative; overflow: hidden; display: block; background: color-mix(in oklab, var(--n-mar) 70%, #000); }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.02); transition: .6s; }
.duo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in oklab, var(--n-mar) 80%, #fff), color-mix(in oklab, var(--n-mar) 60%, #000)); mix-blend-mode: multiply; opacity: .6; transition: .6s; pointer-events: none; }
.duo:hover::after { opacity: 0; }
.duo:hover img { filter: none; }
.about-bp .photo { height: 430px; }
.about-bp .photo .cap { position: absolute; bottom: 0; inset-inline-start: 0; z-index: 2; background: #fff; padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: var(--n-mar); }
.specs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--n-rule); border-top: 0; background: var(--n-card); }
.specs.top { border-top: 1px solid var(--n-rule); }
.specs div { padding: 18px 22px; border-top: 1px solid var(--n-rule); }
.specs div:nth-child(even) { border-inline-start: 1px solid var(--n-rule); }
.specs small { display: block; color: var(--n-gray); font-size: 12.5px; }
.specs b { font-size: 15.5px; font-weight: 600; color: var(--n-ink); }

/* ===== الخدمات: لوحة التوزيع (طاقة) ===== */
.services-pw { background: linear-gradient(180deg, var(--s-ink), #131416); }
.board { position: relative; background: linear-gradient(180deg, #232528, #1b1d20); border: 1px solid #34373c; border-radius: 8px; padding: 34px 34px 30px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6b6f75, #2c2e32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.screw::after { content: ""; position: absolute; inset: 6px 2px; background: #1b1c1f; transform: rotate(35deg); }
.s1 { top: 12px; right: 12px; } .s2 { top: 12px; left: 12px; } .s3 { bottom: 12px; right: 12px; } .s4 { bottom: 12px; left: 12px; }
.plate { display: flex; justify-content: space-between; align-items: center; margin: 0 18px 26px; padding: 10px 18px; background: linear-gradient(180deg, #c9ccd1, #9ea2a8); color: #1b1c1f; font-family: var(--display); font-size: 13px; font-weight: 700; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.plate span:last-child { direction: ltr; letter-spacing: 1.5px; font-size: 12px; }
.bus { height: 10px; margin: 0 18px; background: linear-gradient(180deg, var(--b200), var(--brand) 55%, var(--b800)); border-radius: 2px; box-shadow: 0 0 18px color-mix(in oklab, var(--b400) 35%, transparent); }
.breakers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 18px; }
.brk { position: relative; background: linear-gradient(180deg, #2b2d31, #222427); border: 1px solid #393c41; border-radius: 4px; padding: 0 22px 24px; margin-top: 22px; transition: .3s; }
.brk::before { content: ""; position: absolute; top: -23px; inset-inline-start: 50%; width: 4px; height: 22px; background: var(--b600); transform: translateX(50%); }
.breakers .brk:nth-child(n+5)::before { display: none; }
.brk:hover { border-color: color-mix(in oklab, var(--b400) 55%, transparent); box-shadow: 0 0 30px -8px color-mix(in oklab, var(--b400) 45%, transparent); }
.brk .top { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 12px; border-bottom: 1px dashed #3d4045; font-family: var(--display); font-size: 12px; color: var(--s-steel); }
.brk .top .led { display: flex; align-items: center; gap: 6px; color: var(--s-ok); font-size: 11px; letter-spacing: 1px; direction: ltr; }
.brk .top .led i { width: 7px; height: 7px; border-radius: 50%; background: var(--s-ok); box-shadow: 0 0 8px var(--s-ok); }
.sw { margin: 20px auto 18px; width: 46px; height: 74px; border-radius: 6px; background: #141517; border: 1px solid #3a3d42; position: relative; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.sw i { position: absolute; inset-inline: 6px; top: 6px; height: 34px; border-radius: 4px; background: linear-gradient(180deg, var(--b300), var(--brand)); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); transition: .3s; }
.sw::after { content: "ON"; position: absolute; bottom: 8px; inset-inline: 0; text-align: center; font-family: var(--display); font-size: 10px; color: var(--s-cu2); letter-spacing: 1px; }
.brk:hover .sw i { top: 34px; background: linear-gradient(180deg, #8a8f96, #555a60); }
.brk:hover .sw::after { content: ""; }
.brk .ic { color: var(--s-cu2); margin-bottom: 10px; }
.brk .ic svg { width: 28px; height: 28px; }
.brk h3 { font-family: var(--display); font-size: 17px; font-weight: 600; color: #fff; line-height: 1.5; margin-bottom: 6px; }
.brk p { font-size: 14px; color: var(--s-muted); line-height: 1.7; }
.brk.main { border-color: color-mix(in oklab, var(--b400) 50%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 22%, #222427), #24221f); }

/* ===== الخدمات: لوحات المخطط ===== */
.services-bp { background: var(--n-card); border-top: 1px solid var(--n-rule); border-bottom: 1px solid var(--n-rule); }
.div3 { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); border: 1px solid var(--n-rule); }
.dv { border-inline-start: 1px solid var(--n-rule); display: flex; flex-direction: column; }
.dv:first-child { border-inline-start: 0; }
.dv .art { height: 200px; background: var(--n-paper); background-image: linear-gradient(var(--n-rule) 1px, transparent 1px), linear-gradient(90deg, var(--n-rule) 1px, transparent 1px); background-size: 24px 24px; display: grid; place-items: center; border-bottom: 1px solid var(--n-rule); position: relative; color: var(--n-mar); }
.dv .art svg { width: 76%; height: auto; }
.dv .art .paper { fill: var(--n-paper); }
.dv .art .art-ico svg { width: 64px; height: 64px; }
.dv .art .no { position: absolute; top: 14px; inset-inline-start: 16px; font-family: var(--display); font-weight: 800; font-size: 13px; color: #fff; background: var(--n-mar); padding: 2px 10px; }
.dv .bd { padding: 32px 32px 38px; }
.dv h3 { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--n-ink); margin-bottom: 6px; }
.dv .sub { font-size: 14.5px; color: var(--n-gray); margin-bottom: 18px; }
.dv ul { list-style: none; display: grid; gap: 8px; }
.dv li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--n-ink2); }
.dv li::before { content: ""; width: 12px; height: 1.5px; background: var(--n-mar); flex: none; transform: translateY(-4px); }
.others { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); margin-top: 28px; border: 1px solid var(--n-rule); background: var(--n-paper); }
.o { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-inline-start: 1px solid var(--n-rule); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--n-ink); }
.o:first-child { border-inline-start: 0; }
.o svg { width: 30px; height: 30px; color: var(--n-mar); flex: none; }

/* ===== المشاريع من النظام ===== */
.projects-sec.is-done { background: var(--bg-2); }
[data-theme="blueprint"] .projects-sec.is-done { border-block: 1px solid var(--line); }
.pgrid.c2 { grid-template-columns: repeat(2, 1fr); }
.pgrid.c1 { grid-template-columns: 1fr; }
.pgrid.c1 .pcard { display: grid; grid-template-columns: 1.1fr .9fr; }
.pgrid.c1 .pcard-img { height: auto; min-height: 300px; }
.pcard-ph { display: grid; place-items: center; height: 100%; color: var(--pri-2); background: linear-gradient(0deg, var(--pri-dim), transparent), repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--brand) 14%, transparent) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--brand) 14%, transparent) 23px 24px), var(--bg-2); }
.pcard-ph i { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); background: var(--card); }

/* ===== خبراتنا: نص وصورة بنصف الشاشة (طاقة) ===== */
.sec-band .inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.sec-band.no-img .inner { grid-template-columns: 1fr; }
.sec-band.img-end .photo { order: -1; }
.sec-band .photo { background-position: center; background-size: cover; position: relative; }
.sec-band .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 50%, var(--s-ink)); }
.sec-band .txt { padding: 110px 70px 110px 0; padding-inline-start: max(36px, calc((100vw - 1260px) / 2 + 36px)); padding-inline-end: 70px; display: flex; flex-direction: column; justify-content: center; }
.sec-band .intro { color: var(--s-muted); margin-top: 16px; max-width: 520px; }
.orders { display: grid; gap: 12px; margin-top: 32px; }
.order { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; background: var(--s-coal); border: 1px solid var(--s-line); border-inline-start: 3px solid var(--s-cu); }
.order .no { font-family: var(--display); font-size: 12px; color: var(--s-steel); direction: ltr; }
.order b { font-family: var(--display); font-size: 16.5px; color: var(--s-white); font-weight: 600; }
.order .st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--s-ok); }
.order .st .live-dot, .console .s .live-dot { width: 8px; height: 8px; }
.offices { display: flex; gap: 12px; margin-top: 26px; color: var(--s-muted); font-size: 14px; align-items: center; flex-wrap: wrap; }
.offices b { color: var(--s-white); font-weight: 600; padding: 5px 14px; border: 1px solid var(--s-line); font-family: var(--display); }

/* ===== مخطط المشاريع (طاقة) ===== */
.sld-wrap { position: relative; }
.source { display: flex; flex-direction: column; align-items: center; text-align: center; }
.source .card { background: var(--s-coal); border: 1px solid color-mix(in oklab, var(--b400) 40%, transparent); padding: 16px 26px; display: flex; gap: 18px; align-items: center; box-shadow: 0 0 50px -10px color-mix(in oklab, var(--b400) 30%, transparent); }
.source .card small { display: block; color: var(--s-muted); font-size: 12.5px; }
.source .card b { font-family: var(--display); color: var(--s-white); font-size: 17px; }
.source .card .tot { border-inline-start: 1px solid var(--s-line); padding-inline-start: 18px; }
.source .card .tot b { color: var(--s-cu3); font-size: 26px; font-weight: 800; }
.sld { display: block; width: 100%; height: auto; margin-top: -2px; }
.sld .w { stroke: #4a4d52; stroke-width: 2; fill: none; }
.sld .cu { stroke: var(--brand); stroke-width: 2.5; fill: none; }
.sld .coil { fill: none; stroke: var(--b400); stroke-width: 2; }
.sld .bar { fill: url(#busG); }
.sld .flow { stroke: var(--b300); stroke-width: 3; fill: none; stroke-dasharray: 14 160; animation: run2 2.6s linear infinite; filter: drop-shadow(0 0 4px var(--b300)); }
@keyframes run2 { to { stroke-dashoffset: -174; } }
.sld .brkr { fill: #17181a; stroke: var(--b400); stroke-width: 2; }
.sld text { font-family: var(--display); font-size: 11px; fill: #7b8087; text-anchor: middle; direction: ltr; }
.loads { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 18px; }
.load { background: var(--s-coal); border: 1px solid var(--s-line); padding: 22px 20px 20px; position: relative; transition: .3s; }
.load:hover { border-color: color-mix(in oklab, var(--b400) 50%, transparent); transform: translateY(-4px); }
.load .id { font-family: var(--display); font-size: 12px; color: var(--s-steel); direction: ltr; text-align: right; }
.load h4 { font-family: var(--display); font-size: 16px; color: var(--s-white); font-weight: 600; line-height: 1.55; margin: 8px 0 4px; min-height: 50px; }
.load .loc { font-size: 13px; color: var(--s-muted); display: flex; align-items: center; gap: 6px; }
.load .loc svg { width: 14px; height: 14px; color: var(--s-cu2); }
.load .val { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--s-white); margin-top: 14px; direction: ltr; text-align: right; }
.load .val small { font-size: 12px; color: var(--s-steel); font-weight: 400; }
.load .gauge { height: 5px; background: rgba(255, 255, 255, .06); margin-top: 10px; border-radius: 3px; overflow: hidden; }
.load .gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--b300)); border-radius: 3px; }
.load.max { border-color: color-mix(in oklab, var(--b400) 55%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 18%, #17181a), var(--s-coal)); }
.load.max::after { content: "الأكبر"; position: absolute; top: -11px; inset-inline-end: 16px; background: var(--brand); color: var(--on-brand); font-family: var(--display); font-size: 11.5px; font-weight: 700; padding: 2px 10px; }

/* ===== لماذا نحن ===== */
.why { background: #0b0c0d; }
[data-theme="blueprint"] .why { background: var(--n-stone); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why-item { position: relative; padding: 34px 30px; background: var(--s-coal); border: 1px solid var(--s-line); overflow: hidden; }
.why-item::after { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 56px; background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 28%, transparent) 50%, transparent 50%); }
.why-item .n { font-family: var(--display); font-size: 58px; font-weight: 900; line-height: 1; color: color-mix(in oklab, var(--b400) 18%, transparent); }
.why-item h4 { font-family: var(--display); font-size: 19px; color: var(--s-white); font-weight: 600; margin: 16px 0 6px; }
.why-item p { color: var(--s-muted); font-size: 15px; }

/* ===== غرفة الطوارئ (طاقة) ===== */
.ops { overflow: hidden; background: var(--ops-bg, none) 12% 30% / cover, #0e0f10; }
.ops::before { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(14, 15, 16, .97) 42%, rgba(14, 15, 16, .5)); }
.ops .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.ops p.l { color: #cfccc7; font-size: 18.5px; font-weight: 300; margin-top: 20px; max-width: 520px; }
.ops h2 { color: #fff; }
.console { background: rgba(14, 15, 16, .86); border: 1px solid #34373c; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); backdrop-filter: blur(6px); color: #ebe7e1; }
.console .bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: var(--display); font-size: 13px; color: #a2a5aa; }
.console .bar .dots { display: flex; gap: 6px; }
.console .bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3d42; }
.console .bar .dots i:last-child { background: var(--brand); }
.console .big { display: flex; align-items: center; justify-content: space-between; padding: 26px 26px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.console .big b { font-family: var(--display); font-size: 72px; font-weight: 900; line-height: 1; color: var(--b300); text-shadow: 0 0 30px color-mix(in oklab, var(--b400) 50%, transparent); direction: ltr; }
.console .big a { color: #a2a5aa; font-size: 14px; text-align: left; }
.console .big a strong { display: block; font-family: var(--display); color: #fff; font-size: 22px; direction: ltr; }
.console ul { list-style: none; }
.console li { display: flex; justify-content: space-between; align-items: center; padding: 15px 26px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px; }
.console li:last-child { border-bottom: 0; }
.console li .s { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #47d68a; font-family: var(--display); }

/* ===== القيم والسلامة والفريق (أقسام مجمّعة) ===== */
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.group-next { margin-top: 90px; }
.plates { display: grid; gap: 12px; margin-top: 30px; }
.vplate { position: relative; display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 18px; padding: 18px 26px; background: linear-gradient(180deg, #26282c, #1d1f22); border: 1px solid #393c41; border-radius: 4px; }
[data-theme="blueprint"] .vplate { background: #fff; border-color: var(--n-rule); }
.vplate::before, .vplate::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #55595f; transform: translateY(-50%); }
.vplate::before { right: 9px; } .vplate::after { left: 9px; }
.vplate .n { font-family: var(--display); color: var(--s-cu2); font-size: 14px; font-weight: 700; direction: ltr; text-align: center; border-inline-end: 1px solid #3a3d42; }
.vplate h4 { font-family: var(--display); font-size: 19px; color: var(--s-white); font-weight: 600; }
.vplate p { font-size: 14px; color: var(--s-muted); }
.vplate.first { background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 25%, #26282c), #25201b); border-color: color-mix(in oklab, var(--b400) 50%, transparent); }
[data-theme="blueprint"] .vplate.first { background: var(--s-cudim); }
.vplate.first h4 { color: var(--s-cu3); }
.chain { margin-top: 30px; display: flex; flex-direction: column; align-items: stretch; }
.chain .lvl { background: var(--s-coal); border: 1px solid var(--s-line); padding: 14px 20px; display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: 15.5px; color: var(--s-white); }
.chain .lvl i { width: 34px; height: 34px; display: grid; place-items: center; background: var(--s-cudim); color: var(--s-cu2); flex: none; }
.chain .lvl i svg { width: 18px; height: 18px; }
.chain .lnk { width: 2px; height: 18px; background: var(--s-cu); margin-inline-start: 36px; }
.chain .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chain .lvl.hl { border-color: color-mix(in oklab, var(--b400) 50%, transparent); }
.depts { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 16px; margin-top: 40px; }
.dept { background: var(--s-coal); border: 1px solid var(--s-line); padding: 26px 24px; }
.dept h4 { font-family: var(--display); font-size: 17px; color: var(--s-white); font-weight: 700; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--s-line); display: flex; align-items: center; gap: 10px; }
.dept h4 i { width: 8px; height: 8px; background: var(--s-cu); transform: rotate(45deg); flex: none; }
.dept ul { list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--s-muted); }

/* ===== معرض الأعمال (المخطط الهندسي) ===== */
.works { background: var(--n-night); overflow: hidden; }
.works::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.works h2 { color: #fff; }
.works .mk-head p { color: #d9c2c6; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .25); margin-bottom: 60px; position: relative; }
.stat { padding: 28px 30px 0; border-inline-start: 1px solid var(--n-ruled); }
.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stat b { display: block; font-family: var(--display); font-size: 54px; font-weight: 800; color: var(--n-glow); line-height: 1.15; text-align: right; }
.stat span { color: #d6bfc3; font-size: 15px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; position: relative; }
.gallery .t { grid-row: span 2; }
.gallery .w { grid-column: span 2; }
.gallery .cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 40px 18px 14px; background: linear-gradient(0deg, rgba(19, 6, 10, .92), transparent); font-family: var(--display); font-size: 14.5px; font-weight: 700; color: #fff; }
.gallery .cap small { display: block; font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; font-size: 12.5px; color: var(--n-rose); }
.works .note { position: relative; margin-top: 22px; font-size: 14px; color: #bfa6ab; display: flex; align-items: center; gap: 10px; }
.works .note svg { width: 16px; height: 16px; color: var(--n-glow); flex: none; }

/* ===== الشهادات ===== */
.certs .c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.certs .frame { display: block; background: #fff; padding: 16px; box-shadow: 0 2px 0 var(--n-rule), 0 30px 50px -30px rgba(19, 6, 10, .35); border: 1px solid var(--n-rule); }
.certs .frame .mat { display: block; border: 1px solid var(--n-rule); padding: 14px; background: var(--n-paper); }
.certs .frame .mat img { width: 100%; height: 340px; object-fit: cover; object-position: top; }
.cert-meta { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--n-ink); }
.cert-meta .iso { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--n-mar); white-space: nowrap; }
.cert-meta h4 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--n-ink); }
.cert-meta p { font-size: 13.5px; color: var(--n-gray); }

/* ===== سياسة السلامة: نص وصورة (المخطط الهندسي) ===== */
.safety { display: grid; grid-template-columns: 1fr 1fr; background: var(--n-stone); }
.safety.no-img { grid-template-columns: 1fr; }
.safety .tx { padding: 110px 70px 110px 0; padding-inline-start: max(36px, calc((100vw - 1260px) / 2 + 36px)); padding-inline-end: 70px; }
.safety .tx > p { color: var(--n-ink2); margin: 20px 0 30px; }
.pol { display: grid; gap: 0; border-top: 2px solid var(--n-ink); }
.pol > div { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--n-rule); }
.pol i { width: 56px; height: 56px; display: grid; place-items: center; background: var(--n-mar); color: #fff; }
.pol i svg { width: 26px; height: 26px; }
.pol b { font-family: var(--display); font-size: 16.5px; font-weight: 700; line-height: 1.7; color: var(--n-ink); }
.pol b small { display: block; font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; font-size: 14px; color: var(--n-ink2); }
.safety .ph { position: relative; background-position: center; background-size: cover; min-height: 620px; }
.safety .ph .badge { position: absolute; bottom: 44px; inset-inline-end: 44px; background: var(--n-night); color: #fff; padding: 22px 26px; display: flex; gap: 16px; align-items: center; }
.safety .ph .badge svg { width: 44px; height: 44px; color: var(--n-glow); flex: none; }
.safety .ph .badge b { font-family: var(--display); font-size: 17px; display: block; }
.safety .ph .badge span { font-size: 13px; color: var(--n-rose); }

/* ===== المعدات (المخطط الهندسي) ===== */
.fleet-sec { background: var(--n-night); overflow: hidden; }
.fleet-sec .bg { position: absolute; inset: 0; opacity: .35; }
.fleet-sec .bg img { width: 100%; height: 100%; object-fit: cover; }
.fleet-sec::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--n-night) 30%, color-mix(in oklab, var(--n-night) 55%, transparent)); }
.fleet-sec .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.fleet-sec h2 { color: #fff; }
.fleet-sec p.lead { color: #e0cbcf; font-size: 18px; font-weight: 300; margin-top: 16px; }
.fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--n-ruled); border: 1px solid var(--n-ruled); }
.fl { background: color-mix(in oklab, var(--n-night) 82%, transparent); padding: 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.fl svg { width: 64px; height: 40px; color: var(--n-glow); }
.fl b { font-family: var(--display); font-size: 16px; color: #fff; }
.fl span { font-size: 13px; color: var(--n-rose2); margin-top: -12px; }

/* ===== الأهداف والرؤية (المخطط الهندسي) ===== */
.goals .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.goals h2 { margin-bottom: 34px; }
.g { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 28px 0; border-bottom: 1px solid var(--n-rule); }
.g:first-child { border-top: 2px solid var(--n-ink); }
.g .n { font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--n-mar); line-height: 1.1; }
.g h4 { font-family: var(--display); font-size: 19px; font-weight: 800; margin-bottom: 2px; color: var(--n-ink); }
.g p { color: var(--n-ink2); font-size: 15.5px; }
.vision { background: var(--n-mar); color: #fff; padding: 56px 52px; position: relative; overflow: hidden; }
.vision .mark { position: absolute; left: -60px; bottom: -40px; width: 330px; opacity: .1; }
.vision h3 { font-family: var(--display); font-size: 14px; color: var(--n-glow); font-weight: 700; margin-bottom: 14px; }
.vision p { position: relative; font-family: var(--display); font-size: 26px; line-height: 1.85; font-weight: 700; }
.vision .v2030 { position: relative; margin-top: 30px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--n-rose); border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; }
.vision .v2030 b { font-family: var(--display); font-size: 30px; color: #fff; font-weight: 800; }
.team { margin-top: 20px; background: var(--n-card); border: 1px solid var(--n-rule); padding: 28px 32px; }
.team h4 { font-family: var(--display); font-size: 17px; color: var(--n-mar); margin-bottom: 6px; font-weight: 800; }
.team p { font-size: 15px; color: var(--n-ink2); }
.roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.roles span { padding: 5px 14px; border: 1px solid var(--n-rule); font-size: 14px; font-weight: 600; color: var(--n-ink); }

/* ===== التواصل وطلب عرض السعر ===== */
.contact-pw { padding-top: 0; }
.contact-bp { background: var(--n-stone); }
.contact-sec .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--s-line); }
.contact-bp .grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: #fff; border: 0; box-shadow: 0 40px 80px -50px rgba(19, 6, 10, .45); }
.c-cu { position: relative; overflow: hidden; padding: 56px 50px; background: linear-gradient(135deg, var(--b400), var(--brand) 60%, var(--b800)); color: #1a0f05; }
.c-cu::before { content: ""; position: absolute; inset-inline-start: -90px; bottom: -120px; width: 420px; height: 560px; background: var(--mark, none) center / contain no-repeat; opacity: .14; filter: brightness(0); transform: rotate(-8deg); pointer-events: none; }
.c-cu h2 { color: #1a0f05; position: relative; }
.c-cu h2 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; padding: 0; }
.c-cu > p { position: relative; font-size: 18px; margin-top: 12px; color: #2b1708; }
.c-cu ul, .c-info ul { list-style: none; position: relative; margin-top: 34px; display: grid; gap: 18px; }
.c-cu li, .c-info li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.c-cu li i { width: 44px; height: 44px; display: grid; place-items: center; background: #1a0f05; color: var(--b300); }
.c-cu li small { display: block; font-size: 12.5px; color: #3d220c; }
.c-cu li b, .c-info li b { font-family: var(--display); font-size: 17px; overflow-wrap: anywhere; }
.c-info { background: var(--n-night); color: #fff; padding: 56px 50px; position: relative; overflow: hidden; }
.c-info .mark { position: absolute; bottom: -30px; left: -50px; width: 330px; opacity: .08; }
.c-info h2 { color: #fff; font-size: 36px; position: relative; }
.c-info h2 em { color: var(--n-glow); }
.c-info > p { color: #e0cbcf; margin-top: 6px; position: relative; }
.c-info ul { gap: 22px; }
.c-info li { grid-template-columns: 46px 1fr; gap: 16px; }
.c-info li i { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; color: var(--n-glow); }
.c-info li small { display: block; color: var(--n-rose2); font-size: 12.5px; }
.c-info li b { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 600; font-size: 16px; }
.ct-form { padding: 56px 50px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; align-content: start; background: var(--s-coal); position: relative; }
.contact-bp .ct-form { background: #fff; }
.ct-form h3 { grid-column: 1 / -1; font-family: var(--display); font-size: 24px; color: var(--s-white); }
.contact-bp .ct-form h3 { font-weight: 800; color: var(--n-ink); }
.ct-form h3 small { display: block; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 14px; color: var(--s-muted); font-weight: 400; }
.ct-form .f { display: flex; flex-direction: column; gap: 8px; }
.ct-form .f.full { grid-column: 1 / -1; }
.ct-form .f label { font-size: 13.5px; font-weight: 600; color: #cfccc7; }
.contact-bp .ct-form .f label { color: var(--n-ink2); }
.ct-form input, .ct-form select, .ct-form textarea { width: 100%; min-width: 0; font: inherit; font-size: 15px; padding: 14px 16px; border: 1px solid #34373c; background: #121315; color: #fff; border-radius: 0; outline: none; }
.contact-bp .ct-form input, .contact-bp .ct-form select, .contact-bp .ct-form textarea { border-color: var(--n-rule); background: var(--n-paper); color: var(--n-ink); }
.ct-form textarea { min-height: 120px; resize: vertical; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { border-color: var(--brand); }
.ct-form .btn { grid-column: 1 / -1; justify-content: center; clip-path: none; }
.btn-mar { background: var(--n-mar); color: #fff; }
.btn-mar:hover { background: var(--n-wine); }
.ct-form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ct-ok, .ct-err { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14.5px; }
.ct-ok { background: color-mix(in oklab, var(--s-ok) 14%, transparent); color: var(--s-ok); border: 1px solid color-mix(in oklab, var(--s-ok) 40%, transparent); }
.ct-err { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5b5b5; }

/* ===== التذييل ===== */
.bz-foot { padding: 0 0 30px; }
[data-theme="blueprint"] .bz-foot { background: var(--n-night); color: #cdb6ba; }
[data-theme="power"] .bz-foot { color: var(--s-muted); }
.bz-foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 50px; padding: 80px 0 0; }
[data-theme="blueprint"] .bz-foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.bz-foot h5 { margin-bottom: 18px; font-weight: 600; }
.bz-foot ul { gap: 9px; }
.bz-foot .f-about { margin-top: 18px; max-width: 360px; }
[data-theme="blueprint"] .bz-foot .f-about { margin-top: 22px; }
.bz-foot .f-reg { margin-top: 18px; display: grid; gap: 4px; font-size: 13px; }
.bz-foot-bottom { margin-top: 60px; padding-top: 24px; gap: 20px; }

/* ===== الجوال (من التصميم المعتمد) ===== */
@media (max-width: 1100px) {
  .breakers { grid-template-columns: repeat(2, 1fr); }
  .breakers .brk:nth-child(n+3)::before { display: none; }
  .loads { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .bz-live { display: none; }
  [data-theme="power"] .bz-logo img, [data-theme="blueprint"] .bz-logo img { height: 40px; }
  [data-theme="power"] .bz-logo .wm b { font-size: 15.5px; }
  .hero-power .chips { display: none; }
  .t1 { top: 40px; right: 0; } .t2 { top: 250px; left: 0; } .t3 { display: none; }
  .meter { margin-top: -70px; }
  .meter .box { grid-template-columns: 1fr 1fr; }
  .meter .mtr { padding: 22px 18px; border-inline-start: 0; border-top: 1px solid var(--s-line); }
  .meter .mtr:nth-child(even) { border-inline-start: 1px solid var(--s-line); }
  .meter .mtr:nth-child(-n+2) { border-top: 0; }
  .meter .mtr:last-child:nth-child(odd) { grid-column: span 2; }
  .meter .lcd { font-size: 30px; }
  .seals { margin-top: -50px; }
  .seals .row { grid-template-columns: 1fr 1fr !important; }
  .seal { padding: 16px; border-inline-start: 0; border-top: 1px solid var(--n-rule); gap: 12px; }
  .seal:nth-child(even) { border-inline-start: 1px solid var(--n-rule); }
  .seal:nth-child(-n+2) { border-top: 0; }
  .seal .ring { width: 44px; height: 44px; font-size: 10px; }
  .seal b { font-size: 13px; }
  .seal span { font-size: 11.5px; }
  .seal span.num { display: none; }
  .seal.v30 .n { font-size: 24px; }
  .partners { padding: 70px 0 10px; }
  .partners .wrap { grid-template-columns: 1fr; gap: 16px; }
  .p-row { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .p-row .p { padding: 2px 16px; }
  .p-row .p:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .p-row .p b { font-size: 16px; }
  .mk-sec { padding: 84px 0; }
  .mk-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .about-pw .grid, .about-bp .grid { grid-template-columns: 1fr; gap: 50px; }
  .about-bp .grid { gap: 40px; }
  .about-pw .big { font-size: 18px; }
  .about-pw .vm, .about-bp .vm { grid-template-columns: 1fr; }
  .collage { height: 380px; }
  .collage .frame { inset-inline-end: -8px; }
  .timeline { grid-template-columns: 1fr; margin-top: 60px; gap: 0; }
  .timeline::before { top: 0; bottom: 0; inset-inline-start: 9px; inset-inline-end: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--s-cu), color-mix(in oklab, var(--brand) 15%, transparent)); }
  .step { padding: 0 40px 30px 0; padding-inline-start: 40px; padding-inline-end: 0; }
  .step::before { top: 2px; }
  .about-bp .lede { font-size: 19px; }
  .quote { font-size: 17px; padding: 20px 22px; }
  .about-bp .photo { height: 300px; }
  .board { padding: 24px 12px 18px; }
  .plate { margin: 0 6px 20px; font-size: 12px; }
  .bus { margin: 0 6px; }
  .breakers { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 6px; }
  .brk { padding: 0 14px 18px; }
  .sw { width: 38px; height: 62px; margin: 16px auto 14px; }
  .sw i { height: 28px; }
  .brk h3 { font-size: 15px; }
  .brk p { display: none; }
  .div3 { grid-template-columns: 1fr; }
  .dv { border-inline-start: 0; border-top: 1px solid var(--n-rule); }
  .dv:first-child { border-top: 0; }
  .dv .bd { padding: 26px 22px 30px; }
  .others { grid-template-columns: 1fr 1fr; }
  .o { border-inline-start: 0; border-top: 1px solid var(--n-rule); padding: 16px; }
  .o:nth-child(even) { border-inline-start: 1px solid var(--n-rule); }
  .o:nth-child(-n+2) { border-top: 0; }
  .o:last-child:nth-child(odd) { grid-column: span 2; }
  .pgrid.c2, .pgrid.c1 { grid-template-columns: 1fr; }
  .pgrid.c1 .pcard { display: flex; }
  .pgrid.c1 .pcard-img { min-height: 0; height: 210px; }
  .sec-band .inner { grid-template-columns: 1fr; min-height: 0; }
  .sec-band .photo { height: 280px; order: -1; }
  .sec-band .photo::after { background: linear-gradient(0deg, var(--s-ink), transparent 60%); }
  .sec-band .txt { padding: 10px 20px 80px; }
  .order { grid-template-columns: 1fr auto; }
  .order .no { display: none; }
  .sld { display: none; }
  .source { align-items: stretch; }
  .source .card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .source .card .tot { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--s-line); padding-top: 10px; width: 100%; }
  .loads { grid-template-columns: 1fr; gap: 12px; margin-top: 0; padding-inline-start: 22px; position: relative; }
  .loads::before { content: ""; position: absolute; top: 0; bottom: 30px; inset-inline-start: 6px; width: 3px; background: linear-gradient(180deg, var(--b400), var(--brand)); }
  .load::before { content: ""; position: absolute; top: 30px; inset-inline-start: -17px; width: 16px; height: 2px; background: var(--brand); }
  .load h4 { min-height: 0; }
  .load.max { margin-top: 14px; }
  .why-grid { grid-template-columns: 1fr; }
  .ops .wrap { grid-template-columns: 1fr; gap: 40px; }
  .ops::before { background: rgba(14, 15, 16, .9); }
  .console .big b { font-size: 54px; }
  .values-grid { grid-template-columns: 1fr; gap: 50px; }
  .group-next { margin-top: 60px; }
  .depts { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .dept { padding: 18px 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 20px 16px 16px; }
  .stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .stat b { font-size: 40px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; }
  .certs .c-grid { grid-template-columns: 1fr; gap: 28px; }
  .certs .frame .mat img { height: 300px; }
  .safety { grid-template-columns: 1fr; }
  .safety .tx { padding: 70px 20px; }
  .safety .ph { min-height: 300px; }
  .safety .ph .badge { inset-inline: 20px; bottom: 20px; }
  .fleet-sec .wrap { grid-template-columns: 1fr; gap: 36px; }
  .fleet-sec::after { background: color-mix(in oklab, var(--n-night) 82%, transparent); }
  .fleet { grid-template-columns: 1fr 1fr; }
  .goals .grid { grid-template-columns: 1fr; gap: 44px; }
  .g { grid-template-columns: 64px 1fr; }
  .g .n { font-size: 34px; }
  .vision { padding: 40px 26px; }
  .vision p { font-size: 20px; }
  .contact-sec .grid, .contact-bp .grid { grid-template-columns: minmax(0, 1fr); }
  .c-cu, .c-info { padding: 40px 24px; }
  .ct-form { padding: 36px 22px; grid-template-columns: minmax(0, 1fr); }
  .bz-foot-grid, [data-theme="blueprint"] .bz-foot-grid { grid-template-columns: 1fr; gap: 34px; }
}