:root{
      --bg:#f6f1e8;
      --panel:#fbf7f0;
      --text:#1f2937;
      --muted:#5b6473;
      --line:rgba(31,41,55,.14);
      --accent:#8a5a3c;
      --accent2:#c07a4c;
      --shadow: 0 18px 45px rgba(20,16,12,.10);
      --shadow2: 0 10px 25px rgba(20,16,12,.10);
      --radius:18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 15% -10%, rgba(192,122,76,.25), rgba(192,122,76,0) 55%),
        radial-gradient(900px 520px at 85% 0%, rgba(138,90,60,.18), rgba(138,90,60,0) 60%),
        linear-gradient(180deg, #f8f2e8 0%, var(--bg) 55%, #f7f3ea 100%);
      overflow-x:hidden;
    }

    .noise{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:.08;
      background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/><rect width="180" height="180" filter="url(%23n)" opacity=".65"/>');
      background-size:180px 180px;
      mix-blend-mode:multiply;
    }

    .container{
      width: min(1060px, calc(100% - 32px));
      margin:0 auto;
      position:relative;
      z-index:1;
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(251,247,240,.86), rgba(251,247,240,.62));
      border-bottom:1px solid rgba(31,41,55,.10);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:160px;
    }
    .logoMark{
      width:42px;height:42px;
      border-radius:14px;
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%),
        linear-gradient(145deg, rgba(192,122,76,.85), rgba(138,90,60,.95));
      box-shadow: 0 10px 22px rgba(138,90,60,.28);
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,.25);
    }
    .logoMark span{
      font-weight:900;
      color:#fff;
      letter-spacing:.02em;
      font-size:20px;
    }
    .brandText{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brandText strong{
      font-size:14px;
      letter-spacing:.02em;
    }
    .brandText em{
      font-style:normal;
      font-size:12px;
      color:var(--muted);
      margin-top:2px;
    }

    .navLinks{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navLinks a{
      text-decoration:none;
      color:var(--text);
      font-size:13px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid transparent;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
      white-space:nowrap;
    }
    .navLinks a:hover{
      background: rgba(192,122,76,.12);
      border-color: rgba(192,122,76,.26);
      transform: translateY(-1px);
    }
    .navCta{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .btn{
      border:1px solid rgba(31,41,55,.14);
      background: rgba(251,247,240,.7);
      color:var(--text);
      padding:10px 14px;
      border-radius:12px;
      text-decoration:none;
      font-size:13px;
      font-weight:650;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      box-shadow: 0 10px 22px rgba(20,16,12,.06);
      display:inline-flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(20,16,12,.10);
      border-color: rgba(192,122,76,.35);
      background: rgba(255,255,255,.55);
    }
    .btnPrimary{
      background: linear-gradient(145deg, rgba(192,122,76,.95), rgba(138,90,60,.98));
      color:#fff;
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 18px 45px rgba(138,90,60,.25);
    }
    .btnPrimary:hover{
      box-shadow: 0 22px 55px rgba(138,90,60,.30);
      border-color: rgba(255,255,255,.28);
      background: linear-gradient(145deg, rgba(204,132,79,.98), rgba(138,90,60,1));
    }

    main{padding: 18px 0 0;}

    .hero{
      padding:22px 0 6px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.18fr .82fr;
      gap:18px;
      align-items:stretch;
    }
    @media (max-width: 860px){
      .heroGrid{grid-template-columns:1fr; gap:14px;}
      .nav{padding:10px 0;}
      .brand{min-width:auto;}
    }

    .heroCard{
      background:
        linear-gradient(180deg, rgba(251,247,240,.95), rgba(251,247,240,.70)),
        radial-gradient(900px 300px at 10% 0%, rgba(192,122,76,.25), rgba(192,122,76,0) 55%);
      border:1px solid rgba(31,41,55,.12);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      padding:22px 18px;
      position:relative;
      overflow:hidden;
    }
    .heroCard:before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(240px 120px at 10% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%),
        radial-gradient(280px 140px at 78% 18%, rgba(192,122,76,.22), rgba(192,122,76,0) 68%);
      opacity:.9;
      pointer-events:none;
    }
    .heroInner{position:relative; z-index:1;}
    .kicker{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:13px;
      margin-bottom:12px;
      flex-wrap:wrap;
    }
    .pill{
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(192,122,76,.28);
      background: rgba(192,122,76,.10);
      color:#5b3b28;
      font-weight:650;
      letter-spacing:.01em;
    }
    h1{
      margin:0 0 10px 0;
      font-size:28px;
      line-height:1.18;
      letter-spacing:-.02em;
    }
    .lead{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.8;
      max-width:62ch;
    }
    .heroActions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top:16px;
    }
    .btnRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .spark{
      width:10px;height:10px;border-radius:50%;
      background: linear-gradient(145deg, rgba(192,122,76,.95), rgba(138,90,60,.98));
      box-shadow: 0 0 0 6px rgba(192,122,76,.12);
    }

    .sideCard{
      border-radius:var(--radius);
      border:1px solid rgba(31,41,55,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(251,247,240,.82));
      box-shadow: var(--shadow2);
      padding:18px 16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      position:relative;
      overflow:hidden;
    }
    .sideCard:after{
      content:"";
      position:absolute;
      right:-40px; top:-40px;
      width:140px; height:140px;
      border-radius:38px;
      background: radial-gradient(circle at 30% 30%, rgba(192,122,76,.35), rgba(192,122,76,0) 60%);
      transform: rotate(12deg);
      pointer-events:none;
      opacity:.9;
    }
    .sideTop{position:relative; z-index:1;}
    .sideTitle{
      margin:0;
      font-size:14px;
      color:#3b2a20;
      letter-spacing:.01em;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
    }
    .stamp{
      width:36px; height:36px;
      border-radius:14px;
      border:1px solid rgba(192,122,76,.35);
      background: rgba(192,122,76,.12);
      display:flex; align-items:center; justify-content:center;
      color:#6a3d26;
      font-weight:900;
    }

    .checkList{
      position:relative;
      z-index:1;
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .checkItem{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:10px 10px;
      border-radius:14px;
      border:1px solid rgba(31,41,55,.10);
      background: rgba(255,255,255,.35);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .checkItem:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.55);
      border-color: rgba(192,122,76,.25);
    }
    .iconDot{
      flex:0 0 auto;
      width:18px; height:18px;
      border-radius:7px;
      background: linear-gradient(145deg, rgba(192,122,76,.95), rgba(138,90,60,.98));
      display:flex; align-items:center; justify-content:center;
      margin-top:2px;
      box-shadow: 0 10px 18px rgba(138,90,60,.18);
    }
    .iconDot svg{width:12px;height:12px; fill:#fff}
    .checkItem strong{
      font-size:13px;
      display:block;
      margin-top:-1px;
    }
    .checkItem span{
      display:block;
      font-size:12px;
      color:var(--muted);
      line-height:1.5;
      margin-top:3px;
    }

    .section{
      padding: 16px 0;
    }
    .sectionTitleRow{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin: 6px 0 12px;
    }
    .sectionTitleRow h2{
      margin:0;
      font-size:18px;
      letter-spacing:-.01em;
    }
    .sectionTitleRow p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }

    .tiles{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
    }
    @media (max-width: 860px){
      .tiles{grid-template-columns:1fr; gap:10px;}
    }
    .tile{
      border-radius:16px;
      border:1px solid rgba(31,41,55,.12);
      background: rgba(251,247,240,.65);
      padding:14px 14px;
      box-shadow: 0 12px 26px rgba(20,16,12,.06);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      position:relative;
      overflow:hidden;
    }
    .tile:before{
      content:"";
      position:absolute;
      inset:-1px;
      background: radial-gradient(220px 120px at 20% 0%, rgba(192,122,76,.18), rgba(192,122,76,0) 60%);
      opacity:.8;
      pointer-events:none;
    }
    .tile:hover{
      transform: translateY(-3px);
      border-color: rgba(192,122,76,.28);
      background: rgba(255,255,255,.52);
    }
    .tileInner{position:relative; z-index:1;}
    .tileTop{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:8px;
    }
    .tileBadge{
      width:34px;height:34px;
      border-radius:14px;
      border:1px solid rgba(192,122,76,.30);
      background: rgba(192,122,76,.12);
      display:flex; align-items:center; justify-content:center;
      color:#6a3d26;
      font-weight:900;
    }
    .tile h3{
      margin:0;
      font-size:14px;
      letter-spacing:-.01em;
    }
    .tile p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      align-items:stretch;
    }
    @media (max-width: 860px){
      .grid2{grid-template-columns:1fr;}
    }

    .card{
      border-radius:var(--radius);
      border:1px solid rgba(31,41,55,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(251,247,240,.82));
      box-shadow: 0 16px 40px rgba(20,16,12,.07);
      padding:16px 14px;
      overflow:hidden;
      position:relative;
    }
    .card.soft{
      background: linear-gradient(180deg, rgba(251,247,240,.85), rgba(255,255,255,.55));
    }
    .cardTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .cardTitle h3{
      margin:0;
      font-size:15px;
      letter-spacing:-.01em;
    }
    .tag{
      font-size:12px;
      color:#5b3b28;
      border:1px solid rgba(192,122,76,.30);
      background: rgba(192,122,76,.12);
      padding:6px 10px;
      border-radius:999px;
      white-space:nowrap;
      font-weight:750;
    }
    .steps{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .step{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(31,41,55,.10);
      background: rgba(255,255,255,.38);
      transition: transform .2s ease, background .2s ease;
    }
    .step:hover{transform: translateY(-2px); background: rgba(255,255,255,.58);}
    .num{
      width:32px;height:32px;
      border-radius:12px;
      background: linear-gradient(145deg, rgba(192,122,76,.95), rgba(138,90,60,.98));
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-weight:900;
      box-shadow: 0 16px 30px rgba(138,90,60,.20);
      flex:0 0 auto;
      margin-top:2px;
    }
    .step strong{
      display:block;
      font-size:13px;
      margin-top:1px;
    }
    .step span{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin-top:4px;
      line-height:1.65;
    }

    .tableLike{
      display:grid;
      gap:10px;
    }
    .rowItem{
      display:flex;
      gap:12px;
      align-items:flex-start;
      border:1px solid rgba(31,41,55,.10);
      border-radius:16px;
      padding:12px 12px;
      background: rgba(255,255,255,.35);
    }
    .rowItem:hover{background: rgba(255,255,255,.55); border-color: rgba(192,122,76,.24);}
    .rowKey{
      flex:0 0 auto;
      min-width:120px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(192,122,76,.26);
      background: rgba(192,122,76,.10);
      color:#5b3b28;
      font-weight:820;
      font-size:12px;
      text-align:center;
      margin-top:2px;
    }
    .rowVal{
      font-size:13px;
      color:var(--muted);
      line-height:1.7;
    }
    .rowVal b{color:var(--text); font-weight:850;}

    .toc{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .toc a{
      text-decoration:none;
      color:var(--text);
      font-size:13px;
      padding:9px 11px;
      border-radius:999px;
      border:1px solid rgba(31,41,55,.12);
      background: rgba(255,255,255,.30);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .toc a:hover{
      transform: translateY(-2px);
      border-color: rgba(192,122,76,.25);
      background: rgba(255,255,255,.55);
    }

    details{
      border:1px solid rgba(31,41,55,.12);
      border-radius:var(--radius);
      background: rgba(251,247,240,.55);
      padding:10px 12px;
      box-shadow: 0 12px 26px rgba(20,16,12,.05);
    }
    details + details{margin-top:10px;}
    summary{
      cursor:pointer;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-weight:850;
      font-size:14px;
      letter-spacing:-.01em;
      padding:6px 2px;
    }
    summary::-webkit-details-marker{display:none}
    .chev{
      width:34px;height:34px;
      border-radius:14px;
      border:1px solid rgba(31,41,55,.12);
      background: rgba(255,255,255,.35);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
      transition: transform .25s ease, background .2s ease, border-color .2s ease;
    }
    details[open] .chev{transform: rotate(180deg); background: rgba(255,255,255,.6); border-color: rgba(192,122,76,.25);}
    .ans{
      margin-top:10px;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
      padding:0 2px 6px;
    }

    .imgWrap{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    .imgCard{
      border-radius:var(--radius);
      border:1px solid rgba(31,41,55,.12);
      background: rgba(251,247,240,.70);
      box-shadow: 0 16px 40px rgba(20,16,12,.07);
      overflow:hidden;
    }
    .imgFrame{
      padding:12px 12px 0;
    }
    .imgRatio{
      width:100%;
      aspect-ratio: 16 / 10;
      border-radius:14px;
      border:1px solid rgba(31,41,55,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
      overflow:hidden;
      position:relative;
    }
    .imgRatio:before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(420px 160px at 35% 0%, rgba(192,122,76,.20), rgba(192,122,76,0) 60%);
      pointer-events:none;
    }
    .imgRatio img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      position:relative;
      z-index:1;
    }
    .imgCaption{
      padding:12px 12px 14px;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .imgCaption b{color:var(--text);}

    .footer{
      margin-top:6px;
      background: linear-gradient(180deg, rgba(31,41,55,.95), rgba(24,32,44,1));
      color:#f4f7fb;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .footerInner{
      padding:18px 0 14px;
    }
    .footerGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }
    @media (max-width: 860px){
      .footerGrid{grid-template-columns:1fr;}
    }
    .footCard{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      border-radius:var(--radius);
      padding:14px 14px;
    }
    .footCard h3{
      margin:0 0 8px;
      font-size:14px;
      letter-spacing:-.01em;
    }
    .footList{
      margin:0; padding:0;
      list-style:none;
      display:grid;
      gap:8px;
      color:rgba(244,247,251,.92);
      font-size:13px;
      line-height:1.7;
    }
    .footList a{
      color:#cfe6ff;
      text-decoration: none;
      border-bottom:1px dotted rgba(207,230,255,.35);
      transition: color .2s ease, border-color .2s ease;
    }
    .footList a:hover{
      color:#fff;
      border-color: rgba(255,255,255,.7);
    }
    .addr{
      color:rgba(244,247,251,.92);
      font-size:13px;
      line-height:1.7;
    }
    .wechatRow{
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .qrBox{
      width:88px; height:88px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.05);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .qrBox img{width:100%; height:100%; object-fit:cover; display:block;}
    .wechatRow .meta{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:220px;
    }
    .meta .phone{
      font-weight:900;
      letter-spacing:.01em;
      color:#fff;
    }
    .meta .hint{
      color:rgba(244,247,251,.84);
      font-size:12px;
      line-height:1.6;
    }
    .footBottom{
      padding:12px 0 4px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      color:rgba(244,247,251,.78);
      font-size:12px;
      border-top:1px solid rgba(255,255,255,.10);
      margin-top:14px;
    }

    .floatToTop{
      position:fixed;
      right:16px;
      bottom:16px;
      z-index:60;
      width:44px;height:44px;
      border-radius:16px;
      border:1px solid rgba(31,41,55,.12);
      background: rgba(251,247,240,.88);
      box-shadow: 0 18px 45px rgba(20,16,12,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: transform .2s ease, opacity .2s ease, background .2s ease;
      opacity:0;
      pointer-events:none;
    }
    .floatToTop.show{
      opacity:1;
      pointer-events:auto;
    }
    .floatToTop:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.75);
    }
    .floatToTop svg{width:18px;height:18px; fill:var(--text)}
    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto !important; transition:none !important; animation:none !important;}
    }

    .fadeIn{
      opacity:0;
      transform: translateY(10px);
      animation: fadeUp .55s ease forwards;
    }
    @keyframes fadeUp{
      to{opacity:1; transform: translateY(0);}
    }