/* ═══════════════════════════════════════════════════════
   SMMStride — Dark Purple Neon Theme (Growfollows style)
   ═══════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────── */
:root {
  --primary-color:        #1a0a2e;
  --primary-lighter-color:#0f0520;
  --primary-hover-color:  #8b5cf6;
  --form-bg-color:        #1a0a2e;
}

/* ── Body background — deep dark purple ────────────── */
body.home {
  background: linear-gradient(135deg, #080113 0%, #100420 50%, #0d031a 100%) !important;
  min-height: 100vh;
}

/* Animated orbs in background */
body.home::before {
  content: '';
  position: fixed; top: -150px; left: -150px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%);
  animation: orb1 10s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
body.home::after {
  content: '';
  position: fixed; bottom: 0; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%);
  animation: orb1 14s ease-in-out infinite reverse;
  pointer-events: none; z-index: 0;
}
@keyframes orb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(30px,40px) scale(1.08); }
}

/* ── Topbar ────────────────────────────────────────── */
#smm-topbar {
  background: rgba(8,1,19,0.95) !important;
  border-bottom: 1px solid rgba(139,92,246,0.25) !important;
}
#smm-topbar .smm-contact a:hover { color: #a855f7 !important; }
#smm-topbar .smm-icons a.fb:hover { background: #1877f2 !important; border-color: #1877f2 !important; }
#smm-topbar .smm-icons a.ig:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888) !important; border-color: #dc2743 !important; }
#smm-topbar .smm-icons a.tw:hover { background: #111 !important; border-color: #555 !important; }
#smm-topbar .smm-icons a.yt:hover { background: #ff0000 !important; border-color: #ff0000 !important; }
#smm-topbar .smm-icons a.tg:hover { background: #0088cc !important; border-color: #0088cc !important; }
#smm-topbar .smm-icons a.tt:hover { background: linear-gradient(135deg,#010101,#69c9d0) !important; }
#smm-topbar .smm-icons a.wa:hover { background: #25d366 !important; border-color: #25d366 !important; }

/* ── Heading + Navbar ──────────────────────────────── */
body.home .heading {
  background: transparent !important;
  position: relative; z-index: 10;
}
body.home .heading .navbar { background: transparent !important; }
body.home .heading .navbar-brand span { font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -0.5px; }
body.home .heading .navbar .nav-link { color: rgba(255,255,255,0.8) !important; font-weight: 500 !important; }
body.home .heading .navbar .nav-link:hover { color: #c084fc !important; }
body.home .heading .navbar .nav-item.active .nav-link { color: #a855f7 !important; }

body.home .heading .navbar .btn-success {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  padding: 10px 28px !important;
  box-shadow: 0 4px 20px rgba(139,92,246,0.45) !important;
  transition: all 0.22s !important;
}
body.home .heading .navbar .btn-success:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(168,85,247,0.6) !important;
}

/* ── Hero section ──────────────────────────────────── */
body.home .hero-section { padding: 50px 0 30px; position: relative; z-index: 5; }

body.home .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.4);
  color: #c084fc;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

body.home .hero-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
}
body.home .hero-title span { color: #a855f7 !important; }

body.home .hero-desc { color: rgba(255,255,255,0.6) !important; font-size: 1rem; line-height: 1.6; }

body.home .btn-hero-primary {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important; text-decoration: none !important;
  padding: 13px 30px; border-radius: 50px;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 22px rgba(139,92,246,0.5);
  transition: all 0.25s;
  border: none;
}
body.home .btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(168,85,247,0.65);
  color: #fff !important; text-decoration: none !important;
}

body.home .btn-hero-secondary {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: rgba(139,92,246,0.1) !important;
  color: rgba(255,255,255,0.85) !important; text-decoration: none !important;
  padding: 13px 30px; border-radius: 50px;
  font-weight: 600; font-size: 15px;
  border: 1px solid rgba(139,92,246,0.35);
  transition: all 0.25s;
}
body.home .btn-hero-secondary:hover {
  background: rgba(139,92,246,0.2) !important;
  border-color: #a855f7;
  transform: translateY(-2px);
  color: #fff !important; text-decoration: none !important;
}

