/* Hallmark · macrostructure: bespoke «الخانات» — ألواح لونية كاملة العرض تتناوب
 * genre: modern-minimal · theme: custom (bespoke) · tone: technical-confident
 * axes: paper-band light / display geometric-arabic / accent-hue cool
 * قاعدة اللون: الرمادي = الخانة الحالية · الأزرق = الخانة التالية. اللون يحمل معنى.
 * enrichment: «لوحة التجميع» — Tier A، DOM/CSS خالص، بلا صور ولا إطارات وهمية
 * motion: تسلسل تحميل · تجميع الفوضى إلى نظام · كشف الألواح
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * RTL: خصائص منطقية فقط — راجع arabic-rtl-ui
 */

/* ══ الأساس ══════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  scroll-padding-block-start:96px;
  overflow-x:clip;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-md);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-style:normal;              /* العناوين رومانية دائمًا */
  font-weight:600;
  line-height:var(--leading-tight);
  margin:0;
  /* لا text-wrap:balance — يعيد توزيع الكلمات ليساوي أطوال الأسطر،
     فتطلع الفواصل بين الكلمات متفاوتة وركيكة في العربية. */
  text-wrap:pretty;
  overflow-wrap:break-word;       /* لا anywhere — يكسر وصل الحروف العربية */
  min-width:0;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-inline-size:100%; }

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;           /* لاتيني فقط — ممنوع على العربية */
}
.ta{ text-align:end; }
.ctr{ text-align:center; }
.fine{ font-size:var(--text-xs); color:var(--color-ink-faint); }

.sr{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.skip{
  position:absolute; inset-inline-start:-9999px; inset-block-start:0; z-index:300;
  background:var(--color-blue); color:#fff; padding:14px 22px;
}
.skip:focus{ inset-inline-start:0; }

:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:3px; border-radius:3px;
}

.shell{ inline-size:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; }
.shell-mid{ inline-size:min(100% - (var(--gutter) * 2), 860px); margin-inline:auto; }
.shell-narrow{ inline-size:min(100% - (var(--gutter) * 2), 700px); margin-inline:auto; }

/* ══ الألواح — إيقاع الخانات ═════════════
   أبيض ← أزرق ← أبيض ← رمادي ← أبيض ← رمادي ← أزرق ← أبيض
   ═══════════════════════════════════════ */
.plane{ position:relative; padding-block:var(--space-3xl); }
.plane-tight{ padding-block:var(--space-2xl); }

.plane-paper{ background:var(--color-paper); color:var(--color-ink); }
.plane-tint{ background:var(--color-paper-2); color:var(--color-ink); }
.plane-deep{ background:var(--color-blue-deep); color:var(--on-deep); }

/* شبكة خفيفة تظهر على اللوح الأزرق فقط — أثر المخطط */
.plane-deep::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to left, var(--on-deep-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--on-deep-line) 1px, transparent 1px);
  background-size:180px 180px, 180px 180px;
  opacity:.4;
}
.plane > .shell{ position:relative; z-index:1; }

.plane-head{ max-inline-size:60ch; margin-block-end:var(--space-2xl); }
.plane-head h2{ font-size:var(--text-display-s); margin-block-end:var(--space-sm); }
.plane-head p{ color:var(--color-ink-soft); font-size:var(--text-md); }
.plane-deep .plane-head p{ color:var(--on-deep-soft); }

/* ══ الترويسة ══════════════════════════ */
.head{
  position:sticky; inset-block-start:0; z-index:60;
  background:color-mix(in oklab, var(--color-paper) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-block-end:var(--rule) solid transparent;
  transition:border-color var(--dur-short) var(--ease-out),
             background var(--dur-short) var(--ease-out);
}
.head.is-stuck{
  border-block-end-color:var(--color-line);
  background:color-mix(in oklab, var(--color-paper) 95%, transparent);
}
.head-rail{
  position:absolute; inset-block-end:-1px; inset-inline-start:0;
  block-size:2px; inline-size:100%;
  background:var(--color-blue);
  transform:scaleX(0); transform-origin:right center;   /* RTL: يبدأ من اليمين */
  will-change:transform;
}
.head-in{
  display:flex; align-items:center; gap:var(--space-lg);
  block-size:84px;
  transition:block-size var(--dur-short) var(--ease-out);
}
.head.is-stuck .head-in{ block-size:64px; }

/* العلامة: مربع رمادي ومربع أزرق — الخانة والخانة التالية */
.brand{ display:flex; align-items:center; gap:10px; padding-block:5px; }
.mark{ position:relative; inline-size:28px; block-size:28px; flex:none; }
.mark i{
  position:absolute; inset-block-start:0; inset-inline-end:0;
  inline-size:17px; block-size:17px;
  border:2px solid var(--color-line-2);
  transition:border-color var(--dur-short) var(--ease-out);
}
.mark b{
  position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:15px; block-size:15px;
  background:var(--color-blue);
  transition:transform var(--dur-short) var(--ease-out);
}
.brand:hover .mark b{ transform:translate(-2px,-2px); }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); }

.plane-deep .mark i, .foot .mark i{ border-color:var(--on-deep-line); }
.plane-deep .mark b, .foot .mark b{ background:var(--color-paper); }

.nav{ display:flex; gap:var(--space-lg); margin-inline-start:auto; }
.nav a{
  position:relative; padding-block:8px;
  font-size:var(--text-base); color:var(--color-ink-soft);
  transition:color var(--dur-micro) var(--ease-out);
}
.nav a::after{
  content:""; position:absolute; inset-block-end:2px;
  inset-inline-start:0; inline-size:100%; block-size:2px;
  background:var(--color-blue);
  transform:scaleX(0); transform-origin:right center;
  transition:transform var(--dur-short) var(--ease-out);
}
.nav a:hover{ color:var(--color-ink); }
.nav a:hover::after{ transform:scaleX(1); }

