/* Paseer Enterprise — واجهات الهبوط */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Tajawal:wght@500;700;800;900&display=swap');

:root {
  --bg: #F5F8FC; --surface: #FFFFFF; --surface-2: #F0F5FB; --surface-3: #E7EEF7;
  --ink: #0A1B2E; --text: #1C2B3A; --text-2: #46586B; --text-3: #5E6E81;
  --border: #DCE5F0; --border-strong: #C4D2E2;
  --primary: #0B6BC0; --primary-2: #0E86D4; --primary-50: #E6F1FB; --accent: #0FA3A3; --gold: #C9971C; --violet: #5B45B8;
  --success: #167A4D; --warning: #9E6107; --danger: #C43D3D;
  /* ADR-DEC-129 (الخيار ب): تعبئة الأسطح ذات النص الأبيض منفصلة عن لون النص والروابط. في الفاتح تساوي --primary و--danger */
  --primary-fill: #0B6BC0; --danger-fill: #C43D3D;
  /* نص الحالة فوق خلفيته المُلوّنة الشفافة (.st): أغمق قليلاً من لون الحالة ليبلغ 4.5:1 فوق الخلفية الممزوجة */
  --ok-ink: #147047; --wa-ink: #8A5506; --no-ink: #B03535;
  --navy-1: #061426; --navy-2: #0A2442; --navy-3: #0D3563;
  --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --display: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  --r: 18px; --r-lg: 28px; --shadow: 0 1px 2px rgba(10,27,46,.05), 0 12px 32px -16px rgba(10,27,46,.22); --shadow-lg: 0 30px 80px -30px rgba(6,20,38,.45);
  --ease: cubic-bezier(.2,.7,.2,1); --wrap: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #07111E; --surface: #0D1A2B; --surface-2: #112136; --surface-3: #172B45; --ink: #F1F6FC; --text: #DCE6F2; --text-2: #A9BBCF; --text-3: #7F93AA; --border: #1E3350; --border-strong: #2A4468; --primary-50: #0F2A48; --primary: #3D9BEA; --primary-fill: #1F74C2; --danger-fill: #C4473B; --success: #3CC293; --warning: #F0A54A; --danger: #F47C70; --ok-ink: #3CC293; --wa-ink: #F0A54A; --no-ink: #F47C70; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7); color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #07111E; --surface: #0D1A2B; --surface-2: #112136; --surface-3: #172B45; --ink: #F1F6FC; --text: #DCE6F2; --text-2: #A9BBCF; --text-3: #7F93AA; --border: #1E3350; --border-strong: #2A4468; --primary-50: #0F2A48; --primary: #3D9BEA; --primary-fill: #1F74C2; --danger-fill: #C4473B; --success: #3CC293; --warning: #F0A54A; --danger: #F47C70; --ok-ink: #3CC293; --wa-ink: #F0A54A; --no-ink: #F47C70; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.75; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.25; letter-spacing: -.2px; }
p { margin: 0; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 16px; height: 16px; } .i-lg { width: 26px; height: 26px; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--primary-fill); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-2) 70%, transparent); outline-offset: 3px; border-radius: 8px; }

