/* V3.23 — /about (about.php). Logical properties throughout so /ar/ mirrors by itself. */
.nxab { --nxab-accent: #45f882; --nxab-line: rgba(156, 157, 156, .16); color: #eef2f8; padding-block: 64px 90px; }
.nxab .container { max-width: 1240px; }
.nxab-kicker { display: inline-block; margin-block-end: 12px; font: 800 12px/1 Poppins, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--nxab-accent); }
.nxab-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.nxab-intro h2 { margin: 0 0 18px; font: 800 clamp(30px, 4vw, 48px)/1.08 Rajdhani, Poppins, sans-serif; color: #fff; }
.nxab-intro p { margin: 0 0 14px; font: 500 16px/1.75 Poppins, sans-serif; color: #C5C6C5; max-width: 62ch; }
.nxab-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nxab-facts li { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--nxab-line); display: grid; gap: 6px; }
.nxab-facts b { font: 800 28px/1 Rajdhani, Poppins, sans-serif; color: #fff; }
.nxab-facts span { font: 600 12.5px/1.4 Poppins, sans-serif; color: #9B9C9B; }
.nxab-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.nxab-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transform: rotate(-3deg); }
.nxab-mosaic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.nxab-mosaic img:nth-child(3n+2) { transform: translateY(26px); }
[dir="rtl"] .nxab-mosaic { transform: rotate(3deg); }
.nxab-band { margin-block-start: 88px; }
.nxab-h { margin: 0 0 24px; font: 800 clamp(24px, 3vw, 34px)/1.15 Rajdhani, Poppins, sans-serif; color: #fff; }
.nxab-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nxab-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--nxab-line);
  transition: transform .2s ease, border-color .2s ease; }
.nxab-card:hover, .nxab-card:focus-visible { transform: translateY(-3px); border-color: rgba(69, 248, 130, .5); }
.nxab-card:focus-visible { outline: 2px solid var(--nxab-accent); outline-offset: 3px; }
.nxab-card i { font-size: 26px; color: var(--nxab-accent); }
.nxab-card h3 { margin: 4px 0 0; font: 800 19px/1.25 Poppins, sans-serif; color: #fff; }
.nxab-card p { margin: 0; flex: 1; font: 500 14px/1.65 Poppins, sans-serif; color: #B6B7B6; }
.nxab-link { font: 700 13px/1 Poppins, sans-serif; color: var(--nxab-accent); }
.nxab-link::after { content: " \2192"; }
[dir="rtl"] .nxab-link::after { content: " \2190"; }
.nxab-steps { list-style: none; margin: 0; padding: 0; counter-reset: nxab; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nxab-steps li { counter-increment: nxab; position: relative; padding: 58px 22px 22px; border-radius: 20px; background: rgba(14, 15, 14, .72); border: 1px solid var(--nxab-line); display: grid; gap: 8px; align-content: start; }
.nxab-steps li::before { content: counter(nxab); position: absolute; inset-block-start: 20px; inset-inline-start: 22px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 800 13px/1 Poppins, sans-serif; color: #04150a; background: var(--nxab-accent); }
.nxab-steps b { font: 800 16px/1.3 Poppins, sans-serif; color: #fff; }
.nxab-steps span { font: 500 14px/1.65 Poppins, sans-serif; color: #B6B7B6; }
.nxab-promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.nxab-promises li { flex-direction: column; }
.nxab-promises li { display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .025); border: 1px solid var(--nxab-line); }
.nxab-promises i { font-size: 20px; color: var(--nxab-accent); margin-block-start: 2px; }
.nxab-promises div { display: grid; gap: 4px; }
.nxab-promises b { font: 700 15px/1.35 Poppins, sans-serif; color: #fff; }
.nxab-promises span { font: 500 13.5px/1.6 Poppins, sans-serif; color: #B6B7B6; }
.nxab-policies { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; }
.nxab-policies a { font: 700 13.5px/1.2 Poppins, sans-serif; color: var(--nxab-accent); text-decoration: underline; text-underline-offset: 3px; }
.nxab-contact { margin-block-start: 88px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px;
  border-radius: 24px; background: radial-gradient(circle at 12% 20%, rgba(69, 248, 130, .12), transparent 55%), rgba(14, 15, 14, .8); border: 1px solid rgba(69, 248, 130, .22); }
.nxab-contact .nxab-h { margin-block-end: 6px; }
.nxab-contact p { margin: 0; font: 500 15px/1.6 Poppins, sans-serif; color: #C5C6C5; }
.nxab-contact .nxab-cta { margin: 0; }
@media (max-width: 1199px) { .nxab-cards, .nxab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nxab-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nxab-promises li { flex-direction: row; } }
@media (max-width: 991px) {
  .nxab-intro { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .nxab-mosaic { transform: none; max-width: 520px; }
  [dir="rtl"] .nxab-mosaic { transform: none; }
}
@media (max-width: 575px) {
  .nxab { padding-block: 40px 64px; }
  .nxab-facts { grid-template-columns: minmax(0, 1fr); }
  .nxab-cards, .nxab-steps, .nxab-promises { grid-template-columns: minmax(0, 1fr); }
  .nxab-band, .nxab-contact { margin-block-start: 56px; }
  .nxab-contact { padding: 22px; }
  .nxab-mosaic { gap: 10px; }
  .nxab-mosaic img:nth-child(3n+2) { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) { .nxab-card { transition: none; } .nxab-card:hover, .nxab-card:focus-visible { transform: none; } }