/* Hallmark · genre: modern-minimal · macrostructure: Story Scroll — bespoke «الخانات» v2
 * design-system: design.md · designed-as-app · nav: N10 scroll-morph + sliding ink · footer: Ft5 Statement
 * enrichment: real project screenshots, layered, no drawn chrome · motion: motion.js + CSS only
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 * RTL: خصائص منطقية فقط. الاستثناءات الفيزيائية مقصودة ومعلَّمة (علامة الصح، سهم الطيّ، مؤشّر التنقّل).
 * مبني للجوال أولًا: القواعد الأساسية للجوال، والشاشات الأكبر بـ min-width.
 */

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

html{
  --dirx: -1;                          /* اتجاه «للأمام» على المحور الأفقي: يسار بالعربي */
  --origin: right;                     /* بداية السطر فيزيائيًّا — لـ transform-origin */
  scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--head-h) + 16px);
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
html[dir="ltr"]{ --dirx: 1; --origin: left; }

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

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

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.ta{ text-align:end; }
.ctr{ text-align:center; }
.fine{ font-size:var(--text-xs); color:var(--color-ink-faint); line-height:1.7; }

.sr{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{
  position:absolute; inset-inline-start:-9999px; inset-block-start:0; z-index:300;
  background:var(--color-blue); color:var(--color-paper); padding:14px 22px;
}
.skip:focus{ inset-inline-start:0; }

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

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

/* ══ الأزرار ═══════════════════════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-block-size:52px; padding-inline:24px;
  background:var(--color-blue); color:var(--color-paper);
  border:1.5px solid var(--color-blue); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:var(--text-base); font-weight:600;
  line-height:1.3; text-align:center; white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out),
             transform var(--dur-micro) var(--ease-out);
}
.btn:hover{ background:var(--color-blue-ink); border-color:var(--color-blue-ink); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

/* السهم يشير لنهاية السطر ويتقدّم خطوة عند التحويم — في اللغتين */
.arr{ position:relative; inline-size:14px; block-size:2px; background:currentColor; flex:none;
      transition:transform var(--dur-short) var(--ease-out); }
.arr::after{
  content:""; position:absolute; inset-inline-end:-4px; inset-block-start:50%;
  transform:translateY(-50%);
  border-block:4.5px solid transparent; border-inline-start:6px solid currentColor;
}
.btn:hover .arr, a:hover > .arr{ transform:translateX(calc(var(--dirx) * 4px)); }

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

.btn-sm{ min-block-size:44px; padding-inline:16px; font-size:var(--text-sm); }
.btn-lg{ min-block-size:56px; padding-inline:28px; font-size:var(--text-md); }
.btn-block{ inline-size:100%; }

.btn[data-state="loading"]{ color:transparent; pointer-events:none; }
/* الدوّامة تدور أثناء الإرسال فقط — لا حركة مخفية تستهلك المعالج طول الوقت */
.btn[data-state="loading"] .btn-spin{ opacity:1; animation:spin .7s linear infinite; }
.btn-spin{
  position:absolute; inline-size:18px; block-size:18px; opacity:0;
  border:2px solid rgba(255,255,255,.35); border-block-start-color:var(--color-paper);
  border-radius:50%;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ══ الترويسة ══════════════════════════ */
.head{
  position:sticky; inset-block-start:0; z-index:60;
  padding-block-start:env(safe-area-inset-top, 0px);
  background:color-mix(in oklab, var(--color-paper) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-block-end:var(--rule) solid transparent;
  transition:border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.head.is-stuck{
  border-block-end-color:var(--color-line);
  background:color-mix(in oklab, var(--color-paper) 94%, transparent);
}
.head-rail{
  position:absolute; inset-block-end:-1px; inset-inline-start:0;
  block-size:2px; inline-size:100%;
  background:var(--color-blue);
  transform:scaleX(0); transform-origin:var(--origin) center;
}
.head-in{
  display:flex; align-items:center; gap:var(--space-md);
  block-size:64px;
  transition:block-size var(--dur-short) var(--ease-out);
}

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

.nav{ display:none; }
.nav a{
  position:relative; padding-block:12px;
  font-size:var(--text-sm); font-weight:500; color:var(--color-ink-soft);
  transition:color var(--dur-micro) var(--ease-out);
}
.nav a:hover, .nav a.is-active{ color:var(--color-ink); }
/* مؤشّر منزلق واحد بين الروابط — موضعه يُحسب بالبكسل فيزيائيًّا فلا يتأثر بالاتجاه */
.nav-ink{
  position:absolute; inset-block-end:4px; left:0;
  block-size:2px; inline-size:var(--w, 0px);
  background:var(--color-blue);
  transform:translateX(var(--x, 0px));
  opacity:var(--o, 0);
  transition:transform var(--dur-long) var(--ease-out), inline-size var(--dur-long) var(--ease-out),
             opacity var(--dur-short) var(--ease-out);
  pointer-events:none;
}

.head-act{ display:flex; align-items:center; gap:var(--space-xs); margin-inline-start:auto; }
.head-cta{ display:none; }

/* مبدّل اللغة: العلمان ظاهران دائمًا — قطر للعربية وأمريكا للإنجليزية — واللغة الحالية مظلّلة.
   الأعلام مرسومة SVG لا رموزًا تعبيرية: ويندوز يعرض رموز الأعلام حروفًا (QA / US). */
.lang-sw{
  display:inline-flex; align-items:center; gap:2px; padding:2px;
  border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-sm);
  background:var(--color-paper);
}
.lang-opt{
  display:inline-flex; align-items:center; gap:7px;
  min-block-size:40px; padding-inline:10px; border-radius:calc(var(--radius-sm) - 2px);
  font-size:var(--text-sm); font-weight:600; line-height:1.2; white-space:nowrap;
  color:var(--color-ink-soft);
  transition:color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.lang-opt.is-on{ background:var(--color-paper-2); color:var(--color-ink); }
a.lang-opt:hover{ background:var(--color-blue-tint); color:var(--color-blue-ink); }
.flag{
  display:inline-block; flex:none; inline-size:21px; block-size:14px; border-radius:var(--radius-xs);
  background-size:cover; background-position:left center; background-repeat:no-repeat;
  box-shadow:0 0 0 1px var(--color-line);
}
.flag-qa{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 11'><rect width='28' height='11' fill='%238A1538'/><path fill='%23FFFFFF' d='M0 0H7L9.5 0.611 7 1.222 9.5 1.833 7 2.444 9.5 3.056 7 3.667 9.5 4.278 7 4.889 9.5 5.500 7 6.111 9.5 6.722 7 7.333 9.5 7.944 7 8.556 9.5 9.167 7 9.778 9.5 10.389 7 11H0Z'/></svg>"); }
.flag-us{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'><rect width='19' height='10' fill='%23FFFFFF'/><path stroke='%23B22234' stroke-width='0.7692' d='M0 0.385H19M0 1.923H19M0 3.462H19M0 5.000H19M0 6.538H19M0 8.077H19M0 9.615H19'/><rect width='7.6' height='5.3846' fill='%233C3B6E'/><g fill='%23FFFFFF'><circle cx='1.0' cy='0.75' r='.3'/><circle cx='2.4' cy='0.75' r='.3'/><circle cx='3.8' cy='0.75' r='.3'/><circle cx='5.2' cy='0.75' r='.3'/><circle cx='6.6' cy='0.75' r='.3'/><circle cx='1.0' cy='2.05' r='.3'/><circle cx='2.4' cy='2.05' r='.3'/><circle cx='3.8' cy='2.05' r='.3'/><circle cx='5.2' cy='2.05' r='.3'/><circle cx='6.6' cy='2.05' r='.3'/><circle cx='1.0' cy='3.35' r='.3'/><circle cx='2.4' cy='3.35' r='.3'/><circle cx='3.8' cy='3.35' r='.3'/><circle cx='5.2' cy='3.35' r='.3'/><circle cx='6.6' cy='3.35' r='.3'/><circle cx='1.0' cy='4.65' r='.3'/><circle cx='2.4' cy='4.65' r='.3'/><circle cx='3.8' cy='4.65' r='.3'/><circle cx='5.2' cy='4.65' r='.3'/><circle cx='6.6' cy='4.65' r='.3'/></g></svg>"); }
.drawer-lang, .foot-nav a[hreflang]{ display:inline-flex; align-items:center; gap:8px; }
/* الشاشات الضيقة جدًّا: العلمان يكفيان، والاسم يبقى لقارئ الشاشة */
@media (max-width: 374px){
  .lang-sw .lang-t{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  inline-size:48px; block-size:48px; padding-inline:13px;
  background:none; border:var(--rule) solid var(--color-line-2);
  border-radius:var(--radius-sm); cursor:pointer;
}
.burger span{ display:block; block-size:2px; background:var(--color-ink); }

/* ── القائمة: صفحة كاملة على الجوال ── */
.scrim{ display:none; }
.drawer{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 20px);
  background:var(--color-paper);
  overflow-y:auto; overscroll-behavior:contain;
  animation:sheetIn var(--dur-long) var(--ease-out);
}
@keyframes sheetIn{ from{ opacity:0; transform:translateY(-10px); } }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; block-size:64px; flex:none; }
.drawer-x{
  position:relative; inline-size:48px; block-size:48px;
  background:none; border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-sm); cursor:pointer;
}
.drawer-x span{
  position:absolute; inset-inline-start:13px; inset-block-start:50%;
  inline-size:20px; block-size:2px; background:var(--color-ink);
}
.drawer-x span:first-child{ transform:rotate(45deg); }
.drawer-x span:last-child{ transform:rotate(-45deg); }
.drawer-nav{ display:flex; flex-direction:column; margin-block:var(--space-lg) var(--space-xl); }
.drawer-nav a{
  display:flex; align-items:center; min-block-size:60px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem, 1.1rem + 2.4vw, 2.1rem); line-height:1.4;
  border-block-end:var(--rule) solid var(--color-line);
  opacity:0; transform:translateY(10px);
  animation:linkIn 460ms var(--ease-out) forwards;
  animation-delay:calc(80ms + var(--i, 0) * 45ms);
}
.drawer-nav a:hover{ color:var(--color-blue-ink); }
@keyframes linkIn{ to{ opacity:1; transform:none; } }
.drawer-foot{ margin-block-start:auto; display:grid; gap:var(--space-md); }
.drawer-meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-xs); font-size:var(--text-sm); color:var(--color-ink-soft); }
.drawer-meta a{ min-block-size:44px; display:inline-flex; align-items:center; }

/* ══ العناوين المشتركة للأقسام ══════════ */
.sec-head{ max-inline-size:50rem; margin-block-end:clamp(32px, 5vw, 64px); }
.sec-head h2{ font-size:var(--text-section); margin-block-end:var(--space-sm); }
.sec-head p{ max-inline-size:60ch; color:var(--color-ink-soft); font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.sec-head-row{ max-inline-size:none; display:grid; gap:var(--space-md); }

/* ══ البطل ═════════════════════════════ */
.hero{ position:relative; overflow:hidden; padding-block:clamp(28px, 5vw, 64px) clamp(56px, 7vw, 104px); }
/* شبكة «الخانات» خلف اللقطات — تتلاشى نحو النص */
.hero-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to left,   var(--color-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 22% 70%, #000 10%, transparent 72%);
          mask-image:radial-gradient(70% 60% at 22% 70%, #000 10%, transparent 72%);
}
.hero > .shell{ position:relative; z-index:1; }

.hero-kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--text-sm); font-weight:500; color:var(--color-ink-soft);
  margin-block-end:var(--space-md);
}
/* العنصر الأول الذي يظهر: المربّع الأزرق يتقدّم خانة */
.kicker-mark{ position:relative; inline-size:22px; block-size:22px; flex:none; }
.kicker-mark i{ position:absolute; inset-block-start:0; inset-inline-end:0; inline-size:13px; block-size:13px; border:1.5px solid var(--color-line-2); }
.kicker-mark b{
  position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:11px; block-size:11px;
  background:var(--color-blue);
  animation:hop 900ms var(--ease-in-out) 250ms both;
}
@keyframes hop{
  from{ transform:translate(calc(var(--dirx) * 9px * -1), -9px); }
  to  { transform:none; }
}

.hero-title{
  font-size:var(--text-display); font-weight:700;
  line-height:var(--leading-display);
  margin-block-end:var(--space-lg);
}
.hl{ position:relative; color:var(--color-blue); white-space:nowrap; }
.hero-title .hl::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:.02em;
  block-size:.07em; min-block-size:4px; background:var(--color-blue); border-radius:3px;
  transform:scaleX(0); transform-origin:var(--origin) center;
  animation:ruleIn 600ms var(--ease-out) 700ms forwards;
}
@keyframes ruleIn{ to{ transform:scaleX(1); } }

