/* ============================================================
   hero.css — الهيرو الجديد (شبكة بنتو) | رفيق النجاح
   لوحة زرقاء بالشعار وشريط الأرقام + عمود النص.
   يعتمد رموز v4.css · الموبايل أولاً.
   ============================================================ */

/* ---------- التخطيط ---------- */
.hero .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  align-items:center;
}
@media(min-width:901px){
  .hero .wrap{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--sp-6); }
  .hero .hcard{ order:2; }        /* RTL: اللوحة إلى يسار الشاشة */
  .hero .wrap>div{ order:1; }
  .hero .gpanel{ order:3; grid-column:1 / -1; }
}

/* ---------- اللوحة الزرقاء ---------- */
.hcard{
  position:relative;
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(160deg, var(--blue-700) 0%, var(--blue-900) 100%);
  box-shadow:var(--shadow-2);
  overflow:hidden;
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
  isolation:isolate;
}
.hcard::before{                    /* وميض قطري خفيف */
  content:"";
  position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  transform:rotate(-8deg);
  pointer-events:none; z-index:-1;
}
.hcard-in{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }

/* لوح فاتح خلف الشعار: نص الشعار كحلي، ولولاه يذوب في الأزرق */
.hlogo-plate{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:var(--sp-3) var(--sp-2);
  background:rgba(255,255,255,.94);
  border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 18px -8px rgba(0,0,0,.35);
}
.hcard .hlogo{
  width:min(215px,78%); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 4px 10px rgba(10,45,99,.18));
}