.head-act{ display:flex; align-items:center; gap:var(--space-sm); }

/* ══ الأزرار ═══════════════════════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-block-size:50px; padding-inline:26px;
  background:var(--color-blue); color:#fff;      /* 5.9:1 — يعدّي AA */
  font-family:var(--font-body); font-size:var(--text-base); font-weight:600;
  line-height:1.4; text-align:center; white-space:nowrap;
  border:2px solid var(--color-blue); border-radius:var(--radius-sm);
  cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-short) var(--ease-out);
}
.btn:hover{ background:var(--color-blue-ink); border-color:var(--color-blue-ink); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn[data-state="loading"]{ color:transparent; pointer-events:none; }
.btn[data-state="loading"] .btn-spin{ opacity:1; }
.btn[data-state="error"]{ background:transparent; color:var(--color-alert); border-color:var(--color-alert); }
.btn[data-state="success"]{ background:var(--color-ink); border-color:var(--color-ink); color:#fff; }

.btn-spin{
  position:absolute; inline-size:18px; block-size:18px; opacity:0;
  border:2px solid rgba(255,255,255,.35);
  border-block-start-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.btn-line{
  background:transparent; color:var(--color-ink);
  border-color:var(--color-line-2);
}
.btn-line:hover{ background:var(--color-blue-tint); border-color:var(--color-blue); color:var(--color-blue-ink); }

/* على الألواح الزرقاء ينقلب: أبيض ممتلئ */
.btn-invert,
.plane-deep .btn, .foot .btn{
  background:var(--color-paper); color:var(--color-blue-deep);
  border-color:var(--color-paper);
}
.btn-invert:hover,
.plane-deep .btn:hover, .foot .btn:hover{
  background:var(--color-blue-tint); border-color:var(--color-blue-tint); color:var(--color-blue-deep);
}
.plane-deep .btn-line, .foot .btn-line{
  background:transparent; color:var(--on-deep); border-color:var(--on-deep-line);
}
.plane-deep .btn-line:hover, .foot .btn-line:hover{
  background:rgba(255,255,255,.1); border-color:var(--color-paper); color:var(--on-deep);
}
.plane-deep .btn-spin{ border-color:rgba(8,32,107,.3); border-block-start-color:var(--color-blue-deep); }

.btn-sm{ min-block-size:42px; padding-inline:18px; font-size:var(--text-sm); }
.btn-lg{ min-block-size:58px; padding-inline:32px; font-size:var(--text-md); }
.btn-block{ inline-size:100%; }

/* ══ الدرج ═════════════════════════════ */
.burger{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  inline-size:46px; block-size:46px; padding-inline:12px;
  background:none; border:var(--rule) solid var(--color-line-2);
  border-radius:var(--radius-sm); cursor:pointer;
}
.burger span{ display:block; block-size:2px; background:var(--color-ink); transition:transform var(--dur-short) var(--ease-out); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(10,26,51,.42); backdrop-filter:blur(3px);
  animation:fadeIn var(--dur-short) var(--ease-out);
}
@keyframes fadeIn{ from{ opacity:0 } }

/* RTL: inset-inline-start = الحافة اليمنى، والدرج يدخل منها */
.drawer{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:80;
  inline-size:min(86vw, 340px);
  background:var(--color-paper);
  border-inline-end:var(--rule) solid var(--color-line);
  box-shadow:var(--shadow-lift);
  padding:var(--space-lg); padding-block-start:var(--space-2xl);
  display:flex; flex-direction:column; gap:var(--space-md);
  animation:drawerIn var(--dur-long) var(--ease-out);
}
@keyframes drawerIn{ from{ transform:translateX(100%) } }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  padding-block:16px; font-size:var(--text-md);
  border-block-end:var(--rule) solid var(--color-line);
  transition:color var(--dur-micro) var(--ease-out);
}
.drawer nav a:hover{ color:var(--color-blue); }
.drawer-x{
  position:absolute; inset-block-start:20px; inset-inline-end:20px;
  inline-size:44px; block-size:44px;
  background:none; border:var(--rule) solid var(--color-line-2);
  border-radius:var(--radius-sm); color:var(--color-ink);
  font-size:var(--text-md); cursor:pointer;
}
.drawer .btn{ margin-block-start:auto; }

/* ══ الواجهة ═══════════════════════════ */
.hero{ padding-block:var(--space-3xl) var(--space-2xl); }
.hero-grid{
  display:grid; gap:var(--space-2xl);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--color-blue-tint); color:var(--color-blue-ink);
  font-size:var(--text-sm); font-weight:600;
  margin-block-end:var(--space-md);
}
h1{
  font-size:var(--text-display); font-weight:700;
  /* 1.4 وليس 1.2 — الشدّة في «نحوّل» تصطدم بالسطر اللي فوقها عند القيم اللاتينية.
     ولا letter-spacing على العربية إطلاقًا: يكسر وصل الحروف. */
  line-height:1.45;
  margin-block-end:var(--space-md);
}
.hl{ position:relative; color:var(--color-blue); white-space:nowrap; }
h1 .hl::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:-.06em;
  block-size:5px; background:var(--color-blue); border-radius:3px;
  transform:scaleX(0); transform-origin:right center;
  animation:ruleIn var(--dur-long) var(--ease-out) .38s forwards;
}
@keyframes ruleIn{ to{ transform:scaleX(1) } }

