/* ============================================================
     أثـــــر — نظام «الورق والحبر»
     المرجع الأساسي: Empower — الورق كانفاس، والفصول الغامقة كاملة
     الشاشة هي أداة الإيقاع. الليمون حشو تفاعلي فقط، لا لون نص.
     مستعار من Mode: بلوك الليمون الذي يحتضن العنوان + لا تمركز.
     مستعار من Fey: انضباط مستويات الأسطح داخل الفصول الغامقة.
     ============================================================ */

  @font-face {
    font-family: 'Thmanyah Sans';
    src: url('/fonts/thmanyahsans-Regular.woff2') format('woff2'),
         url('/fonts/thmanyahsans-Regular.otf') format('opentype');
    font-weight: 400; font-display: swap;
  }
  @font-face {
    font-family: 'Thmanyah Sans';
    src: url('/fonts/thmanyahsans-Medium.woff2') format('woff2'),
         url('/fonts/thmanyahsans-Medium.otf') format('opentype');
    font-weight: 500; font-display: swap;
  }
  @font-face {
    font-family: 'Thmanyah Sans';
    src: url('/fonts/thmanyahsans-Bold.woff2') format('woff2'),
         url('/fonts/thmanyahsans-Bold.otf') format('opentype');
    font-weight: 600 700; font-display: swap;
  }
  @font-face {
    font-family: 'Thmanyah Sans';
    src: url('/fonts/thmanyahsans-Black.woff2') format('woff2'),
         url('/fonts/thmanyahsans-Black.otf') format('opentype');
    font-weight: 800 900; font-display: swap;
  }

  /* ---------------- الرموز ---------------- */
  :root {
    /* الأساس */
    --color-forest-ink: #163300;
    --color-lime-voltage: #9fe870;
    --color-spruce: #054d28;
    --color-linen-mist: #e2f6d5;
    --color-charcoal: #3f423d;
    --color-obsidian: #191c16;
    --color-pebble: #7b807a;
    --color-slate: #55594f;
    --color-fog: #eaf0e4;
    --color-paper: #fafcf7;

    /* أسطح الورق — الكانفاس مصبوغ بلمسة من لون البراند، والكروت بيضاء
       صافية فوقه. هذا هو أساس الطبقات في الستايل المرجعي. */
    --paper-0: #fafcf7;      /* الكانفاس */
    --paper-1: #ffffff;      /* الكرت */
    --paper-2: #f1f6ea;      /* سطح خافت — صفوف الأسئلة والحقول */
    --hairline: #e5ecdd;

    /* لون التمييز: الليمون نفسه لا يُقرأ نصًّا على الأبيض، فله بديل
       غامق من العائلة نفسها في الفاتح ينقلب ليمونًا في الداكن. */
    --accent: #3f8f26;

    /* أسطح «الفصل» — كانت غامقة، وصارت فاتحة تبعًا للستايل المرجعي.
       تنقلب كلها إلى الغامق في الوضع الداكن دفعة واحدة. */
    --ch-0: #f6fbef;
    --ch-1: #ffffff;
    --ch-2: #edf7e0;
    --ch-line: #e3ecd7;
    --ch-text: #191c16;
    --ch-muted: #55594f;

    /* تدرّجات وظلال ملوّنة بلون البراند لا بالأسود — بصمة الستايل المرجعي */
    --wash-hero: linear-gradient(180deg,#ffffff 0%,#fbfdf8 24%,#f4fbea 68%,#eef8de 100%);
    --wash-section: linear-gradient(180deg,#fafcf7 0%,#f5fbec 45%,#fafcf7 100%);
    --shadow-soft: 0 4px 30px rgba(22,51,0,.09);
    --shadow-card: 0 1px 3px rgba(22,51,0,.05), 0 12px 32px -16px rgba(22,51,0,.16);
    --shadow-card-hover: 0 4px 12px rgba(22,51,0,.07), 0 22px 48px -20px rgba(22,51,0,.22);
    --grad-lime: linear-gradient(135deg,#bdf29a 0%,#8ad957 55%,#72cd40 100%);
    --shadow-lime: 0 6px 20px rgba(96,181,46,.28), 0 2px 6px rgba(96,181,46,.18), inset 0 1px 0 rgba(255,255,255,.42);
    --shadow-lime-hover: 0 12px 30px rgba(96,181,46,.36), 0 4px 10px rgba(96,181,46,.24), inset 0 1px 0 rgba(255,255,255,.5);

    --font-display: 'Thmanyah Sans', 'IBM Plex Sans Arabic', sans-serif;
    --font-body: 'Thmanyah Sans', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;

    /* المقاييس */
    --r-pill: 9999px;
    --r-card: 16px;      /* كرت المحتوى — Empower */
    --r-media: 24px;     /* الوسائط والصور — Empower */
    --r-block: 12px;     /* بلوك الليمون — Mode */

    --page-max: 1240px;
    --gutter: 24px;

    /* رفع الوسائط — ظل ملوّن بلون البراند لا رمادي */
    --lift-media: 0 18px 50px -18px rgba(22,51,0,.22);
    --lift-media-paper: 0 24px 60px -20px rgba(22,51,0,.24);

    /* رموز مرتبطة بالدور لا باللون. --color-forest-ink ينقلب إلى فاتح
       في الوضع الداكن، فاستخدامه نصًّا فوق الليمون أو خلفيةً لزر كان
       يعطي 1.13:1. هذه الرموز تحفظ الدور في الوضعين. */
    --on-lime: #10240a;          /* نص فوق سطح ليموني — ثابت دائمًا */
    --btn-solid-bg: #163300;     /* الزر المصمت */
    --btn-solid-fg: #ffffff;

    /* منحنيات الحركة */
    --ease-out: cubic-bezier(.16,.84,.28,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur: .72s;
  }

  :root[data-theme="dark"] {
    --paper-0: #0f1210;
    --paper-1: #161b17;
    --paper-2: #1d231e;
    --hairline: #2a312b;

    --accent: #9fe870;

    --ch-0: #0a0d0a;
    --ch-1: #121a10;
    --ch-2: #1a2617;
    --ch-line: rgba(159, 232, 112, .16);
    --ch-text: #f3f8ee;
    --ch-muted: #b7cba4;

    --wash-hero: linear-gradient(180deg,#0f1210 0%,#111710 46%,#141d11 100%);
    --wash-section: linear-gradient(180deg,#0f1210 0%,#0c110b 100%);
    --shadow-soft: 0 4px 30px rgba(0,0,0,.5);
    --shadow-card: 0 1px 3px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,.45), 0 22px 48px -20px rgba(0,0,0,.7);
    --shadow-lime: 0 8px 32px rgba(159,232,112,.22), inset 0 1px 0 rgba(255,255,255,.28);
    --shadow-lime-hover: 0 14px 44px rgba(159,232,112,.32), inset 0 1px 0 rgba(255,255,255,.34);

    --color-paper: #0f1210;
    --color-fog: #1b201c;
    --color-linen-mist: #16251a;
    --color-obsidian: #f2f4f1;
    --color-charcoal: #d3d8d2;
    --color-slate: #a3aaa2;
    --color-pebble: #7d847c;
    --color-forest-ink: #d9e6cf;
    --color-spruce: #b6ef8f;
    --lift-media-paper: 0 24px 60px -20px rgba(0,0,0,.6);
    /* في الداكن ينقلب الزر المصمت إلى فاتح بنص غامق ليبقى مقروءًا */
    --btn-solid-bg: #e6efdf;
    --btn-solid-fg: #10240a;
  }

  /* ---------------- الأساس ---------------- */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  p, li, td, dd, dt { overflow-wrap: anywhere; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  /* الهيدر لاصق، فبدون هذا يختفي العنصر المقصود خلفه عند القفز إليه */
  :target, [id] { scroll-margin-top: 77px; }
  body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.62;
    color: var(--color-charcoal);
    background: var(--paper-0);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  /* height:auto ضرورية: الصور عليها خاصية height="1565" في الـHTML،
     فبدونها يبقى الارتفاع ثابتًا مع عرض 100% وتُشَدّ الصورة رأسيًا. */
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; }
  /* الأزرار وحقول الإدخال لا ترث الخط تلقائيًا — بدون هذا تسقط على خط النظام */
  button, input, select, textarea, optgroup { font-family: inherit; }
  ::selection { background: var(--color-lime-voltage); color: var(--on-lime); }

  .container { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
  .container-narrow { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }

  .skip-link {
    position: absolute; inset-inline-start: 0; top: 0; z-index: 999;
    background: var(--btn-solid-bg); color: var(--btn-solid-fg); padding: 12px 20px;
    border-radius: 0 0 var(--r-card) 0;
    transform: translateY(-140%);
    transition: transform .2s ease;
  }
  .skip-link:focus { transform: translateY(0); }

  :where(a, button, input, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-lime-voltage);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ---------------- التايبوغرافي ---------------- */
  /* زخارف ثمانية: swsh وsalt وss01 تشير كلها إلى البدائل المزخرفة نفسها
     (ذيل الكاف، وأشكال أكثر خطّية للهاء والسين). للعناوين فقط —
     في المتن تُضعف الوضوح. */
  h1, h2, h3, h4, .brand, .curtain .mark, .faq summary,
  .chat-title, .conv-title, .steps .step h3 {
    font-feature-settings: 'ss01' 1, 'swsh' 1, 'salt' 1;
  }
  /* ارتفاع السطر في العربية ليس ذوقًا بل قياسًا: صندوق هذا الخط يحتاج
     1.26 من المقاس، ونزلات الحروف (ج ح خ ع غ م ن ي) تصل إلى 1.36. أي
     قيمة أقل تجعل نزلة السطر تصطدم بصعود السطر الذي تحته — يظهر أثرها
     على الهاتف حيث ينكسر العنوان إلى ثلاثة سطور وأربعة.

     والشدّ السالب (letter-spacing) للاتينية وحدها: حروفها منفصلة فيقرّبها
     الشدّ، والعربية موصولة فيلصق الحرف بجاره ويُضيّق الكلمة. */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-obsidian);
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: 0;
    text-wrap: balance;
  }
  [dir="ltr"] :is(h1, h2, h3, h4) { line-height: 1.1; letter-spacing: -.02em; }
  .t-display {
    font-size: clamp(44px, 5.4vw, 78px);
    line-height: 1.3;
    letter-spacing: 0;
  }
  [dir="ltr"] .t-display { line-height: 1.0; letter-spacing: -.032em; }
  .t-chapter {
    font-size: clamp(37px, 5.4vw, 72px);
    line-height: 1.32;
    letter-spacing: 0;
  }
  [dir="ltr"] .t-chapter { line-height: 1.05; letter-spacing: -.026em; }
  .t-section {
    font-size: clamp(31px, 3.9vw, 52px);
    line-height: 1.32;
    letter-spacing: 0;
  }
  [dir="ltr"] .t-section { line-height: 1.1; letter-spacing: -.022em; }
  /* الحروف اللاتينية أعرض لكل كلمة من العربية، فتحتاج مقاسًا أصغر
     حتى تلتزم العناوين بعدد السطور المقصود. */
  [dir="ltr"] .t-display { font-size: clamp(36px, 4.5vw, 64px); }
  [dir="ltr"] .t-chapter { font-size: clamp(30px, 4.2vw, 56px); }
  [dir="ltr"] .t-section { font-size: clamp(27px, 3.2vw, 42px); }

  .t-lead {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--color-slate);
    max-width: 62ch;
    text-wrap: pretty;
  }
  /* الكحلة صارت بادج حبّة — العنصر الذي يسبق كل عنوان قسم في المرجع */
  .t-eyebrow {
    font-family: var(--font-body);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    background: var(--color-linen-mist);
    padding: 8px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 22px;
  }
  .t-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
  }

  /* ---------------- الأزرار — الليمون حشو فقط ---------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-size: 16px; font-weight: 600;
    padding: 14px 28px; border-radius: var(--r-pill);
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    background: var(--btn-solid-bg); color: var(--btn-solid-fg);
    transition: transform .34s var(--ease-spring), background-color .2s ease, border-color .2s ease, box-shadow .3s ease;
  }
  .btn:hover { transform: translateY(-3px) scale(1.02); }
  .btn:active { transform: translateY(0) scale(.99); }
  /* الزر الأساسي: تدرّج داخلي وهالة ملوّنة بلون الزر نفسه — لا ظل رمادي */
  .btn-lime {
    background: var(--grad-lime); color: var(--on-lime);
    box-shadow: var(--shadow-lime);
  }
  .btn-lime:hover { box-shadow: var(--shadow-lime-hover); }
  .btn-outline {
    background: var(--paper-1); color: var(--color-forest-ink);
    border-color: var(--hairline);
    box-shadow: var(--shadow-soft);
  }
  .btn-outline:hover { border-color: var(--color-forest-ink); }
  .btn-lg { font-size: 18px; padding: 18px 38px; }
  .btn-sm { font-size: 14px; padding: 9px 18px; }

  /* الأزرار داخل الفصل الغامق */
  .chapter .btn:not(.btn-lime):not(.btn-outline) { background: #e6efdf; color: #10240a; }
  .chapter .btn-outline { color: var(--ch-text); border-color: rgba(255,255,255,.5); }
  .chapter .btn-outline:hover { background: var(--ch-text); color: var(--color-forest-ink); border-color: var(--ch-text); }

  .link-underline {
    font-weight: 600; color: var(--color-obsidian); text-decoration: none;
    border-bottom: 2px solid var(--color-lime-voltage);
    padding-bottom: 3px; transition: border-color .2s ease, opacity .2s ease;
  }
  .link-underline:hover { border-bottom-color: var(--color-forest-ink); }
  .chapter .link-underline { color: var(--ch-text); }

  .ic { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }

  /* ============================================================
     الهيدر
     ============================================================ */
  header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--paper-0) 82%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background-color .3s ease;
  }
  header.scrolled { border-bottom-color: var(--hairline); }
  .nav {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 24px; height: 76px;
  }
  .brand {
    font-family: var(--font-display); font-weight: 900; font-size: 26px;
    color: var(--color-forest-ink); text-decoration: none; letter-spacing: 0;
    transition: opacity .2s ease;
  }
  .brand:hover { opacity: .72; }
  .nav-links { display: flex; justify-content: center; gap: 30px; }
  .nav-links a {
    font-size: 16px; font-weight: 500; color: var(--color-charcoal);
    text-decoration: none; position: relative; padding: 6px 0;
  }
  .nav-links a::after {
    content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
    width: 100%; height: 2px; background: var(--color-forest-ink);
    transform: scaleX(0); transform-origin: inline-end;
    transition: transform .34s var(--ease-out);
  }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: inline-start; }
  .nav-cta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

  /* مفتاح السمة — توجل انزلاقي: الشمس والقمر ظاهران دائمًا،
     والمقبض ينتقل بينهما فيقرأ الوضع الحالي من نظرة واحدة. */
  .theme-toggle:not(.menu-row) {
    position: relative; flex: 0 0 auto;
    width: 64px; height: 36px; padding: 0;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline); background: transparent;
    cursor: pointer; display: inline-flex; align-items: center;
    --knob-x: -28px;
    transition: border-color .2s ease;
  }
  :root[dir="ltr"] .theme-toggle:not(.menu-row) { --knob-x: 28px; }
  .theme-toggle:not(.menu-row):hover { border-color: var(--color-forest-ink); }
  .theme-toggle:not(.menu-row)::after {
    content: ''; position: absolute; z-index: 0;
    inset-block-start: 3px; inset-inline-start: 3px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--btn-solid-bg);
    transition: transform .3s var(--ease-spring), background-color .25s ease;
  }
  :root[data-theme="dark"] .theme-toggle:not(.menu-row)::after {
    transform: translateX(var(--knob-x));
    background: var(--color-lime-voltage);
  }
  .theme-toggle:not(.menu-row) .ic {
    position: absolute; z-index: 1; inset-block-start: 50%; margin-block-start: -8px;
    width: 16px; height: 16px; display: block; pointer-events: none;
    transition: color .25s ease, opacity .25s ease;
  }
  .theme-toggle:not(.menu-row) .ic-sun  { inset-inline-start: 9px; color: var(--btn-solid-fg); }
  .theme-toggle:not(.menu-row) .ic-moon { inset-inline-end: 9px; color: var(--color-charcoal); opacity: .5; }
  :root[data-theme="dark"] .theme-toggle:not(.menu-row) .ic-sun  { color: var(--color-charcoal); opacity: .5; }
  :root[data-theme="dark"] .theme-toggle:not(.menu-row) .ic-moon { color: var(--on-lime); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .theme-toggle:not(.menu-row)::after { transition: background-color .25s ease; }
  }
  /* داخل قائمة الجوال يبقى صفًّا بعنوان صريح، بأيقونة واحدة */
  .menu-theme .ic-moon { display: none; }
  :root[data-theme="dark"] .menu-theme .ic-sun { display: none; }
  :root[data-theme="dark"] .menu-theme .ic-moon { display: block; }

  .burger {
    display: none; width: 42px; height: 42px; border: 1px solid var(--hairline);
    background: transparent; border-radius: var(--r-pill); cursor: pointer;
    position: relative;
  }
  .burger span {
    position: absolute; inset-inline-start: 11px; width: 18px; height: 2px;
    background: var(--color-obsidian); border-radius: 2px;
    transition: transform .34s var(--ease-out), opacity .2s ease;
  }
  .burger span:nth-child(1) { top: 15px; }
  .burger span:nth-child(2) { top: 21px; }
  .burger span:nth-child(3) { top: 27px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    position: fixed; inset: 76px 0 auto 0; z-index: 99;
    background: var(--paper-0); border-bottom: 1px solid var(--hairline);
    clip-path: inset(0 0 100% 0); pointer-events: none;
    transition: clip-path .5s var(--ease-out);
    /* القائمة قد تطول عن الشاشة والصفحة خلفها مقفولة — تتمرر هي داخليًا */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .mobile-menu.open { clip-path: inset(0 -20% -30% -20%); pointer-events: auto; }
  .mobile-menu .container { display: flex; flex-direction: column; gap: 4px; padding-block: 20px 28px; }
  .mobile-menu a {
    font-family: var(--font-display); font-weight: 700; font-size: 24px;
    color: var(--color-obsidian); text-decoration: none; padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .mobile-menu .btn { margin-top: 16px; border-bottom: none; font-size: 17px; }
  .mobile-menu a.btn-lime { color: var(--on-lime); }
  /* صفّا توجل في قائمة البرجر: الوضع بسويتش يعكس الحالة، واللغة بسيجمنت */
  .mobile-menu .menu-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-family: var(--font-display); font-weight: 700; font-size: 20px;
    color: var(--color-obsidian); background: transparent; border: 0;
    border-bottom: 1px solid var(--hairline); padding: 14px 0;
    cursor: pointer; text-decoration: none; text-align: start;
  }
  .mswitch {
    position: relative; flex: none; width: 46px; height: 26px;
    border-radius: 999px; background: var(--hairline);
    transition: background-color .25s ease;
  }
  .mswitch::after {
    content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--paper-1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: translate .25s var(--ease-out);
  }
  :root[data-theme="dark"] .mswitch { background: var(--color-lime-voltage); }
  :root[data-theme="dark"] .mswitch::after { translate: -20px 0; background: #10190e; }
  :root[data-theme="dark"][dir="ltr"] .mswitch::after { translate: 20px 0; }
  .mseg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; }
  .mseg span {
    font-family: var(--font-display); font-size: 14px; font-weight: 700;
    padding: 3px 12px; border-radius: 999px; color: var(--color-slate);
  }
  .mseg .on { background: var(--color-forest-ink); color: var(--paper-0); }

  /* ============================================================
     الأقسام والإيقاع
     ============================================================ */
  section { padding-block: clamp(72px, 7.6vw, 128px); }
  section.tight { padding-block: clamp(56px, 5.6vw, 88px); }

  /* الفصل — كان باندًا غامقًا كامل العرض، وصار غسلة تدرّج فاتحة
     تفصل الأقسام بلا قطع لوني حادّ. يعود غامقًا في الوضع الداكن. */
  .chapter {
    background: var(--wash-section);
    color: var(--ch-muted);
    padding-block: clamp(80px, 8.4vw, 136px);
    position: relative;
  }
  /* حافتان متلاشيتان أعلى الفصل وأسفله حتى لا يظهر خطّ قطع بين الأقسام */
  .chapter::before, .chapter::after {
    content: ''; position: absolute; inset-inline: 0; height: 96px;
    pointer-events: none;
  }
  .chapter::before { top: 0; background: linear-gradient(to bottom, var(--paper-0), transparent); }
  .chapter::after { bottom: 0; background: linear-gradient(to top, var(--paper-0), transparent); }
  .chapter h1, .chapter h2, .chapter h3, .chapter h4 { color: var(--ch-text); }
  .chapter .t-lead { color: var(--ch-muted); }

  /* بادج الفصل — نفس حبّة البادج في المرجع */
  .chapter-mark {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; letter-spacing: .04em;
    color: var(--accent); background: var(--color-linen-mist);
    padding: 8px 18px; border-radius: var(--r-pill);
    margin-bottom: 22px;
  }
  .chapter-mark::after { content: none; }

  /* رأس القسم — متمركز، وهو أوضح ما يميّز إيقاع المرجع */
  .sec-head {
    max-width: 940px; margin-inline: auto; text-align: center;
    margin-bottom: clamp(40px, 4.4vw, 72px);
  }
  .sec-head .t-lead { margin-top: 20px; margin-inline: auto; }
  /* الكشف الأفقي يكسر التمركز، فيصير رأسيًا داخل الرؤوس المتمركزة */
  .sec-head [data-dir] { --rx: 0; --ry: 28px; }

  /* ============================================================
     الهيرو — تكوين غير متماثل
     ============================================================ */
  .hero {
    padding-block: clamp(56px, 7vw, 104px) clamp(56px, 6.5vw, 104px);
    position: relative; overflow: hidden;
    text-align: center;
    background: var(--wash-hero);
    isolation: isolate;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-linen-mist); color: var(--color-forest-ink);
    font-size: 14px; font-weight: 600;
    padding: 8px 18px; border-radius: var(--r-pill);
    margin-bottom: 28px;
  }
  .hero h1 { margin-bottom: 26px; }
  /* بلوك الليمون الذي يحتضن الكلمة — الحركة المميزة (Mode) */
  .lime-mark {
    display: inline-block; position: relative;
    padding: 0 .16em .06em; border-radius: var(--r-block);
    color: var(--color-forest-ink);
  }
  .lime-mark::before {
    content: ''; position: absolute; inset: .06em 0 .02em;
    background: var(--color-lime-voltage); border-radius: var(--r-block);
    z-index: -1;
    transform: scaleX(1); transform-origin: inline-start;
    transition: transform .8s var(--ease-out) .5s;
  }
  .js .lime-mark:not(.lit)::before { transform: scaleX(0); }
  :root[data-theme="dark"] .lime-mark { color: #10240a; }

  .hero-sub { font-size: clamp(18px, 1.6vw, 22px); color: var(--color-slate); max-width: 52ch; margin-bottom: 34px; }
  .hero-sub strong { color: var(--color-obsidian); font-weight: 700; }
  .hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
  .hero-note { font-size: 15px; color: var(--color-pebble); }

  .hero-media { position: relative; display: flex; justify-content: center; }
  .phone {
    width: min(300px, 72vw); border-radius: 44px; padding: 10px;
    background: #0e0f0c; box-shadow: var(--lift-media-paper);
    position: relative; will-change: transform;
  }
  .phone::before {
    content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    width: 84px; height: 22px; background: #0e0f0c; border-radius: var(--r-pill); z-index: 2;
  }
  .phone-screen { border-radius: 36px; overflow: hidden; background: #fff; }
  .phone-screen img { width: 100%; height: auto; }
  .shot-dark { display: none; }
  :root[data-theme="dark"] .shot-light { display: none; }
  :root[data-theme="dark"] .shot-dark { display: block; }

  /* لوح خلف الهاتف — يمتد لنصف الشاشة، ولا يقطع الهاتف */
  .hero-plate {
    position: absolute; inset-block: 9% -7%;
    inset-inline-start: 20%; inset-inline-end: -100%;
    background: var(--color-linen-mist);
    border-start-start-radius: var(--r-media); border-end-start-radius: var(--r-media);
    z-index: -1;
  }
  :root[data-theme="dark"] .hero-plate { background: #16251a; }

  .scroll-cue {
    display: flex; align-items: center; gap: 10px; margin-top: 44px;
    font-size: 13px; letter-spacing: .1em; color: var(--color-pebble);
  }
  .scroll-cue i {
    display: block; width: 1px; height: 34px;
    background: linear-gradient(to bottom, var(--color-pebble), transparent);
    animation: cue 2.2s ease-in-out infinite;
  }
  @keyframes cue { 0%,100% { opacity: .3; transform: scaleY(.5); transform-origin: top } 50% { opacity: 1; transform: scaleY(1) } }

  /* ============================================================
     الفصل الأول — الخصوصية
     ============================================================ */
  .promise-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; margin-bottom: clamp(48px, 6vw, 84px);
  }
  .promise-grid .promise {
    background: var(--ch-1); border: 1px solid var(--ch-line);
    border-radius: var(--r-card); padding: clamp(26px, 2.8vw, 36px);
    box-shadow: var(--shadow-card);
    transition: transform .42s var(--ease-out), box-shadow .42s var(--ease-out);
  }
  .promise-grid .promise:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
  .promise-grid .promise .p-icon { color: var(--accent); margin-bottom: 20px; }
  .promise-grid .promise .p-icon .ic { width: 30px; height: 30px; }
  .promise-grid .promise h3 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 10px; }
  .promise-grid .promise p { font-size: 17px; color: var(--ch-muted); }

  .sec-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(36px, 5vw, 80px); align-items: center;
  }
  .sec-list { display: flex; flex-direction: column; gap: 28px; }
  .sec-item { display: flex; gap: 18px; align-items: flex-start; }
  .sec-item .s-icon {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-card);
    background: var(--color-linen-mist); color: var(--accent);
    display: grid; place-items: center;
  }
  .sec-item h3 { font-size: 21px; margin-bottom: 6px; }
  .sec-item p { font-size: 16.5px; color: var(--ch-muted); }

  /* لقطة المنتج المرفوعة — دور الوسائط من Fey */
  .preview {
    border-radius: var(--r-media); overflow: hidden;
    background: var(--ch-1); border: 1px solid var(--ch-line); padding: 12px;
    box-shadow: var(--lift-media); will-change: transform;
  }
  .preview img { border-radius: 16px; width: 100%; height: auto; }
  .preview-tall { width: min(258px, 66vw); margin-inline: auto; }

  /* ============================================================
     كيف تسجّل — عمود لاصق + الطرق الأربع
     ============================================================ */
  .steps-wrap { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
  .steps-sticky { position: sticky; top: 128px; }
  .step-media {
    border-radius: var(--r-media); overflow: hidden; background: var(--paper-1);
    border: 1px solid var(--hairline);
    padding: 12px; box-shadow: var(--lift-media-paper); width: min(258px, 70vw);
  }
  .step-media img { border-radius: 16px; width: 100%; height: auto; }
  .steps-list { display: flex; flex-direction: column; gap: clamp(26px, 3.2vw, 44px); }
  .steps-list .step {
    padding-inline-start: 78px; position: relative;
    transition: opacity .5s ease;
  }
  .js .steps-list .step { opacity: .34; }
  .js .steps-list .step.active { opacity: 1; }
  .steps-list .step .n {
    position: absolute; inset-inline-start: 0; top: -6px;
    width: 54px; height: 54px; border-radius: var(--r-pill);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 900; font-size: 24px;
    background: var(--paper-2); color: var(--color-forest-ink);
    transition: background-color .5s ease, color .5s ease, transform .5s var(--ease-spring);
  }
  .steps-list .step.active .n { background: var(--color-lime-voltage); color: var(--on-lime); transform: scale(1.08); }
  .steps-list .step h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 10px; }
  .steps-list .step p { font-size: 17.5px; color: var(--color-slate); }

  .ways-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 56px); }
  .way-card {
    background: var(--paper-1); border: 1px solid var(--hairline);
    border-radius: var(--r-card); padding: 26px;
    box-shadow: var(--shadow-card);
    transition: transform .42s var(--ease-out), box-shadow .42s var(--ease-out);
  }
  .way-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
  .way-card .w-icon { color: var(--accent); margin-bottom: 18px; }
  .way-card h3 { font-size: 21px; margin-bottom: 8px; }
  .way-card p { font-size: 16px; color: var(--color-slate); }
  .way-card .sample {
    margin-top: 14px; font-size: 14.5px; color: var(--color-forest-ink);
    background: var(--color-linen-mist); border-radius: 12px; padding: 10px 14px;
  }

  /* ============================================================
     المزايا
     ============================================================ */
  .feat-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: clamp(32px, 5vw, 72px); align-items: center;
    background: var(--paper-1); border: 1px solid var(--hairline);
    border-radius: var(--r-media); padding: clamp(28px, 4vw, 56px);
    box-shadow: var(--shadow-card); margin-bottom: 20px;
  }
  .feat-hero h3 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
  .feat-hero p { font-size: 18px; color: var(--color-slate); }
  .feat-hero .f-icon { color: var(--accent); margin-bottom: 20px; }
  .feat-hero .f-icon .ic { width: 30px; height: 30px; }
  .feat-media { border-radius: var(--r-media); overflow: hidden; box-shadow: var(--lift-media-paper); width: min(260px, 70vw); margin-inline: auto; }
  .feat-media img { width: 100%; height: auto; }

  .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .feature {
    background: var(--paper-1); border: 1px solid var(--hairline);
    border-radius: var(--r-card); padding: 30px;
    box-shadow: var(--shadow-card);
    transition: transform .42s var(--ease-out), box-shadow .42s var(--ease-out);
  }
  .feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
  .feature .f-icon { color: var(--accent); margin-bottom: 20px; }
  .feature .f-icon .ic { width: 28px; height: 28px; }
  .feature h3 { font-size: 21px; margin-bottom: 10px; }
  .feature p { font-size: 16.5px; color: var(--color-slate); }

  /* ============================================================
     الفصل الثاني — المساعد
     ============================================================ */
  .assist-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(36px, 5vw, 80px); align-items: center;
  }
  .assist-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
  .assist-list li { position: relative; padding-inline-start: 30px; font-size: 17px; color: var(--ch-muted); }
  .assist-list li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: .62em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  }
  .chat-card {
    background: var(--ch-1); border: 1px solid var(--ch-line);
    border-radius: var(--r-media); padding: clamp(22px, 3vw, 34px);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 14px;
  }
  .chat-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--accent); margin-bottom: 6px; }
  .bubble { border-radius: 18px; padding: 14px 18px; font-size: 16.5px; max-width: 88%; line-height: 1.55; }
  .bubble.user { background: var(--paper-2); color: var(--ch-text); align-self: flex-start; border-start-start-radius: 6px; }
  .bubble.bot { background: var(--color-linen-mist); color: var(--color-forest-ink); align-self: flex-end; border-start-end-radius: 6px; }
  :root[data-theme="dark"] .bubble.bot { background: #223d16; color: #eaf6e0; }
  .bubble strong { font-weight: 700; }

  /* ============================================================
     محوّل العملات
     ============================================================ */
  .conv-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
  .conv-card {
    background: var(--paper-1); border: 1px solid var(--hairline);
    border-radius: var(--r-media); padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--shadow-card);
  }
  .conv-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-obsidian); margin-bottom: 18px; }
  .conv-field { margin-bottom: 8px; }
  .conv-label { display: block; font-size: 14px; color: var(--color-slate); margin-bottom: 8px; }
  .conv-row {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--hairline); border-radius: var(--r-card);
    padding: 8px; background: var(--paper-0);
    transition: border-color .2s ease;
  }
  .conv-row:focus-within { border-color: var(--accent); }
  .cur-select {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
    background: var(--paper-1); border: 1px solid var(--hairline);
    flex: 0 1 auto; min-width: 0; width: 190px; cursor: pointer;
  }
  .cur-flag { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
  .cur-select select {
    border: none; background: transparent; font-family: var(--font-body);
    font-size: 15px; font-weight: 600; color: var(--color-obsidian);
    cursor: pointer; flex: 1 1 auto; min-width: 0; width: 100%;
    padding-inline-end: 4px; min-height: 24px;
    text-overflow: ellipsis;
  }
  .conv-row input, .conv-row .result {
    flex: 1 1 0; min-width: 0; width: 0; min-height: 28px; border: none; background: transparent;
    font-family: var(--font-display); font-weight: 700; font-size: 26px;
    color: var(--color-obsidian); text-align: start; padding-inline: 8px;
  }
  .conv-row input:focus { outline: none; }
  .conv-swap {
    width: 38px; height: 38px; border-radius: var(--r-pill);
    background: var(--color-forest-ink); color: var(--paper-0);
    border: 3px solid var(--paper-0); cursor: pointer;
    display: grid; place-items: center; font-size: 16px;
    margin: -12px auto; position: relative; z-index: 2;
    transition: transform .45s var(--ease-spring);
  }
  .conv-swap:hover { transform: rotate(180deg); }
  .conv-rate { font-size: 14px; color: var(--color-slate); margin: 16px 0 18px; display: flex; align-items: center; gap: 8px; }
  .conv-rate .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .conv-card .btn { width: 100%; }
  .conv-note { font-size: 13.5px; color: var(--color-pebble); text-align: center; margin-top: 12px; }

  /* ============================================================
     الفصل الثالث — العهد
     ============================================================ */
  .covenant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .covenant-card {
    background: var(--ch-1); border: 1px solid var(--ch-line);
    border-radius: var(--r-card); padding: clamp(26px, 3vw, 36px);
    box-shadow: var(--shadow-card);
    transition: box-shadow .42s var(--ease-out), transform .42s var(--ease-out);
  }
  .covenant-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); }
  .covenant-card .c-icon { color: var(--accent); margin-bottom: 20px; }
  .covenant-card .c-icon .ic { width: 30px; height: 30px; }
  .covenant-card h3 { font-size: 23px; margin-bottom: 10px; }
  .covenant-card p { font-size: 16.5px; color: var(--ch-muted); }

  /* ============================================================
     الأسعار
     ============================================================ */

  /* ============================================================
     طفو لقطات التطبيق — تسبح في مكانها صعودًا وهبوطًا
     تُستعمل خاصية translate المستقلة لا transform، لأن transform
     محجوز للكشف (.reveal) وللبارالاكس؛ والثلاثة تتركّب معًا بلا تعارض.
     ============================================================ */
  /* المدى 26px على 5.5s ≈ 19px/ث — فوق عتبة الملاحظة بوضوح.
     14px على 7s (4px/ث) كانت تعمل لكنها لا تُرى. */
  @keyframes athar-float {
    0%, 100% { translate: 0 0;      rotate: 0deg; }
    50%      { translate: 0 -26px;  rotate: -.6deg; }
  }
  .preview, .step-media, .feat-media, .shot .frame, .feat .frame {
    animation: athar-float 5.5s ease-in-out infinite;
    will-change: translate;
  }
  /* تفاوت في المدة والبداية حتى لا تسبح اللقطات في صفٍّ واحد */
  .step-media   { animation-duration: 6.4s; animation-delay: -1.6s; }
  .feat-media   { animation-duration: 5s;   animation-delay: -3.2s; }
  .preview-tall { animation-duration: 6s;   animation-delay: -.8s; }
  .shot .frame  { animation-duration: 6.8s; animation-delay: -2.4s; }
  /* اللقطتان الطويلتان تحملان الكلاس نفسه، فتُفصلان بالترتيب */
  .assist-grid .preview-tall { animation-delay: -3.6s; animation-duration: 6.6s; }

  /* ============================================================
     كرتا التسعير متساويتان: نفس الارتفاع، والزر ملتصق بالأسفل
     ============================================================ */
  .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .price-card {
    border: 1px solid var(--hairline); border-radius: var(--r-media);
    padding: clamp(28px, 3.4vw, 44px); background: var(--paper-1);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column;
  }
  /* القائمة تبتلع الفراغ الزائد فيهبط الزر إلى قاع الكرت في الكرتين */
  .price-card ul { flex: 1 1 auto; }
  /* الباقة المميّزة: ترتفع بالإضاءة لا بالسواد — الكرت يبقى فاتحًا
     ويحمل حدًّا ليمونيًا وهالة، تمامًا كما يرفع المرجع عناصره. */
  .price-card.plus {
    background: linear-gradient(180deg, #f6fdef 0%, var(--paper-1) 62%);
    border-color: color-mix(in srgb, var(--color-lime-voltage) 62%, transparent);
    box-shadow: 0 2px 6px rgba(96,181,46,.10), 0 18px 46px -18px rgba(96,181,46,.34);
  }
  :root[data-theme="dark"] .price-card.plus {
    background: linear-gradient(180deg, #1b2a14 0%, var(--paper-1) 70%);
    border-color: color-mix(in srgb, var(--color-lime-voltage) 42%, transparent);
    box-shadow: 0 18px 46px -18px rgba(0,0,0,.6);
  }
  .price-card h3 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 8px; }
  .price-card .tag-line { font-size: 17px; color: var(--color-slate); margin-bottom: 26px; }
  .price-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
  .price-card li { position: relative; padding-inline-start: 28px; font-size: 16.5px; color: var(--color-charcoal); }
  .price-card li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: .58em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  }
  .price-card .btn { width: 100%; }
  .founders-badge {
    display: inline-block; background: var(--grad-lime); color: var(--on-lime);
    font-size: 13.5px; font-weight: 700; padding: 7px 16px;
    border-radius: var(--r-pill); margin-bottom: 18px;
    box-shadow: var(--shadow-lime);
  }
  .fair-note {
    margin-top: 28px; font-size: 16.5px; color: var(--color-slate);
    background: var(--paper-2); border: 1px solid var(--hairline);
    border-radius: var(--r-card); padding: 22px 26px; text-align: center;
  }
  .fair-note strong { color: var(--color-obsidian); }

  .family-banner {
    margin-top: 20px; background: var(--color-linen-mist);
    border-radius: var(--r-media); padding: clamp(28px, 3.4vw, 48px);
    display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  }
  .family-banner .f-emoji {
    width: 60px; height: 60px; border-radius: var(--r-card);
    background: var(--on-lime); color: var(--color-lime-voltage);
    display: grid; place-items: center;
  }
  .family-banner .f-emoji .ic { width: 28px; height: 28px; }
  .family-banner h3 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 6px; color: var(--color-forest-ink); }
  .family-banner p { font-size: 16.5px; color: var(--color-spruce); }
  :root[data-theme="dark"] .family-banner p { color: var(--color-charcoal); }

  /* ============================================================
     الفصل الرابع — الختام والنموذج
     ============================================================ */
  .final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
  .soon-badge {
    display: inline-block; background: var(--color-linen-mist); color: var(--accent);
    font-size: 13.5px; font-weight: 700; padding: 8px 18px;
    border-radius: var(--r-pill); margin-bottom: 24px;
  }
  .waitlist-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
  .field-wrap {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px;
    background: var(--paper-1); border: 1px solid var(--ch-line);
    border-radius: var(--r-card); padding: 0 16px; min-height: 56px;
    color: var(--ch-muted);
    box-shadow: var(--shadow-soft);
    transition: border-color .2s ease, border-width .2s ease;
  }
  .field-wrap:focus-within { border-color: var(--accent); }
  .field-wrap input {
    flex: 1; min-width: 0; border: none; background: transparent;
    font-family: var(--font-body); font-size: 16.5px; color: var(--ch-text);
    padding-block: 16px;
  }
  .field-wrap input::placeholder { color: var(--ch-muted); opacity: .8; }
  .field-wrap input:focus { outline: none; }
  .waitlist-form .btn { min-height: 56px; }
  /* حقل مصيدة الروبوتات: يُخفى دون توسيع تخطيط الصفحة.
     استخدام left:-9999px يمدّ الصفحة أفقيًا في الاتجاه من اليمين لليسار. */
  .hp {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .form-status { margin-top: 14px; font-size: 15.5px; color: var(--accent); min-height: 1.2em; }
  .form-status.error { color: #b3261e; }
  :root[data-theme="dark"] .form-status.error { color: #ffb4a8; }
  .store-note { margin-top: 18px; font-size: 14.5px; color: var(--ch-muted); }
  .store-note a { color: var(--accent); }

  /* لوحة عدّاد — لحظة تحريرية واحدة */
  .counter-plate {
    background: var(--ch-1); border: 1px solid var(--ch-line);
    border-radius: var(--r-media); padding: clamp(28px, 3.4vw, 48px);
    box-shadow: var(--shadow-card); text-align: center;
  }
  .counter-plate .big {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(56px, 8vw, 105px); line-height: 1;
    color: var(--accent); letter-spacing: -.03em;
  }
  .counter-plate .cap { font-size: 16.5px; color: var(--ch-muted); margin-top: 14px; }

  /* ============================================================
     الفوتر
     ============================================================ */
  footer { background: var(--color-obsidian); color: rgba(255,255,255,.72); padding-block: clamp(56px, 7vw, 88px) 40px; }
  :root[data-theme="dark"] footer { background: #080a08; color: rgba(255,255,255,.7); }
  .footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .footer-brand .brand { color: var(--color-lime-voltage); font-size: 30px; }
  .footer-brand p { margin-top: 14px; font-size: 16px; max-width: 34ch; color: rgba(255,255,255,.6); }
  .footer-links { display: flex; gap: clamp(32px, 6vw, 80px); flex-wrap: wrap; }
  .footer-col h3 { font-size: 15px; color: #fff; margin-bottom: 16px; letter-spacing: .04em; font-weight: 700; }
  .footer-col { display: flex; flex-direction: column; }
  .footer-col a {
    display: flex; width: fit-content; font-size: 15.5px;
    color: rgba(255,255,255,.66); text-decoration: none; padding-block: 6px;
    transition: color .2s ease;
  }
  .footer-col a:hover { color: var(--color-lime-voltage); }
  .footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.5); }

  /* ============================================================
     الحركة — سينمائية ومحترمة لتفضيلات الجهاز
     ============================================================ */

  /* 1. شاشة الافتتاح */
  /* الستارة ترتفع بالـCSS وحدها بعد 1.1 ثانية، فلو تعطّل motion.js
     لأي سبب لا تبقى الصفحة محجوبة خلفها. */
  .curtain {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--color-forest-ink);
    display: grid; place-items: center;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s var(--ease-out);
    animation: curtain-fallback 1s var(--ease-out) 1.1s forwards;
  }
  @keyframes curtain-fallback {
    to { clip-path: inset(0 0 100% 0); visibility: hidden; }
  }
  .curtain .mark {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 8vw, 88px);
    color: var(--color-lime-voltage);
    clip-path: inset(0 0 110% 0);
    animation: mark-in .72s var(--ease-out) .06s forwards;
  }
  @keyframes mark-in { to { clip-path: inset(-20% -20% -20% -20%) } }
  .curtain.lift { clip-path: inset(0 0 100% 0); pointer-events: none; }

  /* 2. كشف بقناع — للسطور والكلمات (آمن للعربية: لا يُقسَّم الحرف) */
  /* كشف على مستوى الكلمة بلا قصّ إطلاقًا.
     القناع السابق كان overflow:hidden، ومع line-height أقل من 1 في
     العناوين كان يأكل نزلات الحروف العربية (ج ح خ ع غ م ن ي) في كل سطر. */
  .rv-mask { display: inline-block; }
  /* سفاري يقصّ طبقة الرسم على حدود السطر فتُبتر الفتحة فوق «مالَك» —
     حشو يوسّع حدود الرسم وهامش سالب يلغيه فلا يتحرك السطر شعرة */
  .rv-mask > span {
    display: inline-block;
    padding-block: .3em; margin-block: -.3em;
    opacity: 0;
    transform: translateY(.32em);
    transition: opacity .68s var(--ease-out), transform .68s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .in .rv-mask > span { opacity: 1; transform: none; }

  /* 3. كشف عام متدرّج باتجاه مقصود */
  .js .reveal {
    opacity: 0;
    transform: translate3d(var(--rx, 0), var(--ry, 28px), 0);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  .js .reveal.in { opacity: 1; transform: none; }
  /* الاتجاه منطقي: «start» يعني من جهة بداية السطر — يمينًا في العربية
     ويسارًا في الإنجليزية — فتدخل العناصر من الجهة التي تُقرأ منها. */
  [dir="rtl"] [data-dir="start"] { --rx: 22px;  --ry: 0; }
  [dir="rtl"] [data-dir="end"]   { --rx: -22px; --ry: 0; }
  [dir="ltr"] [data-dir="start"] { --rx: -22px; --ry: 0; }
  [dir="ltr"] [data-dir="end"]   { --rx: 22px;  --ry: 0; }

  /* 4. قصّ الفصل — الفصل الغامق يُكشف بمسح رأسي من أعلى لأسفل.
        القصّ يُطبَّق فقط حين تعمل الجافاسكربت، فإن تعطّلت ظهر الفصل كاملًا. */
  .js .chapter > * { transition: clip-path 1s var(--ease-out), opacity .7s var(--ease-out); }
  .js .chapter:not(.in) > * { clip-path: inset(0 -20% 100% -20%); opacity: 0; }
  .js .chapter.in > * { clip-path: inset(-30% -20% -30% -20%); opacity: 1; }


  /* شبكة أمان: إن لم تصل طبقة الحركة خلال 3 ثوانٍ يظهر كل المحتوى.
     لا تُطبَّق إطلاقًا في الحالة الطبيعية لأن motion.js يضيف .mo فورًا. */
  .js:not(.mo) .reveal { animation: safety-show .01s linear 3s forwards; }
  .js:not(.mo) .chapter > * { animation: safety-clip .01s linear 3s forwards; }
  @keyframes safety-show { to { opacity: 1; transform: none; } }
  @keyframes safety-clip { to { clip-path: inset(-30% -20% -30% -20%); opacity: 1; } }

  /* 5. المؤشر المخصّص — سطح المكتب فقط */
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9998;
    pointer-events: none; border-radius: 50%;
    opacity: 0; transition: opacity .3s ease;
  }
  .cursor-dot { width: 7px; height: 7px; background: var(--color-forest-ink); margin: -3.5px 0 0 -3.5px; }
  .cursor-ring {
    width: 36px; height: 36px; border: 1.5px solid var(--color-forest-ink);
    margin: -18px 0 0 -18px;
    transition: opacity .3s ease, width .28s var(--ease-out), height .28s var(--ease-out), margin .28s var(--ease-out), background-color .28s ease, border-color .28s ease;
  }
  .cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
  .cursor-ring.grow {
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    background: color-mix(in srgb, var(--color-lime-voltage) 26%, transparent);
    border-color: var(--color-lime-voltage);
  }
  .chapter .cursor-dot { background: var(--color-lime-voltage); }
  @media (pointer: coarse), (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

  /* 6. احترام تفضيل تقليل الحركة — يوقف كل ما سبق */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .reveal, .rv-mask > span { opacity: 1 !important; transform: none !important; }
    .lime-mark::before { transform: scaleX(1) !important; }
    .curtain { display: none; }
    .cursor-dot, .cursor-ring { display: none; }
    .steps-list .step { opacity: 1; }
  }

  /* ============================================================
     الاستجابة
     ============================================================ */
  @media (max-width: 1080px) {
    .promise-grid { grid-template-columns: 1fr 1fr; }
    .promise:last-child { grid-column: 1 / -1; }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .ways-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ثمانية عناوين لا تتسع بين 900 و1080 — القائمة تتقدم مبكرًا */
  @media (max-width: 1080px) {
    .nav-links { display: none; }
    .burger { display: block; }
  }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    :target, [id] { scroll-margin-top: 67px; }
    .burger { display: block; }
    .btn-plus { display: none; }
    .nav { grid-template-columns: auto 1fr; height: 66px; }
    .mobile-menu { inset-block-start: 66px; max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); }
    /* على الهاتف يبقى في الهيدر ما يستحق مساحته: العلامة والفعل الأساسي
       والقائمة. الوضع واللغة ينتقلان إلى القائمة بنصّ واضح بدل أيقونة.

       الدعوة للفعل كانت تنزل هي الأخرى داخل القائمة، فصار الفعل الوحيد
       الذي نريده من الزائر مخبوءًا خلف نقرة على البرجر — ومن لا يفتح
       القائمة لا يعرف أن هناك ما يُفعل أصلًا. تبقى الآن ظاهرة بجوار
       البرجر، والهيدر ملتصق فتظل مرئية طوال التمرير. */
    .nav-cta > .theme-toggle { display: none; }
    .nav-cta { gap: 10px; }
    .brand { font-size: 26px; }

    .hero-grid, .sec-split, .steps-wrap, .assist-grid,
    .conv-split, .feat-hero, .final-grid { grid-template-columns: minmax(0, 1fr); }
    /* اللوح زخرفي؛ نحدّ نزيفه بمقدار ثابت صغير حتى لا يوسّع الصفحة
       أفقيًا عند 320px في الاتجاه من اليسار لليمين (1.4.10) */
    .hero-plate { inset-inline-start: 6%; inset-inline-end: -24px; inset-block: 26% -5%; }
    .steps-sticky { position: static; margin-bottom: 40px; }
    .step-media, .preview-tall, .feat-media { margin-inline: auto; }
    .pricing-grid, .covenant-grid { grid-template-columns: minmax(0, 1fr); }
    .family-banner { grid-template-columns: minmax(0, 1fr); text-align: start; }
    .footer-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  }

  @media (max-width: 620px) {
    body { font-size: 17px; }
    /* ثلاثة سطور فأكثر: كل تصادم يتكرّر، فيزداد الفاصل هنا. القيم
       مأخوذة من قياس أعمق تصادم فعلي بين سطرين، لا من تقدير. */
    .t-display { line-height: 1.34; }
    .t-chapter { line-height: 1.36; }
    .t-section { line-height: 1.44; }
    .legal-body h2, .support-body h2, .suggest-body h2 { line-height: 1.46; }
    .cur-select { width: 158px; }
    .conv-row input, .conv-row .result { font-size: 21px; }
    .promise-grid { grid-template-columns: minmax(0, 1fr); }
    .promise:last-child { grid-column: auto; }
    .features-grid, .ways-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-actions { gap: 14px; }
    .hero-actions .btn { width: 100%; }
    .waitlist-form .btn { width: 100%; }
    .nav-cta > a[lang] { display: none; } /* 620 */
    .footer-bottom { flex-direction: column; gap: 10px; }
  }

  /* عند 320-430px لا تتسع الشاشة لمجموعة الهيدر كاملة، فيخرج المحتوى
     أفقيًا (مخالفة 1.4.10 Reflow). نُخفي مبدّل اللغة هنا وننقله إلى
     القائمة، ونُبقي زر الدعوة للفعل لأنه الفعل الأساسي. */
  @media (max-width: 620px) {
    /* إزاحة الكشف الأفقية يجب أن تبقى أصغر من هامش الحاوية،
       وإلا خرجت العناصر عن الشاشة أثناء دخولها (1.4.10) */
    [dir="rtl"] [data-dir="start"] { --rx: 10px; }
    [dir="rtl"] [data-dir="end"]   { --rx: -10px; }
    [dir="ltr"] [data-dir="start"] { --rx: -10px; }
    [dir="ltr"] [data-dir="end"]   { --rx: 10px; }
  }

  @media (max-width: 380px) {
    /* عند 320-380px ينكسر العنوان إلى أربعة سطور بمقاسه الافتراضي */
    .t-display, .hero h1, [dir="ltr"] .hero h1 { font-size: 36px; }
    .hero-badge { font-size: 12.5px; padding: 7px 14px; }
  }

  @media (max-width: 430px) {
    :root { --gutter: 16px; }
    .nav-cta { gap: 8px; }
    .nav-cta > a[lang] { display: none; }
    .brand { font-size: 22px; }
    /* النصّ كامل دائمًا: «أعلِمني» وحدها اسم ثانٍ لنفس الفعل ووعد ناقص
       (تعلمني بماذا؟). فحين يضيق العرض يضيق الحشو والخط، لا النصّ. */
    .nav-cta > .btn-lime { padding-inline: 10px; font-size: 13px; }
  }

  /* ============================================================
     امتداد الصفحات الداخلية — نفس نظام «الورق والحبر»
     ترويسة كل صفحة فصل غامق، والمتن ورق فاتح بمقاس قراءة مريح.
     ============================================================ */

  /* ---------- ترويسة الصفحة: فصل غامق ---------- */
  /* ترويسة الصفحة — غسلة فاتحة متمركزة على نسق ترويسات المرجع */
  .legal-hero {
    background: var(--wash-hero);
    color: var(--ch-muted);
    padding-block: clamp(72px, 8.4vw, 128px);
    text-align: center;
    position: relative;
  }
  /* حافة متلاشية أسفل الترويسة — بلا خطّ قطع بينها وبين المتن */
  .legal-hero::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 88px;
    background: linear-gradient(to top, var(--paper-0), transparent);
    pointer-events: none;
  }
  .legal-hero .container { max-width: 940px; }
  .legal-hero h1 {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--ch-text);
    font-size: clamp(37px, 5.4vw, 72px);
    line-height: 1.32;
    letter-spacing: 0;
    max-width: 20ch;
    margin-inline: auto;
  }
  [dir="ltr"] .legal-hero h1 { line-height: 1.05; }
  .legal-hero .sub,
  .legal-hero .updated {
    margin-top: 18px;
    font-size: clamp(17px, 1.4vw, 20px);
    color: var(--ch-muted);
    max-width: 60ch;
    margin-inline: auto;
  }
  .legal-hero .updated { font-size: 15px; opacity: .8; }

  /* ---------- متن الصفحة ---------- */
  /* هذه الأجسام لا تحوي .container داخلها، فالعرض يُضبط عليها مباشرة */
  .legal-body, .support-body, .suggest-body, .feat-body {
    padding-block: clamp(52px, 6vw, 88px);
    padding-inline: 24px;
    max-width: 868px;
    margin-inline: auto;
  }
  .legal-body .container,
  .support-body .container,
  .suggest-body .container,
  .feat-body .container { max-width: 100%; padding-inline: 0; }

  .legal-body h2, .support-body h2, .suggest-body h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(25px, 2.8vw, 36px);
    line-height: 1.46;
    letter-spacing: 0;
    color: var(--color-obsidian);
    margin: clamp(40px, 4vw, 60px) 0 14px;
  }
  [dir="ltr"] :is(.legal-body, .support-body, .suggest-body) h2 { line-height: 1.12; }
  .legal-body h2:first-child { margin-top: 0; }
  .legal-body h3, .support-body h3, .suggest-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(19px, 1.8vw, 23px);
    line-height: 1.42;
    color: var(--color-obsidian);
    margin: 28px 0 8px;
  }
  .legal-body p, .support-body p, .suggest-body p {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--color-charcoal);
    margin-bottom: 16px;
  }
  .legal-body ul, .legal-body ol,
  .support-body ul, .suggest-body ul {
    margin: 0 0 20px;
    padding-inline-start: 4px;
    list-style: none;
  }
  .legal-body li, .support-body li, .suggest-body li {
    position: relative;
    padding-inline-start: 26px;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--color-charcoal);
    margin-bottom: 10px;
  }
  .legal-body li::before, .support-body li::before, .suggest-body li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .66em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
  }
  .legal-body strong, .support-body strong, .suggest-body strong { color: var(--color-obsidian); font-weight: 700; }
  /* الأزرار مستثناة: قاعدة الرابط أعلى تخصيصًا من .btn-lime فكانت
     تعطي الزر الليموني نصًّا فاتحًا في الوضع الداكن (1.33:1). */
  :is(.legal-body, .support-body, .suggest-body) a:not(.btn) {
    color: var(--color-obsidian);
    text-decoration: none;
    border-bottom: 2px solid var(--color-lime-voltage);
    padding-bottom: 1px;
  }
  :is(.legal-body, .support-body, .suggest-body) a:not(.btn):hover { border-bottom-color: var(--color-forest-ink); }

  .legal-body .lead, .feat-body .lead {
    font-size: clamp(19px, 1.7vw, 24px);
    line-height: 1.6;
    color: var(--color-slate);
    margin-bottom: 32px;
    text-wrap: pretty;
  }

  /* ---------- بطاقات مميّزة داخل المتن ---------- */
  .highlight-card, .promise, .contact-card, .form-card, .zero {
    background: var(--paper-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: clamp(22px, 2.6vw, 32px);
    margin: 28px 0;
    box-shadow: var(--shadow-card);
  }
  .highlight-card p:last-child, .promise p:last-child, .contact-card p:last-child { margin-bottom: 0; }
  .highlight-card h3, .promise h3 { margin-top: 0; }

  /* الرقم الكبير — نفس لحظة «صفر» في الرئيسية */
  .zero { text-align: start; }
  .zero li { margin-bottom: 10px; }
  .zero li:last-child { margin-bottom: 0; }
  .zero .big, .zero strong:first-child {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(52px, 7vw, 89px);
    line-height: 1;
    color: var(--accent);
    letter-spacing: -.03em;
    margin-bottom: 10px;
  }

  .note {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-slate);
    background: var(--color-linen-mist);
    border-radius: var(--r-card);
    padding: 18px 22px;
    margin: 22px 0;
  }
  .note strong { color: var(--color-forest-ink); }
  :root[data-theme="dark"] .note strong { color: var(--color-obsidian); }

  .updated { font-size: 15px; color: var(--color-pebble); }

  /* ---------- صفحة المزايا ---------- */
  .feat-toc {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 clamp(40px, 5vw, 72px);
    padding-bottom: clamp(28px, 3vw, 40px);
    border-bottom: 1px solid var(--hairline);
  }
  .feat-toc a {
    font-size: 15px; font-weight: 600;
    color: var(--color-forest-ink);
    text-decoration: none;
    background: var(--paper-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    padding: 10px 18px; min-height: 24px;
    box-shadow: var(--shadow-soft);
    transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease-out);
  }
  .feat-toc a:hover { background: var(--color-linen-mist); border-color: var(--color-forest-ink); transform: translateY(-2px); }

  .feat {
    padding-block: clamp(44px, 5vw, 76px);
    border-top: 1px solid var(--hairline);
  }
  .feat:first-of-type { border-top: none; padding-top: 0; }
  .feat h2 { margin-top: 0; }
  .feat h3 { margin-top: 26px; }
  .feat-why {
    font-size: 17px;
    color: var(--color-slate);
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: 16px;
    margin: 0 0 20px;
  }
  .feat .shot { margin: 26px 0 6px; }
  .feat .frame,
  .shot .frame {
    border-radius: var(--r-media);
    overflow: hidden;
    background: var(--paper-1);
    border: 1px solid var(--hairline);
    padding: 10px;
    box-shadow: var(--lift-media-paper);
    width: min(250px, 68vw);
    margin-inline: auto;
  }
  .shot .frame img { border-radius: 15px; width: 100%; height: auto; }
  .shot-caption {
    font-size: 13.5px;
    color: var(--color-pebble);
    text-align: center;
    margin-top: 12px;
  }

  /* ---------- الأسئلة الشائعة ---------- */
  /* الأسئلة — صفوف مملوءة بلا حدود وبشيفرون، تمامًا كقائمة المرجع */
  .faq { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
  .faq details {
    background: var(--paper-2);
    border: 1px solid transparent;
    border-radius: var(--r-card);
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .faq details:hover { border-color: var(--hairline); }
  .faq details[open] { background: var(--paper-1); border-color: var(--hairline); box-shadow: var(--shadow-card); }
  .faq summary {
    list-style: none;
    cursor: pointer;
    padding: 24px 28px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-obsidian);
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  /* شيفرون مرسوم بحدّين مائلين — لا محرف نصّي */
  .faq summary::after {
    content: '';
    margin-inline-start: auto;
    width: 9px; height: 9px;
    /* حدّان ماديّان لا منطقيّان: المنطقيّان ينقلبان في RTL
       فيشير الشيفرون يسارًا بدل الأسفل. */
    border-right: 2px solid var(--color-pebble);
    border-bottom: 2px solid var(--color-pebble);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .3s var(--ease-out), border-color .2s ease;
    flex-shrink: 0;
  }
  .faq details[open] summary::after {
    transform: rotate(225deg) translateY(-3px);
    border-color: var(--accent);
  }
  .faq .answer {
    padding: 0 28px 24px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-charcoal);
  }

  .hint { font-size: 15.5px; color: var(--color-slate); margin-top: 10px; }
  .contact-card h3 { margin-top: 0; }

  /* ---------- النماذج ---------- */
  .field { margin-bottom: 20px; }
  .field label {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--color-obsidian);
    margin-bottom: 8px;
  }
  .optional { font-weight: 400; color: var(--color-pebble); }
  .field input, .field select, .field textarea {
    width: 100%;
    min-height: 56px;
    font-family: var(--font-body);
    font-size: 16.5px;
    color: var(--color-obsidian);
    background: var(--paper-0);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 12px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--color-forest-ink);
    box-shadow: 0 0 0 1px var(--color-forest-ink);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--color-pebble); }
  .help { font-size: 14.5px; color: var(--color-slate); margin-top: 8px; line-height: 1.6; }
  .form-note { font-size: 14.5px; color: var(--color-pebble); margin-top: 16px; }
  .form-card .btn { width: 100%; }

  /* خطوات صفحة «اقترح ميزة» — غير خطوات الصفحة الرئيسية */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
  .steps .step {
    background: var(--paper-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 24px;
  }
  .steps .num {
    width: 40px; height: 40px;
    border-radius: var(--r-pill);
    background: var(--grad-lime);
    color: var(--on-lime);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
  }
  .steps .step h3 { margin: 0 0 6px; font-size: 18px; }
  .steps .step p { font-size: 15.5px; margin: 0; color: var(--color-slate); }

  /* ---------- استجابة الصفحات الداخلية ---------- */
  @media (max-width: 900px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
  }