/* ==========================================================================
   nm-bfcm-hero.css: the "Cyber 5 2025 replay" hero on
   /reports/black-friday-back-in-stock-demand-5-years (frontmatter heroReplay).
   Follows DESIGN-SYSTEM.md: dark band = the homepage .nm-proof treatment (ink
   base, blue top glow, masked blueprint grid); Tt Drugs headings capped at 600;
   PT Mono only for the one eyebrow (site-v2.css §12 via .nm-proof__kicker);
   sharp outer shell, curved interior (1.4rem cards, 999px pills, 50% dots).
   Colours: dark-mode tokens only (#4380f9 primary, #c2dcff secondary, #f8f8fb
   text, #9f9fa3 muted, #272632 card) plus --v2-gold for the second series.
   ========================================================================== */
.nm-hero {
  --h-ink: #12111c;
  --h-blue: #4380f9;
  --h-blue-2: #5e93fb;
  --h-sec: #c2dcff;
  --h-fg: #f8f8fb;
  --h-muted: #9f9fa3;
  --h-card: #272632;
  --h-line: rgba(255, 255, 255, 0.08);
  --h-gold: #fbbf24;
  position: relative;
  overflow: hidden;
  padding: clamp(11rem, 12vw, 13rem) 2rem clamp(3.2rem, 4vw, 4.4rem);
  background:
    radial-gradient(120% 150% at 50% -25%, #1f2a52 0%, #12111c 58%),
    var(--h-ink);
  color: var(--h-fg);
  font-family: "Inter Tight", Inter, sans-serif;
}
.nm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 4.4rem 4.4rem;
  -webkit-mask-image: radial-gradient(95% 80% at 50% 0%, #000 10%, transparent 70%);
          mask-image: radial-gradient(95% 80% at 50% 0%, #000 10%, transparent 70%);
}
.nm-hero * { box-sizing: border-box; }
.nm-hero-in { position: relative; z-index: 2; max-width: 128rem; margin: 0 auto; }

/* Head: eyebrow, h1, lead. Centred container, so every child centres from it. */
.nm-hero-head { text-align: center; max-width: 86rem; margin: 0 auto clamp(2.4rem, 3vw, 3.6rem); }
.nm-hero .nm-hero-kicker { margin: 0 0 1.8rem; color: var(--h-sec); }
.nm-hero .nm-hero-title {
  margin: 0 auto 1.6rem;
  max-width: 22ch;
  font-family: var(--v2-display, "Tt Drugs", "Inter Tight", sans-serif);
  font-size: var(--fs-h1, clamp(3.4rem, 4.4vw, 4.8rem));
  font-weight: 600;
  line-height: var(--lh-heading, 1.12);
  letter-spacing: var(--tr-heading, -0.01em);
  color: #fff;
}
.nm-hero .nm-hero-sub {
  margin: 0 auto;
  max-width: 64rem;
  font-size: var(--fs-lead, clamp(1.6rem, 1.5vw, 1.8rem));
  line-height: var(--lh-lead, 1.55);
  color: var(--h-muted);
}

/* App: stats | globe | countries */
.nm-hero-grid { display: grid; grid-template-columns: minmax(22rem, 1fr) minmax(0, 2.1fr) minmax(22rem, 1fr); gap: 2.4rem; align-items: center; }
.nm-hero-stats { display: flex; flex-direction: column; gap: 2.2rem; }
.nm-stat .nm-n {
  font-family: var(--v2-display, "Tt Drugs", "Inter Tight", sans-serif);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tr-display, -0.02em);
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.nm-stat.nm-big .nm-n { font-size: var(--fs-stat, clamp(4.6rem, 6vw, 6.6rem)); color: var(--h-blue-2); }
.nm-stat .nm-l { margin-top: 0.6rem; font-size: var(--fs-body-sm, 1.35rem); color: var(--h-muted); display: flex; align-items: center; gap: 0.7rem; }
.nm-stat .nm-l i { width: 0.9rem; height: 0.9rem; border-radius: 50%; display: inline-block; flex: none; }

.nm-hero-globe { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 58rem; margin: 0 auto; cursor: grab; touch-action: pan-y; }
.nm-hero-globe:active { cursor: grabbing; }
.nm-hero-globe canvas { width: 100%; height: 100%; display: block; }
.nm-hero-clock {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 1.5rem; border-radius: 999px;
  background: rgba(18, 17, 28, 0.78); border: 1px solid var(--h-line);
  font-size: var(--fs-meta, 1.25rem); color: var(--h-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.nm-hero-clock b { color: #fff; font-weight: 600; }
.nm-hero-clock i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--h-blue); box-shadow: 0 0 0 0 rgba(67, 128, 249, 0.6); animation: nmHeroPulse 1.8s infinite; }
@keyframes nmHeroPulse { 70% { box-shadow: 0 0 0 0.8rem rgba(67, 128, 249, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 128, 249, 0); } }

.nm-hero-side h2 {
  margin: 0 0 1.4rem;
  font-family: var(--v2-display, "Tt Drugs", "Inter Tight", sans-serif);
  font-size: var(--fs-h4, clamp(1.8rem, 1.6vw, 2rem));
  font-weight: 600; line-height: 1.2; color: #fff;
}
.nm-crow { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; margin-bottom: 1rem; font-size: var(--fs-body-sm, 1.35rem); color: var(--h-fg); }
.nm-crow em { font-style: normal; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.nm-crow .nm-bar { grid-column: 1 / 3; height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.nm-crow .nm-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #03369a, #5e93fb); }
.nm-peak {
  margin-top: 1.8rem; padding: 1.4rem 1.6rem;
  border-radius: var(--v2-radius-inner, 1.4rem);
  background: var(--h-card); border: 1px solid var(--h-line);
  font-size: var(--fs-body-sm, 1.35rem); line-height: 1.55; color: var(--h-muted);
}
.nm-peak b { color: #fff; font-weight: 600; }

/* Timeline */
.nm-tl { margin-top: 2rem; display: flex; align-items: center; gap: 1.4rem; }
.nm-tl button {
  flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18); background: #fff; color: var(--h-ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.nm-tl button:hover { transform: scale(1.04); }
.nm-tl button svg { fill: var(--h-ink); }
.nm-tl-track { position: relative; flex: 1; height: 6.4rem; cursor: pointer; touch-action: none; }
.nm-tl-track canvas { width: 100%; height: 100%; display: block; }
.nm-tl-track:focus-visible { outline: 2px solid var(--h-blue); outline-offset: 4px; border-radius: 0.6rem; }
.nm-hero-foot { margin-top: 1.2rem; text-align: center; font-size: var(--fs-caption, 1.15rem); color: var(--h-muted); }
.nm-hero-foot a { color: var(--h-sec); }

@media (max-width: 991px) {
  .nm-hero-grid { grid-template-columns: 1fr 1fr; }
  .nm-hero-globe { grid-column: 1 / 3; grid-row: 1; max-width: 46rem; }
}
@media (max-width: 600px) {
  .nm-hero { padding: 9.6rem 1.4rem 2.4rem; }
  .nm-hero-grid { gap: 1.6rem; }
  .nm-hero-stats { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
  .nm-stat .nm-n { font-size: 2.6rem; }
  .nm-stat.nm-big .nm-n { font-size: 3rem; }
  .nm-hero-side { grid-column: 1 / 3; }
  .nm-hero-side .nm-crow:nth-of-type(n+6) { display: none; }
  .nm-hero-clock { font-size: 1.1rem; }
  .nm-tl-track { height: 5.2rem; }
}
@media (prefers-reduced-motion: reduce) { .nm-hero-clock i { animation: none; } }