/* ============================================================
   جرّب — jarrbiq.com
   الهوية البصرية: docs/branding.md (الألوان والخطوط لم تتغيّر)
   الأسلوب: طبقات داكنة، أسطح زجاجية، هالات محيطية بألوان العلامة.
   ============================================================ */

@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  /* ألوان العلامة */
  --color-charcoal: #221A16;
  --color-paper:    #F4ECDA;
  --color-saffron:  #E2A63B;
  --color-maroon:   #8C1F2B;
  --color-tigris:   #1F6E66;

  /* أدوار دلالية */
  --bg-dark:       var(--color-charcoal);
  --bg-deep:       #1A1310;               /* درجة أعمق من الفحم للتباين بين الأقسام */
  --bg-light:      var(--color-paper);
  --text-on-light: var(--color-charcoal);
  --text-on-dark:  var(--color-paper);
  --action:        var(--color-saffron);
  --action-text:   #3D2A0A;
  --accent:        var(--color-maroon);
  --accent-text:   var(--color-paper);
  --support:       var(--color-tigris);

  /* درجات مساندة */
  --muted-on-light: #6B5D4E;
  --muted-on-dark:  #B8AFA3;
  --border-light:   #DDD2BC;
  --border-dark:    #3A2E27;
  --surface-light:  #FFFDF7;

  /* أسطح زجاجية على الداكن */
  --glass-bg:     rgba(244, 236, 218, 0.035);
  --glass-bg-2:   rgba(244, 236, 218, 0.062);
  --glass-line:   rgba(244, 236, 218, 0.10);
  --glass-line-2: rgba(244, 236, 218, 0.18);

  /* الخطوط */
  --font-display: 'Tajawal', system-ui, sans-serif;
  --font-body:    'Almarai', system-ui, sans-serif;

  /* مقاسات */
  --wrap:  1180px;
  --pad:   clamp(20px, 5vw, 64px);
  --nav-h: 76px;
  --r-lg:  26px;
  --r-md:  18px;

  /* مسرح الهيرو: مربّع 1080×1080 يحوي اليد والتلفون */
  --stage: min(70vh, 112vw, 700px);
}

/* ---------- الأساس ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Lenis — تمرير انسيابي */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.5vw + 13.6px, 17px);
  line-height: 1.75;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.1em; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; inset-inline-start: -999px; top: 12px; z-index: 9999;
  background: var(--action); color: var(--action-text);
  padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { inset-inline-start: 12px; }

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

/* أندرويد/آي‑أو‑إس يرسمان مستطيلاً أزرق عند لمس أي عنصر قابل للنقر.
   نلغيه ونعتمد على :focus-visible (لوحة المفاتيح) و:active (اللمس) للإشارة. */
a, button, summary, [role="button"], input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- مرافق مشتركة ---------- */

/* سطح زجاجي */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-radius: var(--r-lg);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s, background-color .4s;
}
.glass:hover { transform: translateY(-4px); border-color: var(--glass-line-2); background: var(--glass-bg-2); }

/* هالة تتبع الماوس داخل البطاقة */
.spot { position: relative; }
/* توهّج المرور الأصفر أُزيل بناءً على طلب التصميم */
.spot::after { content: none; }
.spot > * { position: relative; z-index: 1; }

/* شعاع يدور حول الحدود */
.beam::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam),
              transparent 0 70%, rgba(226,166,59,.85) 83%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 5.5s linear infinite;
}
@keyframes beamSpin { to { --beam: 360deg; } }

/* ---------- الأزرار ---------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.8em;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, background-color .28s;
}
.btn--sm { padding: .68em 1.35em; font-size: .875rem; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--action {
  background: var(--action); color: var(--action-text);
}

.btn--accent {
  background: var(--accent); color: var(--accent-text);
}

.btn--ghost {
  background: transparent; color: var(--text-on-dark);
  border-color: var(--glass-line-2);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--glass-bg-2); }

/* لمعة المرور أُزيلت بناءً على طلب التصميم */

/* ---------- الشريط العائم ---------- */

.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding: 14px var(--pad) 0;
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  max-width: var(--wrap); margin-inline: auto;
  height: 58px;
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  padding-inline: 20px;
  border-radius: 999px;
  /* الحبّة ظاهرة من أول الصفحة. كانت شفّافة تماماً في الأعلى، فيلتصق
     الشعارُ والزرُّ بحافتَي الشاشة ويبدو الشريط ممتدّاً بعرضها، ثم تظهر
     الخلفية عند النزول فيبدو فجأةً أضيق. العرض لم يتغيّر أصلاً — الذي
     تغيّر هو ظهور الإطار. الآن الشكل ثابت ويتغيّر عمقه فقط. */
  background: rgba(26, 19, 16, .34);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  transition: background-color .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.is-stuck .nav__pill {
  background: rgba(26, 19, 16, .78);
  border-color: var(--glass-line-2);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 40px -22px #000;
}

.nav__logo { display: block; flex: none; }
.nav__logo img { width: clamp(70px, 7vw, 88px); height: auto; }

