/* NEXTON hero — exact port of Figma hero (20:682) */
.nx-hero { padding-block: clamp(20px, 3vw, 32px); }
.nx-hero .container { position: relative; }

.nx-hero__slides { display: grid; }
.nx-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 560px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}
.nx-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.nx-hero__text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-bottom: 36px; }
.nx-hero__eyebrow { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--color-text-muted); }
.nx-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem); /* 64px desktop */
  line-height: 1.125;                  /* 72/64 */
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  max-width: 12ch;
}
.nx-hero__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 20px 36px;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 500; line-height: 1.5;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition), background var(--transition);
}
.nx-hero__btn:hover { background: #1f2937; color: #fff; transform: translateY(-1px); }
.nx-hero__btn svg { width: 18px; height: 18px; }

.nx-hero__media {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 560px;
  background: var(--color-surface);
  border-radius: 24px;
  overflow: hidden;
}
.nx-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.nx-hero__dots { position: absolute; left: var(--container-px); bottom: 36px; display: flex; gap: 8px; align-items: center; z-index: 3; }
.nx-hero__dot { height: 8px; width: 8px; border-radius: 30px; border: 0; padding: 0; background: var(--color-text); opacity: 0.8; cursor: pointer; transition: width var(--transition); }
.nx-hero__dot.is-active { width: 40px; opacity: 1; }

@media (max-width: 820px) {
  .nx-hero__slide { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
  .nx-hero__text { order: 1; padding-bottom: 8px; }
  .nx-hero__media { order: 2; min-height: 0; aspect-ratio: 4 / 3; border-radius: 20px; }
  .nx-hero__title { max-width: none; }
  .nx-hero__dots { position: static; margin-top: 16px; }
}