/* ===== Base ===== */
:root{
  --brand:#16a34a;
  --brand-dark:#15803d;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f4f7fb;
  --card-shadow:0 12px 35px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{
  background:var(--bg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#111827;
  -webkit-font-smoothing:antialiased;
}

/* ===== Hero ===== */
.hero-wrap{padding:24px 0}

/* ===== Premium card ===== */
.premium-box{
  background:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:var(--card-shadow);
}

/* ===== Badges ===== */
.badge-live{
  background:#e7f9ef;
  color:var(--brand);
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:30px;
}
.coming{
  background:var(--line);
  color:var(--muted);
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
  display:inline-block;
}

/* ===== State cards ===== */
.state-card{
  background:#fff;
  border-radius:14px;
  padding:18px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  border:1px solid var(--line);
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.state-card.live:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(22,163,74,.14);
}
.state-card.disabled{opacity:.6}

/* ===== Live dot ===== */
.live-dot-green{
  color:#22c55e;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.live-dot-green::before{
  content:"";
  width:8px;height:8px;
  background:#22c55e;border-radius:50%;
  animation:greenBlink 1.5s infinite ease-in-out;
}
@keyframes greenBlink{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{opacity:.5;box-shadow:0 0 0 6px rgba(34,197,94,0)}
  100%{opacity:1}
}

/* ===== Trust list ===== */
.trust-list li{margin-bottom:6px;color:#374151}

/* ===== Share & Earn ===== */
.share-earn-box{
  background:linear-gradient(135deg,#fff7ed,#fffbeb);
  border:1px dashed #f59e0b;
  border-radius:16px;
  padding:18px;
  margin-bottom:14px;
  transition:all .3s ease;
}
.share-earn-box:hover{
  box-shadow:0 0 25px rgba(245,158,11,.35);
  transform:translateY(-2px);
}
.share-earn-badge{
  background:#f59e0b;color:#fff;
  font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:20px;
  display:inline-block;margin-bottom:8px;
}
.share-earn-box h3{font-weight:700;margin-bottom:6px}
.share-earn-box p{font-size:14px;color:#374151;margin-bottom:12px}

/* ===== Carousel ===== */
.carousel img{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  border-radius:18px;
  background:#f8fafc;
}

/* ===== Review form ===== */
.review-form{
  background:#fff;
  padding:25px;
  border-radius:16px;
  box-shadow:var(--card-shadow);
}
.review-card{
  background:#fff;
  padding:20px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  border:1px solid var(--line);
}

/* ===== FAQ ===== */
.accordion-button:not(.collapsed){
  background:#e7f9ef;
  color:var(--brand-dark);
  box-shadow:none;
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .carousel img{max-height:260px}
  .premium-box{padding:20px}
  .hero-wrap{padding:12px 0}
}