.nav__links {
  display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px);
  margin-inline-end: auto;
  font-size: .875rem;
}
.nav__links a {
  text-decoration: none; color: var(--muted-on-dark);
  padding: 6px 0; position: relative; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--action);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover { color: var(--color-paper); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__cta { flex: none; }
.nav__links-auth { display: none; }

.nav__burger {
  display: none; flex: none;
  width: 40px; height: 40px; padding: 0;
  background: var(--glass-bg); border: 1px solid var(--glass-line); border-radius: 12px;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__burger span {
  display: block; width: 17px; height: 1.5px; background: var(--color-paper);
  transition: transform .3s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ═══════════════ الهيرو ═══════════════ */

.hero {
  position: relative;
  height: 100vh; height: 100dvh;
  background: var(--bg-dark);
  overflow: hidden;
}
.hero__inner { position: absolute; inset: 0; }

/* هالات محيطية بألوان العلامة */
.hero__glow {
  position: absolute; pointer-events: none; z-index: 1;
  border-radius: 50%; filter: blur(90px);
}
.hero__glow--a { display: none; }

/* شعار العلامة كخلفية مائية كبيرة خلف النص — لا ينافسه على التركيز */
/* التوسيط بالـflexbox لا بـtransform: جي‑إس‑إيه‑بي يحرّك scale/opacity على هذه
   الحاوية فيستبدل خاصية transform كاملةً — وأي translate هنا يضيع. الميلان
   على الصورة نفسها لأن جي‑إس‑إيه‑بي لا يلمسها. */
.hero__wordmark {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__wordmark img {
  width: min(1100px, 74vw);
  height: auto;
  opacity: .12;
  transform: rotate(-8deg);
}

/* نص الهيرو — شريط عمودي عند جهة البداية، أسفل الشريط العائم مباشرة.
    الفكرة: الرسالة هي مركز التركيز الوحيد، واليد/التلفون مقابلها لا بجانبها. */
.hero__copy {
  position: absolute;
  inset-inline-start: var(--pad);
  inset-block-start: calc(var(--nav-h) + clamp(26px, 6vh, 72px));
  z-index: 40;
  max-width: min(38ch, 46vw);
  will-change: transform, opacity;
}
.hero__copy h1 {
  font-size: clamp(1.8rem, 1rem + 2.5vw, 2.9rem);
  line-height: 1.45; margin: 0 0 .45em;
  text-wrap: balance;
}
/* «جرّب» في العنوان = ملف الشعار نفسه، بمقاس مربوط بحجم الخط */
.h1-logo {
  display: inline-block;
  height: 1.15em; width: auto;
  vertical-align: -.2em;
  margin-inline-end: .12em;
}
.hero__sub {
  margin: 0 0 1.7em;
  color: var(--muted-on-dark);
  font-size: clamp(.92rem, 1.05vw, 1.08rem);
  line-height: 1.85;
  max-width: 34ch;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding-top: 1.1em;
  border-top: 1px solid var(--glass-line);
  max-width: 34ch;
}
.hero__cta .btn--sm { padding: .78em 1.55em; font-size: .92rem; }
/* زرّ واحد الآن، فلا يتمدّد على عرض العمود كله — يبقى بحجم نصّه مع هامش مريح */
.hero__cta .btn { flex: 0 0 auto; padding-inline: 2.1em; }

/* مؤشّر السكرول */
.hero__scroll {
  position: absolute;
  inset-inline-end: var(--pad);
  inset-block-end: clamp(30px, 7vh, 76px);
  z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--muted-on-dark);
  font-size: .7rem; letter-spacing: .14em;
  will-change: transform, opacity;
  /* زرّ حقيقي: يقفز إلى المحتوى بدل أن يكون زخرفة لا تُنقر */
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 10px 12px;
  font-family: inherit; cursor: pointer;
  transition: color .25s;
}
.hero__scroll:hover { color: var(--color-paper); }
.hero__scroll:hover .hero__scroll-line { opacity: 1; }
.hero__scroll-label { transition: letter-spacing .3s; }
.hero__scroll:hover .hero__scroll-label { letter-spacing: .2em; }
.hero__scroll-line {
  width: 1px; height: 68px;
  background: linear-gradient(to bottom, rgba(226,166,59,.5), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; inset-inline: 0; height: 22px;
  background: var(--action);
  animation: scrollDot 1.9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-24px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(68px); opacity: 0; }
}

/* ═══════════════ مسرح اليد والتلفون ═══════════════ */

.stage {
  position: fixed;
  left: 50%;
  bottom: calc(var(--stage) * -0.09);            /* المعصم يخرج من أسفل الشاشة */
  width: var(--stage); height: var(--stage);
  margin-left: calc(var(--stage) * -0.467);      /* التوسيط على مركز التلفون */
  z-index: 9000;                                 /* أعلى من الشريط ومن كل الأقسام */
  pointer-events: none;
}
html:not(.js) .stage { display: none; }

.stage__hand {
  position: absolute; inset: 0;
  will-change: transform;
  filter: drop-shadow(0 44px 64px rgba(0,0,0,.55));
}

.layer { position: absolute; inset: 0; width: 100%; height: 100%; }

.layer--back   { z-index: 61; }   /* اليد كاملة — الطبقة الأولى */
.layer--screen { z-index: 62; }   /* المقطع — تحت الإطار لأن شاشته شفافة */
.layer--phone  { z-index: 63; }   /* إطار التلفون: يغطّي حواف المقطع والنوتش */
.layer--front  { z-index: 64; }   /* الأصابع فوق التلفون — الطبقة الثالثة، دائماً */

/* نقطة دوران التلفون = مركز جسمه في الصورة الأصلية لا مركز المربّع */
.layer--phone, .layer--screen { transform-origin: 46.7% 43%; }

/* قناع الشاشة: مسار SVG متتبَّع من فتحة الشاشة الشفافة في phone.png نفسها،
   مضمّن في الصفحة (#screenClip) لا كملف صورة خارجي — فلا يعتمد على تحميل
   ملف قناع ولا على دعم mask-image، ويطابق الزوايا المدوّرة والنوتش تماماً.
   قيس آلياً: يغطّي 100% من فتحة الشاشة ولا يخرج بكسلاً واحداً عن الإطار. */
.layer--screen {
  -webkit-clip-path: url(#screenClip);
          clip-path: url(#screenClip);
  background: #0B0908;
  overflow: hidden;
}
.clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.layer--screen > video,
.layer--screen > img {
  /* المقطع محتوى شاشة خالص (بلا إطار تلفون فيه)، فيوضع على مركز الشاشة
     ويُمال بميلانها. إحداثيات فيزيائية مقيسة من يسار المربّع الأصلي 1080×1080:
     مركز الشاشة 46.66%/43.41% وميلانها 10 درجات. */
  position: absolute;
  left: 46.66%; top: 43.41%;
  width: 32%; height: 74.3%;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: #0B0908;
}

/* ═══════════════ هيكل الأقسام ═══════════════ */

.sec { position: relative; padding: clamp(84px, 13vh, 160px) 0; }
/* الشريط عائم، فالقفزة إلى #hash تخفي أوّل العنوان تحته بلا هذا الهامش */
.sec, .faq__item { scroll-margin-top: calc(var(--nav-h) + 16px); }
.sec--dark  { background: var(--bg-dark);  color: var(--text-on-dark); }
.sec--paper { background: var(--bg-light); color: var(--text-on-light); }
.sec--cta   { background: var(--bg-deep);  color: var(--text-on-dark); overflow: hidden; }

/* فاصل خفيف بين الأقسام الداكنة المتتالية */
.sec--dark + .sec--dark::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--pad);
  height: 1px; background: linear-gradient(90deg, transparent, var(--border-dark), transparent);
}

.sec__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 70vw; max-width: 900px; aspect-ratio: 1;
  top: -10%; inset-inline-start: 50%; translate: 50% 0;
  background: radial-gradient(circle, rgba(140,31,43,.20), transparent 65%);
  filter: blur(80px);
}
.sec__spotlight {
  position: absolute; z-index: 0; pointer-events: none;
  width: 90vw; max-width: 1100px; height: 620px;
  bottom: -34%; inset-inline-start: 50%; translate: 50% 0;
  background: radial-gradient(ellipse at center, rgba(226,166,59,.22), transparent 62%);
  filter: blur(60px);
}

.wrap { position: relative; z-index: 1; width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; }

.wrap--split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.split__head { position: sticky; top: calc(var(--nav-h) + 34px); }
.split__head .btn { margin-top: 8px; }

.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .18em;
  margin-bottom: 1.4em;
  color: var(--action);
  display: flex; align-items: center; gap: .8em;
}
.sec--paper .eyebrow { color: var(--accent); }
.eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 90px; background: currentColor; opacity: .35; }

