/* ============================================================
   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-w2c0 { 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-w2c0:focus { left: 8px; top: 8px; }

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

/* ── Header ─────────────────────────────────────────────── */
.vc-sitehead-d35f {
  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-d35f .vc-cont-p6b1 { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.vc-sitelogo-m098 { display: flex; align-items: center; gap: 10px; }
.vc-sitelogo-m098 a { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.vc-sitelogo-m098 a:hover { color: var(--vc-blue-soft); text-decoration: none; }
.vc-sitenav-p8bb { display: flex; gap: 28px; }
.vc-sitenav-p8bb a { color: #cbd5e1; font-size: 14px; font-weight: 500; text-decoration: none; transition: color var(--vc-transition); }
.vc-sitenav-p8bb a:hover { color: #fff; text-decoration: none; }

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

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

/* ── Buttons ────────────────────────────────────────────── */
.vc-btn-s4d2 { 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-w950 { background: var(--vc-blue); color: #fff; }
.vc-btnprim-w950:hover { background: var(--vc-blue-dark); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--vc-shadow-hover); }
.vc-btnghos-sce0 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.vc-btnghos-sce0:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }

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

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

.vc-homecard-ve13 { 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-ve13:hover { box-shadow: var(--vc-shadow-hover); transform: translateY(-3px); }
.vc-homecardimg-lfcd { width: 100%; height: 180px; object-fit: cover; background: var(--vc-bg-soft); }
.vc-homecardimg-lfcd img { width: 100%; height: 100%; object-fit: cover; }
.vc-homecard-ve13-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.vc-homecardtitl-q574 { font-size: 1.0625rem; font-weight: 700; color: var(--vc-navy); margin-bottom: 8px; line-height: 1.35; }
.vc-homecardtitl-q574 a { color: inherit; text-decoration: none; }
.vc-homecardtitl-q574 a:hover { color: var(--vc-blue); }
.vc-homecardexce-s1ab { font-size: 0.875rem; color: var(--vc-muted); line-height: 1.5; flex: 1; }

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

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

/* ── Hub Page ───────────────────────────────────────────── */
.vc-hubintr-pbec { padding: 40px 0 32px; }
.vc-hubgrid-sc0e { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--vc-gap); padding-bottom: 48px; }
.vc-hubcard-x201 { 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-x201:hover { box-shadow: var(--vc-shadow-hover); transform: translateY(-2px); }
.vc-hubcardimg-t3f5 { width: 100%; height: 200px; background: var(--vc-bg-soft); overflow: hidden; }
.vc-hubcardimg-t3f5 img { width: 100%; height: 100%; object-fit: cover; }
.vc-hubcardbody-w4d3 { padding: 20px; }
.vc-hubcardtitl-m7e0 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.vc-hubcardtitl-m7e0 a { color: var(--vc-navy); text-decoration: none; }
.vc-hubcardtitl-m7e0 a:hover { color: var(--vc-blue); }
.vc-hubcardexce-p497 { font-size: 0.875rem; color: var(--vc-muted); line-height: 1.55; margin-bottom: 10px; }
.vc-hubcarddate-l662 { font-size: 12px; color: var(--vc-muted); }

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

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

.vc-postfact-t087 { 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-t087 table { width: 100%; border-collapse: collapse; }
.vc-postfact-t087 td { padding: 6px 12px; font-size: 14px; border-bottom: 1px solid var(--vc-border); }
.vc-postfact-t087 td:first-child { font-weight: 600; color: var(--vc-muted); white-space: nowrap; width: 40%; }
.vc-postfact-t087 td:last-child { color: var(--vc-text); font-family: var(--vc-font-mono); font-size: 13px; }
.vc-postfact-t087 tr:last-child td { border-bottom: none; }

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

/* ── CTA ────────────────────────────────────────────────── */
.vc-ctaregi-qa4d { background: var(--vc-navy); border-radius: var(--vc-radius-lg); padding: 28px 32px; margin: 32px 0; text-align: center; }
.vc-ctabtn-pafe { 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-q90a { background: var(--vc-blue); color: #fff; }
.vc-ctabtnprim-q90a:hover { background: var(--vc-blue-dark); color: #fff; text-decoration: none; }
.vc-ctabtnseco-v819 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.vc-ctabtnseco-v819:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }
.vc-ctadisc-x303 { font-size: 12px; color: #94a3b8; margin-top: 12px; }
.vc-ctaregibott-xf0f { 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-qa8e, .vc-linkarti-mddf { margin: 40px 0; }
.vc-relapost-qa8e h2, .vc-linkarti-mddf h2 { font-size: var(--fs-h2); margin-bottom: 20px; color: var(--vc-navy); }
.vc-relalist-k0bd { display: flex; flex-direction: column; gap: 0; }
.vc-relalist-k0bd 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-k0bd a:hover { color: var(--vc-blue); }

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

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

/* ── Banner Ad ──────────────────────────────────────────── */
.vc-sitebannad-q65b { max-width: var(--vc-wrap); margin: 20px auto; padding: 0 20px; }
.vc-sitebannad-q65b 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-xe4a { max-width: var(--vc-wrap); margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.vc-footlink-xe4a a { color: #94a3b8; font-size: 14px; }
.vc-footlink-xe4a a:hover { color: #fff; }
.vc-affidisc-xb7c { 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-pb56 { text-align: center; padding: 16px; font-size: 13px; color: #475569; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .vc-homegrid-vef2, .vc-homegridguid-dfcf, .vc-hubgrid-sc0e, .vc-artigrid-kb71 { grid-template-columns: 1fr; }
  .vc-hero-ddc0 { padding: 40px 0 32px; }
  .vc-post-s9ad { padding: 20px 0; }
  .vc-postfact-t087 { padding: 16px; }
}