/* ===== 基础：移动端优先，375–430 宽度体验最佳 ===== */
:root{
  --bg1:#0d1426; --bg2:#0a0f1e;
  --brand:#2fdf3d; --brand-600:#2563eb;
  --text:#0f172a; --muted:#6b7280; --soft:#f5f7fb;
  --card:#ffffff; --line:#eef2f7; --shadow:0 8px 20px rgba(2,8,23,.10);
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background:#fff; color:var(--text);
}
/* 限宽容器：模拟手机画布 */
.mobile{
  max-width: 430px; margin: 0 auto; background:#fff;
}

/* ===== 顶部：深蓝背景 + 两个按钮 ===== */
.hero{
  padding: 18px 16px 20px;
  background:
    radial-gradient(800px 360px at 100% -60%, #122149 0%, transparent 60%),
    radial-gradient(800px 360px at 0% -60%, #1b2d66 0%, transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:#fff;
}
.hero .btn-row{
  display:flex; gap:10px; justify-content:flex-start;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; font-size:15px;
  border:1px solid transparent; transition:.2s ease;
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-600); }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.2); }

/* ===== 模块：核心优势 ===== */
.section{ padding: 18px 16px; }
.section-title{
  text-align:center; font-size:20px; font-weight:800; margin: 4px 0 14px;
}
.features{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
.feature{
  text-align:center; background:#fff; border-radius:14px; padding:12px 6px;
}
.icon{
  width:44px;height:44px; border-radius:12px; margin:0 auto 8px;
  display:grid; place-items:center; color:#fff; font-size:22px; font-weight:900;
}
.ic-safe{background:#4f83ff}
.ic-flex{background:#6aa7ff}
.ic-earn{background:#4fc3ff}
.feature h4{margin:0 0 4px; font-size:15px}
.feature p{margin:0; font-size:12px; color:#8190a6}

/* ===== 两张统计卡片（并排） ===== */
.cards2{
  margin-top: 16px;
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.card{
  background:var(--card); border-radius:14px; box-shadow:var(--shadow);
  padding:14px; border:1px solid var(--line);
}
.card h5{margin:0 0 8px; font-size:12px; color:#6b7280; font-weight:600}
.kpi{font-size:26px; font-weight:900; color:#2a4fff; letter-spacing:.4px}
.kpi-muted{font-size:26px; font-weight:900; color:#94a3b8}

/* ===== 三个小人物卡片（并排） ===== */
.people{
  margin-top: 14px;
  display:grid; grid-template-columns: repeat(3,1fr); gap:10px;
}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; text-align:left;
}
.avatar{
  width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,#dbeafe,#f5fafe);
  display:block; margin-bottom:8px; object-fit:cover;
}
.pname{margin:0; font-weight:800; font-size:14px}
.prole{margin:0; color:#6b7280; font-size:12px}
.pdesc{margin:6px 0 0; color:#7b879a; font-size:12px; line-height:1.35}

/* ===== 邀请区（左文右图） ===== */
.invite{
  margin-top: 18px; background:#fff; border-radius:16px; border:1px solid var(--line);
  padding:16px; display:grid; grid-template-columns: 1.1fr .9fr; gap:10px; align-items:center;
}
.invite h3{margin:0 0 8px; font-size:20px; font-weight:900}
.invite p{margin:0 0 12px; color:#6b7280; font-size:14px}
.invite .btn{border-radius:12px}
.sub-link{
  display:inline-block; margin-top:10px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); color:#e2e7ee; text-decoration:none; background:hsl(135, 93%, 39%); font-weight:700; font-size:14px;
}
.graph{
  min-height:120px; border-radius:12px; background:linear-gradient(180deg,#eef5ff,#f8fbff);
  display:grid; place-items:center;
}

/* ===== 第二个邀请大标题区 ===== */
.block{ margin-top: 22px; padding: 14px 0 8px; text-align:center; }
.block h2{margin:0; font-size:20px; font-weight:900}
.icons{
  margin: 10px auto 6px; max-width: 320px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.ico{
  width:38px;height:38px;border-radius:50%; display:grid; place-items:center;
  background:#eff4ff; color:#4f83ff; font-weight:900;
}

/* ===== 小屏优化（<=360）把字再收一收 ===== */
@media (max-width:360px){
  .kpi,.kpi-muted{font-size:24px}
  .invite h3,.block h2{font-size:18px}
  .btn{padding:10px 14px; font-size:14px}
}

/* 无障碍：隐藏但仍可被读屏 */
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* 弹窗基础 */
.modal{
  position: fixed; inset: 0; display: grid; place-items: center;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s;
  z-index: 1000;
}
.modal.show{ visibility: visible; opacity: 1; }

.modal-backdrop{
  position:absolute; inset:0; background: rgba(15,23,42,.6);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
}
.modal.show .modal-backdrop{ opacity: 1; }

/* 弹窗面板动画 */
.modal-dialog{
  position: relative; width: min(92vw, 820px);
  background: #000; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: scale(.96) translateY(8px); transition: transform .25s ease;
}
.modal.show .modal-dialog{ transform: scale(1) translateY(0); }

.modal-body{ padding: 8px; }
.modal-video{ display:block; width:100%; height:auto; border-radius: 10px; }

/* 关闭按钮 */
.modal-close{
  position:absolute; right:8px; top:8px; width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:34px; text-align:center;
  cursor:pointer;
}
.modal-close:hover{ background: rgba(0,0,0,.6); }
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;     /* 保证图片不变形，裁剪为圆 */
  display: block;
  margin-bottom: 8px;
}
.hero {
  text-align: center;
  padding: 60px 20px 40px;
  background: #fff;        /* 白色背景 */
  color: #000;             /* 默认字体黑色 */
}
.hero {
  text-align: center;
  padding: 20px;
}

.hero-title {
  color: #000;
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
}

.hero-sub {
  color: #333;
  font-size: clamp(16px, 4vw, 20px);
  line-height: 1.6;
  margin: 6px 0;
}

.btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 20px;
  background: #22c55e;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s;
}
.btn:hover {
  background: #16a34a;
}


.hero-subtitle {
  font-size: clamp(14px, 2.5vw, 16px);
  color: #cdd3e0;
  margin-bottom: 30px;
}
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.btn-primary {
  background: #1fb838;
  color: #fff;
}
.btn-primary:hover { background: #1e4ecf; }
.btn-ghost {
  background: #2e4468;
  color: #fff;
}
.btn-ghost:hover { background: #334155; }
.hero-image {
  margin-top: 30px;
}
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;  /* 可选：让图片四角稍微圆润 */
  box-shadow: 0 4px 16px rgba(0,0,0,.1); /* 可选：淡淡的阴影 */
}