:root {
  --primary: #6366f1;
  --accent: #06b6d4;
  --dark: #0f172a;
  --gray: #64748b;
  --light: #f8fafc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ============================================================
   BODY & GLOBAL BACKGROUND (UPDATED)
   ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
  
  /* Permanent Background Image with Dark Overlay */
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), 
    url('../images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* NAVBAR */
nav { position: fixed; top: 0; left: 0; right: 0; padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); z-index: 100; border-bottom: 1px solid rgba(0,0,0,0.05); }
.logo { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: white; font-weight: 500; }
.nav-links a:hover { color: var(--primary); }

/* BUTTONS */
.btn { padding: 0.75rem 1.75rem; border-radius: 50px; border: none; font-weight: 600; cursor: pointer; transition: all 0.3s; font-size: 1rem; text-decoration: none; display: inline-block; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; box-shadow: 0 4px 15px rgba(99,102,241,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,0.4); }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; }

/* HERO (UPDATED FOR BACKGROUND) */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 8rem 5% 4rem; background: transparent; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; width: 100%; }
.hero-content h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: white; }
.hero-content h1 span { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-content p { font-size: 1.15rem; color: #cbd5e1; margin-bottom: 2rem; max-width: 500px; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; }
.stat h3 { font-size: 1.75rem; font-weight: 800; color: var(--accent); }
.stat p { font-size: 0.9rem; color: #cbd5e1; }

/* PHONE MOCKUP */
.hero-visual { display: flex; justify-content: center; }
.phone { width: 280px; height: 560px; background: var(--dark); border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); position: relative; }
.phone-screen { width: 100%; height: 100%; background: linear-gradient(180deg, #fff, #f0f4ff); border-radius: 30px; padding: 2rem 1.5rem; }
.phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 100px; height: 20px; background: var(--dark); border-radius: 0 0 15px 15px; z-index: 10; }
.phone-screen h4 { margin-top: 1rem; font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.data-card { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; border-radius: 16px; padding: 1.5rem; margin-top: 1rem; }
.data-card .amount { font-size: 2rem; font-weight: 800; }
.data-card .label { font-size: 0.8rem; opacity: 0.9; }
.data-option { background: white; border-radius: 12px; padding: 1rem; margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.data-option strong { font-size: 0.95rem; }
.data-option small { color: var(--gray); font-size: 0.75rem; }
.price { color: var(--primary); font-weight: 700; }

/* SECTIONS (UPDATED FOR BACKGROUND) */
section { padding: 5rem 5%; }
.section-title { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; }
.section-title h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 1rem; color: white; }
.section-title p { color: #cbd5e1; font-size: 1.1rem; }

/* SOCIALS (UPDATED FOR BACKGROUND) */
.socials { background: transparent;padding-top: 10rem !important; }
.social-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; max-width: 1000px; margin: 0 auto; }
.social-btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; border-radius: 50px; font-weight: 700; font-size: 1rem; text-decoration: none; color: white; transition: transform 0.3s; }
.social-btn:hover { transform: translateY(-4px) scale(1.05); }
.social-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* GALLERY (UPDATED FOR BACKGROUND) */
.gallery { background: transparent; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; max-width: 1200px; margin: 0 auto; }
.picture-frame { border-radius: 24px; padding: 6px; transition: transform 0.4s; }
.picture-frame:hover { transform: translateY(-8px) scale(1.02); }
.picture-inner { 
  background: white; 
  border-radius: 20px; 
  overflow: hidden; 
  position: relative; 
  aspect-ratio: auto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.picture-inner img { 
  width: 100%; 
  height: auto; 
  object-fit: contain; 
  display: block; 
}
.picture-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #f8fafc, #eef2ff); color: var(--gray); gap: 0.5rem; }
.picture-placeholder .icon { font-size: 2.5rem; opacity: 0.4; }
.picture-caption { text-align: center; padding: 1rem 0.5rem 0.5rem; font-weight: 600; background: white; border-radius: 0 0 20px 20px; }

/* FEATURES (UPDATED FOR BACKGROUND) */
.features { background: transparent; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.feature-card { 
  background: rgba(255, 255, 255, 0.9); 
  padding: 2.5rem 2rem; 
  border-radius: 20px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
  transition: transform 0.3s, box-shadow 0.3s; 
  backdrop-filter: blur(10px);
}
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.feature-icon { width: 60px; height: 60px; border-radius: 15px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1.5rem; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--dark); }
.feature-card p { color: var(--gray); font-size: 0.95rem; }

/* PRICING (UPDATED FOR BACKGROUND) */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.price-card { 
  background: rgba(255, 255, 255, 0.95); 
  border-radius: 24px; 
  padding: 2.5rem 2rem; 
  border: 2px solid #e2e8f0; 
  transition: all 0.3s; 
  position: relative; 
  backdrop-filter: blur(10px);
}
.price-card:hover { border-color: var(--primary); transform: translateY(-5px); }
.price-card.featured { 
  border-color: var(--primary); 
  box-shadow: 0 20px 50px rgba(99,102,241,0.3); 
  background: rgba(255, 255, 255, 0.98);
}
.badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 0.4rem 1.2rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; }
.price-card h3 { font-size: 1.1rem; color: var(--gray); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.price-amount { font-size: 3rem; font-weight: 800; color: var(--dark); }
.price-amount span { font-size: 1rem; color: var(--gray); font-weight: 500; }
.price-features { list-style: none; margin: 1.5rem 0; }
.price-features li { padding: 0.5rem 0; color: var(--gray); font-size: 0.95rem; }
.price-features li::before { content: '✓'; color: var(--primary); font-weight: 700; margin-right: 0.75rem; }
.price-card .btn { width: 100%; text-align: center; }

/* FOOTER */
footer { background: rgba(15, 23, 42, 0.95); color: #94a3b8; padding: 2rem 5%; text-align: center; backdrop-filter: blur(10px); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-stats { justify-content: center; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .social-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   GLOWING CAPTION TEXT FOR THE GALLERY
   ============================================================ */
.picture-caption {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 1px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: textShine 3s linear infinite;
}

.picture-frame.frame-1 .picture-caption {
  background-image: linear-gradient(45deg, #ff007f, #ffcc00, #ff007f);
  filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.6)) drop-shadow(0 0 15px rgba(255, 204, 0, 0.4));
}
.picture-frame.frame-2 .picture-caption {
  background-image: linear-gradient(45deg, #00d2ff, #8a2be2, #00d2ff);
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.6)) drop-shadow(0 0 15px rgba(138, 43, 226, 0.4));
}
.picture-frame.frame-3 .picture-caption {
  background-image: linear-gradient(45deg, #00ff87, #0066ff, #00ff87);
  filter: drop-shadow(0 0 8px rgba(0, 255, 135, 0.6)) drop-shadow(0 0 15px rgba(0, 102, 255, 0.4));
}
.picture-frame.frame-4 .picture-caption {
  background-image: linear-gradient(45deg, #39ff14, #ffe600, #39ff14);
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.6)) drop-shadow(0 0 15px rgba(255, 230, 0, 0.4));
}
.picture-frame.frame-5 .picture-caption {
  background-image: linear-gradient(45deg, #ff0000, #ff7300, #ff0000);
  filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6)) drop-shadow(0 0 15px rgba(255, 115, 0, 0.4));
}
.picture-frame.frame-6 .picture-caption {
  background-image: linear-gradient(45deg, #ffffff, #a0a0a0, #ffffff);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@keyframes textShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   WHATSAPP ICON COLOR CHANGE
   ============================================================ */
.social-btn svg { 
  width: 24px; 
  height: 24px; 
  fill: currentColor; 
}
.social-btn.whatsapp svg {
  fill: #25D366 !important;
  width: 24px; 
  height: 24px;
}

/* ============================================================
   BUY FOR ANOTHER NUMBER BUTTON
   ============================================================ */
.buy-elsewhere {
  text-align: center;
  padding: 1rem 5% 6rem; 
  background: transparent;
}
.buy-btn {
  display: inline-block;
  background-color: #90EE90; 
  padding: 1.2rem 3rem;
  border-radius: 50px; 
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-image: linear-gradient(45deg, #ff9a9e, #a18cd1, #ff9a9e);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
   /* Glow and shadow */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(144, 238, 144, 0.5);
  filter: drop-shadow(0 0 8px rgba(255, 154, 158, 0.4)) drop-shadow(0 0 15px rgba(161, 140, 209, 0.4));
  /* Animations */
  animation: btnPulse 2s alternate infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.buy-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 25px rgba(144, 238, 144, 0.8);
}
@keyframes btnPulse {
  0% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 10px rgba(144, 238, 144, 0.4); }
  100% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 25px rgba(144, 238, 144, 0.9); }

}

/* ============================================================
   M-PESA SIMULATOR STYLES
   ============================================================ */
.phone-screen { position: relative; overflow: hidden; font-family: 'Roboto', sans-serif; }
.status-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 25px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1rem; font-size: 0.7rem; color: #a0a0a5; background: #121212; z-index: 10;
}
.sim-screen { 
  display: none; flex-direction: column; height: 100%; width: 100%;
  position: absolute; top: 0; left: 0; background: #1c1c1e; 
  padding-top: 25px;
  animation: slideIn 0.2s ease forwards;
}
.sim-screen.active { display: flex; }
@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

.dark-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem; background: #242426; border-bottom: 1px solid #333;
}
.header-title { font-weight: 700; color: #f0f0f0; font-size: 1rem; }
.back-arrow, .menu-dots { color: #a0a0a5; font-size: 1.2rem; cursor: pointer; }

.dark-body { padding: 1.5rem 1rem; flex: 1; }
.dark-list { list-style: none; }
.dark-list li { 
  padding: 1rem 0; border-bottom: 1px solid #333; font-size: 1rem; 
  color: #f0f0f0; cursor: pointer; transition: background 0.2s;
}
.dark-list li:active { background: #333; }

/* THE NEW GLOWING GREEN CHOICE STYLES */
.active-choice {
  background-color: #25D366 !important; 
  color: white !important;
  font-weight: bold;
  border-bottom: 2px solid #128C7E !important; 
  border-radius: 8px;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.dark-label { color: #a0a0a5; font-size: 0.9rem; margin-bottom: 0.2rem; }
.dark-subtext { color: #666; font-size: 0.75rem; margin-bottom: 1rem; }
.dark-input {
  width: 100%; background: transparent; border: none; border-bottom: 2px solid #00a2ff;
  color: #f0f0f0; font-size: 1.5rem; padding: 0.5rem 0; outline: none; margin-bottom: 1.5rem;
}
.dark-btn {
  background: #333; color: #f0f0f0; border: none; padding: 0.7rem 2rem;
  border-radius: 20px; font-weight: bold; cursor: pointer; display: block; margin: 0 auto;
}

.fake-keyboard {
  background: #121212; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem;
  position: absolute; bottom: 0; left: 0; right: 0;
}
.keyboard-row { display: flex; justify-content: space-between; gap: 0.3rem; }
.keyboard-row span {
  flex: 1; background: #333; color: #f0f0f0; text-align: center; padding: 0.8rem 0;
  border-radius: 5px; font-size: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.keyboard-row span small { font-size: 0.55rem; color: #a0a0a5; margin-top: 2px; }
.keyboard-row span:last-child { background: #242426; }

.popup-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; padding: 1rem;
}
.popup-box {
  background: #2c2c2e; width: 100%; border-radius: 15px; padding: 1.5rem;
  color: white; animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* SAFARICOM APP ICON */
.saf-app-icon {
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #00a2ff, #0066ff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 4px 10px rgba(0,0,0,0.4);
  margin-bottom: 0.5rem;
}
.saf-sim-card {
  width: 32px;
  height: 38px;
  background: #ffffff;
  border-radius: 4px 4px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.saf-sim-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #cbd5e1;
  border-radius: 0 4px 0 4px;
  box-shadow: -2px 2px 2px rgba(0,0,0,0.1);
}
.saf-number {
  background: #0066ff;
  color: white;
  font-size: 1.2rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 2;
}

/* GUIDING DEMO HAND */
.demo-hand {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 0;
  z-index: 999;
  pointer-events: none;
  transition: top 0.8s ease-in-out, left 0.8s ease-in-out, opacity 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 162, 255, 0.6));
}
@keyframes tapModerate {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(0.85) translateY(5px); }
}
.demo-hand.tapping {
  animation: tapModerate 1s ease-in-out infinite;
}

/* ============================================================
   LIVE DEMO SECTION (Centered Phone)
   ============================================================ */
.live-demo-section {
  padding: 4rem 5%;
  text-align: center;
  background: transparent;
}
.demo-phone-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.demo-phone-wrapper .phone {
  width: 280px;
  height: 560px;
  flex-shrink: 0;
}

/* ============================================================
   GLOWING PINK HEADING (Features Section)
   ============================================================ */
.features .section-title h2 {
  color: #ff007f; /* Bright Pink */
  text-shadow: 
    0 0 10px rgba(255, 0, 127, 0.8), 
    0 0 20px rgba(255, 0, 127, 0.6), 
    0 0 30px rgba(255, 0, 127, 0.4);
  animation: pinkPulse 2s infinite alternate;
}

@keyframes pinkPulse {
  0% { 
    text-shadow: 
      0 0 10px rgba(255, 0, 127, 0.6), 
      0 0 20px rgba(255, 0, 127, 0.4); 
  }
  100% { 
    text-shadow: 
      0 0 15px rgba(255, 0, 127, 1), 
      0 0 30px rgba(255, 0, 127, 0.8), 
      0 0 45px rgba(255, 0, 127, 0.6); 
  }
}

/* ============================================================
   COLOR-CHANGING FEATURE CARDS
   ============================================================ */

/* Base transition for smooth color changes */
.feature-card {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
  border: 2px solid transparent; /* Prepares for the colored border */
}

/* Assign a unique animation to each card */
.features-grid .feature-card:nth-child(1) { animation: cardColor1 4s infinite alternate; }
.features-grid .feature-card:nth-child(2) { animation: cardColor2 4s infinite alternate; }
.features-grid .feature-card:nth-child(3) { animation: cardColor3 4s infinite alternate; }
.features-grid .feature-card:nth-child(4) { animation: cardColor4 4s infinite alternate; }
.features-grid .feature-card:nth-child(5) { animation: cardColor5 4s infinite alternate; }
.features-grid .feature-card:nth-child(6) { animation: cardColor6 4s infinite alternate; }

/* 1. Instant Delivery - Cyan/Blue */
@keyframes cardColor1 {
  0% { border-color: rgba(6, 182, 212, 0.3); box-shadow: 0 0 10px rgba(6, 182, 212, 0.1); }
  100% { border-color: #06b6d4; box-shadow: 0 10px 30px rgba(6, 182, 212, 0.4), inset 0 0 15px rgba(6, 182, 212, 0.1); }
}

/* 2. Secure Payments - Green */
@keyframes cardColor2 {
  0% { border-color: rgba(37, 211, 102, 0.3); box-shadow: 0 0 10px rgba(37, 211, 102, 0.1); }
  100% { border-color: #25D366; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4), inset 0 0 15px rgba(37, 211, 102, 0.1); }
}

/* 3. Best Prices - Gold/Yellow */
@keyframes cardColor3 {
  0% { border-color: rgba(234, 179, 8, 0.3); box-shadow: 0 0 10px rgba(234, 179, 8, 0.1); }
  100% { border-color: #eab308; box-shadow: 0 10px 30px rgba(234, 179, 8, 0.4), inset 0 0 15px rgba(234, 179, 8, 0.1); }
}

/* 4. All Networks - Purple */
@keyframes cardColor4 {
  0% { border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 0 10px rgba(139, 92, 246, 0.1); }
  100% { border-color: #8b5cf6; box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4), inset 0 0 15px rgba(139, 92, 246, 0.1); }
}

/* 5. 24/7 Support - Pink */
@keyframes cardColor5 {
  0% { border-color: rgba(236, 72, 153, 0.3); box-shadow: 0 0 10px rgba(236, 72, 153, 0.1); }
  100% { border-color: #ec4899; box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4), inset 0 0 15px rgba(236, 72, 153, 0.1); }
}

/* 6. Easy Refunds - Orange */
@keyframes cardColor6 {
  0% { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 0 10px rgba(249, 115, 22, 0.1); }
  100% { border-color: #f97316; box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4), inset 0 0 15px rgba(249, 115, 22, 0.1); }
}

/* ============================================================
   SOFT VIOLET NAVBAR BLINK
   ============================================================ */
nav {
  animation: violetNavBlink 3s ease-in-out infinite;
  transition: border-bottom 0.5s ease;
}

@keyframes violetNavBlink {
  0%, 100% {
    /* Faint violet background */
    background: rgba(139, 92, 246, 0.15); 
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1);
  }
  50% {
    /* Brighter violet background */
    background: rgba(139, 92, 246, 0.35); 
    border-bottom: 1px solid rgba(139, 92, 246, 0.8);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  }
}
/* ============================================================
   HAMBURGER MENU & DROPDOWN
   ============================================================ */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.hamburger:hover span {
  background-color: #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
}

/* The Dropdown Container */
.mobile-dropdown {
  position: absolute;
  top: 100%; /* Sits right below the navbar */
  right: 2%;
  background: blue; /* Violet background matching the nav */
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
  overflow: hidden;
  max-height: 0; /* Hidden by default */
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* When active, it expands */
.mobile-dropdown.active {
  max-height: 250px; /* Adjust if you add more links */
  opacity: 1;
}

/* The links inside the dropdown */
.mobile-dropdown a {
  text-decoration: none;
  color: white;
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s, color 0.2s;
}

.mobile-dropdown a:last-child {
  border-bottom: none; /* Removes the line on the last item */
}

.mobile-dropdown a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #06b6d4; /* Cyan hover */
}

/* ============================================================
   CENTERED HERO SECTION
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center; /* Centers vertically */
  justify-content: center; /* Centers horizontally */
  padding: 8rem 5% 4rem;
  background: transparent;
  text-align: center;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px; /* Keeps the text from stretching too wide */
  margin: 0 auto;
}

.hero-content p {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Make sure the glowing orb is hidden if you don't want it, 
   or keep it below the text if you do. 
   (Since your HTML has it, this will put it nicely under the text) */
.hero-visual {
  margin-top: 3rem;
}

/* ============================================================
   DEEP WHITE TEXT FOR GLOWING ORB
   ============================================================ */
.orb-inner span,
.orb-inner p {
  color: #ffffff !important; /* Pure, deep white */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Soft white glow */
}

/* ============================================================
   PHONE INSIDE 6TH GALLERY CARD & FIX ALIGNMENT
   ============================================================ */
.demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 24px;
  position: relative;
  min-height: 680px; /* Gives enough room for the full phone */
  box-sizing: border-box;
  padding: 20px;
  background: #ffffff;
  text-align: center;
}

.demo-card h4 {
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.demo-card p {
  color: #1e293b;
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Ensure the frame keeps its glowing border */
.frame-6 {
  animation: frame6 6s ease infinite;
  border: 2px solid transparent; /* The animation handles the border */
}

/* Fix the phone so it sits perfectly centered */
.demo-card .phone {
  flex-shrink: 0;
  width: 260px;
  height: 520px;
  margin: 0 auto;
}

/* Fix the Safaricom App Icon Alignment */
.demo-card .app-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 4rem; 
}

.demo-card .app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.demo-card .app-name {
  color: white;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Make the hand slightly smaller and precise */
.demo-card .demo-hand {
  position: absolute;
  width: 35px;
  height: 35px;
  opacity: 0;
  z-index: 999;
  pointer-events: none;
  transition: top 0.8s ease-in-out, left 0.8s ease-in-out, opacity 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 162, 255, 0.6));
}

.demo-card .demo-hand.tapping {
  animation: tapModerate 0.8s ease-in-out infinite;
}

/* ============================================================
   WANTAM CAPTION (Permanent Blue Glow)
   ============================================================ */

/* Disable the moving gradient for the 5th card */
.picture-frame.frame-5 .picture-caption {
  animation: none !important; 
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  
  /* Apply the permanent blue color */
  color: #00a2ff !important; 
  -webkit-text-fill-color: #00a2ff !important;
  
  /* Add a beautiful neon blue glow */
  text-shadow: 
    0 0 8px rgba(0, 162, 255, 0.8), 
    0 0 15px rgba(0, 162, 255, 0.5) !important;
    
  /* Remove the old dynamic drop shadow */
  filter: none !important;
}

/* ============================================================
   NEW FEATURES SECTION (VIBRATING CARDS)
   ============================================================ */
.feature-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
  
  /* Makes all cards vibrate continuously */
  animation: vibrate 0.3s linear infinite both;
}

/* Different delays so they don't vibrate in perfect sync */
.feature-card:nth-child(1) { animation-delay: 0s; border-color: #00d2ff; }
.feature-card:nth-child(2) { animation-delay: 0.1s; border-color: #10b981; }
.feature-card:nth-child(3) { animation-delay: 0.2s; border-color: #f59e0b; }
.feature-card:nth-child(4) { animation-delay: 0.3s; border-color: #ef4444; }
.feature-card:nth-child(5) { animation-delay: 0.4s; border-color: #8b5cf6; }

/* The vibration keyframes */
@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Ensure text is perfectly readable */
.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: #0f172a;
}

.feature-card p {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Make sure the grid accommodates 5 cards beautifully */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Pause the vibration when hovered so the user can read easily */
.feature-card:hover {
  animation-play-state: paused;
  transform: scale(1.03) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
/* ============================================================
   BLINKING ATTRACTIVE TEXT INSIDE FEATURE CARDS
   ============================================================ */

/* Base style for the text */
.blink-text-card {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
  
  /* Make the background a gradient that we clip to the text */
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Apply the moving gradient animation */
  animation: cardTextGlow 4s ease-in-out infinite alternate;
}

/* 1. Reliable Updates - Cyan to Blue */
.feature-card:nth-child(1) .blink-text-card {
  background-image: linear-gradient(45deg, #00d2ff, #3a7bd5, #00d2ff);
  filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.5));
}

/* 2. Legit Agencies - Green to Lime */
.feature-card:nth-child(2) .blink-text-card {
  background-image: linear-gradient(45deg, #11998e, #38ef7d, #11998e);
  filter: drop-shadow(0 0 5px rgba(56, 239, 125, 0.5));
}

/* 3. Time Saving - Orange to Yellow */
.feature-card:nth-child(3) .blink-text-card {
  background-image: linear-gradient(45deg, #f12711, #f5af19, #f12711);
  filter: drop-shadow(0 0 5px rgba(245, 175, 25, 0.5));
}

/* 4. Trend Alerts - Red to Pink */
.feature-card:nth-child(4) .blink-text-card {
  background-image: linear-gradient(45deg, #ff007f, #ff4b2b, #ff007f);
  filter: drop-shadow(0 0 5px rgba(255, 0, 127, 0.5));
}

/* 5. Social Connection - Purple to Violet */
.feature-card:nth-child(5) .blink-text-card {
  background-image: linear-gradient(45deg, #8a2be2, #e100ff, #8a2be2);
  filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.5));
}

/* The animation that makes the colors slide and glow */
@keyframes cardTextGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ============================================================
   FIX INPUT VISIBILITY (Push text UP above the keyboard)
   ============================================================ */

/* Remove the 'flex: 1' that was pushing things down */
#sim-till .dark-body,
#sim-amount .dark-body,
#sim-pin .dark-body {
  flex: none !important; 
  padding-bottom: 0 !important;
}

/* Make the text inputs large, white, and add a glowing blue underline */
#sim-till .dark-input,
#sim-amount .dark-input,
#sim-pin .dark-input {
  color: #ffffff !important; /* Forces the text to be pure white */
  font-size: 2rem !important; /* Makes the numbers large */
  font-weight: bold;
  border-bottom: 3px solid #00a2ff !important; /* Bright blue line */
  margin-top: 10px;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 162, 255, 0.5); /* Glow on the numbers */
}

/* Push the keyboard slightly lower just in case */
.fake-keyboard {
  height: 220px; 
}

/* ============================================================
   WHITE TEXT FOR ALL LABELS & SUBTEXT
   ============================================================ */

/* Make the main labels (e.g., "Enter till no") pure white */
.dark-label {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
}

/* Make the subtext (e.g., "Digits (0-9, *, #, +)") a bright, visible white/gray */
.dark-subtext {
  color: #e2e8f0 !important; /* Very light gray, almost white */
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

/* Ensure the headers at the top (e.g., "Safaricom") are bright white */
.header-title {
  color: #ffffff !important;
}

/* Make the text inside the fake keyboard brighter */
.keyboard-row span {
  color: #ffffff !important;
}
.keyboard-row span small {
  color: #cbd5e1 !important; /* Light gray for the letters (ABC, DEF) */
}

/* ============================================================
   COLOR-CHANGING FOOTER (Cream -> Purple -> Blue)
   ============================================================ */
footer {
  /* Override the dark background with a moving gradient */
  background: linear-gradient(45deg, #fdfbfb, #8a2be2, #00a2ff, #fdfbfb);
  background-size: 300% 300%;
  animation: footerColorShift 8s ease infinite !important;
  backdrop-filter: none !important; /* Removes the blur so the colors are vibrant */
  color: #0f172a !important; /* Dark text for contrast against the cream color */
  font-weight: 700;
  padding: 2.5rem 5%;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Make the footer text pop against the shifting colors */
.footer-bottom {
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

/* The animation that shifts the colors */
@keyframes footerColorShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ============================================================ */

@media (max-width: 768px) {
  /* 1. Navbar & Logo */
  nav {
    padding: 1rem 5%;
  }
  .logo {
    font-size: 1.5rem !important; /* Shrinks the massive logo */
    letter-spacing: -0.5px;
  }
  .nav-links {
    display: none; /* Hides the desktop links */
  }
  .nav-right {
    gap: 1rem;
  }
  .btn-primary {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  /* 2. Social Buttons */
  .socials {
    padding-top: 7rem !important; /* Adjusts for the fixed navbar */
  }
  .social-grid {
    gap: 1rem;
    padding: 0 1rem;
  }
  .social-btn {
    width: 100%;
    justify-content: center;
  }

  /* 3. Hero Section */
  .hero {
    padding: 6rem 1rem 3rem !important;
    min-height: auto !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important; /* Stacks the text and orb */
    gap: 2rem;
  }
  .hero-content h1 {
    font-size: 2.5rem !important;
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .glowing-orb {
    width: 250px;
    height: 250px;
  }
  .orb-inner {
    width: 180px;
    height: 180px;
  }

  /* 4. Gallery & 6th Card */
  .gallery-grid {
    grid-template-columns: 1fr !important; /* 1 column on phones */
    gap: 2rem;
    padding: 0 1rem;
  }
  .demo-card {
    min-height: auto !important;
    padding-bottom: 30px !important;
  }
  .demo-card .phone {
    transform: scale(0.9);
    margin-bottom: -20px !important;
  }

  /* 5. Features */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .feature-card {
    padding: 2rem 1.5rem;
  }

  /* 6. Buy Button */
  .buy-btn {
    font-size: 0.9rem !important;
    padding: 1rem 1.5rem !important;
    width: 90%;
    box-sizing: border-box;
  }

  /* 7. Footer */
  footer {
    padding: 1.5rem 1rem;
  }
  .footer-bottom {
    font-size: 0.8rem;
  }

  /* 8. Mobile Menu Dropdown */
  .mobile-dropdown {
    width: 100%;
    right: 0;
    border-radius: 0 0 12px 12px;
  }
}

/* Extra Small Phones (e.g., iPhone SE) */
@media (max-width: 400px) {
  .hero-content h1 {
    font-size: 2rem !important;
  }
  .logo {
    font-size: 1.2rem !important;
  }
  .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  .demo-card .phone {
    transform: scale(0.8);
    margin-bottom: -50px !important;
  }
}

/* ============================================================
   FACEBOOK BUTTON (Mirroring the others exactly)
   ============================================================ */

/* Base layout match */
.social-btn.facebook {
  /* This ensures it matches the exact padding, font, and roundness */
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  transition: transform 0.3s;

  /* The color and animation */
  background-color: #1877F2;
  animation: blinkFacebook 4s ease-in-out infinite;
}

/* Hover effect matching the others */
.social-btn.facebook:hover {
  transform: translateY(-4px) scale(1.05);
}

/* Force the icon to be white and match size */
.social-btn.facebook svg {
  fill: #ffffff !important;
  width: 24px;
  height: 24px;
}

/* The unique blink animation for Facebook */
@keyframes blinkFacebook {
  0%, 100% { 
    background-color: #1877F2; /* Facebook Blue */
    box-shadow: 0 0 0 rgba(24, 119, 242, 0); 
  }
  50% { 
    background-color: #3b5998; /* Darker Blue */
    box-shadow: 0 0 25px rgba(24, 119, 242, 0.9); 
  }
}