/* ============================================================
   VirtualCardCompare — 金融科技信任风 (Fintech Trust)
   气质：Stripe/信侯感，深蓝主调，干净专业，数据表格导向
   class 前缀：vc-
   ============================================================ */

/* ── 设计 Token ─────────────────────────────────────────── */
:root {
  --vc-bg:          #f8fafc;
  --vc-bg-soft:     #f1f5f9;
  --vc-card:        #ffffff;
  --vc-navy:        #0a2540;
  --vc-navy-light:  #1e3a5f;
  --vc-blue:        #3b82f6;
  --vc-blue-dark:   #2563eb;
  --vc-blue-soft:   #dbeafe;
  --vc-green:       #059669;
  --vc-green-soft:  #d1fae5;
  --vc-amber:       #d97706;
  --vc-red:         #dc2626;
  --vc-text:        #0f172a;
  --vc-muted:       #64748b;
  --vc-border:      #e2e8f0;
  --vc-white:       #ffffff;

  --vc-shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --vc-shadow-card:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --vc-shadow-hover: 0 10px 25px -3px rgba(0,0,0,0.10), 0 4px 10px -4px rgba(0,0,0,0.05);

  --vc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --vc-font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --vc-wrap: 1140px;
  --vc-radius:    10px;
  --vc-radius-lg: 14px;
  --vc-radius-xl: 20px;
  --vc-gap: 20px;
  --vc-transition: 0.18s cubic-bezier(.4,.0,.2,1);

  --ed-serif: var(--vc-font);
  --ed-sans:  var(--vc-font);
  --t-fast:   var(--vc-transition);
  --easing:   cubic-bezier(.4,.0,.2,1);

  --fs-hero: clamp(2rem, 4vw, 3rem);
  --fs-h1:   clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h2:   clamp(1.4rem, 2.5vw, 1.875rem);
  --fs-h3:   1.25rem;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--vc-font);
  background: var(--vc-bg);
  color: var(--vc-text);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vc-blue); text-decoration: none; transition: color var(--vc-transition); }
a:hover { color: var(--vc-blue-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--vc-font); font-weight: 700; line-height: 1.2; color: var(--vc-navy); letter-spacing: -0.02em; }

.vc-skiplink-sca3 { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--vc-navy); color: #fff; padding: 8px 16px; font-weight: 600; border-radius: var(--vc-radius); font-size: 14px; }
.vc-skiplink-sca3:focus { left: 8px; top: 8px; }

