@charset "utf-8";
/* ============================================================================
   VPNTA · home.css
   首页专属:国旗填充、非对称拼盘、统计数字加号、底部 CTA 带
   所有颜色一律引用 base.css 的 :root 令牌,本文件不新增硬编码色值。
   ========================================================================== */

/* ============================ 国旗填充 ============================ */
.fl-red{fill:var(--flag-red);}
.fl-blue{fill:var(--flag-blue);}
.fl-white{fill:var(--flag-white);}
.fl-gold{fill:var(--flag-gold);}

/* ============================ 非对称拼盘 ============================ */
.mosaic{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  margin-top:clamp(20px,2.6vw,32px);
}
.mosaic > *{min-width:0;}

.mosaic-wide{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mosaic-wide .mono-label{margin-bottom:0;}
.mosaic-wide h3{margin-top:2px;}
.mosaic-wide p{font-size:14px;line-height:1.78;color:var(--text-muted);}
.mosaic-wide .pay-row{margin-top:auto;padding-top:14px;}

/* 统计数字的加号:跟在等宽大号数字后面,不另起一行 */
.stat-num .plus{
  font-size:.58em;
  font-weight:800;
  letter-spacing:0;
  margin-left:2px;
}

/* ============================ 底部 CTA 带 ============================ */
.ctaband{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px 28px;
  padding:clamp(24px,3.4vw,40px);
  border-radius:var(--r-lg);
  background:var(--term-fill);
  color:var(--on-ink);
  box-shadow:var(--term-shadow);
  overflow:hidden;
}
.ctaband-body{flex:1 1 320px;min-width:0;}
.ctaband .mono-label{color:var(--on-ink-muted);}
.ctaband h2{
  margin-top:10px;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  line-height:1.2;
  color:var(--on-ink);
}
.ctaband p{
  margin-top:10px;
  max-width:62ch;
  font-size:14.5px;
  line-height:1.75;
  color:var(--on-ink-mid);
}
.ctaband .btn{flex-shrink:0;white-space:nowrap;}

/* ============================ 响应式 ============================ */
@media (max-width:1080px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mosaic-wide{grid-column:span 2;}
  .mosaic .stat-card:nth-child(3){grid-column:span 2;}
}

@media (max-width:768px){
  .ctaband{padding:24px 20px;}
  .ctaband .btn{width:100%;}
}

@media (max-width:640px){
  .mosaic{grid-template-columns:1fr;}
  .mosaic-wide,
  .mosaic .stat-card:nth-child(3){grid-column:span 1;}
  .mosaic .stat-card{min-height:0;}
}