:root {
  --neon-pink: #ff00cc;
  --neon-blue: #00eaff;
  --neon-green: #39ff14;
  --neon-yellow: #fff700;
  --neon-purple: #a259f7;
  --neon-dark: #16161a;
  --neon-card: #25243a;
  --neon-border: #fff;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: linear-gradient(135deg, #16161a 0%, #1a1a2e 100%);
  color: #fff;
  overflow-x: hidden;
}

.neon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  animation: fadeIn 1.2s;
}

.rainbow {
  background: linear-gradient(90deg,#39ff14,#ff00cc,#fff700,#00eaff,#a259f7,#ff00cc,#39ff14);
  background-size: 600% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowMove 6s linear infinite;
}

@keyframes rainbowMove {
  0% {background-position: 0 0;}
  100% {background-position: 600% 0;}
}

.kenya-animation {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin: 1rem 0;
}
.kenya-flag {
  width: 80px;
  border-radius: 8px;
  box-shadow: 0 0 25px var(--neon-green);
  animation: float 3s ease-in-out infinite alternate;
}
.kenya-map {
  width: 110px;
  border-radius: 12px;
  box-shadow: 0 0 16px var(--neon-blue);
  animation: float 3s 1.5s ease-in-out infinite alternate;
}

@keyframes float {
  to { transform: translateY(-15px) rotate(2deg);}
}

.animated-title, .animated-subtitle, .section-title {
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0 0 16px var(--neon-pink), 0 0 24px var(--neon-blue);
  animation: titleAnim 2.2s infinite alternate;
}
@keyframes titleAnim {
  from { transform: scale(1);}
  to { transform: scale(1.04);}
}

.animated-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.5rem;
  margin: 0.25em 0 0.1em 0;
}
.animated-subtitle {
  font-size: 1.3rem;
  color: var(--neon-blue);
  font-family: 'Orbitron', monospace;
  margin-bottom: 1.2em;
}

.profile-animate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.2em auto 0.5em auto;
}
.animated-profile {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--neon-pink);
  box-shadow: 0 0 25px var(--neon-pink), 0 0 50px var(--neon-blue);
  animation: spin 6s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg);}
}

