.nav-btn{
background: linear-gradient(45deg,#22d3ee,#06b6d4);
padding:6px 14px;
border-radius:999px;
color:black;
font-weight:bold;
}

.card-btn{
background:rgba(30,41,59,0.8);
padding:20px 30px;
border-radius:12px;
font-size:18px;
transition:0.3s;
}
.card-btn:hover{
background:#22d3ee;
color:black;
}

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
align-items:center;
justify-content:center;
z-index:1000;
}

.modal-box{
background:#020617;
padding:25px;
border-radius:12px;
}
.close-btn{
background:red;
padding:6px;
margin-top:10px;
}
.node{
width:60px;
height:60px;
border-radius:50%;
background:#334155;
display:flex;
align-items:center;
justify-content:center;
transition:0.3s;
}

.active{
background:#22c55e;
box-shadow:0 0 10px #22c55e;
}
/* ===== NUMERICAL UI FIX ===== */

.num-box{
  background: rgba(30,41,59,0.9);
  padding:20px;
  border-radius:12px;
  width:420px;
  text-align:center;
  box-shadow:0 0 10px rgba(34,211,238,0.2);
}

.num-title{
  color:#22d3ee;
  font-weight:bold;
  margin-bottom:10px;
}

.num-label{
  display:block;
  text-align:left;
  margin-top:10px;
  font-size:14px;
  color:#cbd5f5;
}

.num-input{
  width:100%;
  padding:10px;
  margin-top:4px;
  border-radius:6px;
  border:2px solid #22d3ee;
  background:#020617;
  color:white;
}

.num-btn{
  margin-top:12px;
  background:linear-gradient(45deg,#22d3ee,#06b6d4);
  padding:8px 16px;
  border-radius:999px;
  color:black;
  font-weight:bold;
}

.num-result{
  margin-top:10px;
  color:#22c55e;
  font-weight:bold;
}

/* ===== NEON GLOW ===== */
.node, .slot{
  transition: all 0.3s ease;
}

.active{
  background:#22c55e;
  box-shadow:0 0 10px #22c55e, 0 0 20px #22c55e;
}

/* ===== PACKET ===== */
.packet{
  width:12px;
  height:12px;
  background:#22d3ee;
  border-radius:50%;
  position:absolute;
  box-shadow:0 0 10px #22d3ee;
  transition:all 0.5s linear;
}

/* ===== ANIMATION CONTAINER ===== */
.simulation-area{
  position:relative;
  height:120px;
}

/* ===== GLASS EFFECT ===== */
.card{
  background: rgba(30,41,59,0.6);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.1);
}

/* ===== BUTTON GLOW ===== */
.nav-btn:hover, .num-btn:hover{
  box-shadow:0 0 10px #22d3ee;
}

/* ===== PAGE GLOW ===== */
body{
  background: radial-gradient(circle at top,#020617,#000000);
}

/* ===== NODE HOVER ===== */
.node:hover{
  transform: scale(1.1);
}
/* ===== TEAM SECTION ===== */
/* ===== TEAM SECTION ===== */

.team-grid{
  display:flex;
  gap:35px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:15px;
}

.team-card{
  text-align:center;
  width:160px;
}

.team-img{
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #22d3ee;
  box-shadow:0 0 15px rgba(34,211,238,0.6);
}

.team-name{
  margin-top:10px;
  font-weight:600;
  font-size:16px;
  color:#e2e8f0;
}

.team-reg{
  font-size:14px;
  color:#22d3ee;
  font-weight:500;
}

.team-role{
  font-size:13px;
  color:#94a3b8;
}