@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* { font-family: 'Inter', sans-serif; }
.poppins { font-family: 'Poppins', sans-serif; }

/* Background + Neon */
.premium-bg { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%); position: relative; }
.neon-blue { color: #00d4ff; }
.neon-green { color: #39ff14; }
.gradient-text {
  background: linear-gradient(135deg, #00d4ff 0%, #39ff14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Particles + Animations */
.particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.particle { position: absolute; width: 2px; height: 2px; background: rgba(0, 212, 255, 0.6); border-radius: 50%; animation: float 20s infinite linear; }
.particle:nth-child(odd) { background: rgba(57, 255, 20, 0.4); animation-duration: 25s; }

@keyframes float {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%,90% { opacity: 1; }
  100% { transform: translateY(-100px) translateX(100px); opacity: 0; }
}

/* Gradient wave background */
.gradient-wave { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient(45deg, transparent 30%, rgba(0, 212, 255, 0.03) 50%, transparent 70%); animation: wave 15s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg);} 50% { transform: translateX(-30%) translateY(-20px) rotate(1deg);} }

/* Fade in animations */
.fade-in-up { opacity: 0; transform: translateY(60px); animation: fadeInUp 1.2s ease-out forwards; }
.fade-in-up:nth-child(1){animation-delay:.2s;} .fade-in-up:nth-child(2){animation-delay:.4s;} .fade-in-up:nth-child(3){animation-delay:.6s;} .fade-in-up:nth-child(4){animation-delay:.8s;}
@keyframes fadeInUp { to { opacity:1; transform: translateY(0);} }

/* Premium buttons */
.premium-button { background: linear-gradient(135deg, #00d4ff 0%, #39ff14 100%); position: relative; overflow: hidden; transition: all .4s ease; }
.premium-button::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transition:left .6s; }
.premium-button:hover::before { left:100%; }
.premium-button:hover { transform: translateY(-2px); box-shadow:0 20px 40px rgba(0,212,255,.3); }

/* Cards */
.service-card { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(20px); transition:all .4s ease; position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,212,255,.05) 0%,rgba(57,255,20,.05) 100%); opacity:0; transition:opacity .4s ease; }
.service-card:hover::before { opacity:1; }
.service-card:hover { transform: translateY(-8px); border-color:rgba(0,212,255,.3); box-shadow:0 25px 50px rgba(0,0,0,.3); }
.service-icon { transition:all .4s ease; }
.service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); }

/* (rest of CSS from original preserved: scroll-reveal, stats, testimonial-card, inputs, parallax, chart-bar, typing-animation, nav-blur, etc.) */

.alert {
  margin-top: 15px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: #10b981; /* green */
  color: white;
  display: none; /* hidden by default */
  animation: fadeIn 0.5s ease-in-out;
}

/* Show alert */
.alert.show {
  display: block;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Input + Textarea styling */
input, textarea {
  color: #ffffff;               /* White text so it's visible */
  background-color: rgba(255,255,255,0.05); /* Slightly transparent background */
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 15px;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.6); /* Light gray placeholder */
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #00d4ff;       /* Neon blue border on focus */
  box-shadow: 0 0 8px #00d4ff44;
}