/* ══════════════════════════════════════════════════════════════════════
   MAHALI — صفحة الهبوط (إعادة بناء ٢٦ أيلول ٢٠٢٦)

   ⚠️ بلا أدوات بناء وبلا مكتبات — ملف واحد يُقرأ كما هو (CLAUDE.md §4.د).

   الاتجاه: ألوان النظام الحيّ نفسه (pos-dashboard/src/index.css) — أبيض ورمادي
   الزنك، والزيتوني للأزرار كما في النظام، والليموني للشعار والتمييز وحده. الجرأة
   في مكان واحد: الفاتورة الحرارية في الافتتاحية. وكل ما حولها هادئ.
   الموبايل أوّلاً (٣٩٠ بكسل)، والتابلت والكمبيوتر في آخر الملف.
   ══════════════════════════════════════════════════════════════════════ */

/* ── الخطوط — مستضافة عندنا (قرار المالك: عربي بخط عريض، والبيانات إنجليزية) ── */
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/alexandria-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/alexandria-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── الرموز: ألوان النظام الحيّ ─────────────────────────────────────────── */
:root {
  --paper: #FFFFFF;
  --surface: #FAFAFA;     /* خلفية شاشات النظام */
  --well: #F4F4F5;        /* شريط التبويبات وحقول الإدخال */
  --line: #E4E4E7;
  --line-2: #D4D4D8;
  --ink: #18181B;
  --ink-2: #3F3F46;
  --muted: #52525B;       /* ٧٫٧:١ على الأبيض */
  --faint: #71717A;       /* ٤٫٨:١ — للنصّ الصغير الثانوي وحده */

  --olive: #4A7217;       /* زرّ النظام الأساسي — ٥٫٤:١ مع الأبيض */
  --olive-dark: #3A5A12;
  --lime: #B8EC75;        /* لون الشعار — زينة لا نصّ */
  --lime-soft: #E6FBC9;
  --used: #B45309;        /* وسم «مستعمل» كما في النظام */
  --used-soft: #FFF7ED;

  --ar: "Alexandria", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --en: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .05), 0 18px 40px -22px rgba(33, 52, 9, .28);

  --gutter: 20px;
  --section: 64px;
}

/* ── الأساس ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line-2) transparent;
  scroll-padding-top: 76px;   /* الترويسة الثابتة لا تغطّي عنوان القسم */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ar);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--olive);
  overflow-x: clip;
}

::selection { background: var(--lime-soft); color: var(--olive-dark); }

h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

a, button, summary { -webkit-tap-highlight-color: transparent; }

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

/* البيانات بالإنجليزي — أسماء الأجهزة والأرقام والتواريخ (قاعدة المالك) */
.en {
  font-family: var(--en);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}
.skip:focus { top: 12px; }

/* ── الأزرار — شكل زرّ النظام الأساسي ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--olive);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(33, 52, 9, .25), 0 10px 22px -12px rgba(58, 90, 18, .6);
  transition: background-color .18s ease, transform .18s var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { background: var(--olive-dark); }
.btn:active, .dock:active { transform: scale(.97); }

.btn--sm { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 15px; box-shadow: none; }
.btn--sm svg { width: 17px; height: 17px; }

.btn--light { background: #fff; color: var(--olive-dark); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .45); }
.btn--light:hover { background: var(--lime-soft); }

/* ── الترويسة ───────────────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.brand { display: block; color: var(--ink); }
.logo { width: 118px; height: auto; aspect-ratio: 4385 / 932; }
.top__nav { display: none; }

/* ── الافتتاحية ─────────────────────────────────────────────────────────── */
.hero { padding-block: 28px 8px; }
.hero__grid { display: grid; gap: 30px; }

.display {
  font-weight: 800;
  font-size: clamp(2.05rem, .9rem + 5.6vw, 5.25rem);
  line-height: 1.2;
  text-wrap: balance;
}
.lede {
  margin-top: 16px;
  max-width: 38ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
}
.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 24px;
}
.proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
}
.proof i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 0 4px var(--lime-soft);
  flex: none;
}