.hero-body{ display:grid; gap:var(--space-xl); }
.lede{ font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem); color:var(--color-ink-soft); max-inline-size:44ch; margin-block-end:var(--space-lg); }
.row-cta{ display:flex; flex-wrap:wrap; gap:var(--space-sm); }
/* الجوال: زرّا البطل يملآن السطر بدل عرضين مختلفين */
.hero .row-cta > .btn, .cs-hero .row-cta > .btn{ flex:1 1 auto; }
.commit{
  display:grid; gap:10px;
  margin-block-start:var(--space-lg); padding-block-start:var(--space-md);
  border-block-start:var(--rule) solid var(--color-line);
}
.commit li{ position:relative; padding-inline-start:22px; font-size:var(--text-sm); color:var(--color-ink-soft); }
.commit li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:9px; block-size:9px; background:var(--color-blue); border-radius:2px;
}

/* تسلسل الدخول: العلامة ← العنوان ← السطر ← الأزرار ← اللقطات */
.hero-kicker, .hero-title, .hero-say > *{
  animation:rise 760ms var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }

/* ── تركيبة اللقطات: ثلاث طبقات بأعماق مختلفة ── */
.stack{ position:relative; aspect-ratio:1.3 / 1; }
.stack-item{
  position:absolute; margin:0;
  transform:translate3d(calc(var(--mx, 0) * var(--depth) * 1px), calc(var(--my, 0) * var(--depth) * 1px), 0);
  transition:transform 900ms var(--ease-out);
}
.stack-item.s1{ display:none; }
.stack-item.s2{ inline-size:92%; inset-block-start:0; inset-inline-start:0; z-index:2; }
.stack-item.s3{ inline-size:54%; inset-block-end:0; inset-inline-end:0; z-index:3; }
.stack-fig{
  position:relative; display:block;
  animation:stackIn 900ms var(--ease-out) both;
  animation-delay:var(--d, .4s);
  transition:transform var(--dur-long) var(--ease-out);
}
.s1 .stack-fig{ --d:.42s; }
.s2 .stack-fig{ --d:.55s; }
.s3 .stack-fig{ --d:.72s; }
@keyframes stackIn{ from{ opacity:0; transform:translateY(36px) scale(.94); } }
.stack-fig:hover{ transform:translateY(-6px); }
.stack-fig img{
  inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top;
  border-radius:var(--radius-md);
  border:var(--rule) solid var(--color-line-2);
  box-shadow:var(--shadow-shot);
  background:var(--color-paper-2);
}
.stack-cap{
  position:absolute; inset-block-start:10px; inset-inline-start:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--radius-pill);
  background:color-mix(in oklab, var(--color-paper) 92%, transparent);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-card);
  font-size:var(--text-xs); font-weight:500; color:var(--color-ink-soft); line-height:1.6;
}
.stack-cap b{ color:var(--color-blue-ink); font-weight:600; }