/* ---------- buttons & chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; transition: transform .2s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { background: linear-gradient(135deg, var(--primary-2), var(--primary-fill)); color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(11,107,192,.8); }
.btn-ghost { background: transparent; }
.btn-light { background: #fff; color: var(--navy-2); border: 0; }
.btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--primary-50); color: var(--primary); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--primary); text-transform: none; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.tag { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 11px; direction: ltr; unicode-bidi: isolate; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.hdr .wrap { display: flex; align-items: center; gap: 22px; height: 76px; }
.hdr.solid { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--border); box-shadow: 0 8px 30px -22px rgba(10,27,46,.5); }
.hdr.on-dark:not(.solid) { color: #fff; }
.hdr.on-dark:not(.solid) .logo b { color: #fff; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 19px; }
.logo .mk { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-2), var(--navy-3)); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 20px -10px rgba(11,107,192,.8); }
.logo b { color: var(--ink); } .logo span { font-weight: 500; font-size: 13px; opacity: .7; display: block; line-height: 1; font-family: var(--font); }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 12px; }
.nav > a, .nav > .dd > button { background: none; border: 0; color: inherit; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; }
.nav > a:hover, .nav > .dd > button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.nav a.on { color: var(--primary); }
.hdr.on-dark:not(.solid) .nav a.on { color: #9ED0FF; }
.dd { position: relative; }
.mega { position: absolute; top: calc(100% + 10px); inset-inline-start: -120px; width: min(760px, 92vw); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s var(--ease); }
.dd.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; }
.mega a:hover { background: var(--surface-2); }
.mega .pi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.mega b { display: block; color: var(--ink); font-size: 14.5px; } .mega small { color: var(--text-3); font-size: 12.5px; line-height: 1.5; display: block; }
.hdr .sp { flex: 1; }
.hdr .tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: none; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); color: inherit; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.lang { font-weight: 800; font-size: 13px; }
.burger { display: none; }
.mnav { position: fixed; inset: 76px 0 0; background: var(--surface); z-index: 49; padding: 18px 20px 40px; overflow: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .2s; }
.mnav.open { opacity: 1; visibility: visible; transform: none; }
.mnav a { display: flex; align-items: center; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--border); font-weight: 600; }
.mnav .pi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }

/* ---------- login menu: two distinct entry paths ---------- */
.lbtn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; background: none; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); color: inherit; font-weight: 700; font-size: 14px; }
.lbtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ldd .lmenu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s var(--ease); z-index: 60; }
.ldd.open .lmenu { opacity: 1; visibility: visible; transform: none; }
.lmenu a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--border); }
.lmenu a small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.lmenu a b { display: block; font-size: 14.5px; color: var(--ink); }
.lmenu .li-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.lmenu .lo-tenant .li-ic { background: linear-gradient(135deg, var(--primary-2), var(--primary-fill)); color: #fff; }
.lmenu .lo-tenant:hover { background: var(--primary-50); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.lmenu .lo-op { background: #12161D; border-color: #12161D; position: relative; overflow: hidden; }
.lmenu .lo-op::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(135deg, #F2A91E 0 8px, #12161D 8px 16px); }
.lmenu .lo-op b { color: #fff; } .lmenu .lo-op small { color: #A7B1BE; }
.lmenu .lo-op em { display: block; font-style: normal; font-size: 11px; color: #F6C66A; margin-top: 4px; }
.lmenu .lo-op .li-ic { background: linear-gradient(135deg, #F2A91E, #C97800); color: #16110A; }
.lmenu .lo-op:hover { background: #1B212A; }
.mnav .op-link { background: #12161D; color: #fff; border-radius: 12px; padding: 12px 10px; margin-top: 10px; border: 0; }
.mnav .op-link .i { color: #F2A91E; }
@media (max-width: 720px) { .lbtn span, .lbtn .i-sm { display: none; } .lbtn { width: 40px; padding: 0; justify-content: center; } }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: radial-gradient(1100px 520px at 80% -10%, rgba(14,134,212,.45), transparent 60%), radial-gradient(800px 500px at 0% 110%, rgba(15,163,163,.28), transparent 60%), linear-gradient(160deg, var(--navy-1), var(--navy-2) 55%, var(--navy-3)); padding: 150px 0 110px; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%); z-index: -1; }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; line-height: 1.18; margin: 18px 0 20px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #7CC4FF, #6EE7D8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: clamp(16px, 1.5vw, 19px); color: rgba(255,255,255,.82); max-width: 620px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 13px; font-weight: 600; }
.hero .pill b { background: #6EE7D8; color: var(--navy-1); border-radius: 999px; padding: 1px 10px; font-size: 12px; }
.hero .proof { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; font-size: 13px; color: rgba(255,255,255,.75); }
.hero .proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero .proof .i { color: #6EE7D8; }
.hero.product { padding-bottom: 90px; }
.hero .crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.7); }
.hero .crumb a:hover { color: #fff; }

/* hero mock */
.mock { position: relative; min-height: 460px; }
.m-card { position: absolute; background: rgba(255,255,255,.96); color: var(--navy-1); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.6) inset; padding: 18px; }
:root[data-theme="dark"] .m-card { background: rgba(13,26,43,.96); color: #E8F0FA; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) inset; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-card { background: rgba(13,26,43,.96); color: #E8F0FA; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) inset; } }
.m-main { inset: 20px 0 auto 40px; }
.m-card h5, .m-card .m-t { margin: 0; font-family: var(--display); font-size: 14px; font-weight: 700; }
.m-card small { font-size: 11.5px; opacity: .65; display: block; }
.m-float { animation: float 6s ease-in-out infinite; }
.m-float.d2 { animation-delay: -2s; } .m-float.d3 { animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-10px); } }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.m-kpi { background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 14px; padding: 10px; }
.m-kpi b { font-family: var(--display); font-size: 21px; display: block; line-height: 1.2; }
.m-kpi .up { color: var(--success); font-size: 11px; font-weight: 700; }
.m-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 14px; padding: 0 2px; }
.m-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--primary-2), var(--primary-fill)); opacity: .85; transform-origin: bottom; animation: grow 1.4s var(--ease) both; }
.m-bars i.t { background: linear-gradient(180deg, #6EE7D8, var(--accent)); }
@keyframes grow { from { transform: scaleY(0); } }
.m-chain { display: flex; align-items: center; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.m-chain span { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); transition: .3s; }
.m-chain span.on { background: var(--primary-fill); color: #fff; box-shadow: 0 6px 14px -6px var(--primary-fill); }
.m-chain em { font-style: normal; font-size: 10px; opacity: .5; }
.ring { --v: 70; --c: var(--primary-fill); width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in srgb, var(--c) 14%, transparent) 0); display: grid; place-items: center; flex: none; }
.ring::before { content: attr(data-l); width: 66px; height: 66px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); }
.m-card .ring::before { background: #fff; color: var(--navy-1); }
:root[data-theme="dark"] .m-card .ring::before { background: #0D1A2B; color: #E8F0FA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-card .ring::before { background: #0D1A2B; color: #E8F0FA; } }
.m-a { width: 250px; inset: auto auto 10px -10px; }
.m-b { width: 220px; inset: -20px auto auto 8px; }
.m-note { display: flex; align-items: center; gap: 10px; }
.m-note .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }

/* ---------- stats strip ---------- */
.stats { margin-top: -54px; position: relative; z-index: 2; }
.stats .box { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 24px 26px; border-inline-start: 1px solid var(--border); }
.stat:first-child { border-inline-start: 0; }
.stat b { display: block; font-family: var(--display); font-size: clamp(28px, 3vw, 38px); font-weight: 900; color: var(--ink); line-height: 1.1; }
.stat b small { font-size: 16px; color: var(--primary); }
.stat span { color: var(--text-2); font-size: 14px; }

/* ---------- sections ---------- */
section.s { padding: 110px 0; position: relative; }
section.s.alt { background: var(--surface); border-block: 1px solid var(--border); }
section.s.dark { background: linear-gradient(160deg, var(--navy-1), var(--navy-2)); color: rgba(255,255,255,.85); }
section.s.dark h2, section.s.dark h3 { color: #fff; }
section.s.dark .eyebrow { color: #7CC4FF; }
.s-head { max-width: 760px; margin-bottom: 52px; }
.s-head.center { margin-inline: auto; text-align: center; }
.s-head.center .eyebrow { justify-content: center; }
.s-head h2 { font-size: clamp(28px, 3.3vw, 42px); font-weight: 900; margin: 12px 0 14px; }
.s-head p { font-size: 17.5px; color: var(--text-2); }
section.s.dark .s-head p { color: rgba(255,255,255,.72); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .m-float, .m-bars i { animation: none; } html { scroll-behavior: auto; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; box-shadow: 0 1px 2px rgba(10,27,46,.04); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 15px; }
.ic-box { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); margin-bottom: 18px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* problem vs connected */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.pains { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.pain { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.pain .pxi { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); flex: none; }
.pain b { color: var(--ink); display: block; font-size: 15.5px; } .pain span { color: var(--text-2); font-size: 14px; }
.graph { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.graph svg { width: 100%; height: auto; }
.graph .gl { stroke: var(--border-strong); stroke-width: 1.6; fill: none; stroke-dasharray: 5 6; }
.graph .gl.live { stroke: var(--primary); stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.graph .gn rect { fill: var(--surface-2); stroke: var(--border-strong); }
.graph .gn.hot rect { fill: var(--primary-50); stroke: var(--primary); }
.graph .gn text { fill: var(--ink); font-family: var(--font); font-size: 13px; font-weight: 700; }
.graph .gn text.s { fill: var(--text-3); font-size: 11px; font-weight: 500; }
.graph .gcap { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--text-2); }
.graph .gcap span { display: inline-flex; align-items: center; gap: 6px; }
.graph .gcap i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* products */
.filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.filters button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; }
.filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.pcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pcard .top { display: flex; align-items: center; gap: 12px; }
.pcard .pi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 10px 22px -12px var(--c); }
.pcard h3 { font-size: 18px; } .pcard .en { font-size: 12px; color: var(--text-3); direction: ltr; text-align: start; }
.pcard p { color: var(--text-2); font-size: 14.5px; }
.pcard ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.pcard li { display: flex; gap: 8px; align-items: flex-start; } .pcard li .i { color: var(--c); margin-top: 4px; }
.pcard .more { margin-top: auto; font-weight: 800; font-size: 14px; color: var(--ct, var(--c)); display: inline-flex; align-items: center; gap: 6px; }
.pcard.core { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 26px; background: linear-gradient(120deg, var(--surface), var(--primary-50)); }
.pcard.core .body { flex: 1; }
.pcard[hidden] { display: none; }

/* differentiators */
.diff { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: stretch; }
.dtabs { display: flex; flex-direction: column; gap: 8px; }
.dtab { text-align: start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.78); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; transition: .2s; }
.dtab:hover { background: rgba(255,255,255,.07); }
.dtab.on { background: rgba(124,196,255,.12); border-color: rgba(124,196,255,.45); color: #fff; }
.dtab .n { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #7CC4FF; direction: ltr; margin-top: 4px; }
.dtab b { display: block; font-size: 15.5px; color: #fff; } .dtab span { font-size: 13px; }
.dpanel { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; gap: 18px; min-height: 420px; }
.dpanel h3 { font-size: 24px; }
.dpanel .quote { font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; border-inline-start: 3px solid #6EE7D8; padding-inline-start: 16px; line-height: 1.6; }
.dpanel .how { font-size: 14.5px; color: rgba(255,255,255,.72); }
.dviz { background: rgba(255,255,255,.95); color: var(--navy-1); --primary: #0B6BC0; --primary-fill: #0B6BC0; --text-3: #5E6E81; --success: #167A4D; --warning: #9E6107; --danger: #C43D3D; /* بطاقة بيضاء في الوضعين: تثبيت ألوان الوضع الفاتح */ border-radius: 18px; padding: 18px; margin-top: auto; }
.dviz .row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.dviz .bar { flex: 1; height: 10px; border-radius: 99px; background: #E7EEF7; overflow: hidden; }
.dviz .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary-2), var(--primary)); transition: width 1s var(--ease); }
.dviz .bar i.warn { background: linear-gradient(90deg, #F0A93B, var(--danger)); }
.dviz .lbl { width: 150px; flex: none; } .dviz .v { width: 52px; text-align: end; font-weight: 800; flex: none; }
.dviz .big { font-family: var(--display); font-size: 40px; font-weight: 900; line-height: 1; }

/* chains */
.chsel { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chsel button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: 13.5px; padding: 8px 14px; border-radius: 12px; }
.chsel button.on { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.chflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 18px 0; padding: 8px 2px 6px; }
.chstep { display: flex; flex-direction: column; gap: 8px; position: relative; padding-inline-end: 22px; }
.chstep:last-child { padding-inline-end: 0; }
.chstep::after { content: ""; position: absolute; top: 24px; inset-inline-end: 4px; width: 18px; height: 2px; background: var(--border-strong); }
.chstep:last-child::after { display: none; }
.chstep .dot { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 10px 22px -12px var(--c); }
.chstep b { font-size: 14.5px; color: var(--ink); line-height: 1.45; } .chstep small { font-size: 12px; color: var(--text-3); }
.chrule { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--primary-50); color: var(--text); font-size: 14.5px; }
.chrule .i { color: var(--primary); margin-top: 4px; }

/* feature split with mock */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.feat.rev > :first-child { order: 2; }
.checks { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 28px; }
.checks div { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.checks .i { color: var(--success); margin-top: 5px; }
.checks b { color: var(--ink); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px; }
.panel h4, .panel .p-t { font-size: 16px; }
.panel .p-t { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.25; letter-spacing: -.2px; font-weight: 700; }
.iso-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.iso-rings > div { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.iso-rings small { font-weight: 500; color: var(--text-3); font-size: 11.5px; }
.lines { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.line .ref { font-family: ui-monospace, Consolas, monospace; direction: ltr; color: var(--text-3); font-size: 12px; }
.st { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.st.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--ok-ink); }
.st.wa { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--wa-ink); }
.st.no { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--no-ink); }
.chat { display: flex; flex-direction: column; gap: 12px; }
.bub { max-width: 88%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.7; }
.bub.me { align-self: flex-start; background: var(--primary-fill); color: #fff; border-end-start-radius: 6px; }
.bub.ai { align-self: flex-end; background: var(--surface-2); border: 1px solid var(--border); border-end-end-radius: 6px; }
.bub .src { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bub .src span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--primary); font-weight: 700; }
.bub .gate { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-3); }

/* trust & timeline */
.tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.tl .card { position: relative; padding-top: 34px; }
.tl .card::before { counter-increment: s; content: counter(s); position: absolute; top: -18px; inset-inline-start: 24px; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-family: var(--display); font-weight: 900; background: linear-gradient(135deg, var(--primary-2), var(--primary-fill)); color: #fff; box-shadow: 0 10px 20px -10px var(--primary-fill); }

/* packages */
.pk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pkc { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); position: relative; }
.pkc.hl { border: 2px solid var(--primary); box-shadow: var(--shadow-lg); }
.pkc .badge { position: absolute; top: -13px; inset-inline-start: 26px; background: var(--primary-fill); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; }
.pkc h3 { font-size: 22px; } .pkc .for { color: var(--text-2); font-size: 14.5px; }
.pkc dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 14px; padding: 16px 0; border-block: 1px solid var(--border); }
.pkc dt { color: var(--text-2); } .pkc dd { margin: 0; font-weight: 800; color: var(--ink); }
.pkc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pkc li { display: flex; gap: 8px; } .pkc li .i { color: var(--success); margin-top: 4px; }
.pkc .btn { margin-top: auto; }

/* sectors & faq */
.sectors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sector { padding: 22px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.sector .ic-box { margin-bottom: 4px; }
.sector b { color: var(--ink); font-size: 16px; } .sector span { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.faq { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 22px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-weight: 700; color: var(--ink); font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform .2s; color: var(--text-3); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { padding-bottom: 18px; color: var(--text-2); }

/* demo */
.demo { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 50px; align-items: start; }
.form { background: var(--surface); color: var(--text); border-radius: 26px; padding: 30px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.fld input, .fld select, .fld textarea { font: inherit; font-size: 15px; height: 48px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0 14px; }
.fld textarea { height: 96px; padding: 12px 14px; resize: vertical; }
.fld .err { color: var(--danger); font-size: 12.5px; min-height: 1em; }
.fld.bad input, .fld.bad select { border-color: var(--danger); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; cursor: pointer; }
.opts input { accent-color: var(--primary); }
.opts label:has(input:checked) { border-color: var(--primary); background: var(--primary-50); color: var(--primary); }
.okbox { grid-column: 1 / -1; text-align: center; padding: 40px 10px; }
.okbox .ic-box { margin-inline: auto; width: 64px; height: 64px; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.note { font-size: 12.5px; color: var(--text-3); }
.contact-lines { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.contact-lines div { display: flex; gap: 12px; align-items: center; }
.contact-lines .ic-box { margin: 0; width: 44px; height: 44px; background: rgba(255,255,255,.1); color: #7CC4FF; }

/* CTA band & footer */
.band { border-radius: 30px; padding: 56px; background: radial-gradient(600px 300px at 90% 0, rgba(110,231,216,.3), transparent 60%), linear-gradient(135deg, var(--primary-fill), var(--navy-3)); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); font-weight: 900; }
.band p { color: rgba(255,255,255,.8); margin-top: 8px; max-width: 620px; }
.ftr { background: var(--navy-1); color: rgba(255,255,255,.7); padding: 70px 0 30px; margin-top: 110px; font-size: 14px; }
.ftr .cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.ftr h4, .ftr .fh { color: #fff; font-size: 15px; margin-bottom: 14px; font-family: var(--display); line-height: 1.25; letter-spacing: -.2px; font-weight: 700; }
.ftr a { display: block; padding: 4px 0; } .ftr a:hover { color: #fff; }
.ftr .logo b { color: #fff; }
.ftr .base { margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* product page specifics */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cap { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cap .ic-box { background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); margin: 0; }
.cap b { color: var(--ink); font-size: 16.5px; font-family: var(--display); } .cap span { color: var(--text-2); font-size: 14.5px; }
.before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ba { padding: 28px; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); }
.ba.after { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
.ba h3 { font-size: 18px; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.ba ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ba li { display: flex; gap: 10px; font-size: 15px; } .ba li .i { margin-top: 5px; }
.ba.before li .i { color: var(--danger); } .ba.after li .i { color: var(--success); }
.conn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.conn a { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: .2s; }
.conn a:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.conn .pi { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.conn b { display: block; color: var(--ink); font-size: 14.5px; } .conn span { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.xlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.x { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.x .n { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #7CC4FF; direction: ltr; display: inline-block; }
.x b { display: block; color: #fff; font-size: 17px; margin: 4px 0 8px; font-family: var(--display); }
.x p { font-size: 14px; color: rgba(255,255,255,.7); }
.x q { display: block; margin-top: 12px; font-size: 14.5px; color: #6EE7D8; font-weight: 600; quotes: '«' '»'; }
.roles { display: flex; gap: 10px; flex-wrap: wrap; }
.roles span { padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.roles .i { color: var(--c); }
.pmock { --c: var(--primary-fill); }
.pmock .m-main { border-top: 4px solid var(--c); }
.pmock .m-kpi { background: color-mix(in srgb, var(--c) 9%, transparent); }
.pmock .m-bars i { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); }
.pmock .m-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pmock .m-li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 6%, transparent); }
.pmock .m-li b { flex: 1; font-weight: 700; } .pmock .m-li .dt { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }

/* responsive */
@media (max-width: 1100px) {
  .nav { display: none; } .burger { display: grid; }
  .hero .grid, .split, .feat, .diff, .demo { grid-template-columns: 1fr; gap: 40px; }
  .feat.rev > :first-child { order: 0; }
  .mock { min-height: 420px; max-width: 560px; }
  .pgrid, .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .ftr .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  section.s { padding: 76px 0; }
  .hero { padding: 120px 0 90px; }
  .stats .box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .pgrid, .caps, .g2, .g3, .pk, .before-after, .xlist, .conn, .tl, .g4 { grid-template-columns: 1fr; }
  .pcard.core { flex-direction: column; align-items: flex-start; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .band { padding: 34px 24px; }
  .mock { min-height: 380px; }
  .m-main { inset: 0 0 auto 0; }
  .m-a { width: 210px; inset: auto auto -10px -6px; }
  .m-b { display: none; }
  .ftr .cols { grid-template-columns: 1fr; }
  .dviz .lbl { width: 110px; }
  .hdr .tools .btn { display: none; }
}
.pmock .m-main { inset: 48px 0 auto 40px; }
@media (max-width: 720px) { .logo { font-size: 16px; white-space: nowrap; } .logo div > span { display: none; } .logo .mk { width: 34px; height: 34px; } .hdr .tools { gap: 6px; } .hdr .wrap { gap: 10px; } }

/* audit: header tools on small phones */
@media (max-width: 420px) {
  .hdr .tools { gap: 4px; }
  .hdr .icon-btn, .hdr .lbtn { width: 36px; height: 36px; }
}

/* audit: tighter header on very small phones */
@media (max-width: 430px) {
  .hdr .tools { gap: 3px; }
  .hdr .icon-btn, .hdr .lbtn { width: 34px; height: 34px; }
  .hdr .wrap { gap: 8px; }
}

/* audit: login menu fits phones */
@media (max-width: 520px) {
  .ldd .lmenu { position: fixed; inset-inline: 12px; width: auto; top: 70px; }
}

/* بدء طلب التجربة أو الاشتراك: يقود إلى صفحة التسجيل مع اتفاقية الترخيص */
.form.start { align-content: start; }
.st-opt { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.st-opt:hover, .st-opt:focus-visible { border-color: var(--primary); transform: translateY(-1px); }
.st-opt .ic-box { margin: 0; flex: none; }
.st-opt b { display: block; font-size: 17px; } .st-opt small { display: block; color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.st-steps { margin: 4px 0 0; padding-inline-start: 20px; color: var(--text-2); font-size: 13.5px; line-height: 2; }
/* UXR-045: خطوات صفحة الطلب مرقّمة «الخطوة 1 من 3» ومفصولة عما يحدث بعد الإرسال */
.st-h { display: block; font-size: 14px; margin-top: 10px; }
.st-opt small[data-lic-note] { color: var(--text); font-weight: 600; }

/* زر ذكاء اصطناعي معطّل: رمادي باهت بسبب مقروء بدل أن يبدو متاحاً ثم يفشل */
.ai-off, .icon-btn.ai-btn.ai-off, .btn.ai-off { background: var(--surface-2, #EEF1F5) !important; color: var(--text-3, #6B7280) !important;
  border-color: var(--border, #D8E0E8) !important; box-shadow: none !important; cursor: not-allowed; opacity: .75; filter: grayscale(1); }
.ai-off svg { opacity: .8; }

/* شعار بصير المؤسسية بلون الهوية */
.logo .mk.px-logo { background: #0074C7; }
.logo .mk.px-logo svg { width: 70%; height: 70%; }

/* مراجعة الجودة (الدفعة 1): زر الاختيار في نموذج الدعم بمساحة نقر 32 بكسل مع بقاء الدائرة المرئية بحجمها */
@media (max-width: 768px) {
  .opts input[type="radio"] { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; margin: -9px; position: relative; flex: none; background: transparent; border: 0; cursor: pointer; }
  .opts input[type="radio"]::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); }
  .opts input[type="radio"]:checked::before { border: 4px solid var(--primary); }
  .opts input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: 50%; }
}

/* ---------- تباين لون الاتصالات الإدارية #A87B2A حين يكون نصاً (WCAG AA · 2026-09-25) ----------
   يبقى اللون للأيقونات والتعبئة؛ نصه في الوضع الفاتح 3.8:1 فيُعتم إلى #8F6A24 (4.6:1 فوق الخلفية)، وفي الداكن لون نصه من جدول ألوان المنتجات أدناه (ADR-DEC-129) */
.eyebrow[style*="#A87B2A"] { color: #8F6A24 !important; } .pcard[style*="--c:#A87B2A"] { --ct: #8F6A24; }

/* UXR-025: الحقول المطلوبة معلّمة، والحقل المخالف بإطار الخطر بجانب رسالته */
.req { color: var(--danger); font-weight: 800; }
.fld.bad textarea, .fld [aria-invalid="true"] { border-color: var(--danger); }
.opts[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 4px; border-radius: 12px; }
.px-num { unicode-bidi: isolate; white-space: nowrap; }

/* ADR-DEC-129: لون نص لكل منتج في الوضع الداكن (--ct، تباينه 4.6 فأكثر على أفتح خلفية داكنة #172B45 و6.1 على خلفية الصفحة)،
   يُستعمل لعناوين المنتج وروابطه النصية وحدها، ويبقى لون المنتج الأصلي (--c) للأيقونات والتعبئة */
:root[data-theme="dark"] [style*="--c:#1F5FBF"] { --ct: #6994D4; } :root[data-theme="dark"] .eyebrow[style*="color:#1F5FBF"] { color: #6994D4 !important; }
:root[data-theme="dark"] [style*="--c:#0B6BC0"] { --ct: #5799D4; } :root[data-theme="dark"] .eyebrow[style*="color:#0B6BC0"] { color: #5799D4 !important; }
:root[data-theme="dark"] [style*="--c:#5B45B8"] { --ct: #988AD2; } :root[data-theme="dark"] .eyebrow[style*="color:#5B45B8"] { color: #988AD2 !important; }
:root[data-theme="dark"] [style*="--c:#A87B2A"] { --ct: #B38C46; } :root[data-theme="dark"] .eyebrow[style*="color:#A87B2A"] { color: #B38C46 !important; }
:root[data-theme="dark"] [style*="--c:#B4453A"] { --ct: #CB7F77; } :root[data-theme="dark"] .eyebrow[style*="color:#B4453A"] { color: #CB7F77 !important; }
:root[data-theme="dark"] [style*="--c:#0F766E"] { --ct: #579F9A; } :root[data-theme="dark"] .eyebrow[style*="color:#0F766E"] { color: #579F9A !important; }
:root[data-theme="dark"] [style*="--c:#13795B"] { --ct: #57A08B; } :root[data-theme="dark"] .eyebrow[style*="color:#13795B"] { color: #57A08B !important; }
:root[data-theme="dark"] [style*="--c:#C2410C"] { --ct: #D57C57; } :root[data-theme="dark"] .eyebrow[style*="color:#C2410C"] { color: #D57C57 !important; }
:root[data-theme="dark"] [style*="--c:#3F7D3A"] { --ct: #6F9E6B; } :root[data-theme="dark"] .eyebrow[style*="color:#3F7D3A"] { color: #6F9E6B !important; }
:root[data-theme="dark"] [style*="--c:#4A5A66"] { --ct: #89949C; } :root[data-theme="dark"] .eyebrow[style*="color:#4A5A66"] { color: #89949C !important; }
:root[data-theme="dark"] [style*="--c:#6E2A6B"] { --ct: #AE88AC; } :root[data-theme="dark"] .eyebrow[style*="color:#6E2A6B"] { color: #AE88AC !important; }
:root[data-theme="dark"] [style*="--c:#4C46C8"] { --ct: #8E8ADC; } :root[data-theme="dark"] .eyebrow[style*="color:#4C46C8"] { color: #8E8ADC !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="--c:#1F5FBF"] { --ct: #6994D4; } :root:not([data-theme="light"]) .eyebrow[style*="color:#1F5FBF"] { color: #6994D4 !important; }
  :root:not([data-theme="light"]) [style*="--c:#0B6BC0"] { --ct: #5799D4; } :root:not([data-theme="light"]) .eyebrow[style*="color:#0B6BC0"] { color: #5799D4 !important; }
  :root:not([data-theme="light"]) [style*="--c:#5B45B8"] { --ct: #988AD2; } :root:not([data-theme="light"]) .eyebrow[style*="color:#5B45B8"] { color: #988AD2 !important; }
  :root:not([data-theme="light"]) [style*="--c:#A87B2A"] { --ct: #B38C46; } :root:not([data-theme="light"]) .eyebrow[style*="color:#A87B2A"] { color: #B38C46 !important; }
  :root:not([data-theme="light"]) [style*="--c:#B4453A"] { --ct: #CB7F77; } :root:not([data-theme="light"]) .eyebrow[style*="color:#B4453A"] { color: #CB7F77 !important; }
  :root:not([data-theme="light"]) [style*="--c:#0F766E"] { --ct: #579F9A; } :root:not([data-theme="light"]) .eyebrow[style*="color:#0F766E"] { color: #579F9A !important; }
  :root:not([data-theme="light"]) [style*="--c:#13795B"] { --ct: #57A08B; } :root:not([data-theme="light"]) .eyebrow[style*="color:#13795B"] { color: #57A08B !important; }
  :root:not([data-theme="light"]) [style*="--c:#C2410C"] { --ct: #D57C57; } :root:not([data-theme="light"]) .eyebrow[style*="color:#C2410C"] { color: #D57C57 !important; }
  :root:not([data-theme="light"]) [style*="--c:#3F7D3A"] { --ct: #6F9E6B; } :root:not([data-theme="light"]) .eyebrow[style*="color:#3F7D3A"] { color: #6F9E6B !important; }
  :root:not([data-theme="light"]) [style*="--c:#4A5A66"] { --ct: #89949C; } :root:not([data-theme="light"]) .eyebrow[style*="color:#4A5A66"] { color: #89949C !important; }
  :root:not([data-theme="light"]) [style*="--c:#6E2A6B"] { --ct: #AE88AC; } :root:not([data-theme="light"]) .eyebrow[style*="color:#6E2A6B"] { color: #AE88AC !important; }
  :root:not([data-theme="light"]) [style*="--c:#4C46C8"] { --ct: #8E8ADC; } :root:not([data-theme="light"]) .eyebrow[style*="color:#4C46C8"] { color: #8E8ADC !important; }
}
/* ADR-DEC-128 · 130: أرقام المتطلبات وحالات الاستخدام لمدير النظام (منصة بصير) وحده، والموقع التعريفي عام فلا تظهر فيه، وتبقى في الشجرة للتتبع */
html:not(.px-show-reqs) .req-tag, html:not(.px-show-reqs) .hero-reqs, html:not(.px-show-reqs) .req-id { display: none !important; }