/* المسرح: حقل ليموني فاتح، وطابعة، والفاتورة تخرج منها */
.stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 26px 16px 34px;
  border-radius: 28px;
  background: var(--lime-soft);
  overflow: hidden;
}
.printer {
  position: relative;
  z-index: 2;
  width: min(100%, 326px);
  height: 26px;
  border-radius: 13px;
  background: var(--olive-dark);
  box-shadow: 0 10px 18px -10px rgba(33, 52, 9, .7);
}
.printer::after {           /* فتحة الورق */
  content: "";
  position: absolute;
  inset-inline: 18px;
  top: 12px;
  height: 3px;
  border-radius: 2px;
  background: #1F3208;
}
.feed {
  /* الورقة تُقصّ عند فتحة الطابعة فتبدو خارجة منها. والحشو مساحة للظلّ كي يتلاشى
     قبل حدّ القصّ — وإلا ظهرت حافّة مستطيلة رمادية حول الورقة */
  width: min(100% + 32px, 364px);
  margin: -12px -16px -34px;
  padding: 0 32px 44px;
  overflow: hidden;
}
.sheet {
  /* الظلّ على الغلاف لا على الورقة: قناع الحافّة المسنّنة يمحو ظلّ العنصر نفسه */
  filter: drop-shadow(0 12px 14px rgba(33, 52, 9, .18));
}
@media (prefers-reduced-motion: no-preference) {
  /* الحركة الوحيدة المؤلَّفة: CSS بحت بلا جافاسكربت، و`both` يُخفي الورقة قبل
     بدايتها فلا وميض. تتوقّف قليلاً كما تتوقّف طابعة حرارية بين السطور. */
  .sheet { animation: print 2.6s cubic-bezier(.3, .6, .25, 1) .45s both; }
}
@keyframes print {
  0%   { transform: translateY(-100%); }
  38%  { transform: translateY(-58%); }
  46%  { transform: translateY(-55%); }
  100% { transform: translateY(0); }
}

.paper {
  --zig: 7px;
  padding: 26px 20px 30px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zig) * 2) var(--zig) repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zig) * 2) var(--zig) repeat-x;
}
.rc__head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.rc__logo { width: 38px; height: auto; aspect-ratio: 1145 / 931; margin-bottom: 8px; --mh-accent: currentColor; }
.rc__head b { font-size: 17px; font-weight: 800; }
.rc__meta { color: var(--muted); font-size: 12.5px; }
.rc__rule { margin-block: 14px; border-top: 1.5px dashed var(--line-2); }
.rc__line { display: flex; justify-content: space-between; gap: 12px; }
.rc__line + .rc__line { margin-top: 4px; }
.rc__line .en { font-weight: 600; }
.rc__sub { display: block; margin: 2px 0 8px; color: var(--muted); font-size: 12px; }
.rc__sum { font-size: 16px; font-weight: 800; }
.rc__war {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 11px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  font-weight: 700;
  font-size: 13.5px;
}
.rc__bar { width: 78%; height: 42px; margin: 18px auto 0; color: var(--ink); }
.rc__no { display: block; margin-top: 5px; text-align: center; font-size: 11.5px; letter-spacing: .14em; }
.rc__thanks { margin-top: 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── رأس القسم ──────────────────────────────────────────────────────────── */
.sec-head { max-width: 40ch; }
h2 {
  font-weight: 800;
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.25;
  text-wrap: balance;
}
.sec-head p { margin-top: 12px; color: var(--muted); }

/* ── يوم العمل ──────────────────────────────────────────────────────────── */
.day { padding-block: var(--section) calc(var(--section) - 28px); }
.tl { margin-top: 28px; }
.tl__i {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 14px;
  padding-block: 24px;
  /* الفاصل خلفية بعرضٍ متغيّر لا حدّ ثابت: هكذا يُرسم من اليمين حين تظهر اللحظة */
  background: linear-gradient(var(--line), var(--line)) no-repeat right top / 100% 1px;
}
.tl__t {
  padding-top: 3px;
  color: var(--olive);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
}
.tl__i--month .tl__t { font-family: var(--ar); font-size: 15px; font-weight: 700; }
.tl__body h3 { font-size: 20px; font-weight: 700; line-height: 1.45; }
.tl__body p { margin-top: 8px; color: var(--muted); font-size: 16px; text-wrap: pretty; }
.tl__i > .ui { grid-column: 1 / -1; }

/* ── قطع الواجهة: على شكل بطاقات النظام ─────────────────────────────────── */
.ui {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 14.5px;
  line-height: 1.55;
}
.ui > * + * { margin-top: 14px; }
.ui__row { display: flex; align-items: center; gap: 12px; }
.ui__main { flex: 1; min-width: 0; display: grid; }
.ui__main b { font-weight: 600; }
.ui__row > b.en { font-weight: 700; }
.ui__sub { color: var(--faint); font-size: 13px; }
.ui__row--line { padding-top: 14px; border-top: 1px dashed var(--line); }
.ui__row--line .ui__main { display: block; }
.ui__note {
  display: block;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
}
.ui__note svg { display: inline-block; width: 17px; height: 17px; margin-inline-end: 6px; vertical-align: -3px; color: var(--olive); }
.ui__note b { color: var(--olive); }

.dev {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--well);
  color: var(--ink-2);
  flex: none;
}
.dev svg { width: 12px; height: 17px; }