/* ══ الدليل ═════════════════════════════ */
.proof{ border-block:var(--rule) solid var(--color-line); background:var(--color-paper); }
.proof-in{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs) var(--space-lg); padding-block:var(--space-sm); }
.proof-k{ font-size:var(--text-sm); font-weight:500; color:var(--color-ink-faint); }
.proof-list{ display:flex; flex-wrap:wrap; gap:0 clamp(18px, 3vw, 36px); }
.proof-list a{
  display:inline-flex; align-items:baseline; gap:8px; min-block-size:48px; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-md); color:var(--color-ink);
  transition:color var(--dur-micro) var(--ease-out);
}
.proof-list a small{ font-family:var(--font-body); font-size:var(--text-xs); font-weight:500; color:var(--color-ink-faint); }
.proof-list a:hover{ color:var(--color-blue-ink); }

/* ══ الألواح الزرقاء ═════════════════════ */
.plane-deep{ position:relative; isolation:isolate; background:var(--color-blue-deep); color:var(--on-deep); }
.plane-deep::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to left,   var(--on-deep-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--on-deep-line) 1px, transparent 1px);
  background-size:120px 120px;
  opacity:.35;
}
.plane-deep .sec-head p{ color:var(--on-deep-soft); }
.plane-deep .mark i{ border-color:var(--on-deep-line); }
.plane-deep .mark b{ background:var(--color-paper); }

/* ══ النقلة ═════════════════════════════ */
.move{ padding-block:var(--space-4xl); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-block-end:var(--space-xl); }
.chip{
  min-block-size:48px; padding-inline:18px;
  background:transparent; color:var(--on-deep-soft);
  font-family:var(--font-body); font-size:var(--text-sm);
  border:var(--rule) solid var(--on-deep-line); border-radius:var(--radius-pill);
  cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out);
}
.chip:hover{ color:var(--on-deep); border-color:var(--color-paper); }
.chip.is-on{ background:var(--color-paper); color:var(--color-blue-deep); border-color:var(--color-paper); font-weight:600; }

/* المشهد مرتبط بالتمرير عبر --p (٠ → ١) — والحالة عند ٠٫٥ مقروءة كاملة */
.mv-scene{ --p:.5; display:grid; gap:var(--space-sm); }
.mv-scene.is-swap .mv-list li,
.mv-scene.is-swap h3{ opacity:0 !important; transition:opacity 120ms linear; }
.mv-side{ padding:var(--space-lg) var(--space-md); border-radius:var(--radius-lg); }
.mv-now{ background:rgba(255,255,255,.05); border:var(--rule) solid var(--on-deep-line); color:var(--on-deep-soft); }
.mv-next{ background:var(--color-paper); color:var(--color-ink); box-shadow:var(--shadow-lift); }
.mv-tag{ display:flex; align-items:center; gap:8px; font-size:var(--text-xs); font-weight:600; margin-block-end:10px; }
.mv-now .mv-tag{ color:var(--on-deep-soft); }
.mv-next .mv-tag{ color:var(--color-blue); }
.sq-dot{ inline-size:10px; block-size:10px; border-radius:2px; flex:none; }
.mv-now .sq-dot{ border:1.5px solid var(--on-deep-soft); }
.mv-next .sq-dot{ background:var(--color-blue); }
.mv-side h3{ font-size:var(--text-lg); margin-block-end:var(--space-md); transition:opacity 220ms linear; }
.mv-now h3{ color:var(--on-deep); }
.mv-list{ display:grid; gap:10px; }
.mv-list li{
  padding:12px 14px; border-radius:var(--radius-sm);
  font-size:var(--text-sm); line-height:1.7;
  transition:opacity 220ms linear;
}
/* الحالية: أوراق مائلة تنزاح نحو «نقلة» كلّما نزلت */
.mv-now .mv-list li{
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.24);
  transform:translateX(calc(var(--p) * 14px * var(--dirx))) rotate(calc(var(--r, 0deg) * (1 - var(--p))));
  opacity:calc(1 - var(--p) * .3);
}
.mv-now .mv-list li:nth-child(1){ --r:-1.8deg; }
.mv-now .mv-list li:nth-child(2){ --r: 1.3deg; }
.mv-now .mv-list li:nth-child(3){ --r:-.9deg; }
/* التالية: بطاقات مرتّبة تصل من جهة «نقلة» وتستقر */
.mv-next .mv-list li{
  position:relative; padding-inline-start:36px;
  background:var(--color-paper-2); color:var(--color-ink); border:1px solid var(--color-line);
  transform:translateX(calc((1 - var(--p)) * -18px * var(--dirx)));
  opacity:calc(.62 + var(--p) * .38);
}
.mv-next .mv-list li::before{
  content:""; position:absolute; inset-inline-start:13px; inset-block-start:50%;
  inline-size:12px; block-size:12px; margin-block-start:-6px; border-radius:3px;
  background:var(--color-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.2 3.2 6.4-6.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:10px; background-position:center; background-repeat:no-repeat;
}

/* البوابة: مسار متقطّع تعبره ثلاث خانات، والعلامة تتقدّم خانة مع التمرير */
.mv-gate{ display:flex; align-items:center; justify-content:center; gap:18px; padding-block:6px; }
.mv-track{
  position:relative; inline-size:2px; block-size:64px; flex:none;
  background:repeating-linear-gradient(to bottom, var(--on-deep-line) 0 6px, transparent 6px 12px);
}
.mv-track i{
  position:absolute; inset-inline-start:50%; margin-inline-start:-4px;
  inline-size:8px; block-size:8px; border-radius:2px;
  inset-block-start:calc(var(--p) * 100% - 4px + var(--o, 0px));
  background:color-mix(in oklab, var(--color-paper) calc(var(--p) * 100%), var(--on-deep-faint));
}
.mv-track i:nth-child(2){ --o:-14px; opacity:.7; }
.mv-track i:nth-child(3){ --o:-28px; opacity:.4; }
.mv-mark{ position:relative; inline-size:48px; block-size:48px; flex:none; }
.mv-mark i{ position:absolute; inset-block-start:0; inset-inline-end:0; inline-size:28px; block-size:28px; border:2px solid var(--on-deep-line); }
.mv-mark b{
  position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:24px; block-size:24px;
  background:var(--color-paper); border-radius:2px;
  transform:translate(calc((1 - var(--p)) * 20px * var(--dirx)), calc((1 - var(--p)) * -20px));
}
.mv-word{ font-size:var(--text-sm); font-weight:700; color:var(--on-deep); }

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

/* ══ أعمالنا ════════════════════════════ */
.work{ padding-block:var(--space-4xl); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filter{
  min-block-size:44px; padding-inline:16px; border-radius:var(--radius-pill);
  border:var(--rule) solid var(--color-line-2); background:transparent;
  font-size:var(--text-sm); font-weight:500; color:var(--color-ink-soft); cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out);
}
.filter:hover{ border-color:var(--color-blue); color:var(--color-blue-ink); }
.filter.is-on{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-paper); }

