:root {
   --primary: #4F46E5;
   --secondary: #7C3AED;
   --dark: #111827;
   --light: #F3F4F6;
   --blue: #60A5FA;
}

.contact-wrapper {
   background: var(--dark);
   min-height: 100vh;
   color: var(--blue);
}

.glass-card {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border-radius: 20px;
   padding: 30px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info {
   margin-bottom: 40px;
}

.info-item {
   display: flex;
   align-items: flex-start;
   gap: 15px;
   margin-bottom: 25px;
}

.info-item i {
   font-size: 1.5rem;
   color: var(--primary);
   background: rgba(79, 70, 229, 0.1);
   padding: 12px;
   border-radius: 12px;
}

.info-item h4 {
   font-size: 1.1rem;
   margin-bottom: 5px;
}

.info-item p {
   color: var(--blue);
   margin: 0;
}

.ai-network {
   margin-top: 40px;
}

.network-visualization {
   height: 300px;
   position: relative;
   background: rgba(255, 255, 255, 0.02);
   border-radius: 15px;
   overflow: hidden;
}

.nodes {
   position: relative;
   width: 100%;
   height: 100%;
}

.node {
   position: absolute;
   width: 20px;
   height: 20px;
   background: var(--primary);
   border-radius: 50%;
   animation: pulse 2s infinite;
}

.node::before {
   content: attr(data-label);
   position: absolute;
   top: -25px;
   left: 50%;
   transform: translateX(-50%);
   color: var(--blue);
   font-size: 0.8rem;
   white-space: nowrap;
}

.n1 { top: 30%; left: 60%; }
.n2 { top: 40%; left: 40%; }
.n3 { top: 60%; left: 20%; }
.n4 { top: 70%; left: 70%; }
.n5 { top: 20%; left: 30%; }

@keyframes pulse {
   0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
   70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
   100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

.connections {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: 
       radial-gradient(1px at 60% 30%, var(--primary), transparent 30px),
       radial-gradient(1px at 40% 40%, var(--primary), transparent 30px),
       radial-gradient(1px at 20% 60%, var(--primary), transparent 30px),
       radial-gradient(1px at 70% 70%, var(--primary), transparent 30px),
       radial-gradient(1px at 30% 20%, var(--primary), transparent 30px);
   opacity: 0.1;
   animation: connectionPulse 4s infinite;
}

@keyframes connectionPulse {
   0%, 100% { opacity: 0.1; }
   50% { opacity: 0.3; }
}

.custom-input {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--blue);
}

.custom-input:focus {
   background: rgba(255, 255, 255, 0.1);
   border-color: var(--primary);
   box-shadow: 0 0 15px rgba(79, 70, 229, 0.3);
   color: var(--blue);
}

.form-floating > label {
   color: rgba(96, 165, 250, 0.6);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
   color: var(--primary);
}

@media (max-width: 768px) {
   .glass-card {
       padding: 20px;
   }
   
   .network-visualization {
       height: 200px;
   }
}