.ui__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--well);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.chip--olive { background: var(--lime-soft); color: var(--olive-dark); font-weight: 600; }

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
}
.field svg { width: 18px; height: 18px; color: var(--faint); flex: none; }

.tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--olive-dark);
  font-size: 12.5px;
  font-weight: 600;
  flex: none;
}
.tag--used { background: var(--used-soft); color: var(--used); }

.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kv dt { color: var(--faint); font-size: 12.5px; }
.kv dd { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }

.war__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.war__top b { color: var(--olive); }
.war__top span { color: var(--muted); }
.bar { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--well); overflow: hidden; }
.bar i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: var(--olive); }

.ticket { padding: 3px 9px; border-radius: 8px; background: var(--well); font-size: 13px; font-weight: 600; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.steps li {
  position: relative;
  padding-top: 14px;
  color: var(--faint);
  font-size: 12.5px;
  text-align: center;
}
.steps li::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--well);
}
.steps .is-done { color: var(--ink-2); }
.steps .is-done::before { background: var(--olive); }
.steps .is-now { color: var(--olive-dark); font-weight: 700; }
.steps .is-now::before { background: var(--lime); }

.ledger > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; }
.ledger dt { color: var(--muted); }
.ledger dd { font-weight: 600; }
.ledger__sum { margin-top: 4px; padding-top: 10px !important; border-top: 1px solid var(--line); }
.ledger__sum dt { color: var(--ink); font-weight: 700; }
.ledger__sum dd { color: var(--olive); font-weight: 800; font-size: 16px; }

.count { width: 100%; border-collapse: collapse; font-size: 14px; }
.count th, .count td { padding: 8px 4px; text-align: start; }
.count td { text-align: right; }   /* الرقم إنجليزي الاتجاه، ويصطفّ تحت عنوان عموده */
.count thead th { color: var(--faint); font-size: 12.5px; font-weight: 500; border-bottom: 1px solid var(--line); }
.count tbody th { font-weight: 600; }
.count tbody tr + tr > * { border-top: 1px solid var(--well); }
.count td { font-weight: 600; }
.match {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--lime-soft);
  color: var(--olive-dark);
}
.match svg { width: 18px; height: 18px; flex: none; }
.match span { margin-inline-start: auto; font-size: 13.5px; }

