/* =========================================================================
   هيرو الصفحة الرئيسية - لوحة داكنة
   =========================================================================
   البنية مقتبسة من مرجع makers/pk الذي أشار إليه العميل، ومطبَّقة على
   هوية SEVENTH: تدرّج حبري، هالتان متقابلتان تنجرفان ببطء، حلقات إشارة
   تتمدّد من مركز البطاقة، ومدارات تحمل عُقدًا ضوئية.

   أسماء الأصناف مطابقة لما يتوقعه hero.js - العدّ التصاعدي والزر
   المغناطيسي وكشف الأسطر والبارالاكس تعمل دون تعديل.
   ========================================================================= */

.hero{
  position:relative;      /* بدونها تُثبَّت .hero-bg على الصفحة وتغطّي القائمة */
  isolation:isolate;
  overflow:hidden;
  padding-block:76px 0;
  margin-block-start:-1px;
  color:var(--bone);
  background:radial-gradient(120% 140% at 14% 8%, #1d2229 0%, var(--graphite) 46%, #0f1113 100%);
}
html[dir="rtl"] .hero{
  background:radial-gradient(120% 140% at 86% 8%, #1d2229 0%, var(--graphite) 46%, #0f1113 100%);
}


/* =======================================================================
   الخلفية
   ======================================================================= */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hero-inner,.hero-marquee{position:relative;z-index:2;}

/* ---- طبقة الفيديو ----
   تحت كل شيء، مع تعتيم وتشبّع خفيف حتى لا ينافس النص.
   opacity يبدأ صفرًا ويُرفع بعد أن يبدأ التشغيل فعلًا، فلا وميض. */
.hero-video{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-video video{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.1s ease;
  filter:saturate(.85) contrast(1.05);
  /* التكبير يترك هامشًا للبارالاكس بلا حواف فارغة؛ --par يكتبه التمرير */
  transform:scale(1.06) translate3d(0, calc(var(--par,0px) * -1), 0);
  will-change:transform;
}
.hero-video.is-playing video{opacity:.42;}

/* ---- شرائح صور بديلة عن الفيديو ---- */
.hero-slides{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity 1.2s ease;
  filter:saturate(.85) contrast(1.05);
  /* نفس تكبير الفيديو ليعمل البارالاكس على الصور أيضًا */
  transform:scale(1.06) translate3d(0, calc(var(--par,0px) * -1), 0);
  will-change:transform;
}
.hero-slide.is-on{opacity:.42;}

/* ---- شفق ملوّن: ثلاث كتل تنجرف بسرعات مختلفة ---- */
.hero-aurora{
  position:absolute;inset:-18%;z-index:1;filter:blur(60px);opacity:.34;
  will-change:transform;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(123,140,255,.55), transparent 70%),
    radial-gradient(34% 38% at 74% 26%, rgba(123,140,255,.42), transparent 72%),
    radial-gradient(30% 34% at 58% 78%, rgba(123,140,255,.28), transparent 74%);
  animation:heroAurora 26s ease-in-out infinite;
}
@keyframes heroAurora{
  0%,100%{transform:translate3d(0,0,0)         scale(1);}
  33%    {transform:translate3d(-3%,2.5%,0)    scale(1.07);}
  66%    {transform:translate3d(2.5%,-2%,0)    scale(1.03);}
}

/* ---- أشعّة تمسح المشهد ---- */
.hero-beams{position:absolute;inset:0;z-index:1;overflow:hidden;mix-blend-mode:screen;opacity:.3;}
.hero-beams::before,.hero-beams::after{
  content:"";position:absolute;inset-block:-30%;width:26%;
  background:linear-gradient(90deg,transparent,rgba(123,140,255,.16),transparent);
  transform:skewX(-14deg);
}
.hero-beams::before{animation:heroBeam 13s ease-in-out infinite;}
.hero-beams::after{
  background:linear-gradient(90deg,transparent,rgba(123,140,255,.14),transparent);
  animation:heroBeam 17s ease-in-out 4s infinite reverse;
}
@keyframes heroBeam{
  0%  {left:-30%;opacity:0;}
  12% {opacity:1;}
  88% {opacity:1;}
  100%{left:120%;opacity:0;}
}

/* ---- بقعة ضوء تتبع المؤشر ---- */
.hero-spot{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,32%),
             rgba(123,140,255,.16), transparent 62%);
  opacity:0;transition:opacity .45s ease;
}
.hero.is-hover .hero-spot{opacity:1;}