.cases{ display:grid; gap:clamp(64px, 9vw, 128px); }
.case-row{ display:grid; gap:var(--space-lg); }
.case-media{ position:relative; display:block; }
.case-shot{
  display:block; overflow:hidden;
  border-radius:var(--radius-lg); border:var(--rule) solid var(--color-line-2);
  box-shadow:var(--shadow-shot); background:var(--color-paper-2);
}
.case-shot img{
  inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top;
  transition:transform 800ms var(--ease-out);
}
.case-media:hover .case-shot img{ transform:scale(1.025); }
.case-shot-2{ display:none; }
.case-cat{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--text-xs); font-weight:600; color:var(--color-blue-ink);
  margin-block-end:10px;
}
.case-cat::before{ content:""; inline-size:8px; block-size:8px; background:var(--color-blue); border-radius:2px; }
.case-name{ font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height:1.35; margin-block-end:var(--space-sm); }
.case-name a:hover{ color:var(--color-blue-ink); }
.case-line{ color:var(--color-ink-soft); font-size:var(--text-md); margin-block-end:var(--space-md); }
.case-need{
  padding-block:var(--space-sm); border-block-start:var(--rule) solid var(--color-line);
  font-size:var(--text-sm); color:var(--color-ink-soft);
}
.case-need b, .case-built-k{ display:block; font-size:var(--text-xs); font-weight:600; color:var(--color-ink); margin-block-end:4px; }
.case-built{ display:grid; gap:8px; margin-block:var(--space-2xs) var(--space-md); }
.case-built li{ position:relative; padding-inline-start:20px; font-size:var(--text-sm); }
.case-built li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.66em;
  inline-size:7px; block-size:7px; background:var(--color-blue); border-radius:2px;
}
.case-links{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs) var(--space-lg); }
.link-go{
  display:inline-flex; align-items:center; gap:10px; min-block-size:48px;
  font-weight:600; color:var(--color-blue-ink);
  transition:gap var(--dur-short) var(--ease-out);
}
.link-go:hover{ gap:14px; }
.link-ext{
  display:inline-flex; align-items:center; min-block-size:48px;
  font-size:var(--text-sm); color:var(--color-ink-soft);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--color-line-2);
}
.link-ext:hover{ color:var(--color-ink); text-decoration-color:currentColor; }

.cases-more{ display:grid; gap:var(--space-md); margin-block-start:clamp(64px, 8vw, 112px); }
.cases-more-k{ font-size:var(--text-sm); font-weight:600; color:var(--color-ink-faint); }
.case-card{
  /* عمود مرن: الروابط تنزل لأسفل البطاقة فتتحاذى مهما اختلف طول الوصف */
  display:flex; flex-direction:column; gap:var(--space-sm);
  padding:var(--space-md); border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-lg);
  transition:border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out),
             box-shadow var(--dur-short) var(--ease-out);
}
.case-card:hover{ border-color:var(--color-blue); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.case-card img{
  inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top;
  border-radius:var(--radius-md); border:var(--rule) solid var(--color-line); background:var(--color-paper-2);
}
.case-card h3{ font-size:var(--text-xl); }
.case-card p{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.case-card .case-links{ margin-block-start:auto; }
.is-filtered-out{ display:none !important; }

/* ══ وش نبني ════════════════════════════ */
.services{ padding-block:var(--space-4xl); background:var(--color-paper-2); }
.svc-wrap{ display:grid; gap:var(--space-xl); }
.svc-list{ border-block-start:2px solid var(--color-ink); counter-reset:none; }
.svc-item{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--space-md);
  padding-block:22px; padding-inline-end:var(--space-xs);
  border-block-end:var(--rule) solid var(--color-line-2);
}
.svc-item::before{
  content:""; position:absolute; inset-block:-1px; inset-inline-start:calc(var(--space-sm) * -1);
  inline-size:3px; background:var(--color-blue);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-long) var(--ease-out);
}
.svc-item.is-on::before{ transform:scaleY(1); }
.svc-n{ font-size:var(--text-sm); color:var(--color-ink-faint); padding-block-start:6px; transition:color var(--dur-short) var(--ease-out); }
.svc-item.is-on .svc-n{ color:var(--color-blue); }
.svc-main h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin-block-end:6px; }
.svc-res{ color:var(--color-ink-soft); }
.svc-eg{ margin-block-start:8px; font-size:var(--text-sm); color:var(--color-ink-faint); }
.svc-eg a{ color:var(--color-blue-ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--color-line-2); }
.svc-eg a:hover{ text-decoration-color:currentColor; }
.svc-peek{ display:none; }

/* ══ كيف نشتغل ══════════════════════════ */
.process{ padding-block:var(--space-4xl); }
.steps{ --p:0; position:relative; display:grid; gap:var(--space-xl); }
/* الخط: رمادي ثابت، وفوقه أزرق يمتلئ مع التمرير */
.steps::before, .steps::after{
  content:""; position:absolute; inset-block:8px; inset-inline-start:9px; inline-size:2px;
  background:var(--color-line-2);
}
.steps::after{ background:var(--color-blue); transform-origin:top; transform:scaleY(var(--p)); }
.step{ position:relative; padding-inline-start:40px; --on:clamp(0, calc((var(--p) - var(--t)) * 14), 1); }
.step-mark{
  position:absolute; inset-inline-start:0; inset-block-start:2px; z-index:1;
  inline-size:20px; block-size:20px; border-radius:5px;
  background:var(--color-paper); border:2px solid var(--color-line-2);
}
.step-mark::after{
  content:""; position:absolute; inset:2px; border-radius:2px; background:var(--color-blue);
  opacity:var(--on); transform:scale(calc(.3 + var(--on) * .7));
}
.step-n{ font-size:var(--text-xs); color:var(--color-ink-faint); margin-block-end:8px; }
.step h3{ font-size:clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height:1.35; }
.step-sub{ font-size:var(--text-sm); font-weight:600; color:var(--color-blue-ink); margin-block-end:10px; }
.step-d{ font-size:var(--text-sm); color:var(--color-ink-soft); margin-block-end:12px; }
.out{ font-size:var(--text-sm); color:var(--color-ink-soft); padding-block-start:12px; border-block-start:var(--rule) solid var(--color-line); }
.out b{ color:var(--color-ink); font-weight:600; }