body.home .hero-trust { margin-top: 22px; }
body.home .hero-trust span {
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px;
}
body.home .hero-trust span i { color: #a855f7; }

/* ── Phone animation (left column) ─────────────────── */
body.home .phone-anim-frame {
  background: rgba(139,92,246,0.08) !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
  box-shadow: 0 20px 60px rgba(139,92,246,0.2), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(12px);
}
body.home .pa-badge {
  background: rgba(139,92,246,0.2) !important;
  border: 1px solid rgba(139,92,246,0.3) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(139,92,246,0.3) !important;
}
body.home .pa-plat.ig i { color: #e1306c; }
body.home .pa-plat.yt i { color: #ff0000; }
body.home .pa-plat.fb i { color: #1877f2; }
body.home .pa-plat.tt i { color: #69c9d0; }

/* ── Login card (right column) ──────────────────────── */
body.home .g-card {
  background: rgba(26,10,46,0.85) !important;
  border: 1px solid rgba(139,92,246,0.3) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.1) !important;
  backdrop-filter: blur(16px);
  border-radius: 16px !important;
}
body.home .g-card .btn-success {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(139,92,246,0.45) !important;
}
body.home .g-card .btn-success:hover {
  box-shadow: 0 8px 28px rgba(168,85,247,0.6) !important;
}
body.home .g-card .input-group-text {
  background: rgba(139,92,246,0.15) !important;
  border-color: rgba(139,92,246,0.3) !important;
  color: #c084fc !important;
}
body.home .g-card .form-control {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(139,92,246,0.25) !important;
  color: #fff !important;
}
body.home .g-card .form-control:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.2) !important;
}
body.home .g-card .text-success { color: #c084fc !important; }
body.home .g-card .text-light { color: rgba(255,255,255,0.6) !important; }

/* ── Stat cards ─────────────────────────────────────── */
body.home .stat-card {
  background: rgba(139,92,246,0.08) !important;
  border: 1px solid rgba(139,92,246,0.2) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  transition: all 0.25s !important;
  backdrop-filter: blur(8px);
}
body.home .stat-card:hover {
  border-color: rgba(139,92,246,0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(139,92,246,0.25) !important;
}
body.home .stat-number {
  font-size: 2.2rem !important; font-weight: 800 !important;
  color: #a855f7 !important;
}
body.home .stat-label { color: rgba(255,255,255,0.6) !important; font-size: 13px; }
body.home .stat-label i { color: #c084fc; }

/* ── Step cards (How It Works) ──────────────────────── */
body.home .step-card {
  background: rgba(20,8,36,0.8) !important;
  border: 1px solid rgba(139,92,246,0.2) !important;
  border-radius: 16px !important;
  padding: 30px 24px !important;
  transition: all 0.25s !important;
  backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
}
body.home .step-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, transparent);
  opacity: 0; transition: opacity 0.3s;
}
body.home .step-card:hover { border-color: rgba(168,85,247,0.5) !important; box-shadow: 0 12px 36px rgba(139,92,246,0.2) !important; transform: translateY(-5px) !important; }
body.home .step-card:hover::before { opacity: 1; }
body.home .step-number {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; font-weight: 800; font-size: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
body.home .step-card h5 { color: #fff !important; font-weight: 700; }
body.home .step-card p { color: rgba(255,255,255,0.55) !important; }
body.home .step-card .btn-success { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; border:none !important; border-radius:50px !important; }
body.home .step-card .btn-outline-light { border-color:rgba(139,92,246,0.4) !important; color:rgba(255,255,255,0.7) !important; border-radius:50px !important; }
body.home .step-card .btn-outline-light:hover { background: rgba(139,92,246,0.2) !important; color:#fff !important; }
body.home .text-success { color: #a855f7 !important; }
body.home .icon-48 { color: #a855f7 !important; }

/* ── Section headings ───────────────────────────────── */
body.home .font-weight-bold { color: #fff !important; }
body.home .text-muted { color: rgba(255,255,255,0.45) !important; }

/* ── Platform row (injected by JS) ─────────────────── */
#smm-platform-row {
  padding: 40px 0 20px;
  position: relative; z-index: 5;
}
#smm-platform-row h5 {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 600;
}
.prw {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 15px;
}
.pr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 82px;
  text-decoration: none;
}
.pr-item:hover { transform: translateY(-5px); text-decoration: none; background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); box-shadow: 0 8px 24px rgba(139,92,246,0.2); }
.pr-item i { font-size: 28px; line-height: 1; }
.pr-item span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; }
.pr-item:hover span { color: #fff; }

.pr-item.pr-ig i { color: #e1306c; }
.pr-item.pr-ig:hover { border-color: rgba(225,48,108,0.4); box-shadow: 0 8px 24px rgba(225,48,108,0.25); }

.pr-item.pr-fb i { color: #1877f2; }
.pr-item.pr-fb:hover { border-color: rgba(24,119,242,0.4); box-shadow: 0 8px 24px rgba(24,119,242,0.25); }

.pr-item.pr-yt i { color: #ff3333; }
.pr-item.pr-yt:hover { border-color: rgba(255,0,0,0.4); box-shadow: 0 8px 24px rgba(255,0,0,0.25); }

.pr-item.pr-tt i { color: #69c9d0; }
.pr-item.pr-tt:hover { border-color: rgba(105,201,208,0.4); box-shadow: 0 8px 24px rgba(105,201,208,0.25); }

.pr-item.pr-tg i { color: #0088cc; }
.pr-item.pr-tg:hover { border-color: rgba(0,136,204,0.4); box-shadow: 0 8px 24px rgba(0,136,204,0.25); }

.pr-item.pr-tw i { color: rgba(255,255,255,0.85); }

.pr-item.pr-sp i { color: #1db954; }
.pr-item.pr-sp:hover { border-color: rgba(29,185,84,0.4); box-shadow: 0 8px 24px rgba(29,185,84,0.25); }

.pr-item.pr-sc i { color: #fffc00; }
.pr-item.pr-sc:hover { border-color: rgba(255,252,0,0.3); box-shadow: 0 8px 24px rgba(255,252,0,0.2); }

.pr-item.pr-li i { color: #0a66c2; }
.pr-item.pr-li:hover { border-color: rgba(10,102,194,0.4); box-shadow: 0 8px 24px rgba(10,102,194,0.25); }

/* ── Global buttons ─────────────────────────────────── */
.btn-primary, .btn-success {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.btn-primary:hover, .btn-success:hover {
  background: linear-gradient(135deg, #6d28d9, #9333ea) !important;
  box-shadow: 0 4px 16px rgba(139,92,246,0.5) !important;
}

/* Sidebar */
.app-sidebar { background: linear-gradient(180deg, #0f0420 0%, #080113 100%) !important; }

/* ── Floating WhatsApp ──────────────────────────────── */
.float-wa {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,0.5);
  transition: all 0.25s ease;
}
.float-wa:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.7); color: #fff; text-decoration: none; }
.float-wa-pulse {
  position: fixed; bottom: 24px; right: 24px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(37,211,102,0.3);
  animation: wa-pulse 2s ease-out infinite; pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}