/* مساحة داخلية عامة */
.section-pad{ padding-block: clamp(1.8rem, 5vw, 4.4rem); }

/* الحاوية الرئيسية + تأثير الـ spotlight */
.nx-ecom-hero{
  position: relative; overflow: clip;
  --spot-x: 50%; --spot-y: 50%;
  --spot-size: 28vw; /* قطر بقعة الضوء */
  background:
    radial-gradient(800px 420px at 88% -10%, rgba(40,120,255,.05), transparent 55%),
    radial-gradient(760px 420px at 12% -14%, rgba(210,60,140,.05), transparent 60%),
    radial-gradient(var(--spot-size) var(--spot-size) at var(--spot-x) var(--spot-y),
      rgba(255,255,255,.10), transparent 65%);
}

/* الهالات */
.nx-aurora{
  position:absolute; inset: -14% -8% auto -8%; height: 58%;
  background:
    radial-gradient(40% 60% at 78% 22%, rgba(40,120,255,.12), transparent 60%),
    radial-gradient(48% 55% at 18% 18%, rgba(210,60,140,.10), transparent 60%);
  filter: blur(26px) saturate(120%);
  z-index: 0; pointer-events:none;
}

/* بادج */
.nx-badge{
  display:inline-block; padding:.35rem .8rem; border-radius:999px;
  font-weight:700; border:1px solid var(--color-border, rgba(0,0,0,.12));
  background: var(--color-bg, rgba(255,255,255,.65));
  backdrop-filter: saturate(120%) blur(4px);
}

/* عناوين */
.nx-title{
  font-weight: 800; line-height: 1.15;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: .35rem 0 .6rem;
}
.nx-sub{ font-size: clamp(1rem, 2.1vw, 1.12rem); }

/* لوحة الأيقونات */
.nx-board{
  position: relative; isolation: isolate;
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 48px rgba(0,0,0,.12);
  min-height: 260px;
}

/* كرة ضوء تتبع الماوس داخل اللوحة */
.nx-ball{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  --bx: 50%; --by: 50%;
  background:
    radial-gradient(170px 170px at var(--bx) var(--by),
      rgba(40,120,255,.22), transparent 60%);
  transition: background-position .08s linear;
}

/* شبكة الأيقونات */
.nx-tiles{
  position: relative; z-index: 1;
  --s: 92px; display:grid; gap:16px;
  grid-template-columns: repeat(2, var(--s));
  justify-content:center; align-content:center; min-height: 220px;
  margin-inline:auto;
}
.nx-tile{
  width: var(--s); height: var(--s);
  display:grid; place-items:center; border-radius: 20px;
  border:1px solid var(--color-border, rgba(0,0,0,.10));
  background: var(--color-bg, #fff);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style: preserve-3d; perspective: 800px;
}
.nx-tile i{
  font-size: 28px;
  color: rgba(255,255,255,.85);
  transition: color .25s ease;
}
.nx-tile:hover i{
  color: #4da3ff;
}
.nx-tile:hover{
  box-shadow: 0 26px 64px rgba(0,0,0,.16);
}
.nx-tile.is-tilting{
  /* القيم تُضبط من JS عبر CSS vars */
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(6px);
  border-color: rgba(40,120,255,.25);
}

/* زر مغناطيسي */
.js-magnet{
  position: relative; overflow: hidden;
  transform: translateZ(0); will-change: transform;
}
.js-magnet::after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.25), transparent 60%);
  transition: transform .08s linear;
  transform: translate3d(0,0,0);
  pointer-events:none;
}

/* ظهور متدرّج (يعتمد على app.js لديك) */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: none; }
.reveal.up{ transform: translateY(22px); }

/* Dark mode */
html[data-bs-theme="dark"] .nx-board{
  background: linear-gradient(180deg, rgba(30,32,40,.65), rgba(30,32,40,.45));
  border-color: rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] .nx-tile{ background: #1f232b; border-color: rgba(255,255,255,.08); }
html[data-bs-theme="dark"] .nx-tile:hover{ box-shadow: 0 28px 62px rgba(0,0,0,.45); }