.lede{ font-size:var(--text-md); color:var(--color-ink-soft); max-inline-size:50ch; margin-block-end:var(--space-lg); }
.row-cta{ display:flex; flex-wrap:wrap; gap:var(--space-sm); }

.commit{
  display:flex; flex-direction:column; gap:12px;
  margin-block-start:var(--space-lg); padding-block-start:var(--space-md);
  border-block-start:var(--rule) solid var(--color-line);
}
.commit li{ position:relative; padding-inline-start:22px; font-size:var(--text-sm); color:var(--color-ink-soft); }
.commit li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  inline-size:9px; block-size:9px; background:var(--color-blue); border-radius:2px;
}

/* ══ لوحة التجميع — الحركة الموقّعة ═════ */
.stage{ margin:0; }
.stage-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); margin-block-end:var(--space-sm); }
.stage-label{
  font-size:var(--text-xs); font-weight:600;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--color-paper-2); color:var(--color-ink-soft);
  transition:background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.stage-label.is-after{ background:var(--color-blue); color:#fff; }

.replay{
  display:inline-flex; align-items:center; gap:8px;
  min-block-size:44px; padding-inline:14px;
  background:none; border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-sm);
  color:var(--color-ink-soft); font-family:var(--font-body); font-size:var(--text-xs);
  cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.replay:hover{ color:var(--color-blue-ink); border-color:var(--color-blue); }
.replay:active{ transform:translateY(1px); }
.replay-ico{
  inline-size:11px; block-size:11px; flex:none;
  border:2px solid currentColor; border-radius:50%; border-block-start-color:transparent;
}

.stage-box{
  position:relative; display:flex; flex-direction:column;
  min-block-size:356px;
  background:var(--color-paper);
  border:var(--rule) solid var(--color-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--space-md);
  overflow:hidden;
}

/* الطبقة الأولى: الفوضى — رمادية */
.chaos{ position:absolute; inset:var(--space-md); display:flex; flex-direction:column; justify-content:center; gap:12px; }
.msg{
  align-self:flex-start; max-inline-size:82%;
  padding:11px 16px;
  background:var(--color-paper-2);
  border-radius:16px; border-start-end-radius:3px;   /* ذيل الفقاعة نحو اليمين */
  font-size:var(--text-sm); color:var(--color-ink-soft);
  transform:rotate(var(--rot,0deg));
}
.msg:nth-child(2){ align-self:flex-end; --rot:-.7deg; }
.msg:nth-child(3){ --rot:.5deg; margin-inline-start:var(--space-md); }
.msg:nth-child(4){ align-self:flex-end; --rot:.8deg; }
.msg:nth-child(5){ --rot:-.5deg; margin-inline-start:var(--space-lg); }

.is-playing .msg{
  animation:msgOut 280ms var(--ease-in) forwards;
  animation-delay:calc(var(--i) * 50ms);
}
@keyframes msgOut{ to{ opacity:0; transform:translateY(-14px) scale(.9) } }

/* الطبقة الثانية: النظام — أزرق */
.sys{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; }
.sys > *{ opacity:0; transform:translateY(14px); }
.is-playing .sys > *{
  animation:rowIn 260ms var(--ease-out) forwards;
  animation-delay:calc(340ms + var(--i) * 55ms);
}
@keyframes rowIn{ to{ opacity:1; transform:none } }

.sys-head, .sys-row, .sys-foot{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.95fr) minmax(0,.7fr);
  gap:var(--space-sm); align-items:center;
  padding:13px 12px; font-size:var(--text-sm);
}
.sys-head{
  color:var(--color-ink-faint); font-size:var(--text-xs); font-weight:600;
  border-block-end:2px solid var(--color-blue);
}
.sys-row{ color:var(--color-ink); border-block-end:var(--rule) solid var(--color-line); }
.sys-foot{
  grid-template-columns:minmax(0,1fr) auto;
  margin-block-start:auto;
  background:var(--color-blue-tint); border-radius:var(--radius-sm);
  color:var(--color-blue-deep); font-weight:600;
}
.sys-foot .mono{ font-size:var(--text-xl); color:var(--color-blue-ink); }

.pill{ justify-self:start; padding:3px 11px; border-radius:var(--radius-pill); font-size:var(--text-xs); white-space:nowrap; font-weight:600; }
.pill-ok{ color:#fff; background:var(--color-blue); }
.pill-wait{ color:var(--color-ink-soft); background:var(--color-paper-2); }

.stage-note{ margin-block-start:var(--space-sm); font-size:var(--text-xs); color:var(--color-ink-faint); }

/* ══ لوحة النقلة — على اللوح الأزرق ═════ */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-block-end:var(--space-lg); }
.chip{
  min-block-size:44px; padding:0 18px;
  background:transparent; color:var(--on-deep-soft);
  font-family:var(--font-body); font-size:var(--text-sm);
  border:var(--rule) solid var(--on-deep-line); border-radius:var(--radius-pill);
  cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out);
}
.chip:hover{ color:var(--on-deep); border-color:var(--color-paper); }
.chip:active{ transform:translateY(1px); }
.chip.is-on{ background:var(--color-paper); color:var(--color-blue-deep); border-color:var(--color-paper); font-weight:600; }

.board{ display:grid; grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); align-items:stretch; }