/* المعادلة سطوراً كدفتر: الإشارة في عمود والحدّ في عمود — تُقرأ على أي عرض.
   (صفّاً واحداً بخمسة حدود لا تتّسع في عمود القطعة على الكمبيوتر نفسه) */
.eq {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
}
.eq span {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--surface);
}
.eq small { color: var(--muted); font-size: 14px; }
.eq b { font-weight: 700; font-size: 15px; }
.eq i { grid-column: 1; font-style: normal; color: var(--faint); font-family: var(--en); font-size: 17px; text-align: center; }
.eq__res { background: var(--lime-soft) !important; }
.eq__res small { color: var(--olive-dark); font-weight: 700; font-size: 15px; }
.eq__res b { color: var(--olive-dark); font-size: 18px; font-weight: 800; }

/* ── وما يحتاجه المحلّ أيضاً ───────────────────────────────────────────── */
.also { padding-block: 0 var(--section); }
.also__list { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.also__list > div { padding-block: 16px; border-top: 1px solid var(--line); }
.also__list dt { font-size: 16px; font-weight: 700; line-height: 1.5; }
.also__list dd { text-wrap: pretty; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 44ch; }

/* ── الشاشات ─────────────────────────────────────────────────────────────── */
.screens { padding-block: var(--section); background: var(--surface); }
.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 28px;
  padding: 4px;
  border-radius: 14px;
  background: var(--well);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs[hidden] { display: none; }
.tabs button {
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--olive-dark);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .08);
}
.shots { margin-top: 24px; display: grid; gap: 36px; }
.shot a { display: block; border-radius: var(--radius); }
.shot img {
  width: 100%;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.shot figcaption { margin-top: 14px; color: var(--muted); font-size: 15px; }
.shot figcaption b { display: block; color: var(--ink); font-size: 17px; }
/* بالجافاسكربت: شاشة واحدة ظاهرة، والتبويبات تبدّلها */
.js .shots.is-tabbed .shot[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .shots.is-tabbed .shot { animation: swap .32s var(--ease-out); }
}
@keyframes swap { from { opacity: 0; } to { opacity: 1; } }

/* ── أسئلة ──────────────────────────────────────────────────────────────── */
.faq { padding-block: var(--section); }   /* بعد قسم الشاشات الرمادي — يحتاج مسافته من الطرفين */
.faq__list { margin-top: 28px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  width: 22px;
  height: 22px;
  color: var(--olive);
  flex: none;
  transition: transform .25s var(--ease-out);
}
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--olive-dark); }
.faq details p { padding-bottom: 22px; color: var(--muted); max-width: 60ch; }