/* ══ ليش نقلة ═══════════════════════════ */
.why{ padding-block:var(--space-4xl); background:var(--color-paper-2); }
.why-grid{
  display:grid; gap:1px;
  background:var(--color-line-2); border:var(--rule) solid var(--color-line-2);
  border-radius:var(--radius-lg); overflow:hidden;
}
.why-item{ display:grid; gap:10px; align-content:start; padding:var(--space-lg) var(--space-md); background:var(--color-paper); }
.why-item h3{ position:relative; padding-inline-start:22px; font-size:var(--text-lg); line-height:1.5; }
.why-item h3::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:10px; block-size:10px; background:var(--color-blue); border-radius:2px;
}
.why-item p{ font-size:var(--text-sm); color:var(--color-ink-soft); }

/* ══ الأسعار ════════════════════════════ */
.pricing{ padding-block:var(--space-4xl); }
.plans{ display:grid; gap:var(--space-md); align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:var(--space-lg) var(--space-md);
  background:var(--color-paper); border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-lg);
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.plan.is-lead{ background:var(--color-blue-deep); border-color:var(--color-blue-deep); color:var(--on-deep); }
.plan.is-lead .plan-for, .plan.is-lead .price-from, .plan.is-lead .cur{ color:var(--on-deep-soft); }
.plan.is-lead ul{ border-block-start-color:var(--on-deep-line); }
.plan.is-lead li{ color:var(--on-deep); }
.plan.is-lead li::before{ background:var(--color-paper); }
.plan-badge{
  position:absolute; inset-block-start:-13px; inset-inline-start:var(--space-md);
  padding:4px 14px; border-radius:var(--radius-pill);
  background:var(--color-blue); color:var(--color-paper);
  font-size:var(--text-xs); font-weight:700;
}
.plan h3{ font-size:var(--text-xl); }
.plan-for{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-block-start:4px; }
.price-from{ inline-size:100%; font-size:var(--text-xs); color:var(--color-ink-faint); }
.price .num{ font-family:var(--font-display); font-size:clamp(2.2rem, 1.8rem + 1.4vw, 2.8rem); font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.price .num-word{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; line-height:1.4; }
.price .cur{ font-size:var(--text-base); color:var(--color-ink-faint); }
.price-note{ font-size:var(--text-xs); color:var(--color-ink-faint); }
.plan ul{ display:grid; gap:12px; padding-block:var(--space-md); border-block-start:var(--rule) solid var(--color-line); }
.plan li{ position:relative; padding-inline-start:22px; font-size:var(--text-sm); color:var(--color-ink-soft); }
.plan li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:8px; block-size:8px; background:var(--color-blue); border-radius:2px;
}
.plan .btn{ margin-block-start:auto; }

/* ══ الأسئلة ════════════════════════════ */
.faq-sec{ padding-block:var(--space-4xl); background:var(--color-paper-2); }
.faq-grid{ display:grid; gap:var(--space-lg); }
.faq{ border-block-start:2px solid var(--color-ink); }
.faq details{ border-block-end:var(--rule) solid var(--color-line-2); }
.faq summary{
  position:relative; list-style:none; cursor:pointer;
  min-block-size:48px; padding-block:var(--space-md); padding-inline-end:44px;
  font-family:var(--font-display); font-weight:600;
  font-size:var(--text-md); line-height:1.6;
  transition:color var(--dur-micro) var(--ease-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute;
  inset-inline-end:8px; inset-block-start:calc(var(--space-md) + .45em);
  inline-size:12px; block-size:12px;
  /* فيزيائي عمدًا: السهم يشير لأسفل ثم لأعلى في كل لغة */
  border-right:2.5px solid var(--color-blue); border-bottom:2.5px solid var(--color-blue);
  transform:rotate(45deg);
  transition:transform var(--dur-short) var(--ease-in-out);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq summary:hover{ color:var(--color-blue-ink); }
.faq-body{ padding-block-end:var(--space-md); }
.faq-body p{ font-size:var(--text-sm); color:var(--color-ink-soft); max-inline-size:62ch; }

/* ══ ابدأ مشروعك ════════════════════════ */
.request{ padding-block:var(--space-4xl); }
/* الجوال: العنوان ← النموذج ← التقدير والتواصل. الشاشة الواسعة: العنوان والجانب يسارًا/يمينًا والنموذج في عمود وحده */
.req-grid{ display:grid; gap:var(--space-xl); align-items:start; grid-template-areas:"head" "form" "aside"; }
.req-head{ grid-area:head; }
.req-show{ grid-area:form; }
.req-aside{ grid-area:aside; }
.req-head h2{ font-size:var(--text-section); margin-block-end:var(--space-sm); }
.req-lede{ color:var(--on-deep-soft); font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.est-card{
  display:grid; gap:10px; justify-items:start;
  padding:var(--space-md); border:var(--rule) solid var(--on-deep-line); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.04);
}
.est-k{ font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--on-deep); }
.est-d{ font-size:var(--text-sm); color:var(--on-deep-soft); }
.est-card .btn{ margin-block-start:6px; }

.cc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-block-start:var(--space-lg); }
.cc-k{ font-size:var(--text-sm); color:var(--on-deep-soft); }
.cc-sel{
  min-block-size:48px; inline-size:auto; min-inline-size:160px;
  padding-inline:18px 40px;
  background:transparent; color:var(--on-deep);
  border:var(--rule) solid var(--on-deep-line); border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:600; font-size:var(--text-base);
  cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-deep-soft) 50%),
                   linear-gradient(135deg,var(--on-deep-soft) 50%,transparent 50%);
  background-position:18px 55%, 23px 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.cc-sel:hover{ border-color:var(--color-paper); }
.cc-sel option{ background:var(--color-blue-deep); color:var(--on-deep); }

.contact{ display:flex; flex-direction:column; margin-block-start:var(--space-md); border-block-start:var(--rule) solid var(--on-deep-line); }
.contact li{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  min-block-size:52px; padding-block:6px; border-block-end:var(--rule) solid var(--on-deep-line);
}
.c-k{ font-size:var(--text-xs); color:var(--on-deep-soft); min-inline-size:84px; }
.c-v{ font-size:var(--text-sm); color:var(--on-deep); }
a.c-v{ display:inline-flex; align-items:center; min-block-size:44px; transition:color var(--dur-micro) var(--ease-out); }
a.c-v:hover{ color:var(--color-blue-tint); text-decoration:underline; }
.c-soon{ color:var(--on-deep-soft); }