/* الخانة الحالية: شفافة باهتة · الخانة التالية: بطاقة بيضاء صريحة */
.sq{ padding:var(--space-lg); border-radius:var(--radius-lg); }
.sq-now{
  background:rgba(255,255,255,.05);
  border:var(--rule) solid var(--on-deep-line);
  color:var(--on-deep-soft);
}
.sq-next{
  background:var(--color-paper); color:var(--color-ink);
  box-shadow:var(--shadow-lift);
}
.sq-tag{ font-size:var(--text-xs); font-weight:600; margin-block-end:10px; }
.sq-now .sq-tag{ color:var(--on-deep-soft); }
.sq-next .sq-tag{ color:var(--color-blue); }
.sq h3{ font-size:var(--text-lg); margin-block-end:var(--space-md); min-block-size:2.6em; }
.sq-now h3{ color:var(--on-deep); }
.sq ul{ display:flex; flex-direction:column; gap:12px; }
.sq li{
  position:relative; padding-inline-start:22px; font-size:var(--text-sm);
  opacity:0; transform:translateY(8px);
  animation:rowIn 240ms var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 50ms);
}
.sq-next li{ color:var(--color-ink-soft); animation-delay:calc(200ms + var(--i) * 55ms); }
.sq li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:8px; block-size:8px; border-radius:2px;
}
.sq-now li::before{ background:var(--on-deep-line); }
.sq-next li::before{ background:var(--color-blue); }

/* السهم — الاتجاه الأمامي في RTL نحو اليسار */
.jump{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.jump-track{ position:relative; inline-size:100%; block-size:2px; background:var(--on-deep-line); }
.jump-track::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:50%;
  transform:translateY(-50%);
  border-block:5px solid transparent; border-inline-end:8px solid var(--on-deep-line);
}
.jump-dot{
  position:absolute; inset-block-start:50%;
  inline-size:10px; block-size:10px; background:var(--color-paper); border-radius:2px;
  transform:translateY(-50%); inset-inline-start:calc(100% - 10px);
}
.is-jumping .jump-dot{ animation:jump 520ms var(--ease-in-out) forwards; }
@keyframes jump{ from{ inset-inline-start:calc(100% - 10px) } to{ inset-inline-start:8px } }
.jump-word{ font-size:var(--text-xs); font-weight:600; color:var(--on-deep-soft); }

.board-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-block-start:var(--space-md);
  font-size:var(--text-sm); color:var(--on-deep-soft);
}
.tag{
  font-size:var(--text-xs); font-weight:600; color:var(--on-deep);
  padding:6px 14px; border:var(--rule) solid var(--on-deep-line); border-radius:var(--radius-pill);
}
.plane-deep .fine{ color:var(--on-deep-soft); opacity:.8; }

/* ══ الخدمات — صفوف كبيرة ═══════════════ */
.svc{ display:flex; flex-direction:column; border-block-start:2px solid var(--color-ink); }
.svc-row{
  position:relative;
  display:grid; gap:var(--space-sm) var(--space-lg);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1fr);
  align-items:baseline;
  padding-block:var(--space-md);
  padding-inline-start:var(--space-md);
  border-block-end:var(--rule) solid var(--color-line);
  transition:background var(--dur-short) var(--ease-out);
}
.svc-row::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:4px; background:var(--color-blue);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-short) var(--ease-out);
}
.svc-row:hover{ background:var(--color-paper-2); }
.svc-row:hover::before{ transform:scaleY(1); }
.svc-row h3{ font-size:var(--text-lg); }
.svc-d{ font-size:var(--text-sm); color:var(--color-ink-soft); }

.shift{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--text-xs); }
.was{ color:var(--color-ink-faint); text-decoration:line-through; text-decoration-color:var(--color-line-2); }
.to{
  position:relative; padding-inline-start:22px;
  color:var(--color-blue-ink); font-weight:600;
}
.to::before{
  content:""; position:absolute; inset-inline-start:2px; inset-block-start:50%;
  inline-size:12px; block-size:2px; background:var(--color-blue); transform:translateY(-50%);
}
.to::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:50%;
  transform:translateY(-50%);
  border-block:4px solid transparent; border-inline-end:5px solid var(--color-blue);
}

