/* ==========================================================================
   Section: Why BINEXA
   Sticky intro column + scroll-driven steps (motion.js sets --steps-progress
   on the list and .is-active / .is-current on steps; dimming only applies
   when the list has .is-stepping, i.e. JS is driving it and motion is allowed).
   ========================================================================== */

.why { overflow: hidden; }

/* ---------- Background: giant outlined wordmark + glow ---------- */
.why__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(45% 55% at 100% 30%, rgba(211,157,53,.08), transparent 70%);
}
[dir="ltr"] .why__bg { background: radial-gradient(45% 55% at 0% 30%, rgba(211,157,53,.08), transparent 70%); }
.why__word {
  position: absolute;
  inset-block-end: -0.18em;
  inset-inline-end: -0.04em;
  font-family: var(--font-display-latin);
  font-size: clamp(90px, 19vw, 300px);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  direction: ltr;
}

/* ---------- Layout ---------- */
.why__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-20); align-items: start; }
  .why__intro-inner { position: sticky; inset-block-start: calc(var(--header-h-compact) + 56px); }
}

.why__intro-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.why__title { font-size: clamp(32px, 4.2vw, 54px); }
.why__lead {
  max-width: 460px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.why__cta { margin-block-start: var(--space-2); }
.why__hazard { --hazard-h: 10px; --stripe: 7px; width: 150px; margin-block-start: var(--space-4); border-radius: 2px; }

/* ---------- Steps ---------- */
.why__steps {
  --icon: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (max-width: 639px) {
  .why__steps { --icon: 52px; }
}

/* Track + scroll-driven fill, running through the icon centres */
.why__steps::before,
.why__steps::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--icon) / 2 + 22px);
  inset-inline-start: calc(var(--icon) / 2 - 1px);
  width: 2px;
  border-radius: 2px;
}
.why__steps::before { background: var(--border-subtle); }
.why__steps::after {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-600));
  transform-origin: top;
  transform: scaleY(1);
}
.why__steps.is-stepping::after {
  transform: scaleY(var(--steps-progress, 0));
  transition: transform 120ms linear;
}

.why__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--icon) minmax(0, 1fr);
  grid-template-areas:
    "icon num"
    "icon body";
  column-gap: var(--space-6);
  row-gap: 2px;
  padding-block: 22px;
  transition: opacity 500ms var(--ease-standard);
}
.why__num {
  grid-area: num;
  font-family: var(--font-display-latin);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--gold-500);
  padding-block-start: 6px;
}
.why__icon {
  grid-area: icon;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  border-radius: 50%;
  background: var(--surface-navy);
  border: 2px solid rgba(211,157,53,.35);
  color: var(--gold-500);
  font-size: calc(var(--icon) * .34);
  transition:
    background-color 400ms var(--ease-standard),
    color 400ms var(--ease-standard),
    border-color 400ms var(--ease-standard),
    transform 500ms var(--ease-out);
}
.why__body { grid-area: body; }
.why__step-title {
  font: var(--weight-extra) clamp(20px, 2.1vw, 26px)/1.35 var(--font-arabic);
  color: var(--white);
  margin-block-end: 6px;
  transition: color var(--dur-base) var(--ease-standard);
}
.why__step-text {
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Hover (always) */
.why__step:hover .why__icon { border-color: var(--gold-500); transform: rotate(-8deg); }
.why__step:hover .why__step-title { color: var(--gold-300); }

/* Scroll-driven states (only while JS drives the list) */
.why__steps.is-stepping .why__step:not(.is-active) { opacity: .35; }
.why__steps.is-stepping .why__step.is-active .why__icon { border-color: var(--gold-500); }
.why__steps.is-stepping .why__step.is-current .why__icon {
  background: var(--gold-500);
  color: var(--ink-900);
  transform: scale(1.08);
}
.why__steps.is-stepping .why__step.is-current .why__icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(211,157,53,.6);
  pointer-events: none;
  animation: bx-ring 2.2s var(--ease-out) infinite;
}
.why__steps:not(.is-stepping) .why__icon { border-color: var(--gold-500); }