.vc-cont-t215 { max-width: var(--vc-wrap); margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────────── */
.vc-sitehead-pdbc {
  background: var(--vc-navy);
  border-bottom: 3px solid var(--vc-blue);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(10,37,64,0.15);
}
.vc-sitehead-pdbc .vc-cont-t215 { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.vc-sitelogo-l9df { display: flex; align-items: center; gap: 10px; }
.vc-sitelogo-l9df a { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.vc-sitelogo-l9df a:hover { color: var(--vc-blue-soft); text-decoration: none; }
.vc-sitenav-l29d { display: flex; gap: 28px; }
.vc-sitenav-l29d a { color: #cbd5e1; font-size: 14px; font-weight: 500; text-decoration: none; transition: color var(--vc-transition); }
.vc-sitenav-l29d a:hover { color: #fff; text-decoration: none; }

@media (max-width: 768px) {
  .vc-sitenav-l29d { display: none; }
}

/* ── Hero ───────────────────────────────────────────────── */
.vc-hero-v73e { background: linear-gradient(135deg, var(--vc-navy) 0%, var(--vc-navy-light) 100%); color: #fff; padding: 64px 0 56px; }
.vc-herotitl-p5da { font-size: var(--fs-hero); font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: -0.03em; }
.vc-herotagl-n26e { font-size: 1.125rem; color: #94a3b8; max-width: 640px; margin-bottom: 24px; }
.vc-herointr-q3c1 { font-size: 1rem; color: #cbd5e1; max-width: 720px; line-height: 1.7; }
.vc-heroacti-k94c { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ── Buttons ────────────────────────────────────────────── */
.vc-btn-w314 { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; border-radius: var(--vc-radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: all var(--vc-transition); cursor: pointer; border: none; }
.vc-btnprim-qa5b { background: var(--vc-blue); color: #fff; }
.vc-btnprim-qa5b:hover { background: var(--vc-blue-dark); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--vc-shadow-hover); }
.vc-btnghos-l417 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.vc-btnghos-l417:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }

/* ── Home Sections ──────────────────────────────────────── */
.vc-sitemain-vc22 { padding: 48px 0; }
.vc-homesect-labf { margin-bottom: 56px; }
.vc-homesecthead-vc36 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; border-bottom: 2px solid var(--vc-border); padding-bottom: 12px; }
.vc-homesecttitl-vcd8 { font-size: var(--fs-h2); font-weight: 700; color: var(--vc-navy); }
.vc-homesectmore-ve16 { font-size: 14px; font-weight: 600; color: var(--vc-blue); }

.vc-homegrid-m0e8 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--vc-gap); }
.vc-homegridguid-md08 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--vc-gap); }

.vc-homecard-s39f { background: var(--vc-card); border-radius: var(--vc-radius-lg); overflow: hidden; box-shadow: var(--vc-shadow-card); transition: all var(--vc-transition); border: 1px solid var(--vc-border); display: flex; flex-direction: column; }
.vc-homecard-s39f:hover { box-shadow: var(--vc-shadow-hover); transform: translateY(-3px); }
.vc-homecardimg-tce4 { width: 100%; height: 180px; object-fit: cover; background: var(--vc-bg-soft); }
.vc-homecardimg-tce4 img { width: 100%; height: 100%; object-fit: cover; }
.home-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.vc-homecardtitl-kd76 { font-size: 1.0625rem; font-weight: 700; color: var(--vc-navy); margin-bottom: 8px; line-height: 1.35; }
.vc-homecardtitl-kd76 a { color: inherit; text-decoration: none; }
.vc-homecardtitl-kd76 a:hover { color: var(--vc-blue); }
.vc-homecardexce-l0c4 { font-size: 0.875rem; color: var(--vc-muted); line-height: 1.5; flex: 1; }

/* ── List ───────────────────────────────────────────────── */
.vc-homelist-md15 { display: flex; flex-direction: column; gap: 0; }
.vc-homelistitem-t644 { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--vc-border); }
.vc-homelistitem-t644:last-child { border-bottom: none; }
.vc-homelistitem-t644 a { font-weight: 600; color: var(--vc-navy); font-size: 0.9375rem; }
.vc-homelistitem-t644 a:hover { color: var(--vc-blue); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.vc-brea-p0cb { padding: 16px 0; font-size: 13px; color: var(--vc-muted); }
.vc-brea-p0cb a { color: var(--vc-blue); }
.vc-brea-p0cb span { margin: 0 6px; }

/* ── Hub Page ───────────────────────────────────────────── */
.vc-hubintr-dd18 { padding: 40px 0 32px; }
.vc-hubgrid-x25a { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--vc-gap); padding-bottom: 48px; }
.vc-hubcard-d900 { background: var(--vc-card); border-radius: var(--vc-radius-lg); overflow: hidden; box-shadow: var(--vc-shadow-card); transition: all var(--vc-transition); border: 1px solid var(--vc-border); }
.vc-hubcard-d900:hover { box-shadow: var(--vc-shadow-hover); transform: translateY(-2px); }
.vc-hubcardimg-xca4 { width: 100%; height: 200px; background: var(--vc-bg-soft); overflow: hidden; }
.vc-hubcardimg-xca4 img { width: 100%; height: 100%; object-fit: cover; }
.vc-hubcardbody-w684 { padding: 20px; }
.vc-hubcardtitl-vbc8 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.vc-hubcardtitl-vbc8 a { color: var(--vc-navy); text-decoration: none; }
.vc-hubcardtitl-vbc8 a:hover { color: var(--vc-blue); }
.vc-hubcardexce-vded { font-size: 0.875rem; color: var(--vc-muted); line-height: 1.55; margin-bottom: 10px; }
.vc-hubcarddate-n4a0 { font-size: 12px; color: var(--vc-muted); }

/* ── Pagination ─────────────────────────────────────────── */
.vc-pagi-s357 { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 0; }
.vc-pagi-s357 a, .vc-pagi-s357 span { padding: 8px 14px; border-radius: var(--vc-radius); font-size: 14px; font-weight: 600; }
.vc-pagi-s357 a { background: var(--vc-card); color: var(--vc-navy); border: 1px solid var(--vc-border); text-decoration: none; }
.vc-pagi-s357 a:hover { background: var(--vc-blue); color: #fff; border-color: var(--vc-blue); }
.vc-prev-paa1, .vc-next-k933 { font-weight: 600; }
.vc-pageinfo-s7c3 { color: var(--vc-muted); font-size: 14px; }

/* ── Article / Post ─────────────────────────────────────── */
.vc-post-m874 { max-width: 820px; margin: 0 auto; padding: 32px 0; }
.vc-posthead-r73b { margin-bottom: 28px; border-bottom: 2px solid var(--vc-border); padding-bottom: 20px; }
.vc-posttitl-k36f { font-size: var(--fs-h1); font-weight: 800; color: var(--vc-navy); margin-bottom: 12px; line-height: 1.2; }
.vc-postmeta-xaf7 { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--vc-muted); }
.vc-postauth-s943 { font-weight: 600; color: var(--vc-navy); }
.vc-postdate-q72b, .vc-postupda-qfe0 { font-size: 13px; }

.vc-postfact-n3d7 { background: var(--vc-bg-soft); border-radius: var(--vc-radius-lg); padding: 20px 24px; margin: 24px 0; border-left: 4px solid var(--vc-blue); }
.vc-postfact-n3d7 table { width: 100%; border-collapse: collapse; }
.vc-postfact-n3d7 td { padding: 6px 12px; font-size: 14px; border-bottom: 1px solid var(--vc-border); }
.vc-postfact-n3d7 td:first-child { font-weight: 600; color: var(--vc-muted); white-space: nowrap; width: 40%; }
.vc-postfact-n3d7 td:last-child { color: var(--vc-text); font-family: var(--vc-font-mono); font-size: 13px; }
.vc-postfact-n3d7 tr:last-child td { border-bottom: none; }

.vc-postcont-rd02 { font-size: 16px; line-height: 1.75; color: var(--vc-text); }
.vc-postcont-rd02 h2 { font-size: var(--fs-h2); margin: 36px 0 16px; color: var(--vc-navy); font-weight: 700; }
.vc-postcont-rd02 h3 { font-size: var(--fs-h3); margin: 28px 0 12px; }
.vc-postcont-rd02 p { margin-bottom: 18px; }
.vc-postcont-rd02 ul, .vc-postcont-rd02 ol { margin: 0 0 18px 20px; }
.vc-postcont-rd02 li { margin-bottom: 8px; }
.vc-postcont-rd02 strong { color: var(--vc-navy); font-weight: 700; }
.vc-postcont-rd02 img { border-radius: var(--vc-radius-lg); margin: 24px 0; box-shadow: var(--vc-shadow-card); }

/* ── CTA ────────────────────────────────────────────────── */
.vc-ctaregi-t7b5 { background: var(--vc-navy); border-radius: var(--vc-radius-lg); padding: 28px 32px; margin: 32px 0; text-align: center; }
.vc-ctabtn-td6b { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; border-radius: var(--vc-radius); font-size: 15px; font-weight: 700; text-decoration: none; margin: 0 6px; }
.vc-ctabtnprim-t5aa { background: var(--vc-blue); color: #fff; }
.vc-ctabtnprim-t5aa:hover { background: var(--vc-blue-dark); color: #fff; text-decoration: none; }
.vc-ctabtnseco-n400 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.vc-ctabtnseco-n400:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }
.vc-ctadisc-w015 { font-size: 12px; color: #94a3b8; margin-top: 12px; }
.vc-ctaregibott-rd90 { background: var(--vc-bg-soft); border-radius: var(--vc-radius-lg); padding: 24px 32px; margin: 32px 0; text-align: center; border: 1px solid var(--vc-border); }

/* ── Related / Linked ───────────────────────────────────── */
.vc-relapost-rcbd, .vc-linkarti-w1be { margin: 40px 0; }
.vc-relapost-rcbd h2, .vc-linkarti-w1be h2 { font-size: var(--fs-h2); margin-bottom: 20px; color: var(--vc-navy); }
.vc-relalist-lc37 { display: flex; flex-direction: column; gap: 0; }
.vc-relalist-lc37 a { display: block; padding: 12px 0; border-bottom: 1px solid var(--vc-border); font-weight: 600; color: var(--vc-navy); font-size: 0.9375rem; }
.vc-relalist-lc37 a:hover { color: var(--vc-blue); }

.vc-artigrid-d57d { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--vc-gap); }
.vc-artigriditem-v2e8 { background: var(--vc-card); border-radius: var(--vc-radius); padding: 16px; border: 1px solid var(--vc-border); transition: all var(--vc-transition); }
.vc-artigriditem-v2e8:hover { box-shadow: var(--vc-shadow-card); }
.vc-artigriditem-v2e8 a { font-weight: 600; color: var(--vc-navy); font-size: 0.9375rem; }
.vc-artigridexce-k3c7 { font-size: 0.8125rem; color: var(--vc-muted); margin-top: 6px; line-height: 1.45; }

/* ── Author ─────────────────────────────────────────────── */
.vc-authprof-qc96 { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 2px solid var(--vc-border); margin-bottom: 32px; }
.vc-authbio-m477 { flex: 1; }
.vc-authbio-m477 h1 { font-size: var(--fs-h1); margin-bottom: 8px; }
.vc-authbio-m477 p { color: var(--vc-muted); font-size: 15px; }
.vc-authpost-v2f1 { list-style: none; }
.vc-authpost-v2f1 li { padding: 12px 0; border-bottom: 1px solid var(--vc-border); }
.vc-authpost-v2f1 a { font-weight: 600; color: var(--vc-navy); }

/* ── Banner Ad ──────────────────────────────────────────── */
.vc-sitebannad-v606 { max-width: var(--vc-wrap); margin: 20px auto; padding: 0 20px; }
.vc-sitebannad-v606 img { width: 100%; border-radius: var(--vc-radius-lg); }

/* ── Footer ─────────────────────────────────────────────── */
footer { background: var(--vc-navy); color: #94a3b8; padding: 48px 0 24px; margin-top: 64px; }
.vc-footlink-p730 { max-width: var(--vc-wrap); margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.vc-footlink-p730 a { color: #94a3b8; font-size: 14px; }
.vc-footlink-p730 a:hover { color: #fff; }
.vc-affidisc-p55a { max-width: var(--vc-wrap); margin: 0 auto; padding: 16px 20px; font-size: 12px; color: #64748b; line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 24px; }
.vc-copy-m69a { text-align: center; padding: 16px; font-size: 13px; color: #475569; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .vc-homegrid-m0e8, .vc-homegridguid-md08, .vc-hubgrid-x25a, .vc-artigrid-d57d { grid-template-columns: 1fr; }
  .vc-hero-v73e { padding: 40px 0 32px; }
  .vc-post-m874 { padding: 20px 0; }
  .vc-postfact-n3d7 { padding: 16px; }
}