/* ══ المراحل — ترتيب حقيقي فالترقيم مبرَّر ══ */
.steps{
  display:grid; gap:var(--space-lg);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
/* إيقاع واحد داخل المرحلة عبر gap بدل هوامش متفرقة (كانت 8 / 2 / 10 / 12) */
.step{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding-block-start:var(--space-md);
  border-block-start:3px solid var(--color-blue);
}
.step-n{ font-size:var(--text-sm); font-weight:500; color:var(--color-blue); }
.step h3{ font-size:var(--text-md); }
.step-when{ font-size:var(--text-xs); color:var(--color-ink-faint); }
.step-d{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.out{
  margin-block-start:0; padding-block-start:12px;
  border-block-start:var(--rule) solid var(--color-line-2);
  font-size:var(--text-xs); color:var(--color-blue-ink); font-weight:500;
}

/* ══ الباقات ═══════════════════════════ */
.plans{
  display:grid; gap:var(--space-md);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items:start;
}
.plan{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:var(--space-lg);
  background:var(--color-paper);
  border:var(--rule) solid var(--color-line-2);
  border-radius:var(--radius-lg);
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.plan.is-lead{ background:var(--color-blue-deep); border-color:var(--color-blue-deep); color:var(--on-deep); }
.plan.is-lead .plan-for{ color:var(--on-deep-soft); }
.plan.is-lead .price-note{ color:var(--on-deep-soft); }
.plan.is-lead .cur{ color:var(--on-deep-soft); }
.plan.is-lead ul{ border-block-start-color:var(--on-deep-line); }
.plan.is-lead li{ color:var(--on-deep); }
.plan.is-lead li::before{ background:var(--color-paper); }
.plan-badge{
  position:absolute; inset-block-start:-13px; inset-inline-start:var(--space-lg);
  padding:4px 14px; border-radius:var(--radius-pill);
  background:var(--color-blue); color:#fff;
  font-size:var(--text-xs); font-weight:700;
}
.plan h3{ font-size:var(--text-xl); }
.plan-for{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.price{ display:flex; align-items:baseline; gap:8px; }
.price .num{ font-size:var(--text-3xl); font-weight:600; line-height:1; }
.price .num-word{ font-family:var(--font-display); font-size:var(--text-xl); line-height:1.4; }
.price .cur{ font-size:var(--text-base); color:var(--color-ink-faint); }
.price-note{ font-size:var(--text-xs); color:var(--color-ink-faint); }
.plan ul{
  display:flex; flex-direction:column; gap:12px;
  padding-block:var(--space-md);
  border-block-start:var(--rule) solid var(--color-line);
}
.plan li{ position:relative; padding-inline-start:22px; font-size:var(--text-sm); color:var(--color-ink-soft); }
.plan li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:8px; block-size:8px; background:var(--color-blue); border-radius:2px;
}
.plan .btn{ margin-block-start:auto; }

/* ══ الأسئلة ═══════════════════════════ */
.faq{ border-block-start:2px solid var(--color-ink); }
.faq details{ border-block-end:var(--rule) solid var(--color-line-2); }
.faq summary{
  position:relative; list-style:none; cursor:pointer;
  padding-block:var(--space-md); padding-inline-end:40px;
  font-family:var(--font-display); font-weight:600;
  font-size:var(--text-md); line-height:1.6;
  transition:color var(--dur-micro) var(--ease-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute;
  inset-inline-end:6px; inset-block-start:calc(var(--space-md) + .5em);
  inline-size:13px; block-size:13px;
  border-inline-end:2.5px solid var(--color-blue);
  border-block-end:2.5px solid var(--color-blue);
  transform:rotate(45deg);
  transition:transform var(--dur-short) var(--ease-in-out);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq summary:hover{ color:var(--color-blue-ink); }
.faq-body{ padding-block-end:var(--space-md); }
.faq-body p{ font-size:var(--text-sm); color:var(--color-ink-soft); max-inline-size:62ch; }

/* ══ الطلب — على اللوح الأزرق ═══════════ */
.req-grid{
  display:grid; gap:var(--space-2xl);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
}
.req-say h2{ font-size:var(--text-display-s); margin-block-end:var(--space-md); }
.req-say > p{ color:var(--on-deep-soft); }
.contact{
  display:flex; flex-direction:column;
  margin-block-start:var(--space-lg);
  border-block-start:var(--rule) solid var(--on-deep-line);
}
.contact li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  padding-block:10px; border-block-end:var(--rule) solid var(--on-deep-line);
}
.c-k{ font-size:var(--text-xs); color:var(--on-deep-soft); min-inline-size:84px; }
.c-v{ font-size:var(--text-sm); color:var(--on-deep); }
a.c-v{ padding-block:10px; transition:color var(--dur-micro) var(--ease-out); }
a.c-v:hover{ color:var(--color-blue-tint); text-decoration:underline; }

/* ══ محدِّد الاحتياج ═══════════════════ */
.wiz, .spec, .form{
  background:var(--color-paper); color:var(--color-ink);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  padding:var(--space-lg);
}
.wiz{ display:flex; flex-direction:column; gap:var(--space-md); }

.wiz-top{ display:flex; align-items:center; gap:var(--space-md); }
.wiz-count{ font-size:var(--text-xs); color:var(--color-ink-faint); flex:none; }
.wiz-bar{ flex:1; block-size:4px; background:var(--color-paper-2); border-radius:2px; overflow:hidden; }
.wiz-bar span{
  display:block; block-size:100%; inline-size:25%;
  background:var(--color-blue);
  transform-origin:right center;                 /* RTL: يمتلئ من اليمين */
  transition:inline-size var(--dur-long) var(--ease-out);
}

.wstep{ display:none; }
.wstep.is-on{ display:block; animation:rowIn var(--dur-long) var(--ease-out); }
.wq{ font-size:var(--text-lg); }
.wq-2{ margin-block-start:var(--space-lg); }
.wh{ font-size:var(--text-sm); color:var(--color-ink-soft); margin-block:4px var(--space-md); }

.picks{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.pick{
  position:relative;
  display:flex; flex-direction:column; gap:3px;
  min-block-size:60px; padding:12px 44px 12px 14px;
  text-align:start;
  background:var(--color-paper-2);
  border:2px solid transparent; border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  color:var(--color-ink); cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out),
             transform var(--dur-micro) var(--ease-out);
}
.pick small{ font-weight:400; font-size:var(--text-xs); color:var(--color-ink-soft); line-height:1.6; }
.pick:hover{ background:var(--color-blue-tint); }
.pick:active{ transform:translateY(1px); }
.pick[aria-checked="true"], .pick[aria-pressed="true"]{
  background:var(--color-blue-tint); border-color:var(--color-blue);
}
/* علامة الاختيار */
.pick::after{
  content:""; position:absolute;
  inset-inline-end:14px; inset-block-start:50%;
  inline-size:20px; block-size:20px; margin-block-start:-10px;
  border:2px solid var(--color-line-2); border-radius:5px;
  transition:background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.picks:not(.picks-multi) .pick::after{ border-radius:50%; }
.pick[aria-checked="true"]::after, .pick[aria-pressed="true"]::after{
  background:var(--color-blue); border-color:var(--color-blue);
  background-image:linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
                   linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  background-size:11px 11px; background-position:center; background-repeat:no-repeat;
}

.wiz-nav{ display:flex; gap:10px; }
.wiz-nav .btn{ flex:1; }
.wiz-skip{
  min-block-size:44px; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--color-blue-ink); text-decoration:underline;
}
.wiz-skip:hover{ color:var(--color-ink); }

/* ── بطاقة المواصفات ── */
.spec{
  display:flex; flex-direction:column; gap:var(--space-md);
  border-block-start:5px solid var(--color-blue);
  animation:rowIn var(--dur-long) var(--ease-out);
}
.spec-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); }
.spec-top h3{ font-size:var(--text-lg); }
.spec-kind{
  padding:12px 16px; border-radius:var(--radius-md);
  background:var(--color-blue-deep); color:#fff;
  font-size:var(--text-md); font-weight:600;
}
.spec-grid{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.spec-box{ min-width:0; }
.spec-k{ font-size:var(--text-xs); color:var(--color-ink-faint); margin-block-end:8px; }
.spec-box li{
  position:relative; padding-inline-start:20px; margin-block-end:12px;
  font-size:var(--text-sm); color:var(--color-ink);
}
.spec-box li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:7px; block-size:7px; background:var(--color-blue); border-radius:2px;
}
.spec-nums{
  display:grid; gap:var(--space-md);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  padding-block:var(--space-md);
  border-block:var(--rule) solid var(--color-line);
}
.spec-v{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; }
.spec-v .cur{ font-size:var(--text-sm); color:var(--color-ink-faint); font-family:var(--font-body); }
.spec-why summary{
  list-style:none; cursor:pointer;
  min-block-size:44px; display:flex; align-items:center;
  font-size:var(--text-sm); color:var(--color-blue-ink); text-decoration:underline;
}
.spec-why summary::-webkit-details-marker{ display:none; }
.spec-why li{
  display:flex; justify-content:space-between; gap:var(--space-md);
  padding-block:7px; border-block-end:var(--rule) solid var(--color-line);
  font-size:var(--text-sm); color:var(--color-ink-soft);
}
.spec-why li span:last-child{ font-family:var(--font-mono); color:var(--color-ink); white-space:nowrap; }

.form{ display:flex; flex-direction:column; gap:var(--space-md); }
.form-head{ font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); }
.f2{ display:grid; gap:var(--space-md); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field label{ font-size:var(--text-sm); font-weight:600; }
.field .opt{ color:var(--color-ink-faint); font-weight:400; }

input, select, textarea{
  inline-size:100%; min-block-size:50px; padding:13px 15px;
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--color-ink); background:var(--color-paper-2);
  border:var(--rule) solid transparent; border-radius:var(--radius-sm);
  transition:border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
input[dir="ltr"]{ text-align:left; }
textarea{ resize:vertical; min-block-size:118px; line-height:var(--leading-body); }
input::placeholder, textarea::placeholder{ color:var(--color-ink-faint); }
input:hover, select:hover, textarea:hover{ border-color:var(--color-line-2); }
input:focus, select:focus, textarea:focus{ background:var(--color-paper); border-color:var(--color-blue); }

select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--color-ink-soft) 50%),
                   linear-gradient(135deg, var(--color-ink-soft) 50%, transparent 50%);
  background-position:16px 55%, 21px 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-inline-start:38px;
}

