.nn-test {
  --nn-ink: #07040d;
  --nn-purple: #8d2cff;
  --nn-pink: #ff3ab5;
  --nn-cyan: #25e9ff;
  --nn-yellow: #ffd43b;
  --nn-white: #fff8ff;
  background: var(--nn-ink);
  color: var(--nn-white);
  font-family: Arial, Helvetica, sans-serif;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.nn-test * { box-sizing: border-box; }
.nn-test img { display: block; width: 100%; height: auto; }
.nn-test p { line-height: 1.55; }

.nn-hero {
  min-height: 88vh;
  position: relative;
  display: grid;
  align-items: end;
  isolation: isolate;
}

.nn-hero__image,
.nn-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nn-hero__image { object-fit: cover; object-position: 50% 42%; z-index: -3; }
.nn-hero__veil {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(7,4,13,.95) 0%, rgba(7,4,13,.72) 44%, rgba(7,4,13,.25) 75%),
    linear-gradient(0deg, #07040d 0%, transparent 42%);
}

.nn-hero__content {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 9rem 0 7rem;
}

.nn-kicker {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 800;
  font-size: .78rem;
  color: var(--nn-cyan);
  margin: 0 0 1rem;
}

.nn-hero h1 {
  font-size: clamp(4.6rem, 12vw, 10rem);
  line-height: .78;
  margin: 0;
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow: 7px 7px 0 var(--nn-purple), 13px 13px 0 rgba(37,233,255,.38);
}

.nn-tagline {
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  font-weight: 800;
  margin: 2rem 0 .7rem;
  color: var(--nn-yellow);
}

.nn-intro { max-width: 690px; font-size: 1.08rem; color: rgba(255,248,255,.86); }
.nn-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.nn-button {
  display: inline-block;
  padding: .95rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  font-weight: 900;
  border: 2px solid var(--nn-white);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nn-button:hover,
.nn-button:focus { transform: translateY(-3px); }
.nn-button--primary { background: var(--nn-pink); color: #130617; box-shadow: 6px 6px 0 var(--nn-cyan); }
.nn-button--ghost { color: var(--nn-white); background: rgba(7,4,13,.45); }

.nn-strip {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 6rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.nn-strip article {
  min-height: 250px;
  padding: 1.7rem;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(141,44,255,.24), rgba(255,58,181,.06));
}
.nn-number { color: var(--nn-yellow); font-weight: 900; letter-spacing: .15em; }
.nn-strip h2,
.nn-feature h2,
.nn-duo h2,
.nn-cta h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .95;
  margin: .8rem 0 1rem;
}
.nn-strip p { color: rgba(255,248,255,.75); }

.nn-feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  background: #0d0820;
}
.nn-feature__image-wrap { min-height: 520px; }
.nn-feature__image-wrap img { height: 100%; object-fit: cover; }
.nn-feature__copy { padding: clamp(3rem, 7vw, 7rem); align-self: center; }
.nn-feature__copy p:last-child { max-width: 36rem; color: rgba(255,248,255,.78); }

.nn-duo { position: relative; min-height: 760px; }
.nn-duo > img { height: 760px; object-fit: cover; object-position: center 58%; }
.nn-duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 28%, rgba(7,4,13,.08) 58%, rgba(7,4,13,.9) 100%);
}
.nn-duo__card {
  position: absolute;
  z-index: 2;
  right: max(4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  width: min(470px, 42vw);
  padding: 2rem;
  background: rgba(7,4,13,.82);
  border-left: 7px solid var(--nn-pink);
  backdrop-filter: blur(7px);
}

.nn-cta {
  text-align: center;
  padding: 7rem 5vw 8rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,233,255,.18), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(255,58,181,.22), transparent 30%),
    #07040d;
}
.nn-cta p:not(.nn-kicker) { color: rgba(255,248,255,.72); margin-bottom: 2rem; }

@media (max-width: 780px) {
  .nn-hero { min-height: 92vh; }
  .nn-hero__veil { background: linear-gradient(0deg, #07040d 0%, rgba(7,4,13,.62) 52%, rgba(7,4,13,.18) 100%); }
  .nn-hero__content { padding: 8rem 0 4rem; }
  .nn-hero h1 { font-size: clamp(4.1rem, 20vw, 7rem); }
  .nn-strip { grid-template-columns: 1fr; padding: 4rem 0; }
  .nn-feature { grid-template-columns: 1fr; }
  .nn-feature__image-wrap { min-height: 320px; }
  .nn-duo { min-height: auto; background: #07040d; }
  .nn-duo > img { height: 560px; object-position: center 52%; }
  .nn-duo::after { background: linear-gradient(0deg, #07040d 0%, transparent 55%); }
  .nn-duo__card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: auto;
    margin: -7rem 5vw 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nn-button { transition: none; }
}