/* ============================================================
   nslabs — Ecosystem (Section 6)
   Orbital ecosystem: living core + revolving layers + sync panel
   ============================================================ */
.ns-eco{
  --ec-accent: var(--accent, #4f7df5);
  --ec-accent-2: var(--accent-2, #22d3a7);
  --ec-bg: var(--bg-deep, #0a0e1a);
  --ec-surface: var(--bg-surface, #111728);
  --ec-elevated: var(--bg-elevated, #161d33);
  --ec-elevated-2: var(--bg-elevated-2, #1a2342);
  --ec-text: var(--text-primary, #e8ecf4);
  --ec-text-2: var(--text-secondary, #8a93ad);
  --ec-text-3: var(--text-dim, #5b6480);
  --ec-border: var(--border, rgba(140,160,220,.10));
  --ec-border-2: var(--border-strong, rgba(140,160,220,.18));

  position:relative;
  padding: 180px 24px 200px;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(34,211,167,.07), transparent 60%),
    radial-gradient(1100px 700px at -10% 100%, rgba(79,125,245,.12), transparent 60%),
    linear-gradient(180deg, #0b1124 0%, #070a14 100%);
  overflow:hidden;
  isolation:isolate;
}
.ns-eco::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(140,160,220,.18) 1px, transparent 1.2px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity:.45;
}

.ns-eco__wrap{
  position:relative; z-index:1;
  max-width: 1280px; margin: 0 auto;
}

/* ============ HEADER ============ */
.ec-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding: 7px 14px;
  background: linear-gradient(135deg, rgba(79,125,245,.12), rgba(34,211,167,.08));
  border: 1px solid rgba(79,125,245,.28);
  color: var(--ec-text-2);
  border-radius: 999px;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight:600;
}
.ec-eyebrow code{ font-family: ui-monospace, monospace; color: var(--ec-accent-2); }

.ns-eco__head{ text-align:center; max-width: 820px; margin: 0 auto 90px; }
.ns-eco__head h2{
  margin: 22px 0 16px;
  font-size: clamp(2.4rem, 5.4vw, 3.8rem);
  line-height: 1.06; letter-spacing: -.02em; font-weight: 680;
  color: var(--ec-text);
}
.ns-eco__head h2 .grad{
  background: linear-gradient(110deg, var(--ec-accent), var(--ec-accent-2) 70%, #b9c7ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ns-eco__head p{
  margin: 0 auto; max-width: 560px;
  color: var(--ec-text-2); font-size: 1.1rem; line-height: 1.7;
}

/* ============ STAGE LAYOUT ============ */
.ec-stage{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ====== ORBIT (LEFT) ====== */
.ec-orbit{
  --size: 560px;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: var(--size);
  margin: 0 auto;
}

/* concentric rings */
.ec-ring{
  position:absolute; inset:0; margin:auto;
  border-radius: 50%;
  border: 1px solid rgba(140,160,220,.12);
}
.ec-ring.r1{ width: 32%; height: 32%; border-style: solid; border-color: rgba(79,125,245,.18);}
.ec-ring.r2{ width: 54%; height: 54%; border-style: dashed; border-color: rgba(140,160,220,.14);}
.ec-ring.r3{ width: 76%; height: 76%; border-style: dashed; border-color: rgba(34,211,167,.12);}
.ec-ring.r4{ width: 96%; height: 96%; border-style: solid; border-color: rgba(140,160,220,.08);}

/* slow rotators (purely visual) */
.ec-spin{
  position:absolute; inset:0; border-radius:50%;
  animation: ecSpin linear infinite;
}
.ec-spin.s1{ animation-duration: 60s; }
.ec-spin.s2{ animation-duration: 110s; animation-direction: reverse; }
@keyframes ecSpin{ to{ transform: rotate(360deg); } }

/* tick marks on outer ring */
.ec-spin.s1::before, .ec-spin.s1::after{
  content:""; position:absolute;
  width: 6px; height: 6px; border-radius:50%;
  background: var(--ec-accent);
  box-shadow: 0 0 12px var(--ec-accent);
}
.ec-spin.s1::before{ top: 1%; left: 50%; transform: translateX(-50%); }
.ec-spin.s1::after{ bottom: 1%; left: 50%; transform: translateX(-50%); background: var(--ec-accent-2); box-shadow: 0 0 12px var(--ec-accent-2);}

/* CORE */
.ec-core{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 30%; height: 30%; min-width: 130px; min-height: 130px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #6a93ff 0%, #2046b8 55%, #0a0e1a 100%);
  box-shadow:
    0 0 80px rgba(79,125,245,.45),
    inset 0 0 50px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.08);
  display:grid; place-items:center;
  animation: ecBreath 5s ease-in-out infinite;
  z-index: 3;
}
@keyframes ecBreath{ 50%{ transform: translate(-50%,-50%) scale(1.04); } }
.ec-core__inner{
  text-align:center;
  font-family: ui-monospace, monospace;
  color: #dfe7ff;
}
.ec-core__inner b{ display:block; font-size: 1rem; letter-spacing: .22em; }
.ec-core__inner span{ display:block; margin-top: 6px; font-size: .65rem; color: rgba(223,231,255,.6); letter-spacing: .18em;}
.ec-core::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border: 1px solid rgba(79,125,245,.45);
  animation: ecHalo 3.4s ease-out infinite;
}
@keyframes ecHalo{ 0%{ transform:scale(.92); opacity:.85; } 100%{ transform:scale(1.55); opacity:0; } }

/* nodes (positioned absolutely on the ring) */
.ec-node{
  position:absolute;
  left:50%; top:50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ec-elevated), var(--ec-surface));
  border: 1px solid var(--ec-border-2);
  display:grid; place-items:center;
  color: var(--ec-text-2);
  cursor: pointer;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .35s, color .35s, box-shadow .45s, background .35s;
  z-index: 4;
}
.ec-node svg{ width: 26px; height: 26px; }

/* place each node: --tx --ty are translations from center, set inline */
.ec-node[data-i="1"]{ transform: translate(0, -42%); }              /* top */
.ec-node[data-i="2"]{ transform: translate(40%, -13%); }            /* right top */
.ec-node[data-i="3"]{ transform: translate(25%, 36%); }             /* right bottom */
.ec-node[data-i="4"]{ transform: translate(-25%, 36%); }            /* left bottom */
.ec-node[data-i="5"]{ transform: translate(-40%, -13%); }           /* left top */

.ec-node:hover{ color: var(--ec-text); border-color: rgba(79,125,245,.5); }
.ec-node.is-active{
  background: linear-gradient(135deg, rgba(79,125,245,.35), rgba(34,211,167,.18));
  border-color: rgba(79,125,245,.6);
  color: #fff;
  box-shadow:
    0 0 0 6px rgba(79,125,245,.10),
    0 12px 30px rgba(79,125,245,.35),
    inset 0 0 14px rgba(255,255,255,.08);
}
.ec-node[data-i="1"].is-active{ transform: translate(0, -42%) scale(1.15); }
.ec-node[data-i="2"].is-active{ transform: translate(40%, -13%) scale(1.15); }
.ec-node[data-i="3"].is-active{ transform: translate(25%, 36%) scale(1.15); }
.ec-node[data-i="4"].is-active{ transform: translate(-25%, 36%) scale(1.15); }
.ec-node[data-i="5"].is-active{ transform: translate(-40%, -13%) scale(1.15); }

/* node label tooltip */
.ec-node__label{
  position:absolute; top: calc(100% + 8px); left:50%;
  transform: translateX(-50%);
  font-family: ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ec-text-3);
  white-space: nowrap;
  opacity: .8;
}
.ec-node.is-active .ec-node__label{ color: var(--ec-accent-2); }

/* connecting beams (svg overlay) */
.ec-beams{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.ec-beams line{
  stroke: url(#ecBeam);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
  opacity: .35;
}
.ec-beams line.active{
  stroke: var(--ec-accent-2);
  opacity: 1;
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  animation: ecFlow 1.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(34,211,167,.55));
}
@keyframes ecFlow{ to{ stroke-dashoffset: -40; } }

/* particle pulses traveling along beams */
.ec-pulse{
  position:absolute; width: 8px; height: 8px; border-radius:50%;
  background: var(--ec-accent-2);
  box-shadow: 0 0 14px var(--ec-accent-2);
  pointer-events:none;
  opacity: 0;
  z-index: 5;
}
.ec-pulse.is-on{ animation: ecPulseTravel 1.6s ease-in-out infinite; }
@keyframes ecPulseTravel{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.6); }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ opacity:0; transform: translate(var(--dx,0), var(--dy,0)) scale(1.1); }
}

/* ====== PANEL (RIGHT) ====== */
.ec-panel{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--ec-border-2);
  border-radius: 22px;
  padding: 30px 32px 26px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  overflow: hidden;
}
.ec-panel::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(500px 250px at 80% -20%, rgba(79,125,245,.18), transparent 60%);
  pointer-events:none;
}