.sec h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  max-width: 22ch; text-wrap: balance; margin-bottom: 1em;
}
/* تدرّج معدني خفيف على العناوين فوق الداكن */
.sec--dark h2, .sec--cta h2 {
  background: linear-gradient(155deg, #FBF6EA 10%, #C2B7A6 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Text Animate — نظام حركة متدرّج حسب هرمية النص */
.text-animate__segment {
  display: inline-block;
  will-change: transform, opacity, filter;
}
/* النصوص التي تتحرك كوحدة واحدة تأخذ عرض السطر لتلتف طبيعياً في RTL. */
.text-animate--title .text-animate__segment,
.text-animate--heading .text-animate__segment,
.text-animate--body .text-animate__segment {
  display: block;
}
/* بعد تقسيم العنوان إلى كلمات، نعيد التدرج لكل كلمة في الأقسام الداكنة. */
.sec--dark h2 .text-animate__segment,
.sec--cta h2 .text-animate__segment {
  background: linear-gradient(155deg, #FBF6EA 10%, #C2B7A6 95%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* العناوين الأساسية: كلمات تظهر من الأسفل مع إزالة blur واضحة */
.text-animate--title .text-animate__segment {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(.58em);
  transition:
    opacity .46s ease-out,
    transform .56s cubic-bezier(.16, 1, .3, 1),
    filter .46s ease-out;
  transition-delay: calc(var(--segment-index) * 52ms);
}
.text-animate--title.is-text-animated .text-animate__segment {
  opacity: 1; filter: blur(0); transform: translateY(0);
}

/* العناوين الفرعية: نفس اللغة البصرية، لكن أخف وأسرع */
.text-animate--heading .text-animate__segment {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(.38em);
  transition:
    opacity .32s ease-out,
    transform .38s cubic-bezier(.16, 1, .3, 1),
    filter .32s ease-out;
  transition-delay: calc(var(--segment-index) * 34ms);
}
.text-animate--heading.is-text-animated .text-animate__segment {
  opacity: 1; filter: blur(0); transform: translateY(0);
}

/* الـ eyebrow: دخول قصير من الجهة، بلا مبالغة */
.text-animate--eyebrow .text-animate__segment {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .34s ease-out, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.text-animate--eyebrow.is-text-animated .text-animate__segment {
  opacity: 1; transform: translateX(0);
}

/* الفقرات والمزايا: تُقرأ ككتلة، لذلك لا تقسيم كلمات */
.text-animate--body .text-animate__segment {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(10px);
  transition:
    opacity .46s ease-out,
    transform .5s cubic-bezier(.16, 1, .3, 1),
    filter .42s ease-out;
}
.text-animate--body.is-text-animated .text-animate__segment {
  opacity: 1; filter: blur(0); transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .text-animate__segment {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.85; max-width: 62ch; margin-bottom: 2.6em;
  color: #E4DACA;
}
.sec--paper .lede { color: var(--text-on-light); }

.stack p { max-width: 58ch; font-size: 1.05rem; color: var(--muted-on-dark); }
.stack p.is-strong { margin-bottom: 0; font-weight: 700; color: var(--color-paper); }

.note { margin: 1.8em 0 0; font-size: .82rem; color: var(--muted-on-dark); max-width: 62ch; }
.sec--paper .note { color: var(--muted-on-light); }

/* ═══════════════ الأرقام — شريط إحصائي ═══════════════ */

.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }
.lede--center { margin-inline: auto; text-align: center; }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(36px, 6vh, 64px);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--glass-line);
  border-inline-start: 1px solid var(--glass-line);
  text-align: center;
  transition: background-color .35s;
}
.stat:hover { background: var(--glass-bg-2); }
/* أول عمود بلا حد جانبي، أول صف بلا حد علوي */
.stat:nth-child(-n+2) { border-top: 0; }
@media (min-width: 860px) { .stat:nth-child(-n+4) { border-top: 0; } }
.stat:first-child { border-inline-start: 0; }
@media (min-width: 860px) { .stat:nth-child(4n+1) { border-inline-start: 0; } }
@media (max-width: 859px) { .stat:nth-child(odd) { border-inline-start: 0; } }

.stat__num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.2; margin-bottom: .5em; color: var(--action);
}
.stat > span { font-size: .84rem; color: var(--muted-on-dark); line-height: 1.6; }

/* ═══════════════ المشكلة ═══════════════ */

.prob__head {
  width: min(100%, 760px);
  margin: 0 auto clamp(32px, 5vh, 56px);
  text-align: center;
}
.prob__head .eyebrow { justify-content: center; }
.prob__head .eyebrow::after { display: none; }
.prob__head h2 {
  max-width: 36ch;
  margin-inline: auto;
  text-wrap: balance;
}

.prob {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.prob__card {
  position: relative; overflow: hidden;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
}
.prob__card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--accent); opacity: .8;
}
.prob__tag {
  display: inline-block; margin-bottom: .8em;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; color: var(--accent);
  background: rgba(140,31,43,.14); border: 1px solid rgba(140,31,43,.3);
  border-radius: 999px; padding: .3em 1em;
}
.prob__card p { margin: 0; font-size: .96rem; color: var(--muted-on-dark); line-height: 1.8; }

.prob__resolve {
  position: relative; overflow: hidden;
  margin: 16px 0 0; padding: clamp(24px, 3vw, 34px) clamp(26px, 4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--glass-bg-2);
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  color: var(--muted-on-dark); line-height: 1.6; text-align: center;
}
.prob__resolve b { color: var(--color-paper); font-weight: 800; }

/* ═══════════════ كيف تعمل — خط زمني ═══════════════ */

.timeline {
  position: relative;
  max-width: 720px;
  margin: clamp(34px, 6vh, 68px) auto 0;
  padding: 0;
  list-style: none;
}
/* الخط الرأسي الموحّد خلف العُقَد */
.timeline::before {
  content: ""; position: absolute; inset-block: 22px 22px;
  inset-inline-start: 23px; width: 2px;
  background: var(--border-light);
}
.tl__step {
  position: relative;
  display: grid; grid-template-columns: 48px 1fr;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
  padding-block: clamp(10px, 1.6vh, 16px);
}
.tl__node {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-light);
  border: 1.5px solid var(--border-light);
  transition: background-color .45s ease, border-color .45s ease;
}
.tl__node b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.2rem; line-height: 1; color: var(--accent);
  transition: color .45s ease;
}
.tl__step.is-on .tl__node { background: var(--accent); border-color: var(--accent); }
.tl__step.is-on .tl__node b { color: var(--color-paper); }