/* البطاقات البيضاء على اللوح الأزرق: الأزرار والسطور الصغيرة تعود لأصلها */
.wiz, .spec, .form, .done{
  background:var(--color-paper); color:var(--color-ink);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  padding:var(--space-lg) var(--space-md);
}
.plane-deep :is(.wiz, .spec, .form, .done) .fine{ color:var(--color-ink-faint); }

.form{ display:flex; flex-direction:column; gap:var(--space-md); }
.form-head{ font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); }
.need{ display:flex; flex-wrap:wrap; gap:8px; }
.need-b{
  min-block-size:48px; padding-inline:16px;
  border:1.5px solid var(--color-line-2); border-radius:var(--radius-pill);
  background:var(--color-paper); color:var(--color-ink);
  font-size:var(--text-sm); font-weight:500; cursor:pointer;
  transition:background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out);
}
.need-b:hover{ border-color:var(--color-blue); background:var(--color-blue-tint); }
.need-b[aria-checked="true"]{ background:var(--color-blue); border-color:var(--color-blue); color:var(--color-paper); }
.need.bad .need-b{ border-color:var(--color-alert); }

.f2{ display:grid; gap:var(--space-md); }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field label{ font-size:var(--text-sm); font-weight:600; }
.opt{ color:var(--color-ink-faint); font-weight:400; }

input, select, textarea{
  inline-size:100%; min-block-size:50px; padding:13px 15px;
  font-family:var(--font-body); font-size:var(--text-base);   /* ١٦px — أقل منه يزوّم iOS */
  color:var(--color-ink); background:var(--color-paper-2);
  border:var(--rule) solid transparent; border-radius:var(--radius-sm);
  transition:border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
input[dir="ltr"]{ text-align:left; }
textarea{ resize:vertical; min-block-size:104px; line-height:var(--leading-body); }
input::placeholder, textarea::placeholder{ color:var(--color-ink-faint); }
input:hover, select:hover, textarea:hover{ border-color:var(--color-line-2); }
input:focus, select:focus, textarea:focus{ background:var(--color-paper); border-color:var(--color-blue); }
select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--color-ink-soft) 50%),
                   linear-gradient(135deg, var(--color-ink-soft) 50%, transparent 50%);
  background-position:16px 55%, 21px 55%;           /* فيزيائي: يُقلب للإنجليزية أسفل */
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-inline-end:38px;
}
.more summary{
  list-style:none; cursor:pointer; min-block-size:44px; display:flex; align-items:center; gap:6px;
  font-size:var(--text-sm); font-weight:600; color:var(--color-blue-ink);
  text-decoration:underline; text-underline-offset:4px;
}
.more summary::-webkit-details-marker{ display:none; }
.more[open] summary{ margin-block-end:var(--space-sm); }

