:root{
  /* Background palette (Light Pink → Magenta → Purple → Deep Purple) */
  --lpink: #ffb6f3;
  --magenta: #ff4fd8;
  --purple: #9a5bff;
  --dpurple: #2b124a;

  /* Overlay cards */
  --glass1: rgba(154, 91, 255, 0.16);
  --glass2: rgba(255, 79, 216, 0.10);
  --stroke: rgba(255,255,255,0.14);

  --txt:#ffffff;
  --muted: rgba(255,255,255,0.72);

  /* Accent */
  --blue: #4aa8ff; /* requested blue for accents */
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Hind Siliguri","Noto Sans Bengali",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  overflow-x:hidden;

  /* Main background */
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(255,182,243,0.28), transparent 55%),
    radial-gradient(900px 520px at 88% 16%, rgba(255,79,216,0.22), transparent 55%),
    radial-gradient(900px 520px at 50% 90%, rgba(154,91,255,0.22), transparent 60%),
    linear-gradient(180deg, #3a0f5a 0%, var(--dpurple) 55%, #11061e 100%);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Background star layer */
.particles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.wrap{
  position: relative;
  z-index: 1;
  width: min(1080px, 92vw);
  margin: 0 auto;
  padding: 14px 0 40px;
}

/* Appbar */
.appbar{
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  backdrop-filter: blur(14px);
}
.appbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(43,18,74,0.45);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.brand-badge{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius: 14px;
  font-weight:1000;
  background: linear-gradient(135deg, rgba(255,79,216,0.95), rgba(154,91,255,0.95));
  box-shadow: 0 12px 34px rgba(154,91,255,0.24);
}
.brand-text .name{font-weight:1000; font-size:18px; line-height:1}
.brand-text .sub{font-size:13px; color:var(--muted); margin-top:4px}
.app-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: var(--txt);
  font-weight: 800;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pill:hover{transform: translateY(-1px)}
.pill.primary{
  border-color: rgba(255,79,216,0.36);
  background: linear-gradient(135deg, rgba(255,79,216,0.95), rgba(154,91,255,0.75));
}
.pill.ghost{background: rgba(255,255,255,0.06)}

/* Hero */
.hero{padding: 14px 0 8px}
.hero-card{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(650px 300px at 20% 20%, rgba(255,79,216,0.18), transparent 55%),
    radial-gradient(650px 300px at 85% 25%, rgba(154,91,255,0.18), transparent 55%),
    linear-gradient(180deg, rgba(154,91,255,0.14), rgba(43,18,74,0.22));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-inner{
  padding: 22px;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}
.hero-title{font-size: 42px; font-weight: 1100; letter-spacing: .4px}
.hero-tag{color: var(--muted); margin-top:6px; font-size: 15px}
.hero-cta{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap}

.hero-side{display:flex; align-items:stretch}
.trust-card{
  width:100%;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(43,18,74,0.28);
  padding: 14px;
}
.trust-row{display:flex; align-items:center; gap:12px}
.trust-ic{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}
.trust-txt .t1{font-weight: 1000}
.trust-txt .t2{color: var(--muted); font-size: 13px; margin-top: 3px}
.trust-mini{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.mini{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  padding: 10px 12px;
}
.mini .v{font-weight: 1100; font-size: 18px}
.mini .l{color: var(--muted); font-size: 12px}

/* Sections */
.section{padding: 20px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 12px}
.h2{font-size: 20px; font-weight: 1100}
.sub{color: var(--muted); font-size: 13px; margin-top: 4px}

/* Glass cards (requested overlay type purple) */
.stat-card,
.feature-card,
.payment-method,
.withdrawal-card,
.footer-box{
  background:
    linear-gradient(180deg, rgba(154,91,255,0.16), rgba(255,79,216,0.08));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  backdrop-filter: blur(12px);
}

/* Stats */
.stats-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.stat-card{border-radius: var(--radius); padding: 14px}
.stat-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.stat-ic{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}
.stat-number{
  display:block;
  font-size: 34px;
  font-weight: 1200;
  margin-top: 8px;
  background: linear-gradient(90deg, rgba(255,182,243,1), rgba(255,79,216,1), rgba(154,91,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.stat-label{color: var(--muted); font-size: 12px; margin-top: 3px}

/* Features */
.features-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.feature-card{
  border-radius: var(--radius);
  padding: 14px;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.feature-card.in{opacity: 1; transform: translateY(0)}
.feature-icon{
  width:44px;height:44px;
  border-radius: 14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}
.feature-title{margin-top:10px; font-weight: 1100}
.feature-description{margin-top:6px; color: var(--muted); font-size: 13px; line-height: 1.55}

/* Payment */
.payment-methods{display:flex; gap: 12px; flex-wrap: wrap}
.payment-method{width: 120px; border-radius: 16px; overflow:hidden; padding: 10px}

/* Withdrawals */
.withdrawals{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(43,18,74,0.24);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.withdrawals-inner{padding: 16px}
.withdrawals-title{font-weight: 1100; font-size: 18px}
.withdrawals-sub{color: var(--muted); font-size: 13px; margin-top: 4px}

.withdrawals-grid{margin-top: 12px; overflow:hidden}
.withdrawals-slider{
  display:flex;
  gap: 12px;
  align-items:stretch;
  animation: slideX 18s linear infinite;
  will-change: transform;
}
@keyframes slideX{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.withdrawal-card{
  min-width: 220px;
  border-radius: 18px;
  padding: 12px;
}
.user-name{font-weight: 1000}
.withdrawal-amount{margin-top: 6px; font-size: 20px; font-weight: 1200}
.withdrawal-method{margin-top: 4px; color: var(--muted); font-size: 13px}
.withdrawal-time{margin-top: 8px; color: rgba(255,255,255,0.62); font-size: 12px}

/* Footer */
.footer{padding: 16px 0 30px}
.footer-box{border-radius: 20px; padding: 14px}
.footer-links{display:flex; gap: 10px; flex-wrap: wrap}
.footer-link{
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  font-weight: 800;
  font-size: 13px;
}
.footer-bottom{margin-top: 10px; color: var(--muted); font-size: 12px}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns: 1fr}
  .stats-grid{grid-template-columns: repeat(2, 1fr)}
  .features-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 520px){
  .hero-title{font-size: 36px}
  .stats-grid{grid-template-columns: 1fr}
  .features-grid{grid-template-columns: 1fr}
}

/* ==========================
   Jhiri Jhiri Star Animation
   (white stars with pink/purple tint)
========================== */
.star{
  position:absolute;
  width: var(--sz);
  height: var(--sz);
  border-radius: 999px;
  opacity: 0.85;
  transform: translate3d(var(--x), var(--y), 0);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.15));
  box-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 0 18px rgba(255,79,216,0.18),
    0 0 22px rgba(154,91,255,0.16);
  animation: twinkle var(--tw) ease-in-out infinite, drift var(--dr) linear infinite;
  will-change: transform, opacity;
}

.star::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0));
  opacity: 0.6;
}

@keyframes twinkle{
  0%,100% { opacity: 0.20; transform: translate3d(var(--x), var(--y), 0) scale(var(--sc)); }
  50%     { opacity: 0.95; transform: translate3d(var(--x), var(--y), 0) scale(calc(var(--sc) * 1.15)); }
}

@keyframes drift{
  from { transform: translate3d(var(--x), calc(var(--y) + 20px), 0) scale(var(--sc)); }
  to   { transform: translate3d(var(--x), calc(var(--y) - 40px), 0) scale(var(--sc)); }
}

@media (prefers-reduced-motion: reduce){
  .star{ animation: none !important; }
  .withdrawals-slider{ animation: none !important; }
}