/* ---- حجاب يضمن قراءة النص فوق أي خلفية ---- */
.hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to bottom, rgba(14,15,16,.72) 0%, rgba(14,15,16,.58) 38%, rgba(14,15,16,.86) 100%),
    radial-gradient(80% 70% at 50% 40%, rgba(14,15,16,.20) 0%, rgba(14,15,16,.62) 100%);
}

/* هالتان متقابلتان تنجرفان - بنفسجية أعلى النهاية، خضراء أسفل البداية */
.hero-glow::before,
.hero-glow::after{
  content:"";position:absolute;border-radius:50%;filter:blur(6px);
}
.hero-glow::before{
  inset-block-start:-140px;inset-inline-end:-110px;width:440px;height:440px;
  background:radial-gradient(circle at 32% 32%, var(--violet) 0%, rgba(123,140,255,.0) 68%);
  opacity:.55;animation:heroDrift1 16s ease-in-out infinite;
}
.hero-glow::after{
  inset-block-end:-160px;inset-inline-start:-90px;width:400px;height:400px;
  background:radial-gradient(circle at 40% 40%, var(--green) 0%, rgba(123,140,255,.0) 68%);
  opacity:.5;animation:heroDrift2 19s ease-in-out infinite;
}

/* شبكة نقطية خافتة */
.hero-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(242,239,233,.09) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 64% at 50% 34%,#000,transparent 76%);
          mask-image:radial-gradient(ellipse 70% 64% at 50% 34%,#000,transparent 76%);
}

.hero-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- المدارات: مركزها خلف البطاقة ---- */

/* حلقات إشارة تتمدّد من المركز وتتلاشى، متتابعة */

/* =======================================================================
   التخطيط
   ======================================================================= */
.hero-inner{
  display:grid;gap:0;align-items:center;
  grid-template-columns:1fr;
  grid-template-areas:"head" "body";
  padding-block-end:64px;
}
.hero-head{grid-area:head;}
/* حدّ للسطر بعد زوال العمود البصري: النص الممتد على العرض كامله يتعب القراءة */
.hero-body{grid-area:body;max-width:760px;}

/* =======================================================================
   النص
   ======================================================================= */
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-light);text-decoration:none;margin-block-end:20px;
}
html[dir="rtl"] .hero-badge{font-size:12.5px;letter-spacing:0;text-transform:none;}
.hero-badge .dot{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:var(--green-light);flex-shrink:0;
  animation:heroPulse 2.2s ease-in-out infinite;
}
.hero-badge:hover{color:#fff;}

.hero h1{
  color:#fff;
  font-size:clamp(36px,5vw,58px);
  margin-block-end:22px;
  max-width:16ch;
}
html[dir="rtl"] .hero h1{max-width:18ch;}
.hero h1 .accent{color:var(--plane);}   /* أزرق الإشارة يرسب على الجرافيت (2.61)؛ المحيطي يمرّ (6.43) */

/* كل كلمة تصعد على حدة - التتابع هو ما يمنع القراءة ككتلة واحدة */
.hero h1 .hb-w{display:inline-block;}
html.js .hero h1 .hb-w{
  opacity:0;transform:translateY(18px);filter:blur(8px);
  animation:wordIn .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--w) * .055s + .1s);
}

.hero-lead{
  color:rgba(255,255,255,.72);
  font-size:16.5px;line-height:1.7;
  max-width:48ch;margin-block-end:30px;
}

.hero-ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.hero-ctas .btn-primary{
  position:relative;overflow:hidden;
  padding:16px 30px;border-radius:0;font-size:15px;
  box-shadow:0 16px 32px -16px rgba(123,140,255,.85);
  transition:box-shadow .3s, transform .18s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.hero-ctas .btn-primary::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-55%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-16deg);animation:sheen 5.5s 1.6s ease-in-out infinite;
}
.hero-ctas .btn-link{
  color:#fff;font-size:15px;
  border-block-end:2px solid var(--amber);padding-block-end:4px;
}
.hero-ctas .btn-link:hover{color:var(--amber);}