.err{ font-size:var(--text-xs); color:var(--color-alert); }
.err:empty{ display:none; }
.field.bad input, .field.bad select, .field.bad textarea{ border-color:var(--color-alert); background:#FDF3F2; }
.form-err{ text-align:center; font-size:var(--text-sm); }
.hp{ position:absolute; inset-inline-start:-10000px; inline-size:1px; block-size:1px; overflow:hidden; }

/* ── محدِّد التقدير ── */
.wiz{ display:flex; flex-direction:column; gap:var(--space-md); }
.wiz-top{ display:flex; align-items:center; gap:var(--space-md); }
.wiz-count{ font-size:var(--text-xs); color:var(--color-ink-faint); flex:none; }
.wiz-bar{ flex:1; block-size:4px; background:var(--color-paper-2); border-radius:2px; overflow:hidden; }
.wiz-bar span{ display:block; block-size:100%; inline-size:25%; background:var(--color-blue);
               transition:inline-size var(--dur-long) var(--ease-out); }
.wstep{ display:none; }
.wstep.is-on{ display:block; animation:rowIn var(--dur-long) var(--ease-out); }
.wq{ font-size:var(--text-lg); }
.wq-2{ margin-block:var(--space-lg) var(--space-md); }
.wh{ font-size:var(--text-sm); color:var(--color-ink-soft); margin-block:4px var(--space-md); }
.picks{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.pick{
  position:relative;
  display:flex; flex-direction:column; gap:3px;
  min-block-size:60px; padding-block:12px; padding-inline:14px 44px;
  text-align:start;
  background:var(--color-paper-2);
  border:2px solid transparent; border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  color:var(--color-ink); cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.pick small{ font-weight:400; font-size:var(--text-xs); color:var(--color-ink-soft); line-height:1.6; }
.pick:hover{ background:var(--color-blue-tint); }
.pick[aria-checked="true"]{ background:var(--color-blue-tint); border-color:var(--color-blue); }
.pick::after{
  content:""; position:absolute;
  inset-inline-end:14px; inset-block-start:50%;
  inline-size:20px; block-size:20px; margin-block-start:-10px;
  border:2px solid var(--color-line-2); border-radius:5px;
  transition:background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.picks:not(.picks-multi) .pick::after{ border-radius:50%; }
.pick[aria-checked="true"]::after{
  background:var(--color-blue); border-color:var(--color-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.2 3.2 6.4-6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:16px 16px; background-position:center; background-repeat:no-repeat;
}
.wiz-nav{ display:flex; gap:10px; }
.wiz-nav .btn{ flex:1; }
.wiz-skip{
  min-block-size:44px; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--color-blue-ink); text-decoration:underline;
}
.wiz-skip:hover{ color:var(--color-ink); }

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

/* ── النجاح ── */
.done{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:var(--space-xl) var(--space-md); text-align:center;
  animation:rowIn var(--dur-long) var(--ease-out);
}
.done-tick{ position:relative; inline-size:56px; block-size:56px; flex:none; background:var(--color-blue); border-radius:50%; }
/* علامة الصح لا تتبع اتجاه اللغة — فيزيائي عمدًا */
.done-tick::after{
  content:""; position:absolute; top:15px; left:23px; width:10px; height:19px;
  border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg);
}
.done h3{ font-size:var(--text-xl); }
.done > p{ font-size:var(--text-sm); color:var(--color-ink-soft); max-inline-size:46ch; }
.done a[href="#track"]{ color:var(--color-blue-ink); text-decoration:underline; }
#doneNote.is-warn{ color:var(--color-alert); font-weight:600; }
.ref{ display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--color-paper-2); border-radius:var(--radius-sm); }
.ref .mono{ font-size:var(--text-md); font-weight:500; }
.copy{
  min-block-size:44px; padding-inline:14px;
  background:none; border:var(--rule) solid var(--color-line-2); border-radius:var(--radius-sm);
  color:var(--color-ink-soft); font-family:var(--font-body); font-size:var(--text-xs); cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.copy:hover{ color:var(--color-blue-ink); border-color:var(--color-blue); }

/* أزرار البطاقات البيضاء: أزرق ممتلئ لا أبيض على أبيض */
.plane-deep :is(.wiz, .spec, .form, .done) .btn{ background:var(--color-blue); color:var(--color-paper); border-color:var(--color-blue); }
.plane-deep :is(.wiz, .spec, .form, .done) .btn:hover{ background:var(--color-blue-ink); border-color:var(--color-blue-ink); }
.plane-deep :is(.wiz, .spec, .form, .done) .btn-line{ background:transparent; color:var(--color-ink); border-color:var(--color-line-2); }
.plane-deep :is(.wiz, .spec, .form, .done) .btn-line:hover{ background:var(--color-blue-tint); border-color:var(--color-blue); color:var(--color-blue-ink); }
.plane-deep :is(.wiz, .spec, .form, .done) .btn[data-state="loading"]{ color:transparent; }

@keyframes rowIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

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

/* ══ التذييل — بيان ═════════════════════ */
.foot{ background:var(--color-foot); color:var(--color-paper); padding-block:var(--space-3xl) var(--space-lg); }
.foot-top{ display:grid; gap:var(--space-lg); align-items:end; padding-block-end:var(--space-xl); border-block-end:var(--rule) solid rgba(255,255,255,.14); }
.foot-say{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem, 1.2rem + 3vw, 3.4rem); line-height:1.45; max-inline-size:20ch; }
.foot .hl{ color:var(--color-foot-hl); }
.foot-cols{ display:grid; gap:var(--space-lg); padding-block:var(--space-xl); }
.foot .mark i{ border-color:rgba(255,255,255,.25); }
.foot .mark b{ background:var(--color-paper); }
.foot-brand p{ margin-block-start:10px; font-size:var(--text-sm); color:var(--color-foot-soft); max-inline-size:36ch; }
.foot-k{ font-size:var(--text-xs); color:var(--color-foot-soft); margin-block-end:4px; }
.foot-nav{ display:grid; align-content:start; }
.foot-nav a, .foot-nav span{ display:flex; align-items:center; min-block-size:44px; font-size:var(--text-sm); color:var(--color-foot-text); }
.foot-nav a:hover{ color:var(--color-paper); }
.foot-owned{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-sm) var(--space-md);
  padding-block:var(--space-md); border-block:var(--rule) solid rgba(255,255,255,.14);
  font-size:var(--text-sm); color:var(--color-foot-text); line-height:1.8;
}
.foot-owned p{ margin:0; max-inline-size:70ch; }
.foot-owned-k{ font-size:var(--text-xs); color:var(--color-foot-soft); }
.foot-owned a{ color:var(--color-foot-hl); text-decoration:underline; text-underline-offset:3px; }
.foot-legal{ padding-block-start:var(--space-md); font-size:var(--text-xs); color:var(--color-foot-soft); }

/* ══ شريط الإجراء السفلي — منطقة الإبهام ══ */
.mbar{
  position:fixed; z-index:55; inset-inline:0; inset-block-end:0;
  display:flex; align-items:center; gap:10px;
  padding:12px var(--gutter); padding-block-end:calc(12px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in oklab, var(--color-paper) 94%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-block-start:var(--rule) solid var(--color-line);
  transform:translateY(100%);
  transition:transform var(--dur-long) var(--ease-out);
}
.mbar.is-up{ transform:none; }
.mbar .btn{ flex:1; }
.mbar-wa{
  flex:none; inline-size:52px; block-size:52px; display:grid; place-items:center;
  background:var(--color-paper-2); border:2px solid var(--color-line-2); border-radius:var(--radius-sm);
}
.mbar-ico{ inline-size:20px; block-size:20px; border:2.5px solid var(--color-blue-ink); border-radius:50% 50% 50% 4px; }
body{ padding-block-end:calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ══ صفحات المشاريع ═════════════════════ */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--color-ink-faint); margin-block-end:var(--space-md); }
.crumbs a{ display:inline-flex; align-items:center; min-block-size:44px; color:var(--color-ink-soft); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--color-line-2); }
.crumbs a:hover{ color:var(--color-blue-ink); }
.cs-hero{ padding-block:clamp(24px, 4vw, 56px) 0; }
.cs-hero h1{ font-size:clamp(2.4rem, 1.4rem + 4vw, 4.5rem); line-height:var(--leading-display); margin-block-end:var(--space-sm); }
.cs-line{ font-size:clamp(1.0625rem, 1rem + .35vw, 1.3rem); color:var(--color-ink-soft); max-inline-size:56ch; margin-block-end:var(--space-md); }
.cs-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:var(--space-lg); }
.cs-meta li{ padding:5px 12px; border-radius:var(--radius-pill); background:var(--color-paper-2); font-size:var(--text-xs); color:var(--color-ink-soft); }
.cs-fig{ margin-block-start:var(--space-xl); }
.cs-cap{ margin-block-start:10px; font-size:var(--text-sm); color:var(--color-ink-soft); }
.cs-shot{ border-radius:var(--radius-lg); overflow:hidden; border:var(--rule) solid var(--color-line-2); box-shadow:var(--shadow-shot); background:var(--color-paper-2); }
.cs-shot img{ inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top; }
.cs-sec{ padding-block:var(--space-3xl); border-block-end:var(--rule) solid var(--color-line); }
.cs-grid{ display:grid; gap:var(--space-md); }
.cs-grid h2{ font-size:var(--text-xl); }
.cs-text{ font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem); color:var(--color-ink-soft); max-inline-size:62ch; }
.cs-built{ display:grid; gap:0; border-block-start:2px solid var(--color-ink); }
.cs-built li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-md); padding-block:18px; border-block-end:var(--rule) solid var(--color-line-2); }
.cs-built .mono{ color:var(--color-blue); font-size:var(--text-sm); padding-block-start:4px; }
.cs-shots-h{ font-size:var(--text-xl); margin-block-end:var(--space-lg); }
.cs-shots{ display:grid; gap:var(--space-lg); }
.cs-shots figure{ display:grid; gap:10px; }
.cs-shots img{ inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top; border-radius:var(--radius-md); border:var(--rule) solid var(--color-line-2); box-shadow:var(--shadow-card); background:var(--color-paper-2); }
.cs-shots figcaption{ font-size:var(--text-sm); color:var(--color-ink-soft); }
.cs-outcome{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); line-height:1.6; max-inline-size:32ch; }
.cs-cta{ padding-block:var(--space-3xl); }
.cs-cta-in{ display:grid; gap:var(--space-lg); align-items:end; }
.cs-cta h2{ font-size:var(--text-section); }
.cs-cta p{ color:var(--on-deep-soft); margin-block-start:var(--space-xs); }
.cs-next{ padding-block:var(--space-2xl); }
.cs-next a{ display:grid; gap:6px; }
.cs-next-k{ font-size:var(--text-sm); color:var(--color-ink-faint); }
.cs-next-name{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:700; font-size:var(--text-section); line-height:1.4; transition:color var(--dur-micro) var(--ease-out); }
.cs-next a:hover .cs-next-name{ color:var(--color-blue-ink); }

/* ══ الحركة — كشف مرّة واحدة لكل عنصر ═══
   بلا جافاسكربت: كل شيء ظاهر. مع جافاسكربت: يُخفى ثم يُكشف عند الظهور،
   وmotion.js يكشف الكل بعد ثلاث ثوانٍ مهما صار — لا محتوى مخفي أبدًا. */