.tl__body {
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
}
.tl__body h3 { font-size: 1.12rem; margin: 0 0 .5em; }
.tl__body p  { margin: 0; font-size: .95rem; color: var(--muted-on-light); line-height: 1.6; }

@media (max-width: 560px) {
  .timeline::before { inset-inline-start: 19px; }
  .tl__step { grid-template-columns: 40px 1fr; gap: 14px; }
  .tl__node { width: 40px; height: 40px; }
  .tl__node b { font-size: 1.05rem; }
}


/* ═══════════════ دور المنصة — بطاقات المهام ═══════════════ */

.role__head { max-width: 62ch; margin-bottom: clamp(36px, 6vh, 64px); }
.role__lede { color: var(--muted-on-dark); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 54ch; margin: 0; }

.roles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, 1fr);
}
.role-card {
  position: relative; overflow: hidden;
  grid-column: span 2;
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
/* الصف الأول: بطاقتان أعرض + الثالثة */
.role-card:nth-child(1) { grid-column: span 3; }
.role-card:nth-child(2) { grid-column: span 3; }
.role-card:nth-child(3) { grid-column: span 2; }
.role-card:nth-child(4) { grid-column: span 2; }
.role-card--key { grid-column: span 2; }

.role-card__no {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--border-dark);
  margin-bottom: 14px; transition: -webkit-text-stroke-color .35s;
}
.role-card:hover .role-card__no { -webkit-text-stroke-color: var(--action); }
.role-card h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 0 0 .5em; color: var(--color-paper); }
.role-card p { margin: 0; font-size: .92rem; color: var(--muted-on-dark); line-height: 1.8; }

/* البطاقة المفتاحية: ضمان الصرف */
.role-card--key {
  background: rgba(226,166,59,.07);
  border-color: rgba(226,166,59,.26);
}
.role-card--key .role-card__no { color: var(--action); -webkit-text-stroke-color: var(--action); }
.role-card--key h3 { color: var(--action); }
.role-card__key { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.role-card__key > div { flex: 1 1 240px; }

.role__range {
  display: flex; align-items: baseline; gap: .4em;
  margin: 0; font-family: var(--font-display); flex: none;
}
.role__range b { font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--color-paper); }
.role__range span { color: var(--muted-on-dark); font-size: 1.2rem; }
.role__range em { font-style: normal; font-size: .78rem; color: var(--muted-on-dark); margin-inline-start: .5em; font-family: var(--font-body); }

@media (max-width: 900px) {
  .roles { grid-template-columns: repeat(2, 1fr); }
  .role-card, .role-card:nth-child(1), .role-card:nth-child(2),
  .role-card:nth-child(3), .role-card:nth-child(4), .role-card--key { grid-column: span 1; }
  .role-card--key { grid-column: span 2; }
}
@media (max-width: 560px) {
  .roles { grid-template-columns: 1fr; }
  .role-card--key { grid-column: span 1; }
}

/* ═══════════════ مكوّنات مستوحاة من MagicUI ═══════════════ */

/* نمط النقاط الخلفي (Dot Pattern) */
.dot-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(244,236,218,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 80%);
  opacity: .5;
}
.dot-grid--fade {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
}

/* شعاع الحدود (Border Beam) — نقطة ضوء تدور حول الإطار */
.border-beam {
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--beam),
              transparent 0 62%, var(--action) 74%, #FBE3AE 80%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 6s linear infinite;
}

/* حدود لامعة متدرّجة (Shine Border) */
.shine-border { position: relative; }
.shine-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, var(--action), var(--accent), transparent 80%) border-box;
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: shineMove 5s linear infinite;
}
@keyframes shineMove { to { background-position: -300% 0; } }

/* ═══════════════ البطاقات ═══════════════ */

.cards { display: grid; gap: 14px; }
.card {
  position: relative; overflow: hidden;
  padding: clamp(24px, 2.8vw, 34px);
  display: flex; flex-direction: column; gap: .4em;
}
.card__icon {
  display: block;
  width: 27px; height: 27px;
  margin-bottom: 18px;
  color: var(--action);
  flex: none;
}
.card h3 { font-size: 1.05rem; margin: 0 0 .35em; color: var(--color-paper); }
.card p { margin: 0; font-size: .92rem; color: var(--muted-on-dark); }

/* ═══════════════ الباقات — بطاقات التسعير ═══════════════ */

.pricing__intro { max-width: 620px; margin: 0 auto clamp(38px, 7vh, 76px); text-align: center; }
.pricing__intro h2 { margin-inline: auto; margin-bottom: .5em; }
.pricing__lead { margin: 0; color: var(--muted-on-dark); font-size: .96rem; }

