1<div class="grid"></div>
 2<div id="poda">
 3  <div class="glow"></div>
 4  <div class="darkBorderBg"></div>
 5  <div class="darkBorderBg"></div>
 6  <div class="darkBorderBg"></div>
 7 
 8  <div class="white"></div>
 9 
10  <div class="border"></div>
11  <div class="neon-card-wrapper">
12    <!-- Outer effect layer -->
13    <div class="card-glow"></div>
14    <div class="card-darkBorderBg"></div>
15    <div class="card-white"></div>
16    <div class="card-border"></div>
17 
18    <!-- Content inside -->
19    <div class="card-content">
20      <div class="profile-top">
21        <img
22          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
23          alt="Agent" class="profile-img" />
24        <div class="profile-info">
25          <h3>Nyx Virell</h3>
26          <p>Cyber Operative</p>
27          <span class="status">ONLINE</span>
28        </div>
29      </div>
30 
31      <div class="stat-label">
32        <span>Neural Sync</span>
33        <span>78%</span>
34      </div>
35      <div class="stat-bar">
36        <div class="stat-fill"></div>
37      </div>
38 
39      <div class="card-actions">
40        <div class="action-btn">
41          <svg viewBox="0 0 24 24">
42            <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" />
43          </svg>
44        </div>
45        <div class="action-btn">
46          <svg viewBox="0 0 24 24">
47            <path
48              d="M21 8.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zM12 2a3 3 0 013 3v2a3 3 0 11-6 0V5a3 3 0 013-3zm-9 9a3 3 0 013-3h2a3 3 0 110 6H3a3 3 0 01-3-3zm18 0a3 3 0 01-3-3h-2a3 3 0 110 6h2a3 3 0 013-3z" />
49          </svg>
50        </div>
51      </div>
52    </div>
53  </div>
54</div>          

  1.grid {
  2  height: 800px;
  3  width: 800px;
  4  background-image:
  5    linear-gradient(to right, #0f0f10 1px, transparent 1px),
  6    linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
  7  background-size: 1rem 1rem;
  8  background-position: center center;
  9  position: absolute;
 10  z-index: -1;
 11  filter: blur(1px);
 12}
 13 
 14.white,
 15.border,
 16.darkBorderBg,
 17.glow {
 18  max-height: 70px;
 19  max-width: 314px;
 20  height: 100%;
 21  width: 100%;
 22  position: absolute;
 23  overflow: hidden;
 24  z-index: -1;
 25  /* Border Radius */
 26  border-radius: 12px;
 27  filter: blur(3px);
 28}
 29 
 30/* === Card Wrapper (Outer Effect) === */
 31.neon-card-wrapper {
 32  position: relative;
 33  width: 320px;
 34  height: 200px;
 35  display: flex;
 36  justify-content: center;
 37  align-items: center;
 38}
 39 
 40.card-glow,
 41.card-darkBorderBg,
 42.card-white,
 43.card-border {
 44  position: absolute;
 45  border-radius: 16px;
 46  overflow: hidden;
 47  z-index: -1;
 48}
 49 
 50.card-darkBorderBg {
 51  width: 332px;
 52  height: 210px;
 53}
 54 
 55.card-darkBorderBg::before {
 56  content: "";
 57  position: absolute;
 58  top: 50%;
 59  left: 50%;
 60  transform: translate(-50%, -50%) rotate(82deg);
 61  width: 600px;
 62  height: 600px;
 63  background-image: conic-gradient(rgba(0, 0, 0, 0),
 64      #18116a,
 65      rgba(0, 0, 0, 0) 10%,
 66      rgba(0, 0, 0, 0) 50%,
 67      #6e1b60,
 68      rgba(0, 0, 0, 0) 60%);
 69  transition: transform 0.6s ease;
 70}
 71 
 72.card-white {
 73  width: 327px;
 74  height: 213px;
 75  filter: blur(2px);
 76}
 77 
 78.card-white::before {
 79  content: "";
 80  position: absolute;
 81  top: 50%;
 82  left: 50%;
 83  transform: translate(-50%, -50%) rotate(83deg);
 84  width: 600px;
 85  height: 600px;
 86  background-image: conic-gradient(rgba(0, 0, 0, 0) 0%,
 87      #a099d8,
 88      rgba(0, 0, 0, 0) 8%,
 89      rgba(0, 0, 0, 0) 50%,
 90      #dfa2da,
 91      rgba(0, 0, 0, 0) 58%);
 92  filter: brightness(1.4);
 93  transition: transform 0.6s ease;
 94}
 95 
 96.card-border {
 97  width: 323px;
 98  height: 199px;
 99  filter: blur(0.5px);
100}
101 
102.card-border::before {
103  content: "";
104  position: absolute;
105  top: 50%;
106  left: 50%;
107  transform: translate(-50%, -50%) rotate(70deg);
108  width: 600px;
109  height: 600px;
110  background-image: conic-gradient(#1c191c,
111      #402fb5 5%,
112      #1c191c 14%,
113      #1c191c 50%,
114      #cf30aa 60%,
115      #1c191c 64%);
116  filter: brightness(1.3);
117  transition: transform 0.6s ease;
118}
119 
120.card-glow {
121  width: 374px;
122  height: 300px;
123  filter: blur(30px);
124  opacity: 0.4;
125}
126 
127.card-glow::before {
128  content: "";
129  position: absolute;
130  top: 50%;
131  left: 50%;
132  transform: translate(-50%, -50%) rotate(60deg);
133  width: 999px;
134  height: 999px;
135  background-image: conic-gradient(#000,
136      #402fb5 5%,
137      #000 38%,
138      #000 50%,
139      #cf30aa 60%,
140      #000 87%);
141  transition: transform 0.6s ease;
142}
143 
144/* Hover & focus effects */
145.neon-card-wrapper:hover .card-darkBorderBg::before,
146.neon-card-wrapper:focus-within .card-darkBorderBg::before {
147  transform: translate(-50%, -50%) rotate(-98deg);
148}
149 
150.neon-card-wrapper:hover .card-white::before,
151.neon-card-wrapper:focus-within .card-white::before {
152  transform: translate(-50%, -50%) rotate(-97deg);
153}
154 
155.neon-card-wrapper:hover .card-border::before,
156.neon-card-wrapper:focus-within .card-border::before {
157  transform: translate(-50%, -50%) rotate(-110deg);
158}
159 
160.neon-card-wrapper:hover .card-glow::before,
161.neon-card-wrapper:focus-within .card-glow::before {
162  transform: translate(-50%, -50%) rotate(-120deg);
163}
164 
165/* === Content Inside === */
166.card-content {
167  position: relative;
168  width: 100%;
169  height: 100%;
170  background: rgba(8, 6, 18, 0.92);
171  border-radius: 16px;
172  display: flex;
173  flex-direction: column;
174  overflow: hidden;
175  z-index: 2;
176  padding: 16px;
177  box-sizing: border-box;
178  color: white;
179}
180 
181.profile-top {
182  display: flex;
183  align-items: center;
184  gap: 12px;
185  margin-bottom: 12px;
186}
187 
188.profile-img {
189  width: 60px;
190  height: 60px;
191  border-radius: 50%;
192  object-fit: cover;
193  border: 2px solid #0ff;
194  box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
195}
196 
197.profile-info h3 {
198  margin: 0;
199  font-size: 18px;
200  font-weight: 700;
201  background: linear-gradient(90deg, #a099d8, #dfa2da);
202  -webkit-background-clip: text;
203  background-clip: text;
204  color: transparent;
205}
206 
207.profile-info p {
208  margin: 2px 0 0;
209  font-size: 13px;
210  color: #b0a0ff;
211  letter-spacing: 0.5px;
212}
213 
214/* Status badge */
215.status {
216  display: inline-block;
217  font-size: 10px;
218  padding: 2px 6px;
219  background: rgba(0, 255, 200, 0.2);
220  border: 1px solid #0ffc;
221  border-radius: 12px;
222  color: #0ffc;
223  margin-top: 4px;
224  letter-spacing: 1px;
225}
226 
227/* Mini Progress Bar */
228.stat-bar {
229  height: 6px;
230  background: rgba(255, 255, 255, 0.1);
231  border-radius: 3px;
232  margin: 12px 0;
233  overflow: hidden;
234}
235 
236.stat-fill {
237  height: 100%;
238  width: 78%;
239  background: linear-gradient(90deg, #402fb5, #cf30aa);
240  border-radius: 3px;
241}
242 
243.stat-label {
244  font-size: 12px;
245  color: #a099d8;
246  margin-bottom: 10px;
247  display: flex;
248  justify-content: space-between;
249}
250 
251/* Action icons */
252.card-actions {
253  display: flex;
254  justify-content: space-between;
255  margin-top: auto;
256}
257 
258.action-btn {
259  width: 36px;
260  height: 36px;
261  border-radius: 50%;
262  background: rgba(64, 47, 181, 0.2);
263  display: flex;
264  align-items: center;
265  justify-content: center;
266  cursor: pointer;
267  transition: all 0.3s ease;
268  border: 1px solid transparent;
269}
270 
271.action-btn:hover {
272  border-color: #cf30aa;
273  box-shadow: 0 0 10px rgba(207, 48, 170, 0.6);
274  transform: scale(1.1);
275}
276 
277.action-btn svg {
278  width: 18px;
279  height: 18px;
280  stroke: #cf30aa;
281  fill: none;
282  stroke-width: 1.5;
283}