.nb { position: relative; z-index: 2; background: var(--yvo-black); }
.nb-track { position: relative; height: 280vh; }
.nb-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.nb-bg { position: absolute; inset: 0; overflow: hidden; background: var(--yvo-black); pointer-events: none; }
.yvo-gradiente { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nb-scrim { position: absolute; inset: 0;
  background:

    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .25) 26%, transparent 50%, rgba(0, 0, 0, .1) 72%, rgba(0, 0, 0, .45) 100%); }

.nb-copy { position: absolute; left: var(--copy-x); right: var(--copy-x); top: calc(var(--header-h) + 3.5svh); z-index: 3; text-align: center; }
.nb-title { font-size: clamp(38px, min(5.4vw, 9.6svh), 92px); line-height: 1.02; letter-spacing: -.025em; font-weight: 300; color: var(--yvo-goldenrod); }
.nb-title .ln { display: flex; justify-content: center; flex-wrap: wrap; column-gap: .24em; }
.nb-title .ln.b { font-weight: 800; color: var(--yvo-yellow-green); }

.nb-lap { --w: min(64vw, 100svh * 0.86, 1100px); position: absolute; z-index: 2; left: 50%; top: calc(var(--header-h) + 3.5svh + min(5.4vw, 9.6svh) * 2.2 + 1svh);
  width: var(--w); margin-left: calc(var(--w) / -2); aspect-ratio: 1580 / 1060; will-change: transform; }
.nb-lap-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
.nb-ctas { position: absolute; left: var(--copy-x); right: var(--copy-x); bottom: calc(46px + 2svh); z-index: 3;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.nb-hint { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center; font-size: 11px; letter-spacing: .16em; color: var(--yvo-key-lime); opacity: .7; }

.nb-flash { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: var(--yvo-black); }
.nb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ant-10); z-index: 6; }
.nb-progress span { display: block; height: 100%; width: 0; background: var(--yvo-yellow-green); }

.nb-loader { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--yvo-black); transition: transform 1s var(--e-expo); }
.nb-loader.out { transform: translateY(-100%); }
.nb-loader-in { display: grid; gap: 18px; justify-items: center; }
.nb-loader svg { height: 34px; width: auto; }
.nb-loader-track { width: min(46vw, 420px); height: 1px; background: var(--ant-22); overflow: hidden; }
.nb-loader-track i { display: block; height: 100%; background: var(--yvo-yellow-green); transform-origin: left; transform: scaleX(0); transition: transform .3s var(--e-expo); }
.nb-loader-txt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--yvo-key-lime); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .nb-track { height: 240vh; }
  .nb-lap { --w: 108vw; top: auto; bottom: calc(150px + 4svh); }
  .nb-ctas { flex-direction: column; align-items: center; bottom: calc(40px + 2svh); }
}

html.rm .nb-track { height: auto; }
html.rm .nb-stage { position: relative; height: auto; display: grid; gap: 24px; justify-items: center; padding: calc(var(--header-h) + 40px) var(--copy-x) 64px; }
html.rm .nb-copy, html.rm .nb-lap, html.rm .nb-ctas { position: relative; inset: auto; margin: 0; }
html.rm .nb-lap { width: min(900px, 100%); }
html.rm .nb-hint, html.rm .nb-progress, html.rm .nb-flash { display: none; }

.nb-bg { background: radial-gradient(60% 55% at 50% 50%, rgba(154, 218, 33, .35), rgba(0, 77, 67, .45) 45%, #000 85%), var(--yvo-black); }