.plans {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: stretch;
}
.plan {
  position: relative; overflow: hidden;
  min-height: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
}
.plan__head { min-height: 128px; }
.plan__name { font-size: 1.18rem; margin: 0; color: var(--color-paper); }
.plan__price {
  display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap;
  margin: 18px 0 6px;
}
.plan__price b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.65rem, 2.6vw, 2rem); color: var(--color-paper);
}
.plan__price span { font-size: .78rem; color: var(--muted-on-dark); }
.plan__desc { margin: 0; font-size: .84rem; color: var(--muted-on-dark); }

/* الفاصل المتقطّع كما في مرجع التسعير */
.plan__divider { border-top: 1px dashed rgba(244,236,218,.25); margin: 4px 0 22px; }
.plan__feats { display: grid; gap: 11px; margin: 0 0 26px; }
.plan__feats li {
  position: relative; padding-inline-start: 24px;
  font-size: .88rem; color: var(--muted-on-dark); line-height: 1.55;
}
.plan__feats li::before {
  content: ""; position: absolute; inset-inline-start: 1px; top: .42em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--action); border-bottom: 2px solid var(--action);
  transform: rotate(-45deg);
}
.plan__footer { margin-top: auto; }
.plan__footer .btn { width: 100%; }

/* الباقة المميّزة */
.plan--featured {
  background: rgba(226,166,59,.07);
  border-color: rgba(226,166,59,.28);
}
.plan__tag {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 3;
  font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  background: var(--accent); color: var(--accent-text);
  border-radius: 999px; padding: .3em .8em;
}
.plan--featured .plan__price b { color: var(--action); }

@media (max-width: 620px) {
  .plans { grid-template-columns: 1fr; }
  .plan__head { min-height: auto; }
}


/* ═══════════════ الأسئلة — Accordion ═══════════════ */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: start;
}
.faq__intro { position: sticky; top: calc(var(--nav-h) + 34px); }
.faq__intro h2 { margin-bottom: .55em; }
.faq__lead { margin: 0; color: var(--muted-on-light); max-width: 29ch; font-size: .96rem; }

/* فتح/طيّ الكل — تحكّم واحد بدل ثماني نقرات */
.faq__toggle-all {
  appearance: none; -webkit-appearance: none;
  margin-top: 22px; padding: 9px 16px 9px 13px;
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent;
  border: 1px solid var(--border-light); border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  color: var(--muted-on-light); cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.faq__toggle-all:hover { color: var(--text-on-light); border-color: #C4B69F; background: var(--surface-light); }
.faq__toggle-all-icon {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.faq__toggle-all[aria-expanded="true"] .faq__toggle-all-icon { transform: rotate(225deg) translateY(-2px); }

.faq { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  background: var(--surface-light);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.faq__item:hover { border-color: #CBBEAA; background: #FFFDF8; }
.faq__item[open], .faq__item.is-open { border-color: rgba(140,31,43,.38); box-shadow: 0 14px 32px -28px rgba(34,26,22,.45); }

.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 20px 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.96rem, 1.35vw, 1.08rem);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  color: var(--text-on-light);
  /* هدف لمس مريح على الهاتف */
  min-height: 56px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
/* حلقة تركيز واضحة للوحة المفاتيح — داخل البطاقة لا تُقصّها الحواف */
.faq__item summary:focus { outline: none; }
.faq__item summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--r-md);
}
.faq__question { display: flex; align-items: center; gap: 13px; min-width: 0; }
.faq__icon { width: 21px; height: 21px; flex: none; color: var(--accent); }

/* الشيفرون داخل قرص: إشارة نقر أوضح من خطّين عائمين */
.faq__chevron {
  position: relative;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: rgba(140,31,43,.04);
  transition: background-color .25s, border-color .25s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.faq__chevron::before,
.faq__chevron::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  width: 11px; height: 2px; margin-inline-start: -5.5px; margin-block-start: -1px;
  border-radius: 2px; background: var(--accent);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .25s;
}
.faq__chevron::after { transform: rotate(90deg); }
.faq__item:hover .faq__chevron { border-color: rgba(140,31,43,.34); background: rgba(140,31,43,.09); }
.faq__item[open] .faq__chevron,
.faq__item.is-open .faq__chevron { background: var(--accent); border-color: var(--accent); }
.faq__item[open] .faq__chevron::before,
.faq__item[open] .faq__chevron::after,
.faq__item.is-open .faq__chevron::before,
.faq__item.is-open .faq__chevron::after { background: var(--color-paper); }
.faq__item[open] .faq__chevron::after,
.faq__item.is-open .faq__chevron::after { transform: rotate(0deg); opacity: 0; }

/* الطيّ: بلا جافاسكربت يعمل عبر grid-template-rows (فتح فقط، كما يسمح <details>).
   ومع الجافاسكربت نتحكّم بالارتفاع مباشرة فيتحرّك الفتح والغلق كلاهما. */
.faq__answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1);
}
.faq__item[open] .faq__answer { grid-template-rows: 1fr; }
.faq__answer > p {
  overflow: hidden; margin: 0; padding: 0 56px 0 22px;
  color: var(--muted-on-light); font-size: .94rem; line-height: 1.85;
}
.faq__item[open] .faq__answer > p { padding-bottom: 22px; }
.faq__answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* وضع الجافاسكربت: الارتفاع يُقاس ويُحرَّك، فالغلق يتحرّك مثل الفتح تماماً */
.js-faq .faq__item[open]:not(.is-open) { border-color: var(--border-light); box-shadow: none; }
.js-faq .faq__item[open]:not(.is-open) .faq__chevron { background: rgba(140,31,43,.04); border-color: var(--border-light); }
.js-faq .faq__item[open]:not(.is-open) .faq__chevron::before,
.js-faq .faq__item[open]:not(.is-open) .faq__chevron::after { background: var(--accent); }
.js-faq .faq__item[open]:not(.is-open) .faq__chevron::after { transform: rotate(90deg); opacity: 1; }

.js-faq .faq__answer {
  display: block; height: 0; overflow: hidden;
  transition: height .34s cubic-bezier(.16, 1, .3, 1);
}
.js-faq .faq__answer > p { padding-bottom: 22px; }
.js-faq .faq__item:not(.is-open) .faq__answer > p { padding-bottom: 0; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 26px; }
  .faq__intro { position: static; }
  .faq__lead { max-width: 52ch; }
  .faq__toggle-all { margin-top: 18px; }
}
@media (max-width: 560px) {
  .faq__item summary { padding: 15px 16px; gap: 12px; }
  .faq__question { gap: 10px; }
  .faq__icon { width: 19px; height: 19px; }
  .faq__chevron { width: 27px; height: 27px; }
  .faq__answer > p { padding-inline: 16px; }
  .faq__item[open] .faq__answer > p,
  .js-faq .faq__answer > p { padding-bottom: 18px; }
}


