/* ══════════════════════════════════════════════════════════════════
   Home V3 — طبقة تخصيص فوق home-v2.css
   يُحمَّل بعد home-v2.css فيغلبه عند تساوي التخصيص.
   نطاق كل القواعد .h2-v3 حتى لا تسرّب إلى V2 أو الصفحة الأصليّة.
   ══════════════════════════════════════════════════════════════════ */

/* ═ حساب القائمة الثابتة ═
   الأساس هو الصفحة الأصليّة، وقائمتها position:fixed بارتفاع ~103px (سطح مكتب)
   / ~97px (جوّال) تعلو المحتوى. نُضيف تباعداً علوياً للهيرو يحسبها (كما تفعل
   .section-py في الأصل) فلا يدخل العنوان تحت القائمة. القيمة = ارتفاع القائمة
   + فسحة تنفّس. نلغي padding-block-start فقط ونُبقي السفليّ من قاعدة V2. */
html.dark-style .h2-body,
[data-theme='theme-default-dark'] .h2-body{
  --ink:#EDEFF5;
  --ink-2:#B6BCCB;
  --ink-3:#8A91A3;
  --line:#2A2E3C;
  --paper:#171A23;
  --surface:#11141B;
  --surface-2:#1B1F29;
  --lav:#221F35;
  --mint:#16261F;
  --aqua:#132428;
  --pine-50:#16211F;
  --pine-100:#22322F;
  --brand-50:#251A0E;
  --brand-100:#35260F;
  --sh-1:0 2px 10px rgba(0,0,0,.3);
  --sh-2:0 14px 40px rgba(0,0,0,.4);
  --sh-3:0 32px 80px rgba(0,0,0,.55);
}

html.dark-style .h2-body.h2-v3,
[data-theme='theme-default-dark'] .h2-body.h2-v3{
  background:
    radial-gradient(760px 420px at calc(100% + 120px) -120px, rgba(201,121,36,.12), transparent 72%),
    radial-gradient(620px 360px at -140px -90px, rgba(78,109,106,.13), transparent 74%),
    var(--surface);
  color:var(--ink);
}

html.dark-style .h2-body.h2-v3 .hero,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .hero{
  background:
    radial-gradient(620px 380px at calc(100% + 90px) -90px, rgba(201,121,36,.16), transparent 72%),
    radial-gradient(560px 360px at -120px -70px, rgba(78,109,106,.12), transparent 76%),
    linear-gradient(180deg,#171A23 0%,#131720 62%,#11141B 100%);
}

html.dark-style .h2-body.h2-v3 .hero-bg .grid,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .hero-bg .grid{
  opacity:.26;
}

html.dark-style .h2-body.h2-v3 .hero-copy h1,
html.dark-style .h2-body.h2-v3 .hero-copy h1 .l1,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .hero-copy h1,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .hero-copy h1 .l1{
  color:#F4F6FB;
}

html.dark-style .h2-body.h2-v3 .hero-copy .lead,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .hero-copy .lead{
  color:#C8CEDB;
}

html.dark-style .h2-body.h2-v3 .eyebrow,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .eyebrow{
  background:rgba(201,121,36,.14);
  border-color:rgba(217,148,74,.28);
  color:#F0CFA6;
}

html.dark-style .h2-body.h2-v3 .btn-ghost,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .btn-ghost{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.11);
  color:#F1F4FA;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}

html.dark-style .h2-body.h2-v3 .btn-ghost:hover,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .btn-ghost:hover{
  border-color:rgba(217,148,74,.42);
  color:#F0CFA6;
}

html.dark-style .h2-body.h2-v3 .window,
html.dark-style .h2-body.h2-v3 .float-card,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .window,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .float-card{
  background:rgba(23,26,35,.94);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 32px 80px rgba(0,0,0,.46);
}

html.dark-style .h2-body.h2-v3 .win-bar,
html.dark-style .h2-body.h2-v3 .win-side,
html.dark-style .h2-body.h2-v3 .tile,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .win-bar,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .win-side,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .tile{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.09);
}

html.dark-style .h2-body.h2-v3 .win-url,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .win-url{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.08);
  color:#AEB6C8;
}

html.dark-style .h2-body.h2-v3 .tile:hover,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .tile:hover{
  background:rgba(201,121,36,.13);
  border-color:rgba(217,148,74,.35);
}