.ec-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 22px;
  position: relative; z-index:1;
}
.ec-panel__crumb{
  font-family: ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ec-text-3);
}
.ec-panel__crumb b{ color: var(--ec-accent-2); font-weight: 600; }
.ec-status{
  display:inline-flex; align-items:center; gap:8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(34,211,167,.10);
  border: 1px solid rgba(34,211,167,.30);
  font-size: .7rem; color: var(--ec-accent-2);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.ec-status .live{
  width:6px; height:6px; border-radius:50%;
  background: var(--ec-accent-2);
  box-shadow: 0 0 0 4px rgba(34,211,167,.18);
  animation: ecLive 2s ease-in-out infinite;
}
@keyframes ecLive{ 50%{ box-shadow: 0 0 0 7px rgba(34,211,167,.04);} }

/* layer detail block */
.ec-detail{ position:relative; z-index:1; min-height: 220px; }
.ec-detail__row{
  display: none;
  animation: ecFade .4s ease-out;
}
.ec-detail__row.is-active{ display: block; }
@keyframes ecFade{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

.ec-detail__icon{
  width: 56px; height: 56px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(79,125,245,.22), rgba(34,211,167,.14));
  border: 1px solid rgba(79,125,245,.32);
  color: var(--ec-accent);
  margin-bottom: 18px;
}
.ec-detail__icon svg{ width: 26px; height: 26px; }

.ec-detail__row h3{
  margin: 0 0 8px;
  font-size: 1.55rem; font-weight: 620; letter-spacing: -.01em;
  color: var(--ec-text);
}
.ec-detail__row h3 small{
  display:inline-block; margin-left: 10px;
  font-family: ui-monospace, monospace;
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ec-accent-2);
  vertical-align: middle;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(34,211,167,.10);
  border: 1px solid rgba(34,211,167,.28);
}
.ec-detail__row p{
  margin: 0 0 18px;
  color: var(--ec-text-2);
  font-size: 1rem; line-height: 1.7;
}