/* ═══════════════ التسجيل — بطاقة الدعوة ═══════════════ */

.cta-card {
  position: relative; overflow: hidden;
  max-width: 760px; margin-inline: auto; text-align: center;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 60px);
  border-radius: var(--r-lg);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px);
}
.cta-card .eyebrow { justify-content: center; }
.cta-card .eyebrow::after { display: none; }
.cta-card h2 { margin-inline: auto; }
.cta__sub { color: var(--muted-on-dark); max-width: 52ch; margin: 0 auto 2.2em; }
.join__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__hint { margin: 1.8em 0 0; font-size: .82rem; color: var(--muted-on-dark); }

/* ═══════════════ التذييل ═══════════════ */

.foot {
  background: var(--bg-dark); color: var(--text-on-dark);
  padding: clamp(60px, 9vh, 100px) 0 clamp(24px, 4vh, 36px);
  border-top: 1px solid var(--border-dark);
}

/* العلامة على جهة، وأعمدة الروابط على الأخرى */
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: start;
}
.foot__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.foot__logo { width: 104px; height: auto; margin-bottom: 18px; }
.foot__desc { color: var(--muted-on-dark); font-size: .9rem; line-height: 1.9; margin: 0; }

.foot__col { display: grid; gap: 10px; align-content: start; font-size: .88rem; }
.foot__head {
  font-family: var(--font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .14em; color: var(--action);
  margin: 0 0 4px;
}
.foot__col a {
  color: var(--muted-on-dark); text-decoration: none;
  width: fit-content;
  transition: color .25s, transform .25s;
}
.foot__col a:hover { color: var(--color-paper); transform: translateX(-3px); }

/* ── منصات التواصل ── */
.foot__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.foot__social-link {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  color: var(--muted-on-dark);
  transition: color .25s, background-color .25s, border-color .25s, transform .25s;
}
.foot__social-link svg { width: 19px; height: 19px; }
.foot__social-link:hover {
  color: var(--color-charcoal); background: var(--action);
  border-color: var(--action); transform: translateY(-3px);
}
/* تلميح الاسم فوق الأيقونة — الأيقونة وحدها لا تكفي للتعرّف */
.foot__social-link::after {
  content: attr(data-tip);
  position: absolute; inset-block-end: calc(100% + 9px); inset-inline-start: 50%;
  transform: translateX(50%) translateY(4px);
  padding: 5px 10px; border-radius: 8px;
  background: var(--bg-deep); border: 1px solid var(--glass-line);
  color: var(--color-paper); font-size: .7rem; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.foot__social-link:hover::after,
.foot__social-link:focus-visible::after { opacity: 1; transform: translateX(50%) translateY(0); }

/* ── الشريط السفلي ── */
.foot__bar {
  margin-top: clamp(34px, 6vh, 64px); padding-top: 22px;
  border-top: 1px solid var(--border-dark);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 26px;
}
.foot__copy { margin: 0; font-size: .78rem; color: var(--muted-on-dark); }
.foot__bar-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: .78rem; }
.foot__bar-links a { color: var(--muted-on-dark); text-decoration: none; transition: color .25s; }
.foot__bar-links a:hover { color: var(--color-paper); }

@media (max-width: 900px) {
  .foot__top { grid-template-columns: 1fr; gap: 40px; }
  .foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
}
@media (max-width: 560px) {
  .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* ---------- حالة ما قبل الظهور (فقط عند تفعيل JS) ---------- */
.js .reveal { opacity: 0; }

/* توسيط نص قسم «ما هي جرّب» */
#about .eyebrow { justify-content: center; }
#about .eyebrow::after { display: none; }
#about .lede { margin-inline: auto; text-align: center; }

/* ═══════════════ الاستجابة ═══════════════ */

/* آيباد وما دونه */
@media (max-width: 1024px) {
  :root { --stage: min(64vh, 108vw, 620px); }
  .hero__wordmark img { width: 80vw; max-width: none; }
  .hero__copy { max-width: min(36ch, 56vw); }
  .hero__copy h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
  .hero__cta .btn--sm { padding: .72em 1.4em; font-size: .88rem; }
}

@media (max-width: 900px) {
  .nav__links {
    position: fixed; inset: calc(var(--nav-h) + 6px) var(--pad) auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(26,19,16,.94);
    backdrop-filter: blur(18px);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    padding: 8px 20px 18px;
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--border-dark); font-size: 1rem; }
  .nav__links a:last-child { border-bottom: 0; }
  /* الشريط لا يتّسع لزرّي الحساب على الشاشة الضيّقة، فينتقلان إلى القائمة
     نفسها — بدونهما كان التسجيل يختفي كلياً من التنقّل على الهاتف. */
  .nav__auth { display: none; }
  .nav__links-auth {
    display: flex; gap: 10px; padding-top: 16px; margin-top: 4px;
    border-top: 1px solid var(--border-dark);
  }
  .nav__links-auth .btn { flex: 1 1 0; }
  .nav__links-auth a { padding: .68em 1.35em; border-bottom: 0; }
  .nav__burger { display: flex; margin-inline-start: auto; }

  .wrap--split { grid-template-columns: 1fr; }
  .split__head { position: static; }

  .hero__copy { max-width: min(34ch, 56vw); }
  .hero__copy h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
  .hero__scroll-label { display: none; }
}

/* الهاتف */
@media (max-width: 560px) {
  :root { --stage: min(58vh, 112vw); --nav-h: 68px; --r-lg: 20px; }
  .hero__wordmark img { width: 96vw; max-width: none; }

  /* على الهاتف يصير الهيرو عموداً واحداً متوسّطاً: النص والأزرار في الأعلى،
     والتلفون يصعد من تحت. المحاذاة لليمين كانت تترك الحافة اليسرى مهلهلة
     وتجعل الزرّين غير متوازنين. */
  .hero__copy {
    inset-inline: var(--pad);
    inset-block-start: calc(var(--nav-h) + 26px);
    max-width: none;
    text-align: center;
  }
  .hero__copy h1 {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    line-height: 1.45;
    margin-bottom: .5em;
  }
  .hero__sub {
    font-size: .88rem; line-height: 1.7;
    max-width: 32ch; margin-inline: auto; margin-bottom: 0;
  }

  /* فاصل قصير متوسّط بدل خطّ يمتدّ بعرض الشاشة */
  .hero__cta {
    position: relative;
    justify-content: center;
    border-top: 0;
    padding-top: 1.5em;
    margin-top: 1.4em;
    max-width: none;
  }
  .hero__cta::before {
    content: ""; position: absolute; inset-block-start: 0;
    inset-inline-start: 50%; margin-inline-start: -32px;
    width: 64px; height: 1px; background: var(--glass-line-2);
  }
  /* زرّان متوازنان بدل زرّ ممتدّ وآخر صغير */
  .hero__cta .btn--action,
  .hero__cta .btn--ghost { flex: 0 1 auto; min-width: 124px; }
  .hero__cta .btn--sm { padding: .68em 1.1em; font-size: .84rem; }

  /* مؤشّر السكرول في منتصف الأسفل — بلا transform لأن جي‑إس‑إيه‑بي
     يحرّك هذه الطبقة ويستبدل خاصية transform */
  .hero__scroll { inset-inline: 0; align-items: center; inset-block-end: 18px; }

  .metrics { grid-template-columns: 1fr 1fr; }
}

/* الهاتف القصير: الهيرو لازم يسع الشريط + النص + مشهد التلفون معاً.
   على ارتفاع 700px أو أقل يتجاوز المجموعُ الشاشةَ، فيصعد التلفون فوق زرّ
   الدعوة ويغطّيه (المشهد z-index:9000 فوق كل شيء). الحل: نصغّر المشهد
   قليلاً وننزله أكثر — المعصم أقلّ أهمية من زرّ التسجيل. */
@media (max-width: 560px) and (max-height: 700px) {
  :root { --stage: min(54vh, 106vw); }
  .stage { bottom: calc(var(--stage) * -0.18); }
  .hero__sub { margin-bottom: 0; }
  .hero__cta { padding-top: 1.15em; margin-top: 1.05em; }
}

/* شاشات أقصر بعد (أجهزة قديمة، أو المتصفّح بشريطين ظاهرين) */
@media (max-width: 560px) and (max-height: 620px) {
  :root { --stage: min(50vh, 98vw); }
  .stage { bottom: calc(var(--stage) * -0.24); }
  .hero__copy h1 { font-size: clamp(1.25rem, 6.4vw, 1.6rem); margin-bottom: .4em; }
  .hero__sub { font-size: .82rem; }
}

/* ---------- تقليل الحركة ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; }
  .hero__scroll-line::after,
  .btn--action::before,
  .beam::before { animation: none; }
  .btn, .glass { transition: none; }
}


/* ═══════════════ المصادقة (دخول / إنشاء حساب) ═══════════════ */

/* زوج أزرار الدخول/الحساب في الشريط */
.nav__auth { display: flex; align-items: center; gap: 8px; flex: none; }

/* صف أزرار الدعوة في قسم ابدأ الآن على الصفحة الرئيسية */
.join__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* صفحة المصادقة المستقلة */
.auth {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 40px) var(--pad) 60px;
  background: var(--bg-deep); overflow: hidden;
}
.auth__glow { display: none; }