html.dark-style .h2-body.h2-v3 .tile b,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .tile b{
  color:#D8DEEA;
}

html.dark-style .h2-body.h2-v3 .trust-txt,
[data-theme='theme-default-dark'] .h2-body.h2-v3 .trust-txt{
  color:#AEB6C8;
}

.h2-v3 .hero{
  padding-block-start:130px;
  scroll-margin-block-start:112px;
}
@media(max-width:1024px){
  .h2-v3 .hero{ padding-block-start:120px; }
}
@media(max-width:768px){
  .h2-v3 .hero{ padding-block-start:110px; }
}
@media(max-width:480px){
  .h2-v3 .hero{ padding-block-start:104px; }
}

/* توازن خلفية الهيرو: توهج خفيف على اليمين مع تهدئة الهالات الحالية */
.h2-body.h2-v3 .hero-bg::before{
  content:'';
  position:absolute;
  top:72px;
  right:-120px;
  width:min(44vw,560px);
  height:min(44vw,560px);
  pointer-events:none;
  background:
    radial-gradient(circle at 52% 42%,
      rgba(201,121,36,.24) 0,
      rgba(217,148,74,.15) 34%,
      rgba(78,109,106,.10) 56%,
      transparent 72%);
  filter:blur(38px);
  opacity:.9;
}
.h2-body.h2-v3 .hero-bg::after{
  content:'';
  position:absolute;
  top:-155px;
  right:-130px;
  width:min(42vw,520px);
  height:380px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 70% 22%,
      rgba(126,70,14,.18) 0,
      rgba(201,121,36,.16) 34%,
      rgba(56,81,79,.11) 58%,
      transparent 76%);
  filter:blur(44px);
  opacity:.82;
}
.h2-body.h2-v3 .hero-bg .blob.b1{opacity:.42}
.h2-body.h2-v3 .hero-bg .blob.b2{opacity:.38}
@media(max-width:768px){
  .h2-body.h2-v3 .hero-bg::before{
    top:92px;
    right:-150px;
    width:420px;
    height:420px;
    opacity:.68;
  }
  .h2-body.h2-v3 .hero-bg::after{
    top:-130px;
    right:-160px;
    width:390px;
    height:320px;
    opacity:.62;
  }
}

/* ═ صفحات V3 تستخدم درج V2 المصقول بدل قائمة Bootstrap Collapse الأصليّة ═
   home-v3.js يضيف has-h2v3 إلى body عند اكتشاف .h2-v3، فنُخفي عناصر قائمة
   الجوّال Bootstrap على ≤991.98px دون التأثير على القائمة العلويّة سطحَ مكتب. */
@media(max-width:991.98px){
  body.has-h2v3 .landing-navbar .landing-nav-menu,
  body.has-h2v3 .landing-navbar .navbar-collapse,
  body.has-h2v3 .landing-menu-overlay{
    display:none !important;
  }
}

/* ═ درج الجوّال في V3 — نطاق قويّ يهزم أي تصادم مع Vuexy/Bootstrap ═
   V3 على layout الأصليّة حيث Vuexy وBootstrap محمَّلان، فقد تفوز قواعدهما
   على .h2-body .drawer* عند تساوي التخصيص. هنا نعيد التعريف بنطاق أعلى. */
body.h2-body.h2-v3 .drawer{
    position:fixed !important;inset:0;z-index:1050;visibility:hidden;
    transition:visibility 0s linear .45s;
}
body.h2-body.h2-v3 .drawer.open{visibility:visible !important;transition-delay:0s;}
body.h2-body.h2-v3 .drawer-scrim{
    position:absolute;inset:0;
    background:rgba(21,24,31,.5);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    opacity:0;transition:opacity .35s cubic-bezier(.22,1,.36,1);
    border:none;padding:0;cursor:pointer;
}
body.h2-body.h2-v3 .drawer.open .drawer-scrim{opacity:1 !important;}
body.h2-body.h2-v3 .drawer-panel{
    position:absolute;top:0;bottom:0;right:0;
    width:min(340px,86vw);background:#fff;
    padding:22px 22px calc(22px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);
    box-shadow:-30px 0 60px rgba(0,0,0,.18);
    display:flex;flex-direction:column;
}
body.h2-body.h2-v3 .drawer.open .drawer-panel{transform:translateX(0) !important;}