/* ---------- شريط الأرقام داخل اللوحة ---------- */
.hcard .hstats{
  display:grid; grid-template-columns:repeat(4,1fr);
  width:100%; margin:0;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  overflow:hidden;
}
.hcard .hst{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:12px 4px; text-align:center;
  background:none; border:none; box-shadow:none; border-radius:0;
  border-inline-start:1px solid rgba(255,255,255,.14);
}
.hcard .hst:first-child{ border-inline-start:none; }
.hcard .hst b{
  color:#fff; font-family:var(--font-en);
  font-size:clamp(19px,4.6vw,26px); font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.hcard .hst span{
  color:rgba(255,255,255,.78); font-size:11px; line-height:1.35;
  display:block; max-width:9ch;
}

/* ---------- الشارة فوق العنوان ---------- */
.hbadge{
  display:inline-block; margin-bottom:var(--sp-2);
  padding:6px 14px; border-radius:var(--r-pill);
  background:var(--blue-100); color:var(--blue-700);
  font-size:var(--fs-cap); font-weight:700;
  border:1px solid rgba(16,76,162,.16);
}

/* ---------- عمود النص ---------- */
.hero .wrap>div{ text-align:center; }
@media(min-width:901px){
  .hero .wrap>div{ text-align:start; }
  .hero .crow{ justify-content:flex-start; }
  .hero [data-altc]{ text-align:start; }
}

/* ---------- شريط الثقة أسفل الهيرو ---------- */
@media(min-width:901px){
  .hero .gpanel{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
    margin-top:var(--sp-4); padding:var(--sp-3);
  }
  .hero .gpanel h3{ grid-column:1 / -1; margin:0 0 4px; }
  .hero .gpanel .grow{ margin:0; }
}

/* ---------- الموبايل ---------- */
@media(max-width:900px){
  .hcard{ padding:var(--sp-3) var(--sp-2) var(--sp-2); }
  .hcard .hlogo{ width:min(200px,58%); }
  .hcard .hst{ padding:10px 2px; }
  .hcard .hst span{ font-size:10px; max-width:8ch; }
}
@media(max-width:400px){
  .hcard .hst b{ font-size:18px; }
  .hcard .hst span{ font-size:9px; }
}

/* ============================================================
   لوحة صفحات الباقات — بنية مختلفة عن الرئيسية
   ============================================================ */
.hero .pkcopy{ text-align:center; }
@media(min-width:901px){
  .hero .pkcopy{ text-align:start; }
  .hero .pkcopy .crow{ justify-content:flex-start !important; }
  .hero .pkcopy h1,.hero .pkcopy p{ margin-inline:0 !important; }
}
.hcard-pk{ padding:var(--sp-4) var(--sp-3); }
.hcard-pk .hcard-in{ gap:var(--sp-3); }

.pkfam{
  display:inline-block; padding:7px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:var(--gold-200); font-size:var(--fs-cap); font-weight:800;
  letter-spacing:.02em;
}
.pkmeta{
  display:grid; grid-template-columns:repeat(3,1fr); width:100%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); overflow:hidden;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pkmeta>div{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:14px 6px; text-align:center;
  border-inline-start:1px solid rgba(255,255,255,.14);
}
.pkmeta>div:first-child{ border-inline-start:none; }
.pkmeta b{
  color:#fff; font-family:var(--font-en); font-variant-numeric:tabular-nums;
  font-size:clamp(17px,4vw,23px); font-weight:800; line-height:1.1; direction:ltr;
}
.pkmeta span{ color:rgba(255,255,255,.78); font-size:11px; line-height:1.35; max-width:11ch; }

@media(max-width:900px){
  .hcard-pk{ padding:var(--sp-3) var(--sp-2); }
  .pkmeta>div{ padding:11px 3px; }
  .pkmeta span{ font-size:10px; max-width:10ch; }
}

/* ---------- تقليل الحركة ---------- */
@media(prefers-reduced-motion:reduce){ .hcard::before{ display:none; } }


/* ============================================================
   صفحات الخدمات — اللوحة تدخل العمود الفارغ في .hgrid
   .hgrid شبكة عمودين أصلاً (1.06fr .94fr) وعمودها الثاني كان فارغاً.
   لكن .hero .wrap صارت شبكة بعمودين، و.hgrid طفلها الوحيد،
   فلولا هذا السطر لانحصرت في العمود الأول فقط.
   ============================================================ */
.hero .wrap > .hgrid{ grid-column:1 / -1; }
@media(min-width:901px){
  .hgrid > .hcard{ order:2; }
}
/* في الخدمات النص أعرض من اللوحة، عكس الرئيسية */
.hgrid > .hcard{ align-self:center; }

/* ============================================================
   صفحات المعرفة — عمود النص + لوحة مؤشرات الميل
   ============================================================ */
.hero .kwrap{ text-align:center; }
@media(min-width:901px){
  .hero .kwrap{ text-align:start; }
  .hero .kwrap .crow{ justify-content:flex-start; }
}
.hcard-kn{ padding:var(--sp-4) var(--sp-3); }
.hcard-kn .hcard-in{ gap:var(--sp-3); }
.knmile{
  display:inline-block; padding:7px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:var(--gold-200); font-size:var(--fs-cap); font-weight:800;
}
.knmeta{
  display:grid; grid-template-columns:repeat(3,1fr); width:100%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); overflow:hidden;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.knmeta > div{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:14px 6px; text-align:center;
  border-inline-start:1px solid rgba(255,255,255,.14);
}
.knmeta > div:first-child{ border-inline-start:none; }
.knmeta b{
  color:#fff; font-family:var(--font-en); font-variant-numeric:tabular-nums;
  font-size:clamp(17px,4vw,23px); font-weight:800; line-height:1.1; direction:ltr;
}
.knmeta span{ color:rgba(255,255,255,.78); font-size:11px; line-height:1.35; max-width:11ch; }
@media(max-width:900px){
  .hcard-kn{ padding:var(--sp-3) var(--sp-2); }
  .knmeta > div{ padding:11px 3px; }
  .knmeta span{ font-size:10px; max-width:10ch; }
}


/* ============================================================
   .kgrid — شبكة هيرو المعرفة، مستقلة عن .hero .wrap
   السبب: v3.min.css يُفرد .hero .wrap عند 980 بينما hero.css
   كان يُعيدها عمودين عند 901، فينشأ نطاق تعارض. نتفادى المسألة
   كلها بشبكة خاصة، تماماً كما تفعل .hgrid في صفحات الخدمات.
   ============================================================ */
.hero .wrap > .kgrid{ grid-column:1 / -1; }
.kgrid{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); align-items:center; }
@media(min-width:981px){
  .kgrid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--sp-5); }
  .kgrid > .hcard-kn{ order:2; }
  .kgrid > .kwrap{ order:1; }
}