.err{ font-size:var(--text-xs); color:var(--color-alert); }
.field.bad input, .field.bad select, .field.bad textarea{ border-color:var(--color-alert); background:#FDF3F2; }

/* لوحة النجاح */
.done{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:var(--space-xl) var(--space-lg);
  background:var(--color-paper); color:var(--color-ink);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  text-align:center;
  animation:rowIn var(--dur-long) var(--ease-out);
}
.done-tick{ position:relative; inline-size:56px; block-size:56px; flex:none; background:var(--color-blue); border-radius:50%; }
.done-tick::after{
  content:""; position:absolute; inset-block-start:17px; inset-inline-start:19px;
  inline-size:10px; block-size:19px;
  border-inline-end:2.5px solid #fff; border-block-end:2.5px solid #fff;
  transform:rotate(45deg);
}
.done h3{ font-size:var(--text-xl); }
.done > p{ font-size:var(--text-sm); color:var(--color-ink-soft); max-inline-size:46ch; }
.done a[href="#track"]{ color:var(--color-blue-ink); text-decoration:underline; }
.ref{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; background:var(--color-paper-2); border-radius:var(--radius-sm);
}
.ref .mono{ font-size:var(--text-md); font-weight:500; }
.copy{
  min-block-size:38px; padding-inline:14px;
  background:none; border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-sm);
  color:var(--color-ink-soft); font-family:var(--font-body); font-size:var(--text-xs); cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.copy:hover{ color:var(--color-blue-ink); border-color:var(--color-blue); }
.copy:active{ transform:translateY(1px); }
.done .fine{ color:var(--color-ink-faint); }

/* ══ التتبع ═══════════════════════════ */
.track-h{ font-size:var(--text-xl); margin-block-end:var(--space-md); }
.track-form{ display:flex; flex-wrap:wrap; gap:10px; }
.track-form input{ flex:1 1 220px; text-align:left; }
.track-out{
  margin-block-start:var(--space-md); padding:var(--space-md);
  background:var(--color-paper-2); border-radius:var(--radius-md);
  border-inline-start:4px solid var(--color-blue);
  animation:rowIn var(--dur-short) var(--ease-out);
}
.track-out.miss{ border-inline-start-color:var(--color-alert); }
.track-out h3{ font-size:var(--text-md); margin-block-end:10px; }
.track-out p{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.track-out dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 18px; margin:0; font-size:var(--text-sm); }
.track-out dt{ color:var(--color-ink-faint); }
.track-out dd{ margin:0; }
.state{ display:inline-flex; align-items:center; gap:7px; color:var(--color-blue-ink); font-weight:600; }
.state::before{ content:""; inline-size:8px; block-size:8px; background:var(--color-blue); border-radius:2px; }

/* ══ التذييل — بيان ════════════════════ */
.foot{ background:var(--color-ink); color:var(--color-paper); padding-block:var(--space-2xl); }
.foot-say{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--text-display-s); line-height:1.45;
  margin-block-end:var(--space-xl); max-inline-size:20ch;
}
.foot .hl{ color:#8FB0FF; }
.foot .hl::after{ display:none; }
.foot-grid{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md);
  justify-content:space-between;
  padding-block-start:var(--space-md);
  border-block-start:var(--rule) solid rgba(255,255,255,.14);
}
.foot-legal{ font-size:var(--text-xs); color:#8FA6BE; }

/* ══ الكشف عند التمرير ═════════════════ */
.rv{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:80ms; }

/* تسلسل التحميل */
.hero-say > *, .stage{
  opacity:0; transform:translateY(12px);
  animation:reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes reveal{ to{ opacity:1; transform:none } }

/* ══ الاستجابة ═════════════════════════ */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-xl); }
  .req-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
  .svc-row{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .head-act{ margin-inline-start:auto; }
  .head-act .btn-sm{ display:none; }
}