/* ═ عرض القائمة الموحّد انتقل إلى premium-theme.css §19 ═
   قواعد فكّ قيد الـcontainer (1440px) وهامش الأدوات صارت عامّة لكل
   الصفحات عبر nav.layout-navbar.front-navbar — لا تكرار هنا. */

/* CTA زر واحد الخط، نص مصغر — طبقة V3 فقط */
.h2-body.h2-v3 .hero-cta.hero-cta-inline{
    flex-wrap:nowrap;
    gap:8px;
    overflow:visible;         /* لا نقص حتى لا يبتر تأثير التحويم */
    padding:6px 2px;          /* هامش امان لتحويم magnetic */
}
.h2-body.h2-v3 .hero-cta.hero-cta-inline .btn{
    white-space:nowrap;
    flex:0 1 auto;
    min-width:0;
    font-size:.92rem;
    padding:.6rem 1rem;
    line-height:1.25;
}
.h2-body.h2-v3 .hero-cta.hero-cta-inline .btn i{font-size:1.1rem}
/* على الشاشات الصغيرة سطر واحد يخنق الأزرار الثلاثة فتُبتر نصوصها —
   نسمح بالالتفاف: الأساسي سطر كامل، والثانويان يتقاسمان السطر التالي. */
@media (max-width: 575.98px){
    .h2-body.h2-v3 .hero-cta.hero-cta-inline{
        flex-wrap:wrap;
    }
    .h2-body.h2-v3 .hero-cta.hero-cta-inline .btn{
        font-size:.875rem;
        padding:.6rem .75rem;
    }
    .h2-body.h2-v3 .hero-cta.hero-cta-inline .btn-primary{
        flex:1 1 100%;
    }
    /* calc يوزّع الثانويَين مناصفةً مع فجوة 8px؛ وإن بقي واحد امتدّ وحده */
    .h2-body.h2-v3 .hero-cta.hero-cta-inline .btn-ghost{
        flex:1 1 calc(50% - 4px);
        justify-content:center;
    }
}

/* الزر الأساسي «الوصول الى المحتوى» أعلى من إخوته — هو قائد الصف،
   وارتفاع ~44-48px يمنحه حضورًا ولمسًا مريحًا (بعد كتلة الجوال ليغلبها) */
.h2-body.h2-v3 .hero-cta.hero-cta-inline .btn-primary{
    padding-block:.8rem;
}
.h2-body.h2-v3 .hero-cta.hero-cta-inline .btn{
    position:relative;
    overflow:hidden;
}
@media (max-width: 575.98px){
    .h2-body.h2-v3 .hero-cta.hero-cta-inline .btn-primary{
        padding-block:.85rem;
        font-size:.95rem;
    }
}

/* اخفاء eyebrow «ابدأ من هنا» فوق قسم portals — V3 فقط */
.h2-body.h2-v3 .portals .sec-head .eyebrow{display:none}
.h2-body.h2-v3 .portals .portals-head{
    max-width:780px;
    margin-inline:auto;
    margin-block-end:26px;
    text-align:center;
}
.h2-body.h2-v3 .portals .portals-head p{
    position:relative;
    max-width:720px;
    margin:0 auto;
    color:var(--ink);
    font-family:var(--f-display);
    font-size:clamp(16.5px,1.55vw,19px);
    font-weight:750;
    line-height:1.9;
    text-wrap:balance;
}
.h2-body.h2-v3 .portals .portals-head p::after{
    content:'';
    display:block;
    width:86px;
    height:3px;
    margin:13px auto 0;
    background:linear-gradient(90deg,transparent,var(--brand-300),var(--brand-600),transparent);
    border-radius:0;
    opacity:.9;
}
@media(max-width:768px){
    .h2-body.h2-v3 .portals .portals-head{
        margin-block-end:20px;
    }
    .h2-body.h2-v3 .portals .portals-head p{
        font-size:15.5px;
        line-height:1.85;
    }
}

/* تقليل الفراغ بين الهيرو وقسم ابدأ من مكانك — V3 فقط */
.h2-body.h2-v3 .hero{padding-block-end:24px}
.h2-body.h2-v3 .portals{padding-block:32px}
@media(max-width:768px){
    .h2-body.h2-v3 .hero{padding-block-end:16px}
    .h2-body.h2-v3 .portals{padding-block:24px}
}