/* ── التواصل ────────────────────────────────────────────────────────────── */
.contact { padding-block: 60px; background: var(--olive); color: #fff; }
.contact__in { display: grid; justify-items: start; }
.contact h2 { color: #fff; }
.contact__num {
  margin-top: 14px;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.contact__note { margin-top: 6px; color: var(--lime-soft); font-size: 16px; }
.contact .btn { margin-top: 28px; }
.contact :focus-visible { outline-color: #fff; }

/* ── الذيل ──────────────────────────────────────────────────────────────── */
.foot { padding-block: 32px 110px; }
.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  color: var(--faint);
  font-size: 14px;
}
.logo--sm { width: 96px; color: var(--ink); }
.foot__in p:last-child { margin-inline-start: auto; }

/* ── زرّ التلفون الثابت ─────────────────────────────────────────────────── */
.dock {
  position: fixed;
  inset-inline: 16px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 16px;
  background: var(--olive);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 16px 34px -14px rgba(33, 52, 9, .65);
  transform: translateY(calc(100% + 28px));
  transition: transform .35s var(--ease-out);
}
.dock svg { width: 20px; height: 20px; }
.dock.on { transform: none; }

/* ═══ التابلت ═════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  :root { --gutter: 36px; --section: 104px; }

  .logo { width: 132px; }
  .top__nav { display: flex; gap: 28px; margin-inline-start: auto; font-size: 15px; color: var(--muted); }
  .top__nav a:hover { color: var(--ink); }
  .top__in > .btn { margin-inline-start: 12px; }

  .tl__i { grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; }
  .tl__t { font-size: 22px; }


  .also__list { column-gap: 48px; }
  .also__list dt { font-size: 18px; }
  .also__list dd { font-size: 16px; }


  .contact__num { margin-top: 18px; }
  .foot { padding-block: 36px; }
  .dock { display: none; }
}

/* ═══ الكمبيوتر ═══════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .hero { padding-block: 64px 40px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 64px;
  }
  .lede { font-size: 19px; }
  .stage { padding: 34px 24px 44px; border-radius: 36px; }

  .tl { margin-top: 56px; }
  .tl__i {
    grid-template-columns: 120px minmax(0, .95fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
    padding-block: 40px;
  }
  .tl__t { font-size: 28px; line-height: 1.2; }
  .tl__i > .ui { grid-column: auto; }
  /* خطّ اليوم: نقطة عند كل وقت وخطّ يصلها بالتالي — التسلسل نفسه مرسوماً،
     فيُستغنى عن الفواصل الأفقية. المركز في منتصف الفجوة بين عمود الوقت والنصّ */
  .tl__i { position: relative; background: none; }
  .tl__i::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-inline-start: 134px;
    top: 51px;
    width: 12px;
    height: 12px;
    border: 2.5px solid var(--olive);
    border-radius: 50%;
    background: var(--paper);
  }
  .tl__i:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 139px;
    top: 57px;
    width: 2px;
    height: 100%;
    background: var(--line);
  }
  .tl__i--month::before { background: var(--lime); }

  /* خطّ واحد مرسوم مع التمرير بدل القطع — والقطع تبقى لمن لا يملك جافاسكربت */
  .tl-wrap { position: relative; }
  .rail {
    display: none;
    position: absolute;
    inset-inline-start: 139px;
    top: var(--rail-top, 57px);
    width: 2px;
    height: var(--rail-h, 0px);
    background: var(--line);
  }
  .rail i {
    display: block;
    height: 100%;
    background: var(--olive);
    transform-origin: top;
    transform: scaleY(var(--tp, 0));
  }
  .has-rail .rail { display: block; }
  .has-rail .tl__i::after { display: none; }
  .tl__i--month .tl__t { font-size: 20px; line-height: 1.5; }
  .tl__body { padding-top: 2px; }
  .tl__body h3 { font-size: 23px; }
  .tl__body p { font-size: 17px; }
  .ui { padding: 20px; }

  .also__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; }
  .also__list > div { padding-block: 24px; }

  .contact__in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 48px;
  }
  .contact h2, .contact__num, .contact__note { grid-column: 1; }
  .contact .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   الحركة مع التمرير — عشر حركات (طلب المالك ٢٦ أيلول ٢٠٢٦)

   ⚠️ كلّها تحت صنف `anim` وحده، ويضيفه رأس الصفحة فقط حين تعمل الجافاسكربت ولا يطلب
   الجهاز «حركة أقل». بلاه كل شيء على حاله النهائية: لا عنصر يبقى مخفياً ينتظر حدثاً.
   والحركات المربوطة بالتمرير تقرأ متغيّراً يكتبه main.js (افتراضه الحال النهائية).
   ولا حركة إلا على transform وopacity وclip-path وfilter — لا شيء يعيد رسم الصفحة.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① شريط القراءة تحت الترويسة، وظلّها حين تفارق أعلى الصفحة */
.progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--olive);
  transform-origin: right;
  transform: scaleX(var(--read, 0));
  pointer-events: none;
}
.top { transition: box-shadow .3s ease, border-color .3s ease; }
.top.is-scrolled { border-bottom-color: transparent; box-shadow: 0 10px 24px -18px rgba(24, 24, 27, .35); }