@media (max-width: 760px){
  .board{ grid-template-columns:minmax(0,1fr); }
  .jump{ flex-direction:row; gap:12px; padding-block:16px; }
  .jump-track{ inline-size:2px; block-size:44px; }
  .jump-track::after{
    inset-inline-start:50%; inset-block-start:auto; inset-block-end:0;
    transform:translateX(-50%);
    border-inline:5px solid transparent;
    border-block-start:8px solid var(--on-deep-line); border-inline-end:0;
  }
  .jump-dot{ inset-inline-start:50%; inset-block-start:0; transform:translateX(-50%); }
  .is-jumping .jump-dot{ animation:jumpY 520ms var(--ease-in-out) forwards; }
  @keyframes jumpY{ from{ inset-block-start:0 } to{ inset-block-start:calc(100% - 10px) } }
}

@media (max-width: 620px){
  body{ font-size:var(--text-base); }
  .f2{ grid-template-columns:minmax(0,1fr); }
  .form, .plan, .sq{ padding:var(--space-md); }
  .stage-box{ min-block-size:404px; padding:var(--space-sm); }
  .chaos{ inset:var(--space-sm); }
  .sys-head, .sys-row{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);
    font-size:var(--text-xs);
  }
  .sys-head span:nth-child(2), .sys-row span:nth-child(2){ display:none; }
  .foot-say{ font-size:var(--text-2xl); }
  .foot-grid{ flex-direction:column; align-items:flex-start; }
}

