.ns-unify{
  position:relative;
  padding:180px 24px 200px;
  overflow:hidden;
  background:
    radial-gradient(1100px 600px at 85% 10%, rgba(34,211,167,.08), transparent 60%),
    radial-gradient(1000px 700px at 10% 90%, rgba(79,125,245,.12), transparent 60%),
    linear-gradient(180deg,#0a0e1a 0%, #0d1324 60%, #0a0e1a 100%);
}
.ns-unify::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(140,160,220,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,160,220,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.ns-unify::after{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1px; height:100%; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(79,125,245,.18), transparent);
}
.ns-wrap{max-width:1240px; margin:0 auto; position:relative; z-index:2}
/* ====== HEADER ====== */
.ns-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:999px;
  background:rgba(79,125,245,.08); border:1px solid var(--border-strong);
  color:var(--text-secondary); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:28px;
}
.ns-eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 4px rgba(34,211,167,.18); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(34,211,167,.05)}}
.ns-head{text-align:center; max-width:880px; margin:0 auto 110px}
.ns-head h2{
  margin:0 0 22px;
  font-size:clamp(2.4rem,5.6vw,4.2rem); line-height:1.05; letter-spacing:-.02em; font-weight:680;
  color:var(--text-primary);
}
.ns-head h2 .grad{
  background:linear-gradient(110deg, var(--accent) 0%, var(--accent-2) 60%, #b9c7ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ns-head p{margin:0 auto; max-width:680px; color:var(--text-secondary); font-size:1.12rem; line-height:1.7}
/* ====== LAYOUT ====== */
.ns-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:center;
}
/* ====== LEFT: INTERACTIVE PILLARS ====== */
.ns-pillars{display:flex; flex-direction:column; gap:18px}
.pillar{
  --i:0;
  position:relative;
  display:grid; grid-template-columns:56px 1fr auto; gap:22px; align-items:flex-start;
  padding:24px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
  border:1px solid var(--border);
  border-radius:18px;
  cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s, box-shadow .5s;
  overflow:hidden;
}
.pillar::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 180px at var(--mx,50%) var(--my,50%), rgba(79,125,245,.18), transparent 60%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.pillar:hover::before{opacity:1}
.pillar:hover{transform:translateY(-4px); border-color:rgba(79,125,245,.35)}
.pillar.is-active{
  border-color:transparent;
  background:linear-gradient(180deg, rgba(79,125,245,.10), rgba(34,211,167,.05));
  box-shadow:var(--shadow-glow);
}
.pillar.is-active::after{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.pillar .ico{
  width:56px;height:56px; border-radius:14px;
  background:linear-gradient(135deg, rgba(79,125,245,.18), rgba(34,211,167,.12));
  border:1px solid rgba(79,125,245,.25);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); transition:transform .4s;
}
.pillar.is-active .ico{transform:rotate(-6deg) scale(1.05); color:var(--accent-2); border-color:rgba(34,211,167,.4)}
.pillar .ico svg{width:26px;height:26px}
.pillar .body h3{margin:0 0 8px; font-size:1.18rem; font-weight:620; color:var(--text-primary); letter-spacing:-.01em}
.pillar .body p{margin:0; color:var(--text-secondary); font-size:.97rem; line-height:1.6}
.pillar .num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  color:var(--text-dim); letter-spacing:.14em;
}
/* ====== RIGHT: ORBIT VISUAL ====== */
.ns-visual{position:relative}
.orb-frame{
  position:relative; aspect-ratio:1/1; border-radius:28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(79,125,245,.18), transparent 55%),
    linear-gradient(180deg, #0c1224, #0a0e1a);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.orb-frame::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(79,125,245,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,125,245,.06) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(circle at center, black 35%, transparent 75%);
}
.rings{position:absolute; inset:0; display:grid; place-items:center}
.ring{
  position:absolute; border:1px dashed rgba(140,160,220,.18); border-radius:50%;
  animation:spin linear infinite;
}
.ring.r1{width:42%; height:42%; animation-duration:30s}
.ring.r2{width:62%; height:62%; animation-duration:55s; animation-direction:reverse; border-style:solid; border-color:rgba(79,125,245,.12)}
.ring.r3{width:84%; height:84%; animation-duration:80s; border-color:rgba(34,211,167,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
.core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6a93ff, #2046b8 60%, #0a0e1a 100%);
  box-shadow:0 0 60px rgba(79,125,245,.55), inset 0 0 40px rgba(255,255,255,.08);
  display:grid; place-items:center;
  animation:breath 5s ease-in-out infinite;
}
.core::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(79,125,245,.35);
  animation:halo 3.5s ease-out infinite;
}
@keyframes halo{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes breath{50%{transform:translate(-50%,-50%) scale(1.04)}}
.core span{
  font-family:ui-monospace,monospace; font-size:.7rem; letter-spacing:.22em; color:#dfe7ff;
}
.node{
  position:absolute; left:50%; top:50%;
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
  border:1px solid var(--border-strong);
  display:grid; place-items:center;
  color:var(--text-secondary);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s, box-shadow .3s;
}
.node svg{width:26px;height:26px}
.node[data-pos="1"]{transform:translate(0,-170px)}
.node[data-pos="2"]{transform:translate(160px,60px)}
.node[data-pos="3"]{transform:translate(-160px,60px)}
.node.is-active{
  color:var(--accent-2);
  border-color:rgba(34,211,167,.5);
  box-shadow:0 10px 30px rgba(34,211,167,.25), inset 0 0 12px rgba(34,211,167,.15);
}
.node[data-pos="1"].is-active{transform:translate(0,-170px) scale(1.12)}
.node[data-pos="2"].is-active{transform:translate(160px,60px) scale(1.12)}
.node[data-pos="3"].is-active{transform:translate(-160px,60px) scale(1.12)}
/* connecting beams (svg overlay) */
.beams{position:absolute; inset:0; pointer-events:none}
.beams line{stroke:url(#beamGrad); stroke-width:1.2; stroke-dasharray:4 6; opacity:.45}
.beams line.active{stroke:var(--accent-2); opacity:1; stroke-dasharray:6 4; animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-40}}
.caption{margin-top:26px; text-align:center}
.caption h4{margin:0 0 6px; font-size:1.1rem; color:var(--accent-2); letter-spacing:.02em}
.caption p{margin:0; color:var(--text-secondary); font-size:.95rem}
/* ====== FOOTER ====== */
.ns-foot{
  margin-top:130px; text-align:center; max-width:760px; margin-left:auto; margin-right:auto;
  position:relative;
}
.ns-foot .divider{
  width:60px; height:1px; margin:0 auto 30px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.ns-foot p{
  font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.55; color:var(--text-primary);
  font-weight:480; letter-spacing:-.005em;
}
.ns-foot p .accent{color:var(--accent-2)}
/* ====== RESPONSIVE ====== */
@media (max-width: 980px){
  .ns-grid{grid-template-columns:1fr; gap:70px}
  .ns-visual{order:-1; max-width:520px; margin:0 auto}
  .node[data-pos="1"]{transform:translate(0,-140px)} .node[data-pos="1"].is-active{transform:translate(0,-140px) scale(1.12)}
  .node[data-pos="2"]{transform:translate(130px,50px)} .node[data-pos="2"].is-active{transform:translate(130px,50px) scale(1.12)}
  .node[data-pos="3"]{transform:translate(-130px,50px)} .node[data-pos="3"].is-active{transform:translate(-130px,50px) scale(1.12)}
}
@media (max-width:560px){
  .ns-unify{padding:120px 18px 140px}
  .pillar{grid-template-columns:48px 1fr; padding:20px}
  .pillar .num{display:none}
  .pillar .ico{width:48px;height:48px}
  .core{width:96px;height:96px}
  .node{width:54px;height:54px;margin:-27px 0 0 -27px}
}