/* ============================================
   HHPoker 德扑圈 - 信任绿+金色主题
   安全证书卡片风格
   ============================================ */

:root {
  --green-600: #059669;
  --green-500: #10b981;
  --green-50: #ecfdf5;
  --gold-600: #d97706;
  --gold-500: #f59e0b;
  --gold-400: #fbbf24;
  --gold-50: #fffbeb;
  --dark: #064e3b;
  --light: #f0fdf4;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

/* ---------- Security Certificate Card ---------- */
.cert-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #fffbeb 100%);
  border: 2px solid #d1d5db;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(5,150,105,.12);
}
.cert-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #059669, #d97706);
}
.cert-card .cert-seal {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 12px rgba(5,150,105,.35);
  border: 3px solid #fbbf24;
  rotate: -8deg;
}

/* ---------- Shield Motif ---------- */
.shield-icon {
  width: 100px; height: 120px;
  background: linear-gradient(135deg, #059669, #065f46);
  clip-path: polygon(50% 0%, 100% 15%, 100% 55%, 50% 100%, 0% 55%, 0% 15%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(5,150,105,.5);
}
.shield-icon i { font-size: 2.5rem; color: #fbbf24; }

/* ---------- Glass Nav ---------- */
.glass-nav { backdrop-filter: blur(12px); background: rgba(255,255,255,.88); }

/* ---------- Feature Cards ---------- */
.feature-card {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(180deg, transparent, rgba(5,150,105,.06));
  transition: height .3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(5,150,105,.12);
  border-color: #10b981;
}
.feature-card:hover::after { height: 100%; }
.feature-card .icon-wrap {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.feature-card .icon-wrap i { font-size: 1.5rem; color: #059669; }

/* ---------- Stats ---------- */
.stat-item { text-align: center; }
.stat-num { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #059669, #047857); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Testimonial Cards ---------- */
.testimonial-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 2rem;
  transition: all .3s ease;
}
.testimonial-card:hover {
  box-shadow: 0 8px 32px rgba(5,150,105,.1);
  border-color: #10b981;
}
.star-gold { color: #f59e0b; }

/* ---------- FAQ Accordion ---------- */
.faq-item { border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; margin-bottom: .75rem; }
.faq-q {
  width: 100%; text-align: left; padding: 1rem 1.25rem; font-weight: 600;
  background: #f9fafb; display: flex; justify-content: space-between; align-items: center;
  transition: background .2s;
  cursor: pointer;
}
.faq-q:hover { background: #ecfdf5; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; padding: 0 1.25rem; background: #fff; }
.faq-item.open .faq-a { max-height: 300px; padding: 1rem 1.25rem; }
.faq-item.open .faq-q { background: #ecfdf5; color: #059669; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-q i { transition: transform .3s ease; color: #9ca3af; }

/* ---------- CTA ---------- */
.cta-section {
  background: linear-gradient(135deg, #059669 0%, #047857 40%, #d97706 100%);
  border-radius: 1.5rem;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(251,191,36,.25) 0%, transparent 60%);
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 700; padding: .75rem 2rem; border-radius: 9999px;
  transition: all .3s; box-shadow: 0 4px 16px rgba(217,119,6,.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(217,119,6,.45); }
.btn-green {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-weight: 700; padding: .75rem 2rem; border-radius: 9999px;
  transition: all .3s; box-shadow: 0 4px 16px rgba(5,150,105,.35);
}
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(5,150,105,.45); }
.btn-outline-gold {
  border: 2px solid #d97706; color: #d97706; font-weight: 700;
  padding: .7rem 1.8rem; border-radius: 9999px; transition: all .3s;
}
.btn-outline-gold:hover { background: #d97706; color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: #064e3b; color: #d1fae5; }
.site-footer a:hover { color: #fbbf24; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .stat-num { font-size: 1.8rem; }
  .cert-card .cert-seal { width: 48px; height: 48px; font-size: .55rem; }
}