.neon-title {
  color: var(--neon-green);
  text-shadow: 0 0 32px var(--neon-green), 0 0 8px var(--neon-pink);
}
.neon-subtitle, .neon-glow {
  color: var(--neon-blue);
  text-shadow: 0 0 12px var(--neon-blue), 0 0 8px var(--neon-pink);
}
.neon-btn {
  background: none;
  border: 2px solid var(--neon-pink);
  padding: 0.7em 1.6em;
  color: #fff;
  border-radius: 30px;
  font-size: 1.13rem;
  font-family: 'Orbitron', monospace;
  text-shadow: 0 0 10px var(--neon-pink);
  margin: 0.6em;
  box-shadow: 0 0 8px var(--neon-pink), 0 0 2px #fff;
  cursor: pointer;
  transition: background .19s, color .15s, box-shadow .19s;
}
.neon-btn:hover, .neon-btn:focus {
  background: var(--neon-pink);
  color: #16161a;
  box-shadow: 0 0 24px var(--neon-pink), 0 0 40px var(--neon-blue);
  outline: none;
}
.neon-btn.fb {border-color: #3b5998;}
.neon-btn.yt {border-color: #ff0000;}
.neon-btn.tg {border-color: #229ed9;}
.neon-btn.ig {border-color: #e4405f;}
.neon-btn.tt {border-color: #25f4ee;}
.neon-btn.wa, .neon-btn.wach {border-color: #25d366;}
.neon-btn.gh, .neon-btn.gh2 {border-color: #333;}
.neon-btn.biz {border-color: #fff700;}
.neon-btn.tool {border-color: #00eaff;}
.neon-btn.pd {border-color: #39ff14;}

.live-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2em;
  background: rgba(35,35,47,0.85);
  border-radius: 22px;
  padding: 1.2em 2.2em;
  box-shadow: 0 0 16px var(--neon-green);
  margin: 1.8em 0;
  font-size: 1.13rem;
  font-family: 'Orbitron', monospace;
}

#intro-page .neon-btn {
  margin-top: 2em;
}

header.animated-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2em;
  justify-content: center;
  background: rgba(35,35,47,0.82);
  border-radius: 20px;
  box-shadow: 0 0 24px var(--neon-green);
  padding: 1em 2em;
  margin-top: 1em;
}

.section-title {
  font-size: 2.1em;
  margin: 1.7em 0 1em 0;
}

.social-links, .websites-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  margin-bottom: 1.4em;
}

.bots-section {
  background: linear-gradient(90deg,#111,#181b2f 40%,#1a1a2e 80%);
  border-radius: 20px;
  box-shadow: 0 0 24px var(--neon-blue);
  margin: 2em auto 1em auto;
  padding: 1.7em 1.2em;
}
.bots-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2em;
  justify-content: center;
  align-items: stretch;
}
.bot-card {
  background: var(--neon-card);
  border-radius: 16px;
  padding: 1.4em 1.1em;
  box-shadow: 0 0 12px var(--neon-purple);
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.17s;
}
.bot-card:hover {
  transform: translateY(-7px) scale(1.03) rotate(-2deg);
  box-shadow: 0 0 30px var(--neon-blue);
}
.bot-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid var(--neon-green);
  margin-bottom: 0.7em;
  box-shadow: 0 0 18px var(--neon-green);
}
.bot-info {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-top: 0.7em;
  font-size: 1.1em;
}
.bot-illus {
  font-size: 2.1em;
  color: var(--neon-yellow);
  margin-top: 1em;
  animation: bounceBot 2.3s infinite alternate;
}
@keyframes bounceBot {
  100% {transform: translateY(-9px);}
}
.live-users-note {
  text-align: center;
  font-size: 1em;
  margin: 1.3em 0 0.2em 0;
  color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow);
}

.testimonials-section {
  margin: 3em 0;
}
.testimonials {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
}
.testimonial-card {
  background: linear-gradient(90deg, #23233b 60%, #1a1a2e 100%);
  border-radius: 18px;
  padding: 1.3em 1.2em;
  box-shadow: 0 0 14px var(--neon-pink);
  max-width: 340px;
  font-size: 1.1em;
  font-style: italic;
  color: #fff;
  transition: transform 0.17s;
}
.testimonial-card span {
  display: block;
  margin-top: 0.7em;
  color: var(--neon-blue);
  font-family: 'Orbitron', monospace;
  font-size: 0.97em;
}
.testimonial-card:hover {
  transform: scale(1.04) rotate(1deg);
  box-shadow: 0 0 40px var(--neon-pink);
}

.why-choose-section {
  margin: 2.5em 0 2em 0;
  padding: 1.7em 1.1em;
  background: rgba(35,35,47,0.82);
  border-radius: 20px;
  box-shadow: 0 0 14px var(--neon-pink);
}
.why-list {
  list-style: none;
  padding: 0;
}
.why-list li {
  font-size: 1.16em;
  margin: 1em 0;
  position: relative;
  padding-left: 2em;
  color: var(--neon-green);
  text-shadow: 0 0 12px var(--neon-blue);
}
.why-list i {
  position: absolute;
  left: 0;
  top: 0.2em;
  font-size: 1.2em;
  color: var(--neon-yellow);
}

.footer {
  text-align: center;
  margin-top: 2.8em;
  margin-bottom: 0.7em;
  font-family: 'Orbitron', monospace;
  color: var(--neon-pink);
  text-shadow: 0 0 22px var(--neon-blue);
  font-size: 1.13em;
}

@media (max-width: 900px) {
  .bots-list, .testimonials {
    flex-direction: column;
    align-items: center;
  }
  header.animated-header {
    flex-direction: column;
    gap: 0.5em;
    padding: 0.7em 1.3em;
  }
  .live-info {
    padding: 1em 0.8em;
  }
}

::-webkit-scrollbar {
  width: 10px;
  background: #1a1a2e;
}
::-webkit-scrollbar-thumb {
  background: var(--neon-pink);
  border-radius: 7px;
  box-shadow: 0 0 8px var(--neon-blue);
}