/* SECTION */
.architecture-section{
  padding:60px 20px 0;
}

/* WRAPPER */
.architecture-wrapper{
  max-width:1280px;
  margin:0 auto;
  padding:32px 24px 40px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  position:relative;
  overflow:hidden;
}

/* GRID BACKGROUND */
.architecture-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:36px 36px;
  opacity:.25;
}

/* TITRES */
.architecture-title{
  text-align:center;
  font-size:40px;
  margin-bottom:10px;
}

.architecture-subtitle{
  text-align:center;
  color:#cbd5e1;
  margin-bottom:30px;
}

/* TOP TAGS */
.top-governance{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
  flex-wrap:wrap;
}

.top-governance span{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
}

/* MAP */
.map{
  position:relative;
  height:700px;
}

/* RINGS */
.ring{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(255,255,255,0.15);
}

.ring-1{ width:500px; height:500px; }
.ring-2{ width:700px; height:700px; opacity:0.5; }

/* NODES */
.node{
  position:absolute;
  padding:16px;
  border-radius:18px;
  text-align:center;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
}

/* CENTER */
.node-smart{
  width:300px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#0f172a;
  font-size:26px;
}

/* POSITIONS */
.stat{ left:10%; top:10%; background:#0e7490; }
.resil{ right:10%; top:10%; background:#6b21a8; }
.indus{ left:2%; top:40%; background:#c2410c; }
.eco{ right:2%; top:40%; background:#3f6212; }
.raptor{ left:10%; bottom:20%; background:#7f1d1d; }
.scale{ right:10%; bottom:20%; background:#1e3a8a; }
.equus{ left:30%; bottom:0%; background:#92400e; }
.aesthetic{ right:30%; bottom:0%; background:#86198f; }

/* SVG */
.svg-links{
  position:absolute;
  width:100%;
  height:100%;
}

.svg-links path{
  fill:none;
  stroke-width:2;
}

.legend{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin-top:22px;
    }

    .legend-item{
      padding:14px 16px;
      border-radius:16px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.08);
      color:var(--text-soft);
      font-size:14px;
    }

    .legend-item strong{
      display:block;
      color:#fff;
      margin-bottom:4px;
      font-size:14px;
    }