:root{
    --ink:#1F2933; --ink-2:#4A5560; --ink-3:#7A8894;
    --bg:#F4F8FC; --line:#E1E9F2;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{
    margin:0;padding:0;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    background:#E9EFF6;color:var(--ink);font-size:16px;line-height:1.9;
    -webkit-font-smoothing:antialiased;
  }
  .page{
    max-width:750px;margin:0 auto;background:#fff;
    box-shadow:0 0 40px rgba(15,48,87,.08);overflow:hidden;
  }

  /* ============ 首屏 ============ */
  .hero{
    background:linear-gradient(155deg,#0B2545 0%,#133D6B 45%,#1D5A96 100%);
    color:#fff;padding:56px 26px 46px;position:relative;overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;
    border-radius:50%;background:rgba(120,190,255,.10);
  }
  .hero::after{
    content:"";position:absolute;right:60px;bottom:-110px;width:200px;height:200px;
    border-radius:50%;background:rgba(120,190,255,.07);
  }
  .hero .kicker{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:3px;color:#9CC9F0;margin-bottom:20px;
  }
  .hero .kicker::before{content:"";display:block;width:26px;height:1px;background:#9CC9F0;}
  .hero h1{
    font-size:31px;line-height:1.42;margin:0 0 18px;font-weight:800;letter-spacing:.5px;
  }
  .hero h1 em{font-style:normal;color:#8FC4F5;}
  .hero p{margin:0 0 22px;font-size:15px;line-height:1.9;color:rgba(255,255,255,.82);}
  .hero .flow{
    display:flex;align-items:center;gap:6px;position:relative;z-index:1;
  }
  .hero .flow span{
    font-size:13px;font-weight:600;color:#CFE6FB;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
    padding:5px 13px;border-radius:999px;letter-spacing:1px;
  }
  .hero .flow i{font-style:normal;color:#6FA8DC;font-size:12px;}

  /* ============ 总图 ============ */
  .section{padding:46px 24px 0;}
  .figure{margin:24px 0 8px;}
  .figure img,.figure svg{width:100%;display:block;}
  .figure figcaption{font-size:12px;color:var(--ink-3);text-align:center;margin-top:10px;}
  .read-tip{
    margin:14px 0 4px;padding:12px 16px;border-left:3px solid #1D5A96;
    background:var(--bg);font-size:13.5px;color:var(--ink-2);border-radius:0 8px 8px 0;
  }
  .read-tip b{color:#133D6B;}

  /* ============ 开场（趋势+价值） ============ */
  .open-head{display:flex;align-items:center;gap:10px;margin:6px 0 16px;}
  .open-kicker{
    font-size:12px;font-weight:800;color:#133D6B;letter-spacing:2px;
    background:#E3EDF7;padding:4px 12px;border-radius:999px;flex-shrink:0;
  }
  .open-title{font-size:19px;font-weight:800;color:#133D6B;letter-spacing:.5px;}
  .open p strong{color:#133D6B;}

  /* ============ 章节通用 ============ */
  .sec-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
  .sec-num{
    font-size:15px;font-weight:800;color:#fff;letter-spacing:1px;
    padding:4px 14px;border-radius:999px;flex-shrink:0;
  }
  .sec-title{font-size:23px;font-weight:800;letter-spacing:.5px;}
  .sec-sub{
    font-size:13px;margin:0 0 22px;padding-bottom:14px;border-bottom:1px dashed var(--line);
  }
  p{margin:0 0 16px;color:var(--ink-2);}
  strong{font-weight:700;}
  .figure .shot{border:1px solid var(--line);border-radius:10px;}

  /* 五个环节各自的主题色 */
  .stg-1 .sec-num{background:#16467B;} .stg-1 .sec-title{color:#16467B;}
  .stg-1 .sec-sub{color:#3E6B99;}
  .stg-2 .sec-num{background:#1B7F8E;} .stg-2 .sec-title{color:#136573;}
  .stg-2 .sec-sub{color:#2E7C88;}
  .stg-3 .sec-num{background:#2F855A;} .stg-3 .sec-title{color:#225E42;}
  .stg-3 .sec-sub{color:#3C7A5B;}
  .stg-4 .sec-num{background:#C05621;} .stg-4 .sec-title{color:#96411A;}
  .stg-4 .sec-sub{color:#B25A2E;}
  .stg-5 .sec-num{background:#6B46C1;} .stg-5 .sec-title{color:#55379B;}
  .stg-5 .sec-sub{color:#6E56A8;}
  .stg-6 .sec-num{background:#133D6B;} .stg-6 .sec-title{color:#133D6B;}
  .stg-6 .sec-sub{color:#41618C;}

  /* ============ 能力卡 ============ */
  .caps{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px;}
  .cap{
    background:#FBFDFF;border:1px solid var(--line);border-radius:10px;
    padding:14px 16px 13px 20px;position:relative;
  }
  .cap::before{
    content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;
    background:var(--acc,#16467B);
  }
  .cap .cap-t{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;}
  .cap .idx{
    font-size:10.5px;font-weight:800;color:#fff;letter-spacing:0;
    width:20px;height:20px;line-height:20px;text-align:center;border-radius:6px;
    flex-shrink:0;transform:translateY(2px);background:var(--acc,#16467B);
  }
  .cap .name{font-size:15.5px;font-weight:800;letter-spacing:.3px;color:var(--acc-dark,#133D6B);}
  .cap .desc{font-size:14px;color:var(--ink-2);line-height:1.8;margin:0;}
  .stg-1 .cap{--acc:#16467B;--acc-dark:#16467B;}
  .stg-2 .cap{--acc:#1B7F8E;--acc-dark:#136573;}
  .stg-3 .cap{--acc:#2F855A;--acc-dark:#225E42;}
  .stg-4 .cap{--acc:#C05621;--acc-dark:#96411A;}
  .stg-5 .cap{--acc:#6B46C1;--acc-dark:#55379B;}

  /* ============ 引句 ============ */
  .quote{
    margin:28px 0 8px;padding:22px 24px;
    background:linear-gradient(135deg,#133D6B,#1B7F8E);
    color:#fff;border-radius:12px;font-size:16.5px;line-height:1.85;font-weight:600;
    position:relative;
  }
  .quote::before{
    content:"\201C";position:absolute;top:-6px;left:14px;font-size:56px;
    font-family:Georgia,serif;color:rgba(255,255,255,.25);line-height:1;
  }
  .quote span{color:#8FE3F0;}

  /* ============ 数据条 ============ */
  .stats{display:flex;gap:10px;margin:22px 0 6px;}
  .stat{
    flex:1;background:linear-gradient(180deg,#FFFFFF,#F2F7FC);
    border:1px solid var(--line);border-radius:12px;
    padding:16px 10px 14px;text-align:center;
  }
  .stat b{
    display:block;font-size:21px;font-weight:800;line-height:1.3;
    background:linear-gradient(135deg,#133D6B,#1B7F8E);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat span{display:block;font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.5;}

  /* ============ 收尾 ============ */
  .ending{
    margin-top:46px;background:linear-gradient(155deg,#0B2545,#133D6B 55%,#1D5A96);
    padding:48px 26px 54px;color:#fff;position:relative;overflow:hidden;
  }
  .ending::before{
    content:"";position:absolute;left:-70px;bottom:-90px;width:220px;height:220px;
    border-radius:50%;background:rgba(120,190,255,.08);
  }
  .ending h2{font-size:23px;margin:0 0 16px;font-weight:800;}
  .ending p{color:rgba(255,255,255,.82);margin-bottom:14px;position:relative;}
  .ending .final{
    margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
    font-size:15.5px;color:#8FC4F5;font-weight:700;line-height:1.85;position:relative;
  }
  .ending .final::before{
    content:"";display:block;width:34px;height:3px;border-radius:3px;
    background:#8FC4F5;margin-bottom:14px;
  }
  @media (max-width:420px){
    .hero h1{font-size:26px;}
    .sec-title{font-size:20px;}
    .section{padding:38px 18px 0;}
    .hero .flow span{padding:4px 9px;font-size:12px;}
  }