/* أرقام الثقة: أربعة أعمدة متساوية، كل رقم متمركز فوق تسميته */
.hero-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-block-start:40px;padding-block-start:26px;
  border-block-start:1px solid rgba(255,255,255,.13);
}
.hero-trust .ht{text-align:center;}
.hero-trust .ht b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(19px,2.1vw,24px);line-height:1.15;color:#fff;direction:ltr;
  font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;
}
.hero-trust .ht span{font-size:12.5px;color:rgba(255,255,255,.5);}

/* =======================================================================
   شريط العملاء
   ======================================================================= */
.hero-marquee{
  border-block-start:1px solid rgba(255,255,255,.11);
  padding-block:20px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.hero-marquee-track{display:flex;gap:54px;width:max-content;animation:marquee 38s linear infinite;}
.hero-marquee:hover .hero-marquee-track{animation-play-state:paused;}
.hero-marquee-item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;
  color:rgba(255,255,255,.4);white-space:nowrap;
}
.hero-marquee-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green-light);opacity:.6;}

/* =======================================================================
   الحركات
   ======================================================================= */
@keyframes heroDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-34px,28px) scale(1.06);}}
@keyframes heroDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(28px,-24px) scale(1.08);}}
@keyframes heroPulse{0%,100%{box-shadow:0 0 0 0 rgba(123,140,255,.5);}50%{box-shadow:0 0 0 8px rgba(123,140,255,.0);}}
@keyframes wordIn{to{opacity:1;transform:translateY(0);filter:blur(0);}}
@keyframes sheen{0%,70%{inset-inline-start:-55%;}100%{inset-inline-start:135%;}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ظهور متدرّج */
html.js .hero [data-rise]{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards;}
html.js .hero [data-rise="1"]{animation-delay:.04s;}
html.js .hero [data-rise="3"]{animation-delay:.30s;}
html.js .hero [data-rise="4"]{animation-delay:.40s;}
html.js .hero [data-rise="5"]{animation-delay:.50s;}
html.js .hero [data-rise="6"]{animation-delay:.18s;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}

/* =======================================================================
   الاستجابة
   ======================================================================= */
@media(max-width:1040px){
  .hero-inner{
    grid-template-columns:1fr;
    grid-template-areas:"head" "body";
    gap:36px 0;padding-block-end:48px;
  }
  .hero h1{max-width:100%;}
  .hero-lead{max-width:100%;}
}
@media(max-width:760px){
  .hero{padding-block-start:40px;}
  .hero-inner{gap:28px 0;padding-block-end:34px;}
  .hero-lead{font-size:15.5px;margin-block-end:26px;}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:16px;}
  .hero-ctas .btn-primary,.hero-ctas .btn-link{text-align:center;}
  .hero-trust{grid-template-columns:repeat(2,1fr);gap:22px 14px;margin-block-start:30px;padding-block-start:20px;}
  .hero-trust .ht b{font-size:19px;}
}

/* =======================================================================
   تقليل الحركة والشفافية
   ======================================================================= */
@media(prefers-reduced-motion:reduce){
  .hero-aurora,.hero-beams::before,.hero-beams::after,
  .hero-glow::before,.hero-glow::after,
  .hero-marquee-track,
  html.js .hero [data-rise]{animation:none !important;opacity:1;transform:none;}
  html.js .hero h1 .hb-w{animation:none !important;opacity:1;transform:none;filter:none;}
  /* الشرائح تتوقّف عند أول صورة بدل التبديل الدوري */
  .hero-slide{transition:none;}

}
@media(prefers-reduced-transparency:reduce){
  .hero-grain,.hero-grid{display:none;}
}

/* زر الملف التعريفي داخل الهيرو الداكن: خيط عظمي لا حدّ رمادي */
.hero .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hero .prof-btn{
  background:transparent;color:var(--bone);
  border:1px solid rgba(242,239,233,.42);
  transition:background 180ms cubic-bezier(.2,.8,.2,1),
             border-color 180ms cubic-bezier(.2,.8,.2,1),
             color 180ms cubic-bezier(.2,.8,.2,1);
}
.hero .prof-btn:hover{background:var(--bone);color:var(--graphite);border-color:var(--bone);}