.ec-stats{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--ec-border);
}
.ec-stat__label{
  display:block;
  font-family: ui-monospace, monospace;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ec-text-3);
  margin-bottom: 6px;
}
.ec-stat__value{
  font-size: 1.05rem; font-weight: 620;
  color: var(--ec-text);
  letter-spacing: -.01em;
}
.ec-stat__value .accent{ color: var(--ec-accent-2); }

/* layer chips bar */
.ec-chips{
  display:flex; flex-wrap:wrap; gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ec-border);
  position: relative; z-index:1;
}
.ec-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ec-border-2);
  font-size: .78rem;
  color: var(--ec-text-2);
  cursor: pointer;
  transition: all .25s ease;
  font-family: ui-monospace, monospace;
  letter-spacing: .08em;
}
.ec-chip .num{ color: var(--ec-text-3); font-size:.68rem;}
.ec-chip:hover{ color: var(--ec-text); border-color: rgba(79,125,245,.4); transform: translateY(-1px); }
.ec-chip.is-active{
  color: #fff;
  background: linear-gradient(135deg, var(--ec-accent), var(--ec-accent-2));
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(79,125,245,.35);
}
.ec-chip.is-active .num{ color: rgba(255,255,255,.7); }

/* ============ FOOTER ============ */
.ns-eco__foot{
  margin-top: 130px; text-align:center; position: relative;
}
.ec-divider{
  width: 60px; height: 1px; margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, var(--ec-accent), transparent);
}
.ns-eco__foot p{
  margin: 0 auto; max-width: 640px;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.55;
  color: var(--ec-text); font-weight: 480; letter-spacing: -.005em;
}
.ns-eco__foot p .accent{ color: var(--ec-accent-2); font-weight: 600;}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .ec-stage{ grid-template-columns: 1fr; gap: 50px; }
  .ec-orbit{ --size: 480px; order: -1; }
  .ec-panel{ max-width: 620px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px){
  .ns-eco{ padding: 110px 16px 130px; }
  .ec-orbit{ --size: 360px; }
  .ec-node{ width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 14px; }
  .ec-node svg{ width: 22px; height: 22px; }
  .ec-node__label{ font-size: .55rem; }
  .ec-panel{ padding: 24px 22px; }
  .ec-stats{ grid-template-columns: 1fr; }
}