.auth__card {
  position: relative; z-index: 1;
  width: min(480px, 100%);
  padding: clamp(28px, 4vw, 48px);
}

.auth__card { width: min(400px, 100%); }
.auth__brand { display: flex; justify-content: flex-start; margin-bottom: 18px; }
.auth__brand img { width: 76px; height: auto; }

.auth__title { text-align: start; font-size: clamp(1.35rem, 3vw, 1.6rem); margin: 0 0 .3em; color: var(--color-paper); }
.auth__sub { text-align: start; color: var(--muted-on-dark); font-size: .9rem; margin: 0 0 1.5em; }

/* زر جوجل + الفاصل المتقطّع */
.btn--google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-line);
  border-radius: 12px; color: var(--color-paper);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  cursor: pointer; transition: border-color .25s, background-color .25s;
}
.btn--google:hover { border-color: var(--glass-line-2); background: rgba(255,255,255,.07); }
.btn--google svg { width: 18px; height: 18px; flex: none; }

.auth__divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin: 22px 0;
}
.auth__divider hr { border: 0; border-top: 1px dashed var(--glass-line); margin: 0; }
.auth__divider span { font-size: .74rem; color: var(--muted-on-dark); }

/* اختيار الدور */
.rolepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.rolepick input { position: absolute; opacity: 0; pointer-events: none; }
.rolepick label {
  cursor: pointer; text-align: center;
  padding: 14px 10px; border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  background: rgba(0,0,0,.20);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--muted-on-dark);
  transition: border-color .25s, color .25s, background-color .25s, box-shadow .25s;
}
.rolepick label small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .72rem; color: #7E7469; margin-top: 3px; }
.rolepick label:hover { border-color: var(--glass-line-2); color: var(--color-paper); }
.rolepick input:checked + label {
  border-color: var(--action); color: var(--color-paper);
  background: rgba(226,166,59,.10);
  box-shadow: 0 0 0 3px rgba(226,166,59,.15);
}
.rolepick input:focus-visible + label { outline: 2px solid var(--action); outline-offset: 2px; }

/* حقول النموذج */
.authform { display: flex; flex-direction: column; gap: 14px; }
.authform label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--muted-on-dark);
}
.authform input {
  font: inherit; font-weight: 400; color: var(--color-paper);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--glass-line);
  border-radius: 12px; padding: 12px 14px;
  transition: border-color .25s, box-shadow .25s;
}
.authform input::placeholder { color: #7E7469; }
.authform input:focus {
  outline: none; border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(226,166,59,.18);
}
.authform .btn { margin-top: 6px; width: 100%; }
/* أزرار صفحات الحساب بلا توهّج */
.auth .btn--action, .auth .btn--accent { box-shadow: none; }
.auth .btn--action:hover, .auth .btn--accent:hover { box-shadow: none; }
.auth .btn--action::before { display: none; }

/* حقل كلمة المرور مع زر الإظهار */
.field-pass { position: relative; }
.field-pass input { width: 100%; padding-inline-end: 44px; }
.pass-toggle {
  position: absolute; inset-inline-end: 8px; inset-block-end: 6px;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--muted-on-dark);
  border-radius: 8px; transition: color .2s, background-color .2s;
}
.pass-toggle:hover { color: var(--color-paper); background: var(--glass-bg-2); }