/* ══ حركة مخفّضة — إلزامية ══════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:150ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:150ms !important;
  }
  .rv{ opacity:1; transform:none; }
  .hero-say > *, .stage{ opacity:1; transform:none; animation:none; }
  .btn-spin{ animation:spin 1.4s linear infinite !important; }
}

/* ══ أعمالنا — على اللوح الأزرق ═══════════ */
.work-grid{
  display:grid; gap:var(--space-md);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.work{
  display:flex; flex-direction:column; gap:12px;
  padding:var(--space-lg);
  background:var(--color-paper); color:var(--color-ink);
  border-radius:var(--radius-lg);
  transition:transform var(--dur-short) var(--ease-out),
             box-shadow var(--dur-short) var(--ease-out);
}
.work:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.work-logo{ height:36px; width:auto; max-width:140px; object-fit:contain; align-self:flex-start; margin-bottom:2px; }
.work-kind{ font-size:var(--text-xs); font-weight:600; color:var(--color-blue); }
.work h3{ font-size:var(--text-xl); }
.work-what{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.work-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.work-tag{
  padding:4px 12px; border-radius:var(--radius-pill);
  background:var(--color-paper-2); color:var(--color-ink-soft);
  font-size:var(--text-xs);
}
.work-go{
  display:inline-flex; align-items:center; gap:8px;
  min-block-size:44px; margin-block-start:auto;
  padding-block-start:12px;
  border-block-start:var(--rule) solid var(--color-line);
  font-size:var(--text-sm); font-weight:600; color:var(--color-blue-ink);
  transition:gap var(--dur-short) var(--ease-out);
}
.work-go:hover{ gap:14px; }
/* السهم يشير لليسار — اتجاه التقدّم في RTL */
.work-arrow{
  position:relative; inline-size:16px; block-size:2px;
  background:var(--color-blue); flex:none;
}
.work-arrow::after{
  content:""; position:absolute;
  inset-inline-start:0; inset-block-start:50%;
  transform:translateY(-50%);
  border-block:4px solid transparent;
  border-inline-end:6px solid var(--color-blue);
}
.work-soon{
  margin-block-start:auto; padding-block-start:12px;
  border-block-start:var(--rule) solid var(--color-line);
  font-size:var(--text-sm); color:var(--color-ink-faint);
}

/* ══ شريط اللقطات — على اللوح الأزرق ══════ */
/*
 * سطران يمرّان في اتجاهين متعاكسين، وكلّ لقطة من موقعٍ شغّالٍ الآن
 * تفتحه ضغطةٌ عليها. يقف الشريط عند الإشارة أو التركيز كي يُقرأ،
 * ويقف تمامًا لمن طلب تقليل الحركة فيصير شريطًا يُسحب باليد.
 * كلّ اللقطات بنسبة 8:5 فتتساوى البطاقات ويستقيم السطر.
 */
.shots{
  position:relative; z-index:1;
  margin-block:var(--space-xl) var(--space-md);
  display:flex; flex-direction:column; gap:16px;
}
.shots-row{
  /* السطر لاتينيّ الاتجاه عمدًا: المسار أعرض من الشاشة، ولو بقي
     الاتجاه عربيًّا لبدأ من الحافة اليمنى وخرج كلّه إلى اليسار عند
     الإزاحة فيصير السطر فارغًا. البطاقة نفسها تعود عربيّة. */
  direction:ltr;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.shots-track{
  direction:ltr;
  display:flex; gap:16px; inline-size:max-content;
  animation:shotRun 74s linear infinite;
  will-change:transform;
}
.shots-row[data-dir="b"] .shots-track{ animation-duration:92s; animation-direction:reverse; }
.shots:hover .shots-track,
.shots:focus-within .shots-track{ animation-play-state:paused; }
@keyframes shotRun{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.shot{
  direction:rtl; flex:none; display:block;
  inline-size:clamp(216px, 26vw, 336px);
  transition:transform var(--dur-short) var(--ease-out);
}
.shot:hover{ transform:translateY(-5px); }
.shot img{
  display:block; inline-size:100%; block-size:auto;
  aspect-ratio:8 / 5; object-fit:cover;
  border-radius:var(--radius-md);
  border:var(--rule) solid var(--on-deep-line);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.75);
  background:var(--color-paper-2);
  transition:border-color var(--dur-short) var(--ease-out);
}
.shot:hover img{ border-color:rgba(255,255,255,.45); }
.shot-cap{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-block-start:10px; padding-inline:2px;
  font-size:var(--text-xs); line-height:var(--leading-tight);
}
.shot-cap b{ color:var(--on-deep); font-weight:600; }
.shot-cap i{ color:var(--on-deep-soft); font-style:normal; }

.shots-note{
  max-inline-size:64ch; margin-block-end:var(--space-2xl);
  color:var(--on-deep-soft); font-size:var(--text-sm); line-height:var(--leading-body);
}
.shots-note b{ color:var(--on-deep); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .shots-track{ animation:none; }
  .shots-row{
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-mask-image:none; mask-image:none;
  }
  .shot{ scroll-snap-align:center; }
  .shot:hover{ transform:none; }
}

/* ══════════════════════════════════════════
   مراجعة الجوال أولًا — mobile-first-ux
   ══════════════════════════════════════════ */

/* ── المناطق الآمنة: القصّة والدرج والشريط السفلي ── */
:root{
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-s: env(safe-area-inset-left, 0px);
  --safe-e: env(safe-area-inset-right, 0px);
  --mbar-h: 74px;
}
.head{ padding-block-start:var(--safe-t); }
.drawer{
  padding-block-start:calc(var(--space-2xl) + var(--safe-t));
  padding-block-end:calc(var(--space-lg) + var(--safe-b));
}
.drawer-x{ inset-block-start:calc(20px + var(--safe-t)); }

/* ── شريط الإجراء السفلي — منطقة الإبهام ── */
.mbar{
  position:fixed; z-index:55;
  inset-inline:0; inset-block-end:0;
  display:none;                       /* يُفعَّل داخل استعلام الجوال فقط */
  align-items:center; gap:10px;
  padding:12px var(--gutter);
  padding-block-end:calc(12px + var(--safe-b));
  background:color-mix(in oklab, var(--color-paper) 94%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-block-start:var(--rule) solid var(--color-line);
  transform:translateY(100%);
  transition:transform var(--dur-long) var(--ease-out);
}
.mbar.is-up{ transform:none; }
.mbar .btn{ flex:1; min-block-size:52px; }

.mbar-wa{
  flex:none;
  inline-size:52px; block-size:52px;
  display:grid; place-items:center;
  background:var(--color-paper-2);
  border:2px solid var(--color-line-2);
  border-radius:var(--radius-sm);
  transition:background var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out);
}
.mbar-wa:hover{ background:var(--color-blue-tint); border-color:var(--color-blue); }
.mbar-wa:active{ transform:translateY(1px); }
/* سمّاعة مرسومة بلا صورة */
.mbar-ico{
  inline-size:20px; block-size:20px;
  border:2.5px solid var(--color-blue-ink);
  border-radius:50% 50% 50% 4px;
}

@media (max-width: 1000px){
  .mbar{ display:flex; }
  /* التذييل ما ينختفي تحت الشريط */
  body{ padding-block-end:calc(var(--mbar-h) + var(--safe-b)); }
}

/* ── أهداف اللمس: 48px أرضية لكل ما يُضغط كثيرًا ── */
@media (max-width: 1000px){
  .chip,
  .pick,
  .replay,
  .copy,
  .work-go,
  .wiz-skip,
  .spec-why summary,
  .faq summary{ min-block-size:48px; }

  .chip{ padding-inline:20px; }
  .burger,
  .drawer-x{ inline-size:48px; block-size:48px; }
  .btn{ min-block-size:52px; }
  .btn-sm{ min-block-size:48px; }

  /* الرقائق والبطاقات ما تقل عن 8px تباعدًا */
  .chips{ gap:10px; }
  .picks{ gap:10px; }
  .row-cta{ gap:10px; }
}

@media (max-width: 1000px){
  /* روابط التواصل: الجوال والبريد أهداف يُضغط عليها فعلًا */
  a.c-v{
    min-block-size:48px;
    display:inline-flex; align-items:center;
    padding-block:0;
  }
}