/* =============================================================================
   deep-polish.css — الطبقة السادسة: تكوين أوضح وحركة هادئة
   -----------------------------------------------------------------------------
   تُرجَّح على deep → modern → refine → anim (→ product). لا تعدّل محتوى ولا
   ألواناً يُقرأ عليها نصّ؛ تضيف تكويناً (بطل أوسع بإطار جهاز وشارات حقائق،
   شبكة «بنتو» للأنظمة) وحركةً على transform/opacity وحدهما.

   حذف سطرها من الصفحات يُعيد الموقع كما كان — قاعدة الطبقات نفسها.
   ============================================================================= */

/* ---------- ترويسة زجاجية عند التمرير ----------
   ‎.stuck‎ يضعها deep-motion.js بعد 12 بكسل. الشفافية مع التمويه تُبقي النصّ
   تحتها مقروءاً وتُظهر أن الصفحة تمرّ خلفها. */
.site-head.stuck {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

/* ---------- البطل ---------- */
/* داخل الاستعلام: deep.css يطويها عموداً واحداً تحت 58rem، وقاعدةٌ هنا بلا شرط
   كانت تُلغي الطيّ فتدفع اللقطة خارج شاشة الهاتف */
@media (min-width: 58.01rem) { .hero .wrap { grid-template-columns: .95fr 1.05fr; } }
.hero h1 { font-size: clamp(2.05rem, 4.2vw, 3.3rem); line-height: 1.2; }

.hero-stage { position: relative; margin: 0; }
/* توهّج خلف اللقطة يربطها بلون الشعار بدل أن تطفو على الكحلي */
.hero-stage::before {
  content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1;
  background: radial-gradient(closest-side, rgba(41,127,246,.45), transparent);
  filter: blur(28px); pointer-events: none;
}

/* إطار جهاز: يقول «هذا برنامج يُثبَّت» قبل أن تُقرأ كلمة */
.hero-shot.framed {
  padding: 10px 10px 0; border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, #2B3744, #18212A);
  border: 1px solid rgba(255,255,255,.08);
}
.hero-shot.framed img { border-radius: 7px 7px 0 0; }
.hero-shot.framed::after {
  content: ""; display: block; height: 12px; margin: 0 -24px;
  background: linear-gradient(180deg, #C9CED3, #8E979F); border-radius: 0 0 14px 14px;
}

/* شارات حقائق حول اللقطة — كل شارة حقيقة عن البرنامج لا شعار */
.hero-badge {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem .55rem .7rem; border-radius: 12px;
  background: rgba(255,255,255,.94); color: #1B2733;
  font-size: .8rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 14px 34px -14px rgba(3,14,28,.55), 0 0 0 1px rgba(255,255,255,.6);
  animation: badge-drift 7s ease-in-out infinite;
}
.hero-badge .ic {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #3D89E8, #0F5CBF);
}
.hero-badge .ic.ok { background: linear-gradient(140deg, #3FB37A, #23794F); }
.hero-badge .ic svg { width: 1rem; height: 1rem; }
.hero-badge small { display: block; font-size: .7rem; font-weight: 400; color: #55636F; }
.hero-badge.b1 { inset-block-start: -18px; inset-inline-start: -14px; }
.hero-badge.b2 { inset-block-end: 22px; inset-inline-end: -22px; animation-delay: -2.3s; }
.hero-badge.b3 { inset-block-start: 42%; inset-inline-start: -34px; animation-delay: -4.6s; }
@keyframes badge-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
[data-theme="dark"] .hero-badge { background: rgba(23,32,42,.94); color: #E6EDF3; box-shadow: 0 14px 34px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
[data-theme="dark"] .hero-badge small { color: #9AA8B5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-badge { background: rgba(23,32,42,.94); color: #E6EDF3; }
  :root:not([data-theme="light"]) .hero-badge small { color: #9AA8B5; }
}

/* سطر ثقة تحت الأزرار */
.hero-trust { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 1.3rem 0 0; padding: 0; list-style: none; font-size: .84rem; color: #9FB4C6; }
.hero-trust li { display: flex; align-items: center; gap: .4rem; }
.hero-trust li::before {
  content: ""; width: .95rem; height: .95rem; border-radius: 50%; flex: none;
  background: rgba(63,179,122,.18) center / .62rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%236FD3A0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 58rem) {
  .hero-stage { order: -1; margin-block-start: 1rem; }
  .hero-badge { font-size: .74rem; padding: .45rem .65rem .45rem .55rem; }
  .hero-badge .ic { width: 1.5rem; height: 1.5rem; }
  .hero-badge.b1 { inset-inline-start: 4px; }
  .hero-badge.b2 { inset-inline-end: 4px; inset-block-end: 6px; }
  .hero-badge.b3 { display: none; }
}

/* ---------- الأنظمة: شبكة بنتو ----------
   خمس بطاقات متساوية كانت تُقرأ قائمةً واحدة. نقاط البيع — المنتج الذي يُنزَّل
   ويُجرَّب الآن — تأخذ عمودها كاملاً ولقطةً منه؛ البقية حولها. */
@media (min-width: 62rem) {
  .index-list { grid-template-columns: 1.15fr 1fr 1fr; }
  .index-item:first-child {
    grid-row: span 2; align-content: start; padding: 2rem;
    background: linear-gradient(165deg, var(--brand-050), var(--surface) 55%);
  }
  .index-item:first-child h3 { font-size: 1.3rem; }
  .index-item:first-child::after {
    /* deep.css يجعل ‎::after‎ خطّاً مطلقاً بعرض 0 — نُعيده عنصراً في الشبكة */
    display: block; content: ""; grid-column: 1 / -1; margin-top: 1.1rem;
    position: static; width: auto; height: auto;
    aspect-ratio: 16 / 9; border-radius: 12px;
    background: url("../images/POS/sales-760.jpg") center / cover no-repeat;
    box-shadow: 0 18px 36px -22px rgba(22,48,63,.55), 0 0 0 1px var(--rule);
    transition: transform .4s var(--ease);
  }
  .index-item:first-child:hover::after { transform: translateY(-3px) scale(1.01); }
}

/* ---------- بطاقات التجربة: لون لكل نظام ---------- */
.try-grid > .try:nth-child(1) { --k: #0F5CBF; }
.try-grid > .try:nth-child(2) { --k: #23794F; }
.try-grid > .try:nth-child(3) { --k: #7A5B1E; }
.try .kind {
  color: var(--k, var(--brand));
  background: color-mix(in srgb, var(--k, var(--brand)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--k, var(--brand)) 22%, transparent);
}
.try { box-shadow: inset 0 3px 0 var(--k, var(--brand)), var(--shadow-1); }

/* ---------- خطّ ضوء أعلى التذييل ---------- */
.site-foot { position: relative; }
.site-foot::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,180,240,.55), transparent);
}

/* ---------- الحركة باحترام ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-badge, .index-item:first-child::after { animation: none !important; transition: none !important; }
}

/* الشعار دائريّ. الصورة مربّعة بخلفية رمادية فاتحة ودائرة بيضاء في وسطها؛
   على ترويسة بيضاء تختفي الدائرة البيضاء فيبقى الشكل مربّعاً في العين.
   فنقصّ الصورة نفسها دائرةً ونرسم حولها حلقة وظلّاً ليظهر الشكل. */
.brand img, .about-logo {
  width: 44px; height: 44px; object-fit: cover; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px var(--rule, #dfe5ea), 0 4px 12px -4px rgba(11, 26, 38, .35);
}
.about-logo { width: min(100%, 22rem); height: auto; aspect-ratio: 1; display: block; margin-inline: auto; }

/* زرّ حجز الديمو في الترويسة: الفعل الأوّل لكل زائر */
.site-nav a.nav-cta {
  background: var(--brand); color: #fff; border-radius: 8px;
  padding: .32rem .85rem; font-weight: 500; margin-inline-start: .35rem; white-space: nowrap;
}
.site-nav a.nav-cta:hover { background: var(--brand-2, var(--brand)); color: #fff; }
[data-theme="dark"] .site-nav a.nav-cta { color: #10161C; }
.site-nav a.nav-cta::after { content: none; }
@media (max-width: 56rem) {
  .site-nav a.nav-cta { display: inline-block; margin: .4rem 0; text-align: center; }
}

/* أربعة أنظمة للتجربة: صفّ واحد على الشاشة العريضة */
.try-grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* =============================================================================
   عرض الفيديو — إطار داكن كشاشة عرض، زرّ تشغيل كبير، وتبديل لغة العرض
   ============================================================================= */
.video-show {
  margin: 0 0 1.5rem; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #0F2739 0%, #0A1621 100%);
  box-shadow: 0 30px 60px -36px rgba(11, 26, 38, .7);
}
.video-head {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
}
.video-head b { display: block; color: #fff; font-size: 1.05rem; font-weight: 600; }
.video-head small { display: block; color: rgba(255, 255, 255, .62); font-size: .85rem; margin-top: .15rem; }
.video-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.video-lang button {
  border: 0; background: transparent; color: rgba(255, 255, 255, .75); cursor: pointer;
  padding: .38rem .95rem; border-radius: 999px; font: inherit; font-size: .88rem;
  transition: background .2s ease, color .2s ease;
}
.video-lang button[aria-pressed="true"] { background: #fff; color: #0F2739; font-weight: 600; }
.video-lang button:hover:not([aria-pressed="true"]) { color: #fff; }
.video-frame { position: relative; background: #000; }
/* 848×478 مقاس العرض العربي قبل التحميل؛ deep.js يضبطه على مقاس الملف المحمَّل */
.video-frame video { display: block; width: 100%; aspect-ratio: 848 / 478; object-fit: contain; background: #000; }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--brand, #0F5CBF); color: #fff;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .18), 0 18px 40px -12px rgba(0, 0, 0, .6);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* المثلّث يشير يميناً في الاتجاهين، فإزاحته البصرية فيزيائية لا منطقية */
.video-play svg { width: 34px; height: 34px; translate: 3px 0; }
.video-play:hover { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(255, 255, 255, .22), 0 18px 40px -12px rgba(0, 0, 0, .6); }
.video-show.playing .video-play { display: none; }
@media (max-width: 40rem) {
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 26px; height: 26px; }
}

/* فيديو الرئيسية في البطل: يظهر أوّل ما تُفتح الصفحة، فوق خلفية البطل الداكنة */
.hero-stage .video-show {
  margin: 0; position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -30px rgba(0, 0, 0, .75);
  animation: riseIn .9s var(--ease, ease) .3s both;
}
.hero-stage .video-head { padding: .75rem 1rem; }
.hero-stage .video-head b { font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { .hero-stage .video-show { animation: none; } }

/* زرّ تشغيل الصوت */
.video-sound {
  position: absolute; inset-block-end: 1rem; inset-inline-end: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(10, 22, 33, .82); color: #fff; font: inherit; font-size: .9rem;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6);
  transition: background .2s ease, transform .2s ease;
}
.video-sound svg { width: 20px; height: 20px; }
.video-sound:hover { background: var(--brand, #0F5CBF); transform: translateY(-1px); }
.video-sound[hidden] { display: none; }

/* تكبير اللقطات: نقرة أو تركيز + Enter يفتح الصورة بحجمها فوق الصفحة */
.shot img { cursor: zoom-in; }
.shot img:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.zoom {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; gap: .75rem;
  grid-template-rows: 1fr auto; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 14, 22, .92);
  cursor: zoom-out; animation: zoomIn .2s ease both;
}
.zoom[hidden] { display: none; }
.zoom img {
  max-width: 100%; max-height: 100%; min-height: 0; border-radius: 12px; background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); cursor: default;
}
.zoom p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.zoom-close {
  position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.6rem; line-height: 1;
}
.zoom-close:hover { background: rgba(255, 255, 255, .26); }
.zoom-open, .zoom-open body { overflow: hidden; }
@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zoom { animation: none; } }

/* =============================================================================
   البطل المعروض: نصّ في الوسط، ثم فيديو الأرشفة كبيراً بجانب لقطة نقاط البيع
   — الاثنان ظاهران أوّل ما تُفتح الصفحة.
   ============================================================================= */
.hero-show { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 2.75rem); padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.hero-show .hero-copy { display: block; text-align: center; }
.hero-show .hero-copy .lead { max-width: 68ch; margin-inline: auto; }
.hero-show .hero-actions, .hero-show .hero-trust { justify-content: center; }
.hero-show .hero-actions { margin-top: 1.4rem; }
@media (min-width: 58.01rem) {
  .hero-show h1 { font-size: clamp(2rem, 3.3vw, 2.85rem); }
  .hero-show h1 br { display: none; }   /* سطر واحد على الشاشة العريضة يُبقي العرض في أوّل الشاشة */
}
.hero-show .showcase {
  max-width: 1320px; width: 100%;
  display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center;
}
.show-pos .hero-badge.b2 { inset-block-end: 3.6rem; }
.show-cap { margin: .9rem 0 0; text-align: center; font-size: .88rem; color: #9FB4C6; }
.show-cap b { display: block; color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: .1rem; }
/* الهاتف: الفيديو أوّلاً، ثم النصّ، ثم لقطة نقاط البيع */
@media (max-width: 58rem) {
  .hero-show .showcase { display: contents; }
  .hero-show .show-video { order: -1; margin: .5rem 1.25rem 0; }
  .hero-show .show-pos { order: 1; margin: 0 1.25rem; }
}
/* على الشاشة العريضة: نضغط ما فوق العرض ليظهر الفيديو أكثر أوّل ما تُفتح الصفحة */
@media (min-width: 58.01rem) {
  .hero-show { gap: 1.6rem; padding-block-start: 1.75rem; }
  .hero-show .hero-copy .lead { margin-top: .9rem !important; }
  .hero-show .hero-trust { display: none; }   /* «شركة برمجيات أردنية» فوق العنوان تقولها */
  .hero-show .video-head { padding: .55rem 1rem; }
  .hero-show .video-head small { display: none; }
}
/* شارة التجربة في الزاوية المقابلة لزرّ الواتساب العائم */
.show-pos .hero-badge.b2 { inset-inline-end: auto; inset-inline-start: -14px; }
@media (max-width: 58rem) { .show-pos .hero-badge.b2 { inset-inline-start: 4px; } }

/* =============================================================================
   البطل في الشاشة الأولى كاملاً (الشاشة العريضة):
   يمين: الشارة والعنوان والأزرار، وتحتها لقطة نقاط البيع
   يسار: فيديو الأرشفة بطول البطل كلّه — لا شيء يحتاج تمريراً
   ============================================================================= */
@media (min-width: 58.01rem) {
  .hero-show {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    grid-template-areas: "copy video" "pos video";
    gap: 1.25rem clamp(1.5rem, 3vw, 2.75rem);
    padding-block: clamp(1rem, 2.6vh, 2rem);
    padding-inline: max(1.25rem, calc((100% - 1320px) / 2));
    min-height: calc(100vh - 77px); min-height: calc(100svh - 77px);
    align-content: center;
  }
  .hero-show .showcase { display: contents; }
  .hero-show .hero-copy { grid-area: copy; max-width: none; padding: 0; margin: 0; text-align: start; align-self: end; }
  .hero-show .show-video { grid-area: video; align-self: center; }
  .hero-show .show-pos { grid-area: pos; align-self: start; width: 88%; }
  .hero-show h1 { font-size: clamp(1.8rem, 2.5vw, 2.45rem); margin-top: .7rem !important; }
  .hero-show h1 br { display: inline; }
  .hero-show .hero-copy .lead { max-width: none; margin-inline: 0; font-size: .95rem; line-height: 1.75; }
  .hero-show .hero-actions { justify-content: flex-start; margin-top: 1.1rem; }
  .show-cap { display: none; }
  .show-pos .hero-badge { font-size: .74rem; padding: .4rem .6rem .4rem .5rem; }
  .show-pos .hero-badge .ic { width: 1.45rem; height: 1.45rem; }
  .show-pos .hero-badge.b1 { inset-block-start: -14px; inset-inline-start: auto; inset-inline-end: -10px; }
  .show-pos .hero-badge.b2 { inset-block-end: -12px; inset-inline-start: -10px; }
}
/* شاشات قصيرة (لابتوب 768 داخل المتصفّح ≈ 650): نصّ أقصر لتبقى اللقطة في الشاشة */
@media (min-width: 58.01rem) and (max-height: 700px) {
  .hero-show .hero-copy .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-show .show-pos { width: 78%; }
}
/* زرّ الصوت في الزاوية المقابلة لزرّ الواتساب العائم (ذاك على inline-end) */
.video-sound { inset-inline-end: auto; inset-inline-start: 1rem; }
@media (min-width: 58.01rem) { .hero-show .show-pos { justify-self: center; } }
/* شاشات كبيرة: عرضٌ أوسع ليكبر الفيديو بدل فراغٍ حوله */
@media (min-width: 90rem) { .hero-show { padding-inline: max(1.25rem, calc((100% - 1500px) / 2)); } }

/* الترويسة: حرف D وحده — الشعار الدائري الكامل لا يُقرأ بقطر 44px */
.brand img.mark { object-fit: contain; padding: 6px; }