html.js [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
html.js [data-reveal].is-in{ opacity:1; transform:none; }
html.js .case-row[data-reveal] .case-shot{ transform:scale(.95); transition:transform 1s var(--ease-out); }
html.js .case-row[data-reveal].is-in .case-shot{ transform:none; }

/* ══ الشاشات الأكبر ═════════════════════ */
@media (min-width: 600px){
  .hero .row-cta > .btn, .cs-hero .row-cta > .btn{ flex:0 0 auto; }
  .f2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .stack{ aspect-ratio:1.35 / 1; }
}

@media (min-width: 768px){
  .head-in{ block-size:var(--head-h); }
  .head.is-stuck .head-in{ block-size:64px; }
  .head-cta{ display:inline-flex; }
  .cases-more{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cases-more-k{ grid-column:1 / -1; }
  .why-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .foot-cols{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .cs-shots{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cs-shots figure:first-child:nth-last-child(odd){ grid-column:1 / -1; }
  .mv-side{ padding:var(--space-lg); }
  .plan, .why-item{ padding:var(--space-lg); }
  .wiz, .spec, .form{ padding:var(--space-lg); }
}

@media (min-width: 900px){
  .mv-scene{ grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr); gap:0; align-items:stretch; }
  .mv-gate{ flex-direction:column; gap:14px; padding-block:0; }
  .mv-track{ order:2; inline-size:100%; block-size:2px;
             background:repeating-linear-gradient(to left, var(--on-deep-line) 0 6px, transparent 6px 12px); }
  .mv-track i{ inset-block-start:50%; margin-block-start:-4px; margin-inline-start:0;
               inset-inline-start:calc(var(--p) * 100% - 4px + var(--o, 0px)); }
  .mv-mark{ order:1; }
  .mv-word{ order:3; }
  .mv-side h3{ min-block-size:2.9em; }
}

@media (min-width: 1024px){
  .cases-more{ grid-template-columns:repeat(3, minmax(0, 1fr)); }   /* غرس وتيلة ومناسباتي في صف واحد */
  .nav{ display:flex; align-items:center; gap:clamp(18px, 2.2vw, 30px); margin-inline-start:auto; position:relative; }
  .head-act{ margin-inline-start:0; }
  .burger{ display:none; }
  .mbar{ display:none; }
  body{ padding-block-end:0; }

  .hero-body{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; gap:clamp(40px, 5vw, 88px); }
  .stack{ aspect-ratio:1.22 / 1; }
  .stack-item.s1{ display:block; inline-size:62%; inset-block-start:0; inset-inline-end:0; inset-inline-start:auto; z-index:1; }
  .stack-item.s2{ inline-size:80%; inset-block-start:20%; inset-inline-start:0; }
  .stack-item.s3{ inline-size:44%; inset-block-end:0; inset-inline-end:4%; }

  .sec-head-row{ grid-template-columns:minmax(0, 1fr) auto; align-items:end; }
  .sec-head-row > div{ max-inline-size:48rem; }

  .case-row{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:center; gap:clamp(40px, 5vw, 80px); }
  .case-row:nth-child(even) .case-media{ order:2; }
  .case-shot-2{
    display:block; position:absolute; inline-size:40%; inset-block-end:-7%; inset-inline-end:-3%;
    overflow:hidden; border-radius:var(--radius-md); border:var(--rule) solid var(--color-line-2);
    box-shadow:var(--shadow-lift); background:var(--color-paper-2);
  }
  .case-row:nth-child(even) .case-shot-2{ inset-inline-end:auto; inset-inline-start:-3%; }
  .case-shot-2 img{ inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top; }

  .svc-wrap{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:start; gap:clamp(40px, 5vw, 80px); }
  .svc-item{ cursor:default; transition:background var(--dur-short) var(--ease-out); }
  .svc-peek{
    display:block; position:sticky; inset-block-start:calc(var(--head-h) + 32px);
    overflow:hidden; border-radius:var(--radius-lg); border:var(--rule) solid var(--color-line-2);
    box-shadow:var(--shadow-shot); background:var(--color-paper);
  }
  .svc-peek img{ inline-size:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top;
                 transition:opacity 240ms var(--ease-out), transform 600ms var(--ease-out); }
  .svc-peek.is-swap img{ opacity:0; transform:scale(1.02); }

  .steps{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-lg); padding-block-start:44px; }
  .steps::before, .steps::after{ inset-block:auto; inset-block-start:9px; inset-inline:0; inline-size:auto; block-size:2px; }
  .steps::after{ transform-origin:var(--origin) center; transform:scaleX(var(--p)); }
  .step{ padding-inline-start:0; }
  .step-mark{ inset-block-start:-44px; }

  .why-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .plans{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .faq-grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(40px, 5vw, 80px); align-items:start; }
  .req-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-areas:"head form" "aside form"; grid-template-rows:auto 1fr; gap:0 clamp(40px, 5vw, 80px); }
  .req-head{ margin-block-end:var(--space-lg); }
  .foot-top{ grid-template-columns:minmax(0, 1fr) auto; }
  .cs-grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(40px, 5vw, 80px); }
  .cs-cta-in{ grid-template-columns:minmax(0, 1fr) auto; }
}

@media (max-width: 1023px){
  /* أهداف اللمس ٤٨ على الشاشات اللمسية */
  .btn{ min-block-size:52px; }
  .btn-sm{ min-block-size:48px; }
}

/* ══ حركة مخفّضة — إلزامية ══════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important;
    transition-duration:150ms !important; transition-delay:0ms !important;
  }
  html.js [data-reveal]{ opacity:1; transform:none; }
  html.js .case-row[data-reveal] .case-shot{ transform:none; }
  [data-progress]{ --p:1 !important; }
  .stack-item{ transform:none !important; }
  .btn[data-state="loading"] .btn-spin{ animation:spin 1.4s linear infinite !important; }
}

/* ══ الإنجليزية — ما لا تقلبه الخصائص المنطقية ══ */
html[lang="en"] .hero-title{ letter-spacing:-.03em; text-wrap:balance; }
html[lang="en"] h2, html[lang="en"] .foot-say, html[lang="en"] .cs-next-name{ letter-spacing:-.02em; }
html[lang="en"] .sec-head h2{ text-wrap:balance; }
html[lang="en"] .foot-say, html[lang="en"] .cs-outcome{ line-height:1.2; }
html[lang="en"] .foot-say{ max-inline-size:28ch; text-wrap:balance; }
html[lang="en"] .faq summary{ line-height:1.45; }
html[dir="ltr"] .hero-grid-bg{
  -webkit-mask-image:radial-gradient(70% 60% at 78% 70%, #000 10%, transparent 72%);
          mask-image:radial-gradient(70% 60% at 78% 70%, #000 10%, transparent 72%);
}
html[dir="ltr"] select{ background-position:calc(100% - 21px) 55%, calc(100% - 16px) 55%; }
html[dir="ltr"] .cc-sel{ background-position:calc(100% - 23px) 55%, calc(100% - 18px) 55%; }