/* ============================================================
   NASAON — NETWORK HERO
   Scoped entirely under .nsn-hero so it cannot leak into the
   rest of the theme. No body-level overflow rules.
   ============================================================ */

.nsn-hero {
  --ink:      #0c1116;
  --navy:     #0e3a5a;
  --accent:   #0077b6;
  --cyan:     #3fc4ee;
  --paper:    #f7f5f0;
  --muted:    #b6bcc4;
  --chip:     #1a2028;
  --line:     rgba(255,255,255,0.28);

  position: relative;
  overflow: clip;                 /* clips stray nodes; page still scrolls */
  min-height: 100svh;             /* svh, not vh — survives mobile browser chrome */
  background: var(--ink);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(0,119,182,0.14), transparent 70%);
  color: var(--paper);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  isolation: isolate;
}

/* ---------- connector lines ---------- */
.nsn-hero__web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.nsn-hero__web line {
  stroke: var(--line);
  stroke-width: 1.25;
  /* pathLength="1" is set as an SVG ATTRIBUTE on each line below.
     That is what makes this dash trick work — it is not a CSS property. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: nsnDraw 0.9s ease-out forwards, nsnPulse 4.5s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.9s);
}
@keyframes nsnDraw  { to { stroke-dashoffset: 0; } }
@keyframes nsnPulse {
  0%, 100% { stroke: var(--line); }
  50%      { stroke: rgba(63,196,238,0.5); }
}

/* ---------- centre ---------- */
.nsn-hero__core {
  position: relative;
  z-index: 10;
  max-width: 560px;
  margin: 0 auto;
  padding: 14vh 24px 10vh;
  text-align: center;
  opacity: 0;
  animation: nsnCore 0.9s ease-out 0.25s forwards;
}
@keyframes nsnCore {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.nsn-hero__logo {
  width: 96px;
  height: auto;
  margin-bottom: 1.75rem;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  animation: nsnFloat 5s ease-in-out 1.2s infinite;
}
@keyframes nsnFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.nsn-hero__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.nsn-hero__title mark {
  background: var(--accent);
  color: var(--paper);
  padding: 3px 10px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.nsn-hero__lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 auto 2rem;
}
.nsn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.nsn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .22s ease, transform .22s ease, border-color .22s ease;
}
.nsn-btn--solid  { background: var(--paper); color: #000; }
.nsn-btn--solid:hover  { background: #fff; transform: translateY(-2px); }
.nsn-btn--ghost  { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.3); }
.nsn-btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.nsn-btn i { font-style: normal; display: inline-block; transition: transform .22s ease; }
.nsn-btn:hover i { transform: translateX(4px); }

/* ---------- nodes ---------- */
.nsn-cluster { position: static; }   /* children anchor to .nsn-hero */

.nsn-node {
  position: absolute;
  top: var(--t);
  left: var(--l);
  transform: translate(-50%, -50%);
  z-index: 5;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  animation: nsnNode 0.6s ease-out var(--d, 0s) forwards;
}
@keyframes nsnNode {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(0.93); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
.nsn-node > span {
  display: inline-block;
  border-radius: 3px;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* pillar (hub) nodes */
.nsn-node--hub { font-family: 'Instrument Serif', Georgia, serif; }
.nsn-node--hub > span {
  background: var(--accent);
  color: var(--paper);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.35;
  padding: 6px 12px;
  text-align: center;
}
.nsn-node--hub:hover > span,
.nsn-node--hub:focus-visible > span {
  background: var(--cyan);
  color: #06121b;
  box-shadow: 0 0 26px rgba(63,196,238,0.45);
}

/* flagship gets a marker so it doesn't read as a generic category */
.nsn-node--flagship > span::after {
  content: 'Product';
  display: block;
  margin-top: 5px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* leaf nodes */
.nsn-node--leaf > span {
  background: var(--chip);
  color: #d3d8de;
  font-size: 0.88rem;
  padding: 4px 9px;
}
.nsn-node--leaf:hover > span,
.nsn-node--leaf:focus-visible > span {
  background: #26303a;
  color: #fff;
}

.nsn-node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 3px; }

.nsn-cluster__label { display: none; }   /* mobile only */

/* ============================================================
   MOBILE — the constellation cannot survive a 380px viewport,
   so it becomes an honest stacked list. Lines off, motion off.
   ============================================================ */
@media (max-width: 980px) {
  .nsn-hero        { min-height: 0; padding-bottom: 4rem; overflow: visible; }
  .nsn-hero__web   { display: none; }
  .nsn-hero__core  { padding: 8vh 22px 3rem; }

  .nsn-cluster {
    display: block;
    max-width: 560px;
    margin: 0 auto 2rem;
    padding: 0 22px;
  }
  .nsn-cluster__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6e7885;
    margin-bottom: 0.7rem;
  }
  .nsn-node {
    position: static;
    transform: none;
    display: inline-block;
    margin: 0 6px 8px 0;
    opacity: 1;
    animation: none;
    white-space: normal;
  }
  .nsn-node--hub { display: block; margin-bottom: 10px; }
  .nsn-node--hub > span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .nsn-hero *,
  .nsn-hero *::before,
  .nsn-hero *::after { animation: none !important; transition: none !important; }
  .nsn-hero__web line { stroke-dashoffset: 0; }
  .nsn-hero__core, .nsn-node { opacity: 1; }
}