:root{
      --bg0:#fbf2ef;
      --bg1:#fffaf7;
      --card:#ffffff;
      --text:#2a2a2a;
      --muted:#6b5f62;
      --line:#ecd8d2;
      --accent:#b97762;
      --accent2:#8a6fb1;
      --accent3:#4c9a8b;
      --shadow: 0 10px 30px rgba(40,22,22,.08);
      --shadow2: 0 10px 22px rgba(121,74,58,.10);
      --radius:18px;
      --radius2:14px;
      --max:1120px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 15% 0%, rgba(185,119,98,.20), transparent 55%),
        radial-gradient(900px 520px at 95% 10%, rgba(138,111,177,.18), transparent 55%),
        radial-gradient(800px 520px at 60% 80%, rgba(76,154,139,.12), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 60%, #fff 100%);
    }
    a{color:inherit}
    img{max-width:100%; height:auto; display:block}
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:0 18px;
    }

    .skip{
      position:absolute; left:10px; top:10px;
      transform: translateY(-160%);
      background:#fff;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      box-shadow: var(--shadow2);
      z-index:9999;
      transition: transform .2s ease;
    }
    .skip:focus{transform: translateY(0)}
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(255,250,247,.72);
      border-bottom:1px solid rgba(236,216,210,.65);
    }
    .navwrap{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none;
      min-width:120px;
    }
    .logo{
      width:36px; height:36px;
      border-radius:12px;
      background: linear-gradient(135deg, rgba(185,119,98,.20), rgba(138,111,177,.18));
      border:1px solid rgba(185,119,98,.28);
      box-shadow: 0 8px 18px rgba(185,119,98,.14);
      display:grid; place-items:center;
      font-weight:900;
      color:#5a3a2e;
      letter-spacing:.2px;
    }
    .brand span{
      font-weight:800;
      color:#3a2a27;
      font-size:14.5px;
      line-height:1.1;
      display:flex; flex-direction:column;
      gap:2px;
    }
    .brand em{
      font-style:normal;
      font-weight:600;
      color:var(--muted);
      font-size:12px;
    }

    .navlinks{
      display:flex; align-items:center; gap:16px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navlinks a{
      text-decoration:none;
      padding:9px 10px;
      border-radius:12px;
      border:1px solid transparent;
      color:#3b2b29;
      font-weight:650;
      font-size:13.5px;
      transition: background .18s ease, border-color .18s ease, transform .18s ease;
      white-space:nowrap;
    }
    .navlinks a:hover{
      background: rgba(255,255,255,.75);
      border-color: rgba(236,216,210,.9);
      transform: translateY(-1px);
    }
    .cta{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn{
      appearance:none;
      border:1px solid rgba(185,119,98,.38);
      background: rgba(255,255,255,.72);
      padding:10px 12px;
      border-radius:14px;
      cursor:pointer;
      text-decoration:none;
      font-weight:800;
      font-size:13.5px;
      color:#4b2e25;
      box-shadow: 0 10px 22px rgba(185,119,98,.08);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      display:inline-flex; align-items:center; gap:10px;
    }
    .btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.92);
      box-shadow: 0 16px 30px rgba(185,119,98,.14);
    }
    .btn.primary{
      border-color: rgba(185,119,98,.55);
      background: linear-gradient(135deg, rgba(185,119,98,.22), rgba(255,255,255,.85));
    }
    .btn .dot{
      width:10px; height:10px; border-radius:50%;
      background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 35%, rgba(185,119,98,.9) 55%, rgba(185,119,98,.2) 100%);
      border:1px solid rgba(185,119,98,.35);
    }
    .mobile-toggle{
      display:none;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.75);
      padding:10px 12px;
      border-radius:14px;
      font-weight:900;
      cursor:pointer;
      color:#4b2e25;
    }
    .mobile-panel{
      display:none;
      padding:0 0 14px 0;
    }
    .mobile-panel .stack{
      display:grid;
      gap:10px;
    }
    .mobile-panel a{
      text-decoration:none;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      padding:12px 12px;
      border-radius:14px;
      font-weight:800;
      color:#3b2b29;
      transition: transform .18s ease, background .18s ease;
    }
    .mobile-panel a:hover{transform: translateY(-1px); background: rgba(255,255,255,.92);}

    header.hero{
      padding:26px 0 14px 0;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:18px;
      align-items:stretch;
    }
    .heroCard{
      border:1px solid rgba(236,216,210,.95);
      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:22px 20px;
      overflow:hidden;
      position:relative;
    }
    .heroCard:before{
      content:"";
      position:absolute; inset:-2px -2px auto -2px;
      height:180px;
      background:
        radial-gradient(220px 120px at 18% 45%, rgba(185,119,98,.22), transparent 60%),
        radial-gradient(220px 120px at 52% 30%, rgba(138,111,177,.18), transparent 60%),
        radial-gradient(220px 120px at 86% 55%, rgba(76,154,139,.16), transparent 60%);
      pointer-events:none;
    }
    .heroInner{position:relative; z-index:1}
    .kicker{
      display:flex; flex-wrap:wrap; align-items:center; gap:10px;
      margin-bottom:12px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.7);
      font-weight:800;
      font-size:12.5px;
      color:#4b2e25;
    }
    .pill svg{opacity:.9}
    h1{
      margin:0;
      font-size:30px;
      letter-spacing:-.5px;
      line-height:1.16;
    }
    .lead{
      margin:12px 0 16px 0;
      color:var(--muted);
      font-size:15.5px;
      line-height:1.7;
      max-width:62ch;
    }
    .heroActions{
      display:flex; flex-wrap:wrap; gap:12px;
      align-items:center;
      margin-top:6px;
    }
    .miniMeta{
      display:flex; gap:14px; flex-wrap:wrap;
      margin-top:16px;
      padding-top:14px;
      border-top:1px dashed rgba(236,216,210,.95);
    }
    .metaItem{
      display:flex; gap:10px; align-items:flex-start;
      min-width:190px;
      flex:1;
    }
    .metaIcon{
      width:34px; height:34px;
      border-radius:12px;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.68);
      display:grid; place-items:center;
      color:#5a3a2e;
      flex:0 0 auto;
      box-shadow: 0 10px 20px rgba(185,119,98,.08);
    }
    .metaItem b{
      display:block;
      font-size:13.5px;
      margin-top:1px;
    }
    .metaItem small{
      display:block;
      color:var(--muted);
      margin-top:3px;
      font-weight:650;
      line-height:1.4;
    }

    .sideCard{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.62);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .sideTitle{
      display:flex; justify-content:space-between; align-items:center; gap:10px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(236,216,210,.95);
    }
    .sideTitle h2{
      margin:0;
      font-size:15px;
      letter-spacing:-.2px;
    }
    .badge{
      font-size:12px;
      font-weight:900;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(138,111,177,.35);
      background: rgba(138,111,177,.10);
      color:#4b3a69;
      white-space:nowrap;
    }
    .thumbGrid{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:10px;
    }
    .thumb{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: 14px;
      overflow:hidden;
      position:relative;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .thumb:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(80,40,28,.12);
    }
    .thumb:after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(185,119,98,.10));
      pointer-events:none;
    }
    .thumb img{
      width:100%;
      height:92px;
      object-fit:cover;
    }
    .sideFoot{
      border-top:1px dashed rgba(236,216,210,.95);
      padding-top:12px;
      display:grid; gap:10px;
    }
    .quickCall{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
    }
    .quickCall b{
      font-size:14px;
      letter-spacing:-.2px;
    }
    .quickCall span{
      color:var(--muted);
      font-weight:750;
      font-size:12.5px;
      display:block;
      margin-top:4px;
    }

    main{padding:14px 0 24px 0}
    section{margin: 14px 0}
    .secCard{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.60);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:18px 16px;
    }
    .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:-.3px;
    }
    .sectionHeader p{
      margin:0;
      color:var(--muted);
      font-weight:700;
      font-size:13px;
    }

    .toc{
      display:flex; flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }
    .toc a{
      text-decoration:none;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      padding:10px 12px;
      border-radius:999px;
      font-weight:850;
      font-size:13px;
      color:#3b2b29;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .toc a:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.92);
      border-color: rgba(185,119,98,.45);
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
    }
    .stepCard{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: var(--radius2);
      padding:14px 14px;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .stepCard:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 28px rgba(90,50,36,.10);
    }
    .stepTop{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .num{
      width:34px; height:34px;
      border-radius:12px;
      display:grid; place-items:center;
      border:1px solid rgba(236,216,210,.95);
      background: linear-gradient(180deg, rgba(185,119,98,.14), rgba(255,255,255,.75));
      font-weight:1000;
      color:#5a3a2e;
    }
    .tag{
      font-size:12px;
      font-weight:900;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(76,154,139,.30);
      background: rgba(76,154,139,.10);
      color:#2f6f63;
      white-space:nowrap;
    }
    .stepCard h3{
      margin:0 0 6px 0;
      font-size:15px;
      letter-spacing:-.2px;
    }
    .stepCard p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-weight:650;
      font-size:13.5px;
    }
    .list{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-weight:700;
      line-height:1.85;
    }
    .list li{margin:6px 0}
    .callout{
      border-radius: var(--radius2);
      border:1px solid rgba(185,119,98,.35);
      background: linear-gradient(135deg, rgba(185,119,98,.14), rgba(255,255,255,.78));
      padding:14px 14px;
      display:flex; gap:12px; align-items:flex-start;
    }
    .callout strong{display:block; margin-bottom:4px; font-size:14.5px}
    .callout p{margin:0; color:var(--muted); font-weight:700; line-height:1.7; font-size:13.6px}
    .callIcon{
      width:38px; height:38px; border-radius:14px;
      border:1px solid rgba(185,119,98,.35);
      background: rgba(255,255,255,.72);
      display:grid; place-items:center;
      color:#5a3a2e;
      flex:0 0 auto;
      box-shadow: 0 12px 20px rgba(185,119,98,.10);
    }

    .faqGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    details.faq{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: var(--radius2);
      padding:12px 12px;
      overflow:hidden;
      transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    details.faq[open]{
      border-color: rgba(185,119,98,.50);
      box-shadow: 0 18px 28px rgba(90,50,36,.10);
      transform: translateY(-2px);
    }
    details.faq summary{
      cursor:pointer;
      font-weight:900;
      color:#3b2b29;
      list-style:none;
      display:flex; align-items:flex-start; gap:10px;
      line-height:1.45;
      user-select:none;
    }
    details.faq summary::-webkit-details-marker{display:none}
    .qmark{
      width:26px; height:26px;
      border-radius:10px;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.75);
      display:grid; place-items:center;
      color:#5a3a2e;
      font-weight:1000;
      flex:0 0 auto;
      margin-top:2px;
    }
    .faqBody{
      margin-top:10px;
      color:var(--muted);
      font-weight:700;
      line-height:1.75;
      font-size:13.6px;
    }

    .summary{
      display:flex;
      gap:12px;
      align-items:flex-start;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .summary p{
      margin:0;
      color:var(--muted);
      font-weight:720;
      line-height:1.75;
      font-size:14px;
      max-width:72ch;
    }
    .inlineLink{
      color:#4b2e25;
      font-weight:950;
      text-decoration:none;
      border-bottom:2px solid rgba(185,119,98,.45);
      padding-bottom:2px;
    }
    .inlineLink:hover{border-bottom-color: rgba(185,119,98,.9)}

    .thumbRow{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap:10px;
    }
    .imgCard{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.70);
      border-radius: 16px;
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .imgCard:hover{transform: translateY(-2px); box-shadow: 0 18px 28px rgba(90,50,36,.10);}
    .imgCard img{width:100%; height:170px; object-fit:cover}
    .imgCap{
      padding:10px 12px 12px 12px;
      color:var(--muted);
      font-weight:750;
      line-height:1.55;
      font-size:13px;
    }

    .servicesGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      align-items:stretch;
    }
    .serviceItem{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: var(--radius2);
      padding:14px 14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .serviceItem:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 28px rgba(90,50,36,.10);
      border-color: rgba(185,119,98,.45);
    }
    .serviceTop{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .serviceItem h3{
      margin:0;
      font-size:15px;
      letter-spacing:-.2px;
    }
    .serviceItem p{
      margin:0;
      color:var(--muted);
      font-weight:720;
      line-height:1.7;
      font-size:13.6px;
    }
    .serviceList{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-weight:740;
      line-height:1.85;
      font-size:13.5px;
    }
    .serviceList li{margin:6px 0}

    .policyGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      align-items:start;
    }
    .policyCard{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: var(--radius2);
      padding:14px 14px;
    }
    .policyCard h3{margin:0 0 8px 0; font-size:15px; letter-spacing:-.2px}
    .policyCard ul{
      margin:0; padding-left:18px;
      color:var(--muted);
      font-weight:740; line-height:1.85;
      font-size:13.6px;
    }
    .policyCard li{margin:6px 0}

    .contactGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }
    .contactCard{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: var(--radius2);
      padding:14px 14px;
    }
    .contactCard h2{
      margin:0 0 10px 0;
      font-size:16px;
      letter-spacing:-.2px;
    }
    .contactRow{
      display:flex;
      gap:10px;
      align-items:flex-start;
      margin:10px 0;
    }
    .contactRow .ico{
      width:34px; height:34px;
      border-radius:12px;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.75);
      display:grid; place-items:center;
      color:#5a3a2e;
      flex:0 0 auto;
    }
    .contactRow b{display:block; font-size:13.8px}
    .contactRow span{
      display:block;
      color:var(--muted);
      font-weight:740;
      line-height:1.65;
      margin-top:4px;
      font-size:13.3px;
    }
    .mapLink{
      display:inline-flex;
      margin-top:10px;
      text-decoration:none;
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      padding:10px 12px;
      border-radius:14px;
      font-weight:900;
      color:#0b66c3;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
      width:fit-content;
    }
    .mapLink:hover{transform: translateY(-2px); background: rgba(255,255,255,.92); border-color: rgba(185,119,98,.40);}
    .qrWrap{
      display:grid;
      gap:10px;
    }
    .qrBox{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.72);
      border-radius: var(--radius2);
      padding:14px 14px;
      display:grid;
      grid-template-columns: 110px 1fr;
      gap:12px;
      align-items:center;
    }
    .qrBox img{
      width:110px; height:110px;
      object-fit:contain;
      border-radius:14px;
      background: #fff;
      border:1px solid rgba(236,216,210,.95);
    }
    .qrBox b{
      display:block;
      font-size:14.5px;
      margin-bottom:6px;
    }
    .qrBox span{
      color:var(--muted);
      font-weight:740;
      line-height:1.7;
      font-size:13.4px;
      display:block;
    }
    .footer{
      background: #fff;
      border-top:1px solid rgba(236,216,210,.95);
      padding:16px 0 22px 0;
      margin-top:8px;
      color:#2a2a2a;
    }
    .footerGrid{
      display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;
    }
    .footLeft{
      display:flex; gap:12px; align-items:flex-start;
      min-width:280px;
    }
    .footLogo{
      width:38px; height:38px;
      border-radius:14px;
      border:1px solid rgba(185,119,98,.30);
      background: linear-gradient(135deg, rgba(185,119,98,.16), rgba(255,255,255,.85));
      display:grid; place-items:center;
      font-weight:1000;
      color:#5a3a2e;
    }
    .footLeft b{display:block; font-size:14.5px}
    .footLeft span{
      display:block;
      color:var(--muted);
      font-weight:740;
      line-height:1.7;
      font-size:13.3px;
      margin-top:4px;
    }
    .footRight{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
    }
    .footChip{
      border:1px solid rgba(236,216,210,.95);
      background: rgba(255,255,255,.75);
      padding:10px 12px;
      border-radius:999px;
      font-weight:900;
      color:#3b2b29;
      font-size:13px;
    }
    .copyright{
      margin-top:12px;
      color:var(--muted);
      font-weight:760;
      font-size:12.8px;
      line-height:1.6;
    }

    .fadeIn{
      opacity:0; transform: translateY(8px);
      animation: fadeUp .5s ease forwards;
    }
    @keyframes fadeUp{
      to{opacity:1; transform: translateY(0)}
    }
    @media (prefers-reduced-motion: reduce){
      .fadeIn{animation:none}
      .btn,.navlinks a,.thumb,.imgCard,.stepCard,.serviceItem{transition:none}
      .btn:hover,.navlinks a:hover,.thumb:hover,.imgCard:hover,.stepCard:hover,.serviceItem:hover{transform:none}
      details.faq[open]{transform:none}
    }
    @media (max-width: 980px){
      .heroGrid{grid-template-columns: 1fr; }
      .thumbRow{grid-template-columns: repeat(2, 1fr);}
      .grid2{grid-template-columns: 1fr;}
      .faqGrid{grid-template-columns: 1fr;}
      .servicesGrid{grid-template-columns: 1fr;}
      .policyGrid{grid-template-columns: 1fr;}
      .contactGrid{grid-template-columns: 1fr;}
      .qrBox{grid-template-columns: 96px 1fr;}
      .qrBox img{width:96px; height:96px;}
      h1{font-size:26px}
    }
    @media (max-width: 860px){
      .navlinks{display:none}
      .cta{display:none}
      .mobile-toggle{display:inline-flex; align-items:center; gap:10px}
      .mobile-panel{display:block}
      .navwrap{padding:10px 0}
      header.hero{padding-top:18px}
    }