/* ② الافتتاحية بعمق: المسرح يتأخّر عن النصّ، والورقة تتأرجح من فتحة الطابعة */
.anim .stage { transform: translateY(calc(var(--hp, 0) * 56px)); will-change: transform; }
.anim .feed { transform: rotate(calc(var(--hp, 0) * -3deg)); transform-origin: 50% 0; }

/* ③ العناوين تنكشف من اليمين — اتجاه القراءة نفسه */
.anim main h2 {
  clip-path: inset(-15% -6% -15% 106%);
  transform: translateY(12px);
  transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out);
}
.anim main h2.is-in { clip-path: inset(-15% -6% -15% -6%); transform: none; }
.anim .sec-head p { opacity: 0; transform: translateY(8px); transition: opacity .7s ease .3s, transform .7s var(--ease-out) .3s; }
.anim .sec-head.is-in p { opacity: 1; transform: none; }

/* ④ خطّ اليوم: الفاصل يُرسم من اليمين (التلفون)، والخطّ ونقاطه مع التمرير (الكمبيوتر) */
.anim .tl__i { transition: background-size 1.1s var(--ease-out); }
.anim .tl__i:not(.is-in) { background-size: 0% 1px; }
.anim .tl__i::before { transition: background-color .35s ease, transform .35s var(--ease-out); }
.anim .has-rail .tl__i.is-reached::before { background: var(--olive); transform: scale(1.18); }

/* ⑤ الساعة تدور حتى وقتها — تكتبها main.js، وهنا ومضة خفيفة حين تستقرّ */
.anim .tl__t.is-ticking { color: var(--olive-dark); }

/* ⑥ لحظة اليوم: النصّ يصعد، والقطعة تنزلق إليه، وصفوفها تنفرد واحداً واحداً */
.anim .tl__body { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .8s var(--ease-out); }
.anim .tl__i.is-in .tl__body { opacity: 1; transform: none; }
.anim .tl__i .ui {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .7s ease .15s, transform .9s var(--ease-out) .15s;
}
.anim .tl__i.is-in .ui { opacity: 1; transform: none; }
.anim .tl__i .ui > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .6s var(--ease-out);
  transition-delay: calc(.35s + var(--i, 0) * 90ms);
}
.anim .tl__i.is-in .ui > * { opacity: 1; transform: none; }

/* ⑦ الأرقام تُعدّ (main.js)، وشريط الكفالة يمتلئ، ومراحل الصيانة تُضاء بالترتيب، و«مطابق» تُرسم */
.anim .bar i { width: 0; transition: width 1.3s var(--ease-out) .6s; }
.anim .is-in .bar i { width: var(--fill); }
.steps li:nth-child(2) { --s: 1; }
.steps li:nth-child(3) { --s: 2; }
.steps li:nth-child(4) { --s: 3; }
.anim .steps li::before { transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); transition-delay: calc(.55s + var(--s, 0) * 180ms); }
.anim .is-in .steps li::before { transform: none; }
#i-check path { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); transition: stroke-dashoffset .6s var(--ease-out) 1.1s; }
.anim .match svg { --draw: 1; }
.anim .is-in .match svg { --draw: 0; }

/* ⑧ الميزات تتوضّح من الضباب، واحدة بعد واحدة */
.anim .also__list > div {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition: opacity .8s ease, filter .8s ease, transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.anim .also__list.is-in > div { opacity: 1; filter: none; transform: none; }

/* ⑨ لقطة الشاشة تستوي من ميلها كأنها تُوضع على الطاولة */
.anim .shots { perspective: 1400px; }
.anim .shot a {
  transform: rotateX(calc((1 - var(--sp, 1)) * 18deg)) scale(calc(.9 + var(--sp, 1) * .1));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* ⑩ شريط التواصل يتّسع من بطاقةٍ إلى عرض الشاشة كلّه */
.anim .contact {
  clip-path: inset(0 calc((1 - var(--cp, 1)) * var(--gutter)) round calc((1 - var(--cp, 1)) * 28px));
}
.anim .contact__in { transform: translateY(calc((1 - var(--cp, 1)) * 24px)); }