:root {
      --purple: #9b59b6;
      --dark: #1a1a2e;
      --darker: #16213e;
      --light-purple: #8e44ad;
    }
    body {
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      color: #ddd;
      min-height: 100vh;
      font-family: 'Segoe UI', sans-serif;
    }
    .navbar {
      background: rgba(0,0,0,0.4) !important;
    }
    .hero {
      min-height: 90vh;
      display: flex;
      align-items: center;
    }
    .btn-purple {
      background: var(--purple);
      border: none;
      border-radius: 8px;
      padding: 10px 25px;
    }
    .btn-purple:hover {
      background: var(--light-purple);
    }
    .btn-outline-purple {
      border: 2px solid var(--purple);
      color: var(--purple);
      border-radius: 8px;
    }
    .btn-outline-purple:hover {
      background: var(--purple);
      color: #fff;
    }
    .feature-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(155,89,182,0.3);
      border-radius: 15px;
      padding: 25px;
      transition: transform 0.3s;
    }
    .feature-card:hover {
      transform: translateY(-10px);
    }
    .team-card {
      background: rgba(255,255,255,0.05);
      border-radius: 20px;
      overflow: hidden;
      transition: 0.3s;
    }
    .team-card:hover {
      box-shadow: 0 10px 30px rgba(155,89,182,0.3);
    }
    .team-img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid var(--purple);
      object-fit: cover;
    }
    footer a {
      color: #aaa;
      text-decoration: none;
    }
    footer a:hover { color: #fff; }
        .btn-connect {
      background: #00d4ff;
      color: #000;
      font-weight: 600;
      border-radius: 30px;
      padding: 12px 32px;
      border: none;
      transition: all 0.3s;
    }
    .btn-connect:hover {
      background: #00e6ff;
      transform: scale(1.05);
    }

    /* Modal Styling - Exact match to your image */
    .wallet-modal .modal-content {
      background: #0f1622;
      border-radius: 24px;
      border: 1px solid rgba(0, 212, 255, 0.2);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    }
    .backup-line {
      height: 3px;
      background: linear-gradient(90deg, #f9a825, transparent);
      width: 120px;
      margin: 20px auto;
    }
    .backup-icon {
      width: 70px;
      height: 70px;
      background: #1e293b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 25px auto;
      font-size: 2rem;
    }
    .btn-continue {
      background: #00d4ff;
      color: #000;
      font-weight: bold;
      border-radius: 50px;
      padding: 14px 50px;
      border: none;
      font-size: 1.1rem;
    }
    .btn-continue:hover {
      background: #00e6ff;
    }
    .ticker-content {
  display: inline-flex;
  animation: scroll-left 60s linear infinite;
}
.ticker-wrapper:hover .ticker-content {
  animation-play-state: paused; /* Pauses when hovered */
}
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* Duplicate content for seamless loop */
.ticker-content::after {
  content: attr(data-content);
  margin-left: 60px;
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
/* Animated Counter Styling */
.counter {
  font-size: 3.2rem;
  font-weight: 800;
  color: #00d4ff;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  line-height: 1;
}

@media (max-width: 768px) {
  .counter { font-size: 2.5rem; }
}

/* Hero image smooth hover (optional but nice) */
.hero img.img-fluid {
  transition: transform 0.4s ease;
}
.hero img.img-fluid:hover {
  transform: scale(1.05);
}
.animate-float {
  animation: float 15s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.4));
}

@keyframes float {
  0%   { transform: translateY(0px) translateX(0px) rotate(0deg); }
  25%  { transform: translateY(-30px) translateX(20px) rotate(8deg); }
  50%  { transform: translateY(-10px) translateX(-15px) rotate(-6deg); }
  75%  { transform: translateY(-35px) translateX(10px) rotate(5deg); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
}
.marquee-wrapper { overflow: hidden; white-space: nowrap; }
.marquee-content {
  display: inline-flex;
  animation: marquee 35s linear infinite;
  gap: 60px;
  padding: 0 20px;
}
.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#typewriter {
  background: linear-gradient(90deg, #00d4ff, #9b59b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  white-space: pre-line;
  line-height: 1.15;
  min-height: 160px;
}

.text-cyan {
  animation: blink 1s infinite;
  font-size: 1.2em;
}
@keyframes blink {
  0%,100% { opacity: 0.8; }
  50% { opacity: 0; }
}
.counter {
  background: linear-gradient(90deg, #00d4ff, #9b59b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold 4.5rem 'Segoe UI', sans-serif;
  text-shadow: 0 0 40px rgba(0,212,255,0.5);
}
.text-cyan { color: #00d4ff; }
.step-number {
  color: #00d4ff !important;
  animation: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}