.nx-hero {
  position: relative;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  min-height: clamp(490px, 65vw, 680px);
  margin-block: 0 3rem;
  color: #f8f8f1;
  background: #172328;
  font: 1rem/1.5 Inter, system-ui, sans-serif;
}
.nx-hero *, .nx-hero *::before { box-sizing: border-box; }
.nx-hero__landscape, .nx-hero__shade, .nx-hero__dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nx-hero__landscape {
  background: #172328 url('mine.webp') center 58% / cover no-repeat;
  filter: sepia(.38) saturate(1.45);
}
.nx-hero[data-scene="truck"] .nx-hero__landscape { filter: saturate(.92) hue-rotate(9deg); }
.nx-hero__machine {
  position: absolute;
  right: 0;
  bottom: 10%;
  width: 63%;
  height: 75%;
  background: url('excavator.webp') right bottom / contain no-repeat;
  filter: drop-shadow(0 16px 14px #080b0bb0);
  pointer-events: none;
}
.nx-hero[data-scene="truck"] .nx-hero__machine {
  background-image: url('truck.webp');
  width: 58%;
}
.nx-hero__dust {
  inset: 62% 0 -13% 28%;
  background: radial-gradient(ellipse at 62% 55%, #f5cb9552, transparent 66%);
  opacity: .48;
}
.nx-hero__shade {
  background: linear-gradient(90deg, #0a1519f5, #0a1519bd 36%, #0a151918 72%),
              linear-gradient(0deg, #0a1519a0, transparent 45%);
}
.nx-hero__content { z-index: 1; padding: 4rem clamp(1.4rem, 7vw, 7rem); }
.nx-hero__name { margin: 0 0 1.1rem; font-size: .9rem; letter-spacing: .25em; font-weight: 800; }
.nx-hero__name span { color: #d6ef66; }
.nx-hero h2 {
  color: inherit;
  margin: 0 0 1.25rem;
  font: 800 clamp(2.2rem, 6.8vw, 6.1rem)/.99 Inter, system-ui, sans-serif;
  letter-spacing: -.065em;
}
.nx-hero__intro { max-width: 26rem; margin: 0 0 1.55rem; color: #f0f2ec; }
.nx-hero__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  background: #d6ef66;
  color: #16200c;
  font-weight: 750;
  text-decoration: none;
}
.nx-hero__link:visited { color: #16200c; }
.nx-hero__pause {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  padding: .45rem .8rem;
  border: 1px solid #ffffff82;
  border-radius: .2rem;
  color: #fff;
  background: #10191ddd;
  font: inherit;
  cursor: pointer;
}
.nx-hero__pause[hidden] { display: none; }
.nx-hero a:focus-visible, .nx-hero button:focus-visible { outline: 3px solid #d6ef66; outline-offset: 4px; }
.nx-hero[data-motion="on"] .nx-hero__machine { animation: nx-creep 9s ease-in-out infinite alternate; }
.nx-hero[data-motion="on"][data-scene="truck"] .nx-hero__machine { animation-name: nx-drive; }
.nx-hero[data-motion="on"] .nx-hero__dust { animation: nx-dust 5s ease-in-out infinite alternate; }
.nx-hero[data-paused="true"] :is(.nx-hero__machine, .nx-hero__dust) { animation-play-state: paused; }
@keyframes nx-creep { from { transform: translate(8%, 0); } to { transform: translate(-3%, 1%) rotate(-.35deg); } }
@keyframes nx-drive { from { transform: translate(14%, -1%) scale(.93); } to { transform: translate(-14%, 1.5%) scale(1.03); } }
@keyframes nx-dust { from { transform: translateX(-7%) scale(.9); opacity: .28; } to { transform: translateX(5%) scale(1.12); opacity: .74; } }
@media (max-width: 650px) {
  .nx-hero { align-items: start; min-height: 565px; }
  .nx-hero__content { padding-top: 2rem; padding-bottom: 16rem; }
  .nx-hero__machine, .nx-hero[data-scene="truck"] .nx-hero__machine {
    width: 92%; height: 46%; bottom: 8%; right: 2%;
  }
  .nx-hero__shade { background: linear-gradient(180deg, #0a1519f5, #0a1519b5 45%, #0a151915 72%, #0a1519a0); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-hero[data-motion="on"] :is(.nx-hero__machine, .nx-hero__dust) { animation: none; }
  .nx-hero .nx-hero__pause { display: none; }
}