/* ============================================================
   AI数智出海港 · 出海可行性验证页面组 共享样式
   基线: docs/04-技术/对外视觉规范-UI-DESIGN-SYSTEM-v1-20260910.md
   v1.0 · 2026-09-13 · 分支 feature/positioning-verification-path-20260913
   色板: 金#fbbf24/紫#a78bfa(品牌) 青#14b8a6/#2dd4bf(结构) CTA渐变linear-gradient(135deg,#14b8a6,#8b5cf6)
   纪律: 双主题(light 默认) + 一页渐变元素≤3 + 无大emoji
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%;font-family:'Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  background:#0a1628;color:#e2e8f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body{background:
  radial-gradient(1200px 600px at 85% -10%, rgba(139,92,246,.14), transparent 60%),
  radial-gradient(1000px 500px at -10% 30%, rgba(20,184,166,.12), transparent 55%),
  linear-gradient(180deg,#0a1628 0%,#0d1f36 60%,#0a1628 100%)}
::selection{background:rgba(20,184,166,.3)}
[x-cloak]{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---- Nav (与首页一致) ---- */
.vnav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 36px;background:rgba(10,22,40,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(148,163,184,.1)}
.vnav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.04em;
  background:linear-gradient(135deg,#fbbf24,#a78bfa);background:linear-gradient(135deg in oklch,#fbbf24,#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}
.vnav-links{display:flex;align-items:center;gap:22px;font-size:13.5px;color:#94a3b8}
.vnav-links a{color:#94a3b8;text-decoration:none;transition:color .25s}
.vnav-links a:hover{color:#5eead4}
.vnav-links a.on{color:#5eead4;font-weight:600}
.vnav-cta{padding:8px 20px;border-radius:100px;background:linear-gradient(135deg,#14b8a6,#8b5cf6);color:#fff!important;font-weight:600;font-size:13px}
.vlang{display:flex;gap:6px}
.lang-btn{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.25);color:#94a3b8;font-size:12px;
  padding:5px 12px;border-radius:6px;cursor:pointer}
.lang-btn.active{background:rgba(20,184,166,.2);color:#5eead4;border-color:rgba(20,184,166,.5)}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:14px 34px;border-radius:100px;font-size:15px;font-weight:600;text-decoration:none;
  transition:all .3s;letter-spacing:.02em}
.btn-primary{background:linear-gradient(135deg,#14b8a6,#8b5cf6);color:#fff;box-shadow:0 8px 32px rgba(139,92,246,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,92,246,.5)}
.btn-ghost{border:1px solid rgba(148,163,184,.35);color:#cbd5e1;background:rgba(148,163,184,.06)}
.btn-ghost:hover{border-color:#5eead4;color:#5eead4}
.btn-sm{padding:10px 24px;font-size:13.5px}

/* ---- Hero ---- */
.vhero{padding:150px 24px 60px;text-align:center;position:relative}
.vhero.narrow{min-height:auto;padding:150px 24px 40px}
.vbadge{font-size:12px;letter-spacing:.28em;color:#5eead4;text-transform:uppercase;margin-bottom:22px;font-weight:500}
.vhero h1{font-size:clamp(32px,5vw,58px);font-weight:900;line-height:1.18;letter-spacing:.01em;margin-bottom:18px}
.vhero h1 .grad{background:linear-gradient(135deg,#fbbf24,#a78bfa);background:linear-gradient(135deg in oklch,#fbbf24,#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vsub{font-size:clamp(15px,1.55vw,18.5px);color:#94a3b8;line-height:1.85;max-width:820px;margin:0 auto 16px;font-weight:300}
.vmeta{font-size:13px;color:#64748b;letter-spacing:.08em;margin-bottom:34px}
.vmeta b{color:#5eead4;font-weight:600}
.vctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---- Section ---- */
.sec{padding:70px 24px;max-width:1180px;margin:0 auto}
.sec.tight{padding:50px 24px}
.sec h2{font-size:clamp(21px,2.5vw,30px);font-weight:800;text-align:center;margin-bottom:10px}
.sec-sub{text-align:center;color:#94a3b8;font-size:14px;margin-bottom:44px;font-weight:300;line-height:1.8}
.sec-note{text-align:center;color:#64748b;font-size:12.5px;margin-top:22px;font-weight:300;line-height:1.8}

/* ---- Why cards ---- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.wcard{border-radius:16px;padding:30px 26px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.13);transition:all .3s}
.wcard:hover{border-color:rgba(139,92,246,.5);transform:translateY(-4px)}
.wcard .wn{font-size:11px;letter-spacing:.2em;color:#5eead4;margin-bottom:16px;font-weight:600}
.wcard .wt{font-size:17px;font-weight:800;color:#f1f5f9;margin-bottom:12px;line-height:1.5}
.wcard .wd{font-size:13.5px;color:#94a3b8;line-height:1.9;font-weight:300}

/* ---- 四验 path cards ---- */
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.pcard2{border-radius:18px;padding:32px 26px;background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:all .35s;position:relative}
.pcard2:hover{transform:translateY(-6px);border-color:rgba(20,184,166,.6);box-shadow:0 18px 48px rgba(20,184,166,.16)}
.pcard2 .pno{font-size:11px;letter-spacing:.22em;color:#5eead4;font-weight:700;margin-bottom:14px}
.pcard2 .pt{font-size:19px;font-weight:800;margin-bottom:6px;color:#f1f5f9}
.pcard2 .pstage{font-size:11.5px;color:#64748b;letter-spacing:.06em;margin-bottom:16px}
.pcard2 .pq2{font-size:13.5px;color:#94a3b8;line-height:1.9;font-weight:300;margin-bottom:16px}
.pcard2 .pout{font-size:12.5px;color:#cbd5e1;border-top:1px solid rgba(148,163,184,.16);padding-top:14px;line-height:1.8;font-weight:300}
.pcard2 .pgo{margin-top:auto;padding-top:16px;font-size:13px;color:#5eead4;font-weight:600}

/* ---- MECE table ---- */
.mece-wrap{overflow-x:auto;border-radius:16px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.03)}
table.mece{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}
table.mece th{text-align:left;padding:15px 16px;font-size:12px;letter-spacing:.1em;color:#5eead4;font-weight:600;
  border-bottom:1px solid rgba(20,184,166,.3);background:rgba(20,184,166,.05);white-space:nowrap}
table.mece td{padding:15px 16px;color:#94a3b8;border-bottom:1px solid rgba(148,163,184,.09);line-height:1.75;font-weight:300;vertical-align:top}
table.mece tr:last-child td{border-bottom:none}
table.mece td.stage{color:#e2e8f0;font-weight:700;white-space:nowrap}
table.mece td.act{color:#cbd5e1}
.tag{display:inline-block;font-size:11.5px;padding:3px 10px;border-radius:100px;white-space:nowrap;font-weight:600}
.tag.hi{color:#5eead4;background:rgba(20,184,166,.14);border:1px solid rgba(20,184,166,.35)}
.tag.mid{color:#a78bfa;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.35)}
.tag.low{color:#94a3b8;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.25)}

/* ---- Boundary card ---- */
.bound{border-radius:16px;padding:30px 30px;background:linear-gradient(160deg,rgba(20,184,166,.09),rgba(139,92,246,.06) 75%);
  border:1px solid rgba(20,184,166,.32);max-width:980px;margin:0 auto}
.bound h3{font-size:17px;font-weight:800;margin-bottom:14px;color:#f1f5f9}
.bound ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.bound li{font-size:13.5px;color:#94a3b8;line-height:1.85;padding-left:22px;position:relative;font-weight:300}
.bound li:before{content:"—";position:absolute;left:0;color:#5eead4}
.bound .bwhy{margin-top:18px;padding-top:16px;border-top:1px solid rgba(148,163,184,.16);font-size:13px;color:#cbd5e1;line-height:1.85;font-weight:300}

/* ---- 对照基准 ---- */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto}
.cmp-col{border-radius:16px;padding:28px 26px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.13)}
.cmp-col.ours{border-color:rgba(20,184,166,.35);background:linear-gradient(160deg,rgba(20,184,166,.1),rgba(139,92,246,.05) 80%)}
.cmp-col h3{font-size:15px;font-weight:800;margin-bottom:6px;color:#f1f5f9}
.cmp-col .csub{font-size:12px;color:#64748b;margin-bottom:18px}
.cmp-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(148,163,184,.15);font-size:13px}
.cmp-row:last-child{border-bottom:none}
.cmp-row .k{color:#94a3b8;font-weight:300}
.cmp-row .v{color:#5eead4;font-weight:700;white-space:nowrap}
.cmp-row .v.plain{color:#cbd5e1;font-weight:400;white-space:normal;text-align:right}
.cmp-src{font-size:11.5px;color:#64748b;margin-top:16px;line-height:1.8;font-weight:300}
.cmp-src a{color:#5eead4;text-decoration:none}

/* ---- 数据基础 chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.chip{font-size:12.5px;color:#cbd5e1;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.045);
  border:1px solid rgba(148,163,184,.18);font-weight:300}
.chip b{color:#5eead4;font-weight:700}

/* ---- 子页 blocks ---- */
.blk{border-radius:16px;padding:28px 28px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.13);margin-bottom:20px}
.blk h3{font-size:16px;font-weight:800;margin-bottom:16px;color:#f1f5f9;display:flex;align-items:center;gap:10px}
.blk h3 .bnum{font-size:11px;letter-spacing:.2em;color:#5eead4;font-weight:700}
.qlist{list-style:none;display:flex;flex-direction:column;gap:13px}
.qlist li{font-size:14px;color:#cbd5e1;line-height:1.8;padding-left:24px;position:relative;font-weight:300}
.qlist li:before{content:"?";position:absolute;left:0;top:0;color:#a78bfa;font-weight:800}
.dlist{list-style:none;display:flex;flex-direction:column;gap:13px}
.dlist li{font-size:14px;color:#94a3b8;line-height:1.8;padding-left:24px;position:relative;font-weight:300}
.dlist li:before{content:"✓";position:absolute;left:0;color:#5eead4;font-weight:700}
.dlist li b{color:#e2e8f0;font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---- 上/下一验 nav ---- */
.stepnav{display:flex;justify-content:space-between;gap:16px;max-width:1000px;margin:0 auto;flex-wrap:wrap}
.stepnav a{flex:1;min-width:240px;text-decoration:none;border-radius:14px;padding:20px 24px;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.16);transition:all .3s}
.stepnav a:hover{border-color:rgba(20,184,166,.55);transform:translateY(-3px)}
.stepnav .sn-d{font-size:11px;letter-spacing:.16em;color:#64748b;margin-bottom:8px}
.stepnav .sn-t{font-size:15px;font-weight:700;color:#f1f5f9}
.stepnav a.next{text-align:right}

/* ---- CTA strip ---- */
.vstrip{padding:60px 24px 80px;text-align:center}
.vstrip h2{font-size:clamp(20px,2.4vw,28px);font-weight:800;margin-bottom:12px}
.vstrip p{color:#94a3b8;font-size:14px;max-width:660px;margin:0 auto 30px;line-height:1.85;font-weight:300}

/* ---- Footer ---- */
footer{padding:34px 24px;border-top:1px solid rgba(148,163,184,.1);display:flex;flex-direction:column;align-items:center;
  gap:10px;background:rgba(10,22,40,.6)}
.footer-brand{font-size:13px;letter-spacing:.2em;color:#64748b}
.footer-icp{font-size:12px;color:#475569;text-decoration:none}
.footer-icp:hover{color:#94a3b8}

/* ============================================================
   浅色主题(默认) 覆写 — 双写 html[data-theme="light"] + body.light
   ============================================================ */
html[data-theme="light"]{background:#f8fafc}
html[data-theme="light"] body,body.light{background:#f8fafc;color:#0f172a}
html[data-theme="light"] .vnav,body.light .vnav{background:rgba(255,255,255,.82)}
html[data-theme="light"] .vnav-logo,body.light .vnav-logo,
html[data-theme="light"] .vhero h1 .grad,body.light .vhero h1 .grad{
  background:linear-gradient(135deg,#b45309,#7c3aed);background:linear-gradient(135deg in oklch,#a16207,#7c3aed);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="light"] .vnav-links a,body.light .vnav-links a{color:#475569}
html[data-theme="light"] .vnav-links a.on,body.light .vnav-links a.on,
html[data-theme="light"] .vnav-links a:hover,body.light .vnav-links a:hover{color:#0d9488}
html[data-theme="light"] .lang-btn,body.light .lang-btn{background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.22);color:#475569}
html[data-theme="light"] .lang-btn.active,body.light .lang-btn.active{background:rgba(13,148,136,.14);color:#0d9488;border-color:rgba(13,148,136,.5)}
html[data-theme="light"] .vbadge,body.light .vbadge{color:#0d9488}
html[data-theme="light"] .vsub,body.light .vsub,
html[data-theme="light"] .sec-sub,body.light .sec-sub{color:#475569}
html[data-theme="light"] .vmeta,body.light .vmeta{color:#64748b}
html[data-theme="light"] .vmeta b,body.light .vmeta b{color:#0d9488}
html[data-theme="light"] .sec-note,body.light .sec-note{color:#64748b}
html[data-theme="light"] .btn-ghost,body.light .btn-ghost{border-color:rgba(15,23,42,.3);color:#334155;background:rgba(15,23,42,.03)}
html[data-theme="light"] .btn-ghost:hover,body.light .btn-ghost:hover{border-color:#0d9488;color:#0d9488}
html[data-theme="light"] .wcard,body.light .wcard{background:#fff;border-color:rgba(15,23,42,.1)}
html[data-theme="light"] .wcard .wn,body.light .wcard .wn{color:#0d9488}
html[data-theme="light"] .wcard .wt,body.light .wcard .wt{color:#0f172a}
html[data-theme="light"] .wcard .wd,body.light .wcard .wd{color:#475569}
html[data-theme="light"] .pcard2,body.light .pcard2{background:rgba(255,255,255,.88);border-color:rgba(15,23,42,.12);color:#0f172a}
html[data-theme="light"] .pcard2 .pno,body.light .pcard2 .pno,
html[data-theme="light"] .pcard2 .pgo,body.light .pcard2 .pgo{color:#0d9488}
html[data-theme="light"] .pcard2 .pt,body.light .pcard2 .pt{color:#0f172a}
html[data-theme="light"] .pcard2 .pstage,body.light .pcard2 .pstage{color:#64748b}
html[data-theme="light"] .pcard2 .pq2,body.light .pcard2 .pq2{color:#475569}
html[data-theme="light"] .pcard2 .pout,body.light .pcard2 .pout{color:#334155;border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .mece-wrap,body.light .mece-wrap{background:#fff;border-color:rgba(15,23,42,.1)}
html[data-theme="light"] table.mece th,body.light table.mece th{color:#0d9488;border-color:rgba(13,148,136,.25);background:rgba(13,148,136,.06)}
html[data-theme="light"] table.mece td,body.light table.mece td{color:#475569;border-color:rgba(15,23,42,.08)}
html[data-theme="light"] table.mece td.stage,body.light table.mece td.stage{color:#0f172a}
html[data-theme="light"] table.mece td.act,body.light table.mece td.act{color:#334155}
html[data-theme="light"] .tag.hi,body.light .tag.hi{color:#0d9488;background:rgba(13,148,136,.12);border-color:rgba(13,148,136,.4)}
html[data-theme="light"] .tag.mid,body.light .tag.mid{color:#7c3aed;background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.35)}
html[data-theme="light"] .tag.low,body.light .tag.low{color:#64748b;background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.18)}
html[data-theme="light"] .bound,body.light .bound{background:linear-gradient(160deg,rgba(13,148,136,.07),rgba(124,58,237,.05) 75%);border-color:rgba(13,148,136,.3)}
html[data-theme="light"] .bound h3,body.light .bound h3{color:#0f172a}
html[data-theme="light"] .bound li,body.light .bound li{color:#475569}
html[data-theme="light"] .bound li:before,body.light .bound li:before{color:#0d9488}
html[data-theme="light"] .bound .bwhy,body.light .bound .bwhy{color:#334155;border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .cmp-col,body.light .cmp-col{background:#fff;border-color:rgba(15,23,42,.1)}
html[data-theme="light"] .cmp-col.ours,body.light .cmp-col.ours{background:linear-gradient(160deg,rgba(13,148,136,.07),rgba(124,58,237,.04) 80%);border-color:rgba(13,148,136,.32)}
html[data-theme="light"] .cmp-col h3,body.light .cmp-col h3{color:#0f172a}
html[data-theme="light"] .cmp-col .csub,body.light .cmp-col .csub{color:#64748b}
html[data-theme="light"] .cmp-row,body.light .cmp-row{border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .cmp-row .k,body.light .cmp-row .k{color:#475569}
html[data-theme="light"] .cmp-row .v,body.light .cmp-row .v{color:#0d9488}
html[data-theme="light"] .cmp-row .v.plain,body.light .cmp-row .v.plain{color:#334155}
html[data-theme="light"] .cmp-src,body.light .cmp-src{color:#64748b}
html[data-theme="light"] .cmp-src a,body.light .cmp-src a{color:#0d9488}
html[data-theme="light"] .chip,body.light .chip{color:#334155;background:#fff;border-color:rgba(15,23,42,.14)}
html[data-theme="light"] .chip b,body.light .chip b{color:#0d9488}
html[data-theme="light"] .blk,body.light .blk{background:#fff;border-color:rgba(15,23,42,.1)}
html[data-theme="light"] .blk h3,body.light .blk h3{color:#0f172a}
html[data-theme="light"] .blk h3 .bnum,body.light .blk h3 .bnum{color:#0d9488}
html[data-theme="light"] .qlist li,body.light .qlist li{color:#334155}
html[data-theme="light"] .qlist li:before,body.light .qlist li:before{color:#7c3aed}
html[data-theme="light"] .dlist li,body.light .dlist li{color:#475569}
html[data-theme="light"] .dlist li:before,body.light .dlist li:before{color:#0d9488}
html[data-theme="light"] .dlist li b,body.light .dlist li b{color:#0f172a}
html[data-theme="light"] .stepnav a,body.light .stepnav a{background:#fff;border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .stepnav .sn-d,body.light .stepnav .sn-d{color:#64748b}
html[data-theme="light"] .stepnav .sn-t,body.light .stepnav .sn-t{color:#0f172a}
html[data-theme="light"] .vstrip p,body.light .vstrip p{color:#475569}
html[data-theme="light"] .sec h2,body.light .sec h2,
html[data-theme="light"] .vstrip h2,body.light .vstrip h2{color:#0f172a}
html[data-theme="light"] footer,body.light footer{background:rgba(255,255,255,.7);border-color:rgba(15,23,42,.08)}
html[data-theme="light"] .footer-brand,body.light .footer-brand{color:#64748b}
html[data-theme="light"] .footer-icp,body.light .footer-icp{color:#64748b}

/* ---- 响应式 ---- */
@media(max-width:820px){
  .vnav{padding:14px 18px}
  .vnav-links{gap:14px;font-size:12.5px}
  .vnav-links a.hide-sm{display:none}
  .cmp-grid,.two-col{grid-template-columns:1fr}
  .sec{padding:50px 18px}
  .vhero{padding:130px 18px 40px}
}