/* ============================================================
   Najma Clean — hero.css
   هيرو كامل + لوحة بصرية تملأ النصف + شريط ثقة + قسم قبل/بعد
   ============================================================ */

/* ---------- الهيرو ---------- */
.nc-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--nc-grad-hero); background-size: 180% 180%;
  animation: nc-grad-move 16s var(--nc-ease) infinite;
  padding-top: 40px;
}
/* إبطال قاعدة الهيرو القديمة في main.css التي كانت تحوّل الكونتينر لجريد وتترك عمودًا فاضيًا */
.nc-hero .nc-container { display: block; grid-template-columns: none; }
.nc-hero::before, .nc-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.nc-hero::before { width: 480px; height: 480px; background: var(--nc-glow-gold); top: -180px; inset-inline-end: 18%; animation: nc-drift 14s var(--nc-ease) infinite alternate; }
.nc-hero::after  { width: 540px; height: 540px; background: var(--nc-glow-cyan); bottom: -240px; inset-inline-start: -120px; animation: nc-drift 18s var(--nc-ease) -5s infinite alternate; }

.nc-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: center;
  padding-block: 40px 70px;
}
.nc-hero__content { min-width: 0; }
.nc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--nc-font-head);
  font-weight: 700; font-size: .9rem; padding: 8px 16px; border-radius: var(--nc-radius-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nc-hero__content h1 { color: #fff; font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 1.2; margin: 20px 0 16px; font-weight: 800; text-wrap: balance; }
.nc-hero__content h1 .accent { color: var(--nc-gold-400); }
.nc-hero__lead { color: #CBDAEC; max-width: 480px; font-size: 1.06rem; line-height: 1.8; }
.nc-hero__actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- اللوحة البصرية (تملأ النصف) ---------- */
.nc-hero__visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; }
.nc-hero-orb {
  position: absolute; width: 360px; height: 360px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(43,184,214,.40), transparent 68%);
  filter: blur(12px); animation: nc-pulse-orb 6s var(--nc-ease) infinite;
}
@keyframes nc-pulse-orb { 0%,100%{ transform: scale(1); opacity:.8 } 50%{ transform: scale(1.07); opacity:1 } }

.nc-hero-panel {
  position: relative; z-index: 2; width: 100%; max-width: 500px; padding: 30px; margin-right: auto;
  border-radius: 30px; max-width: 500px;
  background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 30px 80px rgba(4,18,38,.5), inset 0 1px 0 rgba(255,255,255,.4);
  animation: nc-float-y 7s var(--nc-ease) infinite;
}
.nc-hero-panel__head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.16); }
.nc-hero-panel__emblem {
  width: 94px; height: 94px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; padding: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22,166,201,.50), 0 8px 24px rgba(246,180,10,.38), inset 0 0 0 1px rgba(255,255,255,.7);
  animation: nc-emblem-glow 4.5s ease-in-out infinite;
}
.nc-hero-panel__emblem img { width: 100%; height: 100%; object-fit: contain; }
@keyframes nc-emblem-glow {
  0%,100% { box-shadow: 0 8px 24px rgba(22,166,201,.45), 0 8px 24px rgba(246,180,10,.32); }
  50%     { box-shadow: 0 13px 34px rgba(22,166,201,.70), 0 13px 34px rgba(246,180,10,.55); }
}
.nc-hero-panel__name { font-family: var(--nc-font-head); font-weight: 800; font-size: 1.45rem; color: #fff; }
.nc-hero-panel__rate { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.nc-hero-panel__stars { color: var(--nc-gold-400); letter-spacing: 2px; font-size: .95rem; }
.nc-hero-panel__rate b { color: #fff; font-family: var(--nc-font-head); }
.nc-hero-panel__rate small { color: #9FB6CE; }

.nc-hero-panel__feats { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.nc-hero-panel__feats li { display: flex; align-items: center; gap: 12px; color: #E6EFF8; font-family: var(--nc-font-head); font-weight: 600; font-size: 1.02rem; }
.nc-hero-panel__ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: rgba(22,166,201,.28); color: #8DE0F2; }
.nc-hero-panel__ic svg { width: 18px; height: 18px; }

.nc-hero-panel__foot { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); color: #CBDAEC; font-size: .95rem; }
.nc-hero-panel__foot b { color: var(--nc-gold-400); font-family: var(--nc-font-head); }

/* شارة عائمة واحدة للعمق */
.nc-chip {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 16px; font-family: var(--nc-font-head); font-weight: 700; font-size: .88rem; color: #fff;
  background: rgba(13,38,64,.55); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(4,18,38,.4);
}
.nc-chip small { display: block; font-weight: 600; font-size: .74rem; color: #B9CCE0; }
.nc-chip__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.nc-chip__ic svg { width: 20px; height: 20px; }
.nc-chip--guard { top: -20px; inset-inline-start: -22px; animation: nc-float-y 6s var(--nc-ease) -1.5s infinite; }
.nc-chip--guard .nc-chip__ic { background: var(--nc-grad-gold); color: var(--nc-navy-900); }

@keyframes nc-float-y { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }

/* ---------- شريط الثقة المتداخل ---------- */
.nc-trust-strip { position: relative; z-index: 6; margin-top: -44px; }
.nc-trust-strip__inner {
  background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(10,34,64,.16);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--nc-line);
}
.nc-trust-strip__item { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-inline-start: 1px solid var(--nc-line); }
.nc-trust-strip__item:first-child { border-inline-start: 0; }
.nc-trust-strip__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(22,166,201,.10); color: var(--nc-cyan-600); }
.nc-trust-strip__ic svg { width: 26px; height: 26px; }
.nc-trust-strip__num { font-family: var(--nc-font-head); font-weight: 800; font-size: 1.5rem; color: var(--nc-navy-900); line-height: 1; direction: ltr; }
.nc-trust-strip__lbl { color: var(--nc-muted); font-size: .88rem; margin-top: 3px; }

/* ---------- قسم قبل/بعد المستقل ---------- */
.nc-ba-section .nc-ba { max-width: 920px; margin-inline: auto; aspect-ratio: 16 / 8; border-radius: 28px; box-shadow: 0 30px 70px rgba(10,34,64,.22); border: 1px solid var(--nc-line); }
.nc-ba-section .nc-ba__label { font-size: 1rem; padding: 8px 18px; }
.nc-ba-note { text-align: center; color: var(--nc-muted); margin-top: 18px; font-size: .95rem; }

/* ---------- استجابة ---------- */
@media (max-width: 920px) {
  .nc-hero__grid { grid-template-columns: 1fr; gap: 34px; text-align: center; padding-block: 24px 60px; }
  .nc-hero__content { order: 1; }
  .nc-hero__visual { order: 2; justify-content: center; }
  .nc-hero-panel { margin-inline: auto; text-align: start; }
  .nc-hero__lead { margin-inline: auto; }
  .nc-hero__actions { justify-content: center; }
  .nc-trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .nc-trust-strip__item:nth-child(-n+2) { border-block-end: 1px solid var(--nc-line); }
  .nc-trust-strip__item:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 520px) {
  .nc-chip--guard { inset-inline-start: -8px; top: -14px; transform: scale(.92); }
  .nc-ba-section .nc-ba { aspect-ratio: 4 / 3; }
  .nc-trust-strip__num { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-hero, .nc-hero::before, .nc-hero::after, .nc-hero-panel, .nc-hero-panel__emblem, .nc-chip, .nc-hero-orb { animation: none !important; }
}