/* صف تذكّرني / نسيت كلمة المرور */
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; }
.auth__row label { display: flex; align-items: center; gap: 7px; color: var(--muted-on-dark); font-weight: 400; cursor: pointer; }
.auth__row a { color: var(--action); text-decoration: none; }
.auth__row a:hover { text-decoration: underline; }
.auth__check { width: 15px; height: 15px; accent-color: var(--action); }

.auth__alt { text-align: center; margin: 1.6em 0 0; font-size: .88rem; color: var(--muted-on-dark); }
.auth__alt a { color: var(--action); text-decoration: none; font-weight: 700; }
.auth__alt a:hover { text-decoration: underline; }

.auth__back { position: relative; z-index: 1; margin-top: 20px; text-align: center; }
.auth__back a { color: var(--muted-on-dark); text-decoration: none; font-size: .82rem; }
.auth__back a:hover { color: var(--color-paper); }

.auth__legal { text-align: center; font-size: .74rem; color: #7E7469; margin: 1.2em 0 0; line-height: 1.7; }
.auth__legal a { color: var(--muted-on-dark); }

/* ═══ معالج التسجيل متعدّد الخطوات ═══ */
.auth__card--wizard { width: min(440px, 100%); }

/* شريط التقدّم */
.wiz__progress { display: flex; align-items: center; gap: 6px; margin: 0 0 24px; }
.wiz__dot {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--glass-line); transition: background-color .35s;
}
.wiz__dot.is-done { background: var(--action); }
.wiz__dot.is-active { background: var(--action); }

/* الخطوات */
.wiz__step { display: none; animation: wizIn .4s ease both; }
.wiz__step.is-active { display: block; }
@keyframes wizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wiz__stepname { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .14em; color: var(--action); margin: 0 0 6px; }

/* صف أزرار التنقل */
.wiz__nav { display: flex; gap: 10px; margin-top: 8px; }
.wiz__nav .btn { flex: 1; }
.wiz__back {
  background: transparent; border: 1px solid var(--glass-line);
  color: var(--muted-on-dark); border-radius: 12px; padding: 12px 14px;
  font: inherit; font-weight: 700; cursor: pointer; flex: none; min-width: 92px;
  transition: border-color .2s, color .2s;
}
.wiz__back:hover { border-color: var(--glass-line-2); color: var(--color-paper); }

/* خانات رمز التحقق */
.code-inputs { display: flex; gap: 10px; direction: ltr; justify-content: center; margin: 6px 0 4px; }
.code-inputs input {
  width: 48px; height: 56px; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--color-paper); background: rgba(0,0,0,.22);
  border: 1px solid var(--glass-line); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.code-inputs input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(226,166,59,.18); }
.code-hint { text-align: center; font-size: .82rem; color: var(--muted-on-dark); margin: 14px 0 0; }
.code-hint b { color: var(--color-paper); }
.code-resend { background: none; border: 0; color: var(--action); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.code-resend:disabled { color: var(--muted-on-dark); cursor: default; }

/* select + textarea بنفس ستايل الحقول */
.authform select, .authform textarea {
  font: inherit; font-weight: 400; color: var(--color-paper);
  background: rgba(0,0,0,.22); border: 1px solid var(--glass-line);
  border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: border-color .25s, box-shadow .25s;
}
.authform select:focus, .authform textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(226,166,59,.18); }
.authform select option { background: var(--bg-deep); color: var(--color-paper); }

/* مجموعة أزرار مقسّمة (نعم/لا، الدور، النشاط) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  cursor: pointer; flex: 1; min-width: fit-content; text-align: center;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--glass-line);
  background: rgba(0,0,0,.20); color: var(--muted-on-dark);
  font-weight: 700; font-size: .88rem; transition: border-color .2s, color .2s, background-color .2s;
}
.seg label:hover { border-color: var(--glass-line-2); color: var(--color-paper); }
.seg input:checked + label { border-color: var(--action); color: var(--color-paper); background: rgba(226,166,59,.10); }
.seg input:focus-visible + label { outline: 2px solid var(--action); outline-offset: 2px; }

/* اختيار الدور: بطاقتان أكبر */
.rolecards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rolecards input { position: absolute; opacity: 0; pointer-events: none; }
.rolecards label {
  cursor: pointer; text-align: center; padding: 20px 12px; border-radius: var(--r-md);
  border: 1px solid var(--glass-line); background: rgba(0,0,0,.20);
  font-family: var(--font-display); font-weight: 700; color: var(--muted-on-dark);
  transition: border-color .2s, color .2s, background-color .2s;
}
.rolecards label small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .74rem; color: #7E7469; margin-top: 5px; }
.rolecards label:hover { border-color: var(--glass-line-2); color: var(--color-paper); }
.rolecards input:checked + label { border-color: var(--action); color: var(--color-paper); background: rgba(226,166,59,.10); box-shadow: 0 0 0 3px rgba(226,166,59,.14); }

/* رقائق متعددة الاختيار (نوع المطبخ) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  cursor: pointer; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: rgba(0,0,0,.20);
  color: var(--muted-on-dark); font-size: .84rem; font-weight: 700;
  transition: border-color .2s, color .2s, background-color .2s;
}
.chips label:hover { border-color: var(--glass-line-2); color: var(--color-paper); }
.chips input:checked + label { border-color: var(--action); color: var(--color-paper); background: rgba(226,166,59,.10); }

.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-group > span.field-q { font-size: .8rem; font-weight: 700; color: var(--muted-on-dark); }

/* شاشة النجاح */
.wiz__done { text-align: center; padding: 10px 0; }
.wiz__done svg { width: 56px; height: 56px; color: var(--action); margin-bottom: 14px; }
.wiz__done h2 { color: var(--color-paper); margin: 0 0 .4em; }
.wiz__done p { color: var(--muted-on-dark); font-size: .92rem; margin: 0 0 1.4em; }

/* حقول متتالية على صف واحد عند الاتساع */
.authform .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .authform .grid2 { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .nav__auth { display: none; }
}