:root{
      --bg:#f5f2ea;
      --card:#ffffff;
      --text:#14161a;
      --muted:#5a616c;
      --line:rgba(20,22,26,.10);
      --shadow:0 10px 30px rgba(20,22,26,.08);
      --accent:#0f3d56;
      --accent2:#2f6f57;
      --chip:#eef2f6;
      --btn:#0b2f45;
      --btnText:#fff;
      --focus:rgba(15,61,86,.22);
      --radius:16px;
      --radius2:22px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", sans-serif;
      background:
        radial-gradient(900px 480px at 10% 0%, rgba(15,61,86,.10), transparent 55%),
        radial-gradient(700px 420px at 95% 12%, rgba(47,111,87,.10), transparent 52%),
        linear-gradient(180deg, #f7f4ee 0%, #f4f0e7 40%, var(--bg) 100%);
      color:var(--text);
      overflow-x:hidden;
    }

    .container{
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
    }

    header{
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(10px);
      background: rgba(245,242,234,.74);
      border-bottom: 1px solid rgba(20,22,26,.07);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding: 14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 92px;
    }
    .logo{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;place-items:center;
      background:
        linear-gradient(145deg, rgba(11,47,69,.95), rgba(15,61,86,.78));
      color:#fff;
      font-weight:800;
      letter-spacing:1px;
      box-shadow: 0 10px 24px rgba(11,47,69,.22);
    }
    .brandName{
      display:flex;flex-direction:column;line-height:1.1;
    }
    .brandName strong{font-size:14px}
    .brandName span{font-size:12px;color:var(--muted)}
    .navRight{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    nav[aria-label="顶部导航"]{
      display:flex;
      align-items:center;
      gap:16px;
    }
    .nav a{
      text-decoration:none;
      color:var(--muted);
      font-size:13.5px;
      padding:8px 10px;
      border-radius:12px;
      border: 1px solid transparent;
      transition: background .2s ease, border-color .2s ease, color .2s ease;
      white-space:nowrap;
    }
    .nav a:hover{
      background: rgba(255,255,255,.65);
      border-color: rgba(20,22,26,.08);
      color: var(--text);
    }

    .ctaRow{
      display:flex;align-items:center;gap:10px;
    }
    .btn{
      appearance:none;
      border:1px solid rgba(20,22,26,.10);
      background: rgba(255,255,255,.68);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      font-weight:650;
      font-size:13.5px;
      cursor:pointer;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn:focus{outline:none; box-shadow: 0 0 0 4px var(--focus)}
    .btn:hover{transform: translateY(-1px); border-color: rgba(15,61,86,.20); box-shadow: 0 10px 18px rgba(20,22,26,.10)}
    .btnPrimary{
      background: linear-gradient(145deg, rgba(11,47,69,.98), rgba(15,61,86,.85));
      border-color: rgba(11,47,69,.25);
      color: var(--btnText);
    }
    .btnPrimary:hover{box-shadow: 0 14px 26px rgba(11,47,69,.28); transform: translateY(-1px)}
    .btnIcon{
      width:26px;height:26px;border-radius:10px;
      background: rgba(255,255,255,.16);
      display:grid;place-items:center;
      border: 1px solid rgba(255,255,255,.18);
      font-size:14px;
    }

    .mobileToggle{
      display:none;
      width:44px;height:44px;border-radius:14px;
      border:1px solid rgba(20,22,26,.10);
      background: rgba(255,255,255,.70);
      cursor:pointer;
      align-items:center;justify-content:center;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .mobileToggle:focus{outline:none; box-shadow: 0 0 0 4px var(--focus)}
    .mobileToggle:hover{transform: translateY(-1px); box-shadow: 0 10px 18px rgba(20,22,26,.10)}
    .hamburger{
      width:18px;height:12px; position:relative;
    }
    .hamburger span{
      position:absolute; left:0; right:0; height:2px;
      background: rgba(20,22,26,.72);
      border-radius:2px;
      transition: transform .18s ease, top .18s ease, opacity .18s ease;
    }
    .hamburger span:nth-child(1){top:0}
    .hamburger span:nth-child(2){top:5px}
    .hamburger span:nth-child(3){top:10px}

    .mobilePanel{
      display:none;
      padding: 10px 0 16px;
    }
    .mobilePanel .navLinks{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .mobilePanel a{
      text-decoration:none;
      color: var(--text);
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: 14px;
      padding: 12px 12px;
      font-weight:650;
      font-size:14px;
    }
    .mobilePanel a span{display:block; font-weight:600; color:var(--muted); font-size:12.5px; margin-top:2px}

    .hero{
      padding: 28px 0 10px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 16px;
      align-items: stretch;
    }
    .heroCard{
      background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60));
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding: 22px 18px;
      position:relative;
      overflow:hidden;
    }
    .heroCard::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(900px 260px at 30% 0%, rgba(15,61,86,.16), transparent 55%),
        radial-gradient(600px 240px at 95% 20%, rgba(47,111,87,.13), transparent 60%);
      opacity:.9;
      pointer-events:none;
    }
    .heroCard > *{position:relative}
    h1{
      margin: 0 0 10px;
      font-size: clamp(22px, 3.2vw, 34px);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .lead{
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 14.5px;
      line-height:1.7;
      max-width: 62ch;
    }
    .badgeRow{
      display:flex;flex-wrap:wrap;gap:10px;
      margin: 12px 0 14px;
    }
    .chip{
      background: rgba(238,242,246,.86);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 12.5px;
      color: rgba(20,22,26,.86);
      display:flex;align-items:center;gap:8px;
      white-space:nowrap;
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      background: linear-gradient(145deg, rgba(11,47,69,.95), rgba(15,61,86,.7));
      box-shadow: 0 8px 14px rgba(11,47,69,.18);
    }
    .heroActions{
      display:flex;flex-wrap:wrap;gap:10px;align-items:center;
      margin-top: 14px;
    }
    .textLink{
      color: var(--accent);
      text-decoration:none;
      font-weight:700;
      font-size:13.5px;
      border: 1px solid rgba(15,61,86,.18);
      background: rgba(255,255,255,.55);
      padding: 10px 12px;
      border-radius: 14px;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
      display:inline-flex; align-items:center; gap:10px;
    }
    .textLink:hover{transform: translateY(-1px); box-shadow: 0 12px 22px rgba(15,61,86,.12); background: rgba(255,255,255,.75)}
    .arrow{
      width:26px;height:26px;border-radius:10px;
      border:1px solid rgba(15,61,86,.20);
      background: rgba(15,61,86,.08);
      display:grid;place-items:center;
      font-weight:900;
    }

    .sideCard{
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      box-shadow: 0 14px 36px rgba(20,22,26,.08);
      padding: 16px 16px 14px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      overflow:hidden;
      position:relative;
    }
    .sideCard::after{
      content:"";
      position:absolute;
      right:-120px; top:-120px;
      width:260px;height:260px;border-radius:50%;
      background: radial-gradient(circle at 30% 30%, rgba(47,111,87,.22), transparent 60%);
      pointer-events:none;
    }
    .sideCard > *{position:relative}
    .sideTitle{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      border-bottom: 1px dashed rgba(20,22,26,.12);
      padding-bottom: 10px;
    }
    .sideTitle h2{
      margin:0;
      font-size: 14.5px;
      letter-spacing: -0.01em;
    }
    .miniTag{
      font-size:12px;
      color: rgba(20,22,26,.86);
      background: rgba(47,111,87,.10);
      border: 1px solid rgba(47,111,87,.20);
      padding: 6px 10px;
      border-radius: 999px;
      white-space:nowrap;
      font-weight:750;
    }
    .checkList{
      list-style:none; margin:0; padding:0;
      display:flex; flex-direction:column; gap:10px;
    }
    .checkList li{
      display:flex; gap:10px; align-items:flex-start;
      padding: 10px 10px;
      background: rgba(255,255,255,.66);
      border: 1px solid rgba(20,22,26,.07);
      border-radius: 14px;
      transition: transform .15s ease, border-color .2s ease;
    }
    .checkList li:hover{transform: translateY(-1px); border-color: rgba(15,61,86,.20)}
    .tick{
      width:26px;height:26px;border-radius:10px;
      background: rgba(15,61,86,.10);
      border: 1px solid rgba(15,61,86,.20);
      display:grid; place-items:center;
      font-size:14px;
      flex:0 0 auto;
      margin-top: 1px;
    }
    .checkList strong{display:block; font-size:13.5px}
    .checkList span{display:block; font-size:12.8px; color: var(--muted); margin-top:2px; line-height:1.45}

    main{
      padding: 10px 0 26px;
    }

    .section{
      padding: 18px 0;
    }

    .sectionHeader{
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
      margin-bottom: 12px;
    }
    .sectionHeader h2{
      margin:0;
      font-size: 18px;
      letter-spacing: -0.015em;
    }
    .sectionHeader p{
      margin:0;
      color: var(--muted);
      font-size: 13.5px;
      line-height:1.6;
      max-width: 54ch;
    }

    .toc{
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      padding: 14px 14px;
      box-shadow: 0 12px 30px rgba(20,22,26,.06);
    }
    .tocGrid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 10px;
    }
    .toc a{
      text-decoration:none;
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      padding: 12px 12px;
      background: rgba(245,242,234,.35);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: 16px;
      transition: transform .15s ease, border-color .2s ease, background .2s ease;
      min-height: 64px;
    }
    .toc a:hover{transform: translateY(-1px); border-color: rgba(15,61,86,.24); background: rgba(255,255,255,.7)}
    .toc strong{
      display:block;
      font-size:13.5px;
      line-height:1.35;
      letter-spacing: -0.01em;
      margin-top:1px;
    }
    .toc small{
      display:block;
      margin-top:4px;
      color: var(--muted);
      font-size:12.5px;
      line-height:1.35;
    }
    .toc .num{
      width:28px;height:28px;border-radius:12px;
      background: rgba(15,61,86,.09);
      border: 1px solid rgba(15,61,86,.20);
      display:grid;place-items:center;
      font-weight:900;
      color: rgba(15,61,86,.95);
      flex:0 0 auto;
    }

    .cardsGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .coreCard{
      background: rgba(255,255,255,.64);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      box-shadow: 0 12px 30px rgba(20,22,26,.06);
      padding: 16px 14px;
      overflow:hidden;
      position:relative;
    }
    .coreCard::before{
      content:"";
      position:absolute;
      left:-180px; top:-160px;
      width:360px;height:360px;border-radius:50%;
      background: radial-gradient(circle at 30% 30%, rgba(15,61,86,.18), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .coreCard > *{position:relative}
    .coreTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      margin-bottom: 10px;
    }
    .coreTop h3{
      margin:0;
      font-size: 16px;
      letter-spacing: -0.012em;
    }
    .pill{
      background: rgba(238,242,246,.86);
      border: 1px solid rgba(20,22,26,.09);
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 12.5px;
      color: rgba(20,22,26,.86);
      white-space:nowrap;
      font-weight:800;
    }
    .coreCard p{
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 14px;
      line-height:1.7;
      max-width: 78ch;
    }
    .stepsGrid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 10px;
      margin-top: 6px;
    }
    .step{
      background: rgba(245,242,234,.35);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: 16px;
      padding: 12px 12px;
      transition: transform .15s ease, border-color .2s ease;
      min-height: 120px;
    }
    .step:hover{transform: translateY(-1px); border-color: rgba(47,111,87,.22)}
    .step .k{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom: 8px;
    }
    .step .idx{
      width:28px;height:28px;border-radius:12px;
      background: rgba(47,111,87,.10);
      border: 1px solid rgba(47,111,87,.22);
      display:grid;place-items:center;
      font-weight:900;
      color: rgba(33,92,65,.95);
      flex:0 0 auto;
    }
    .step strong{
      display:block;
      font-size: 13.5px;
      margin-bottom: 6px;
      letter-spacing:-0.01em;
    }
    .step ul{
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 12.8px;
      line-height:1.55;
    }

    .caseRow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 12px;
    }
    .case{
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      padding: 14px 14px;
      transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
      box-shadow: 0 10px 24px rgba(20,22,26,.05);
    }
    .case:hover{transform: translateY(-1px); border-color: rgba(15,61,86,.22); box-shadow: 0 16px 34px rgba(20,22,26,.08)}
    .case .top{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      margin-bottom: 10px;
    }
    .case h4{
      margin:0;
      font-size: 14.5px;
      letter-spacing:-0.01em;
    }
    .tag{
      font-size:12px;
      border-radius:999px;
      padding: 6px 10px;
      border: 1px solid rgba(20,22,26,.10);
      background: rgba(238,242,246,.86);
      color: rgba(20,22,26,.86);
      white-space:nowrap;
      font-weight:800;
    }
    .case p{
      margin:0;
      color: var(--muted);
      font-size: 13.5px;
      line-height:1.7;
    }

    .faqWrap{
      background: rgba(255,255,255,.58);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      box-shadow: 0 12px 30px rgba(20,22,26,.06);
      padding: 10px;
    }
    .faqItem{
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(20,22,26,.08);
      background: rgba(245,242,234,.26);
      margin: 10px 8px;
      transition: border-color .2s ease, transform .15s ease;
    }
    .faqItem.open{border-color: rgba(15,61,86,.22); background: rgba(255,255,255,.72)}
    .faqBtn{
      width:100%;
      text-align:left;
      padding: 14px 14px;
      cursor:pointer;
      background: transparent;
      border:0;
      display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
      color: var(--text);
      font-weight:800;
      font-size: 14px;
    }
    .faqBtn:focus{outline:none; box-shadow: 0 0 0 4px var(--focus)}
    .faqBtn span{
      display:block;
      color: var(--muted);
      font-weight:650;
      font-size: 12.5px;
      margin-top: 4px;
      line-height:1.55;
      letter-spacing:0;
    }
    .chev{
      width:34px;height:34px;border-radius:14px;
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(20,22,26,.10);
      display:grid;place-items:center;
      flex:0 0 auto;
      transition: transform .18s ease;
      margin-top: 2px;
      color: rgba(20,22,26,.72);
      font-weight:900;
    }
    .faqItem.open .chev{transform: rotate(180deg)}
    .faqContent{
      max-height: 0;
      overflow:hidden;
      transition: max-height .24s ease;
    }
    .faqInner{
      padding: 0 14px 14px 14px;
      color: var(--muted);
      font-size: 13.5px;
      line-height:1.75;
    }

    .summary{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 12px;
      align-items: start;
    }
    .summary .box{
      background: rgba(255,255,255,.60);
      border: 1px solid rgba(20,22,26,.08);
      border-radius: var(--radius2);
      box-shadow: 0 12px 30px rgba(20,22,26,.06);
      padding: 14px 14px;
    }
    .summary h3{
      margin:0 0 8px;
      font-size: 15.5px;
      letter-spacing: -0.012em;
    }
    .summary p{
      margin:0;
      color: var(--muted);
      font-size: 13.6px;
      line-height:1.75;
    }
    .linkInline{
      display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;
    }
    .miniLink{
      text-decoration:none;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15,61,86,.18);
      background: rgba(255,255,255,.55);
      color: var(--accent);
      font-weight:800;
      font-size: 13px;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      display:inline-flex; align-items:center; gap:10px;
      max-width: 100%;
    }
    .miniLink:hover{transform: translateY(-1px); box-shadow: 0 16px 28px rgba(15,61,86,.12); background: rgba(255,255,255,.78); border-color: rgba(15,61,86,.28)}
    .miniLink .sicon{
      width:26px;height:26px;border-radius:10px;
      border: 1px solid rgba(15,61,86,.20);
      background: rgba(15,61,86,.08);
      display:grid;place-items:center;
      flex:0 0 auto;
      font-weight:900;
    }

    footer{
      background: #0f1720;
      color: #e7edf5;
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footerInner{
      padding: 22px 0 16px;
    }
    .footGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items:start;
    }
    .footBrand{
      display:flex; gap:12px; align-items:flex-start;
    }
    .logoSmall{
      width:40px;height:40px;border-radius:14px;
      display:grid;place-items:center;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      color:#fff;
      font-weight:900;
      letter-spacing:.5px;
    }
    .footBrand strong{display:block; font-size:14.5px}
    .footBrand span{display:block; margin-top:4px; color: rgba(231,237,245,.78); font-size:13.2px; line-height:1.7}
    .footCard{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      padding: 12px 12px;
    }
    .footCard h3{margin:0 0 8px; font-size:14.5px}
    .footCard ul{
      margin:0;
      padding-left: 18px;
      color: rgba(231,237,245,.82);
      font-size:13.2px;
      line-height:1.9;
    }
    .footLinks{
      margin-top: 12px;
      display:flex; flex-wrap:wrap; gap:10px;
      align-items:center;
    }
    .footLinks a{
      text-decoration:none;
      color: rgba(231,237,245,.90);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      padding: 10px 12px;
      border-radius: 14px;
      font-weight:800;
      font-size: 13px;
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
    }
    .footLinks a:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18)}
    .copyright{
      padding: 10px 0 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      margin-top: 16px;
      color: rgba(231,237,245,.70);
      font-size: 12.8px;
      text-align:center;
    }

    @media (max-width: 920px){
      .heroGrid{grid-template-columns: 1fr; }
      .summary{grid-template-columns: 1fr}
      .caseRow{grid-template-columns: 1fr}
      .tocGrid{grid-template-columns: 1fr; }
      .stepsGrid{grid-template-columns: 1fr}
      .footGrid{grid-template-columns: 1fr}
      nav[aria-label="顶部导航"]{display:none}
      .mobileToggle{display:flex}
      .mobilePanel{display:block}
    }

    .fadeIn{
      opacity:0;
      transform: translateY(10px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .fadeIn.show{
      opacity:1;
      transform: translateY(0);
    }