/* =========================================================
   汇泽万嘉 · 示意图专用样式
   八权体系环形图 / 三步闭环 / 双螺旋 / 五维指数 / 对比表 等
   全部用 HTML+CSS 绘制，便于后期改文字，不使用图片/SVG
   ========================================================= */

/* ---- 通用示意容器 ---- */
.diagram-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);overflow-x:auto}
.diagram-title{text-align:center;font-size:18px;font-weight:800;margin-bottom:26px;letter-spacing:.5px}
.diagram-note{text-align:center;font-size:13px;color:var(--t3);margin-top:22px}

/* =========================================================
   一、八权体系环形图（八权体系节点图）
   8 个扇形节点围绕中心，指数权金色突出
   ========================================================= */
.ring-wrap{max-width:760px;margin:0 auto;position:relative;padding:22px 0}
.ring-center{position:relative;width:190px;height:190px;margin:0 auto;border-radius:50%;
  background:linear-gradient(135deg,#1E3A5C,#0B1A2B);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;box-shadow:0 14px 30px rgba(11,26,43,.35);z-index:2}
.ring-center b{font-size:21px;font-weight:800;letter-spacing:1px}
.ring-center span{font-size:11.5px;opaacity:.85;letter-spacing:1px}
.ring-center .core-en{font-size:10px;color:#a9c3e6;letter-spacing:2px;margin-top:4px}
.ring-nodes{position:relative;width:100%;height:100%;margin-top:-40px}
.ring-node{position:absolute;left:50%;top:50%;
  width:136px;transform:translate(-50%,-50%);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 10px;text-align:center;box-shadow:0 6px 20px rgba(11,26,43,.08);
  transition:all .25s}
.ring-node:hover{transform:translate(-50%,-50%) translateY(-3px);border-color:var(--gold);box-shadow:0 12px 28px rgba(11,26,43,.14)}
.ring-node .ri{font-weight:800;font-size:16px;color:var(--blue);letter-spacing:.5px}
.ring-node .rn{font-size:12px;color:#7A8595;margin-top:7px;line-height:1.5}
.ring-node.is-index{background:linear-gradient(165deg,#FDF8EC,#F5E9C8);border:1.5px solid var(--gold);box-shadow:0 8px 22px rgba(184,148,62,.18)}
.ring-node.is-index:hover{border-color:var(--gold-dk)}
.ring-node.is-index .ri{color:var(--gold-dk);font-weight:800}
.ring-node.is-index .rn{color:#a2883c}
.ring-node .tag-price{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;background:var(--gold);color:#fff;padding:2px 10px;border-radius:12px;letter-spacing:.5px}

/* 【定位法】用 calc 做圆周分布：每节点 rotated position */
/* 8 个节点(0-7)。 node-i 借助 top/left 排列为环 */
/* 使用 percentage 圆环定位方案 */
.rn-pos{position:absolute;left:50%;top:50%}
.r0{transform:translate(-50%,-50%) translate(260px,0)}
.r1{transform:translate(-50%,-50%) translate(184px,184px)}
.r2{transform:translate(-50%,-50%) translate(0,260px)}
.r3{transform:translate(-50%,-50%) translate(-184px,184px)}
.r4{transform:translate(-50%,-50%) translate(-260px,0)}
.r5{transform:translate(-50%,-50%) translate(-184px,-184px)}
.r6{transform:translate(-50%,-50%) translate(0,-260px)}
.r7{transform:translate(-50%,-50%) translate(184px,-184px)}

/* =========================================================
   1.1 线型流程图（适用于移动端/简洁布局）
   ========================================================= */
.flow-8{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow-node{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;padding:14px;background:#fbfcfe;position:relative}
.flow-node .fi{font-size:13px;font-weight:800;color:var(--blue)}
.flow-node .fn{font-size:12px;color:var(--t3);margin-top:3px}
.flow-node[data-index]{border-left-color:var(--gold)}
.flow-node[data-index] .fn{color:var(--gold-dk)}

/* =========================================================
   2. 三步落地闭环（首页 Hero 右侧卡片/三段式）
   ========================================================= */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:18px;padding:20px 4px;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;left:30px;top:70px;bottom:-22px;width:2px;background:linear-gradient(var(--gold-dk),transparent)}
.step-n{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#1E3A5C,var(--blue-dk));color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(11,26,43,.3)}
.step-n.hot{background:linear-gradient(135deg,var(--gold),var(--gold-dk));box-shadow:0 8px 18px rgba(184,148,62,.30)}
.step b{font-size:17px;display:block;margin-bottom:5px}
.step small{font-size:13.5px;color:var(--t3);line-height:1.6;display:block}

/* =========================================================
   2.1 首页三条主线卡片
   ========================================================= */
.mainline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.main-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;position:relative;overflow:hidden;transition:all .3s;box-shadow:var(--shadow)}
.main-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--blue)}
.main-card:nth-child(2)::before{background:var(--gold)}
.main-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold)}
.main-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.main-card .mc-no{font-size:13px;font-weight:800;color:var(--blue);letter-spacing:2px}
.main-card:nth-child(2) .mc-no{color:var(--gold-dk)}
.main-card h3{font-size:21px;margin:12px 0 10px}
.main-card p{font-size:14px;color:var(--t3);margin-bottom:18px}
.main-card a{font-weight:700;font-size:14px;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.main-card a:hover{color:var(--gold-dk)}
.main-line-ico{width:54px;height:54px;border-radius:12px;background:var(--blue-lt);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700}
.main-card:nth-child(2) .main-line-ico{background:#fff7e0;color:var(--gold-dk);font-weight:900}

/* =========================================================
   3. 双螺旋战略模型（城市更新链 × 产业升级链）
   ========================================================= */
.dna{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.dna-strand{border-radius:16px;padding:30px 26px;color:#fff}
.dna-a{background:linear-gradient(160deg,var(--blue),var(--blue-dk))}
.dna-b{background:linear-gradient(160deg,var(--gold),#a37c0c)}
.dna-strand h3{font-size:20px;letter-spacing:.5px;margin-bottom:6px}
.dna-strand .en{font-size:11px;opacity:.8;letter-spacing:2px}
.dna-strand ul{margin-top:18px}
.dna-strand li{display:flex;gap:10px;padding:9px 0;font-size:13.5px;border-bottom:1px dashed rgba(255,255,255,.22)}
.dna-strand li:last-child{border:none}
.dna-strand li::before{content:'◆';font-size:9px;align-self:center;opacity:.9;flex-shrink:0}
.dna-core{grid-column:1/-1;text-align:center;padding:26px;background:#fff;border:2px dashed var(--gold);border-radius:16px}
.dna-core b{font-size:20px;color:var(--gold-dk)}
.dna-core p{font-size:14px;color:var(--t3);margin-top:8px}

/* =========================================================
   3.1 五对碱基（碱基配对表）
   ========================================================= */
.base-pairs{margin-top:20px}
.base-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.base-pair:last-child{border:none}
.base-pair .bp{background:var(--blue-lt);border-radius:10px;padding:10px 14px}
.base-pair .bp b{display:block;color:var(--blue);font-size:15px}
.base-pair .bp span{font-size:12.5px;color:var(--t3)}
.base-pair .bp-link{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 6px 14px rgba(184,148,62,.35)}

/* =========================================================
   3.2 WCI 产业集群指数 五维图 (D/C/I/G/T 雷达)
   ========================================================= */
.wci{max-width:760px;margin:0 auto}
.wci-axis{display:flex;flex-direction:column;gap:16px}
.wci-row{display:grid;grid-template-columns:120px 1fr 92px;align-items:center;gap:14px}
.wci-row .lbl{font-size:14px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:8px}
.wci-row .lbl em{font-style:normal;font-size:11px;color:var(--t3);font-weight:400}
.wci-bar{height:20px;background:var(--blue-lt);border-radius:10px;overflow:hidden;position:relative}
.wci-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#1E3A5C,var(--blue-dk));transition:width 1s ease}
.wci-row[data-gold="1"] .wci-fill{background:linear-gradient(90deg,var(--gold),#e0b13a)}
.wci-val{font-size:15px;font-weight:800;text-align:right}

/* =========================================================
   3. 资金工具箱对比表
   ========================================================= */
.fund-table{min-width:640px}
.fund-table .ft-head{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr .9fr;gap:10px;padding:14px 16px;background:var(--blue);color:#fff;font-weight:700;font-size:13px;border-radius:10px 10px 0 0}
.fund-table .ft-row{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr .9fr;gap:10px;padding:13px 16px;font-size:13px;border-bottom:1px solid var(--line);align-items:center;background:#fff}
.fund-table .ft-row:nth-child(even){background:#f7fafd}
.fund-table .ft-opt{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600}
.opt-yes{background:#e6f4ea;color:#1b7a3e}
.opt-no{background:#fdeaea;color:#c0392b}
.opt-mid{background:#fdf3dc;color:#a67a00}
.ft-note{margin-top:14px;padding:14px;background:#fff7e0;border:1px dashed var(--gold);border-radius:10px;font-size:13px;color:var(--t2)}

/* =========================================================
   Hero 三步闭环卡（首页）
   ========================================================= */
.hero-steps-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.25);color:var(--ink);position:relative;z-index:3}
.hero-steps-title{font-size:17px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--blue)}
.hero-steps-title::before{content:'';width:4px;height:18px;background:var(--gold);border-radius:2px}

/* =========================================================
   响应式
   ========================================================= */
/* 线型流程默认隐藏，仅 ≤900px 时替代环形图，
   避免环形径向节点在中窄屏与中心圆重叠造成压字 */
.flow-8-m{display:none}

@media (max-width:900px){
  .mainline-grid{grid-template-columns:1fr}
  .dna{grid-template-columns:1fr}
  .flow-8{grid-template-columns:repeat(2,1fr)}
  /* 平板及以下：环形节点与中心圆重叠，改用两列线型排列 */
  .ring-pos-wrap{display:none}
  .flow-8-m{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
}