:root{
      --bg0:#fbf7f4;
      --bg1:#fffdfb;
      --card:#ffffff;
      --text:#1f2328;
      --muted:#5b6675;
      --muted2:#7b8796;
      --line:rgba(31,35,40,.10);
      --shadow:0 14px 40px rgba(21,26,32,.08);
      --shadow2:0 10px 26px rgba(21,26,32,.10);
      --radius:18px;

      --accent:#7a4cff;    /* 紫 */
      --accent2:#0b7a5a;   /* 青绿 */
      --accent3:#ff7a8a;   /* 粉 */
      --accent4:#ffb020;   /* 杏黄 */
      --accentSoft:rgba(122,76,255,.10);
      --focus:rgba(11,122,90,.20);
      --btn:#1f2328;
      --btnText:#fff;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 650px at 12% -10%, rgba(255,122,138,.22), transparent 55%),
        radial-gradient(900px 520px at 88% 0%, rgba(122,76,255,.18), transparent 55%),
        radial-gradient(700px 420px at 70% 42%, rgba(11,122,90,.13), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    .container{
      width:100%;
      max-width:1120px;
      padding:0 18px;
      margin:0 auto;
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:30;
      backdrop-filter:saturate(140%) blur(10px);
      background:rgba(255,255,251,.72);
      border-bottom:1px solid rgba(31,35,40,.08);
    }

    .navwrap{
      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;
    }

    .logo{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,122,138,.22), rgba(122,76,255,.22));
      border:1px solid rgba(31,35,40,.10);
      box-shadow:0 10px 26px rgba(122,76,255,.10);
      position:relative;
      overflow:hidden;
    }
    .logo::after{
      content:"";
      position:absolute;
      inset:-60%;
      background:conic-gradient(from 180deg, rgba(122,76,255,.0), rgba(122,76,255,.25), rgba(255,122,138,.0));
      animation:spin 10s linear infinite;
      opacity:.75;
    }
    .logo span{
      position:relative;
      z-index:1;
      font-weight:900;
      letter-spacing:.5px;
      color:var(--text);
      font-size:18px;
    }

    @keyframes spin{
      from{ transform:rotate(0deg); }
      to{ transform:rotate(360deg); }
    }

    .brandtext{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brandtext b{
      font-size:14px;
      letter-spacing:.2px;
    }
    .brandtext small{
      color:var(--muted);
      font-size:12px;
      margin-top:4px;
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navlinks a{
      text-decoration:none;
      color:var(--muted);
      font-size:14px;
      padding:8px 10px;
      border-radius:12px;
      transition:background .2s ease, color .2s ease, transform .2s ease;
    }
    .navlinks a:hover{
      background:rgba(122,76,255,.08);
      color:var(--text);
      transform:translateY(-1px);
    }

    .cta{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .btn{
      appearance:none;
      border:none;
      background:var(--btn);
      color:var(--btnText);
      font-weight:700;
      padding:10px 14px;
      border-radius:14px;
      cursor:pointer;
      box-shadow:0 12px 22px rgba(31,35,40,.14);
      transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
      white-space:nowrap;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 28px rgba(31,35,40,.18);
      filter:saturate(110%);
    }
    .btn:active{
      transform:translateY(0px);
      box-shadow:0 10px 18px rgba(31,35,40,.14);
    }

    .btnSecondary{
      background:#fff;
      color:var(--text);
      border:1px solid rgba(31,35,40,.12);
      box-shadow:none;
      padding:10px 12px;
    }
    .btnSecondary:hover{
      border-color:rgba(31,35,40,.20);
      background:rgba(255,255,255,.85);
      box-shadow:0 10px 20px rgba(31,35,40,.10);
    }

    .menuBtn{
      display:none;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(31,35,40,.12);
      background:rgba(255,255,255,.7);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      transition:transform .18s ease, background .18s ease;
    }
    .menuBtn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.9); }
    .hamburger{
      width:18px;
      height:12px;
      position:relative;
    }
    .hamburger::before,.hamburger::after,.hamburger i{
      content:"";
      position:absolute;
      left:0; right:0;
      height:2px;
      background:rgba(31,35,40,.85);
      border-radius:2px;
    }
    .hamburger::before{ top:0; }
    .hamburger i{ top:5px; }
    .hamburger::after{ bottom:0; }

    .mobilePanel{
      display:none;
      padding:0 0 12px;
    }
    .mobilePanel .panelInner{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(31,35,40,.10);
      border-radius:18px;
      padding:10px;
      box-shadow:0 18px 40px rgba(31,35,40,.10);
    }
    .mobileLinks{
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:8px;
    }
    .mobileLinks a{
      text-decoration:none;
      color:var(--text);
      font-weight:650;
      padding:12px 12px;
      border-radius:14px;
      background:rgba(122,76,255,.06);
      border:1px solid rgba(122,76,255,.12);
      transition:transform .18s ease;
    }
    .mobileLinks a:hover{ transform:translateY(-1px); }

    header{
      padding:26px 0 10px;
    }

    .hero{
      padding:18px 0 8px;
    }

    .heroGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:stretch;
    }

    .heroCard{
      background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
      border:1px solid rgba(31,35,40,.10);
      border-radius:24px;
      padding:18px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .heroCard::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(680px 280px at 18% 0%, rgba(255,176,32,.22), transparent 60%),
        radial-gradient(580px 260px at 86% 10%, rgba(122,76,255,.20), transparent 58%),
        radial-gradient(520px 320px at 70% 90%, rgba(11,122,90,.14), transparent 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:14px;
      min-height:290px;
    }

    .badgeRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.75);
      color:var(--muted);
      font-weight:650;
      font-size:13px;
      box-shadow:0 10px 20px rgba(31,35,40,.06);
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(135deg, var(--accent3), var(--accent));
      box-shadow:0 0 0 5px rgba(122,76,255,.10);
    }

    h1{
      margin:0;
      font-size:34px;
      line-height:1.2;
      letter-spacing:-.6px;
    }
    .lead{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.75;
      max-width:62ch;
    }

    .heroActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      margin-top:2px;
    }

    .hintRow{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:flex-start;
      margin-top:auto;
      padding-top:6px;
    }

    .miniStat{
      flex:1;
      min-width:180px;
      background:rgba(255,255,255,.70);
      border:1px solid rgba(31,35,40,.10);
      border-radius:18px;
      padding:12px 12px;
    }
    .miniStat b{
      display:block;
      font-size:14px;
      margin-bottom:6px;
    }
    .miniStat span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }

    .mediaCard{
      background:rgba(255,255,255,.70);
      border:1px solid rgba(31,35,40,.10);
      border-radius:24px;
      padding:14px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .mediaCard::after{
      content:"";
      position:absolute;
      inset:-20%;
      background:radial-gradient(360px 220px at 40% 20%, rgba(255,122,138,.20), transparent 60%);
      pointer-events:none;
    }
    .mediaInner{
      position:relative;
      z-index:1;
      height:100%;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .imageWrap{
      border-radius:20px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.78);
      padding:10px;
    }
    .imageFrame{
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(31,35,40,.10);
      background:#fff;
      aspect-ratio: 4/3;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    .imageFrame img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform:scale(1.01);
      transition:transform .35s ease;
    }
    .imageFrame:hover img{ transform:scale(1.04); }

    .mediaCaption{
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
      padding:0 2px;
    }

    .quickContact{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .qcItem{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(31,35,40,.10);
      border-radius:18px;
      padding:12px;
      min-height:92px;
      display:flex;
      flex-direction:column;
      gap:6px;
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .qcItem:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 26px rgba(31,35,40,.10);
    }
    .qcItem b{ font-size:14px; }
    .qcItem a{
      text-decoration:none;
      color:var(--text);
      font-weight:700;
      font-size:14px;
    }
    .qcItem span{
      color:var(--muted);
      font-size:12.5px;
      line-height:1.5;
    }

    main{
      padding:10px 0 34px;
    }

    .section{
      margin: 18px 0;
    }

    .sectionTitle{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-bottom:12px;
    }

    h2{
      margin:0;
      font-size:22px;
      letter-spacing:-.3px;
    }
    .sectionTitle p{
      margin:0;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.6;
      max-width:48ch;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:stretch;
    }

    .card{
      background:rgba(255,255,255,.74);
      border:1px solid rgba(31,35,40,.10);
      border-radius:22px;
      padding:14px;
      box-shadow:0 10px 26px rgba(31,35,40,.06);
    }

    .serviceList{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(122,76,255,.08);
      border:1px solid rgba(122,76,255,.16);
      color:var(--text);
      font-weight:680;
      font-size:13.5px;
    }
    .chip:nth-child(2n){
      background:rgba(11,122,90,.08);
      border-color:rgba(11,122,90,.16);
    }
    .chip:nth-child(3n){
      background:rgba(255,176,32,.11);
      border-color:rgba(255,176,32,.20);
    }

    .process{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }

    .step{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.78);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .step:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 26px rgba(31,35,40,.10);
    }
    .stepNum{
      width:34px;
      height:34px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-weight:900;
      color:var(--text);
      background:linear-gradient(135deg, rgba(255,122,138,.25), rgba(122,76,255,.18));
      border:1px solid rgba(31,35,40,.10);
      flex:0 0 auto;
      margin-top:1px;
    }
    .step b{
      display:block;
      font-size:14.5px;
      margin-bottom:6px;
    }
    .step span{
      display:block;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.7;
    }

    .solutionGrid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:12px;
      align-items:stretch;
    }

    .solItem{
      padding:14px;
      border-radius:22px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.74);
      display:flex;
      flex-direction:column;
      gap:10px;
      transition:transform .18s ease, box-shadow .18s ease;
      min-height:166px;
    }
    .solItem:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(31,35,40,.10);
    }
    .solTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .solIcon{
      width:44px; height:44px;
      border-radius:16px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(122,76,255,.10);
      display:grid;
      place-items:center;
      font-size:18px;
    }
    .solItem:nth-child(2) .solIcon{ background:rgba(11,122,90,.10); }
    .solItem:nth-child(3) .solIcon{ background:rgba(255,176,32,.14); }
    .solItem h3{
      margin:0;
      font-size:15px;
      letter-spacing:-.2px;
    }
    .solItem p{
      margin:0;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.7;
    }
    .solTag{
      margin-top:auto;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .tag{
      font-size:12.5px;
      color:var(--muted);
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.70);
      padding:7px 10px;
      border-radius:999px;
      white-space:nowrap;
    }

    .faqWrap{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }

    details.faq{
      border-radius:20px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.74);
      padding:12px 12px;
      box-shadow:0 10px 22px rgba(31,35,40,.05);
      transition:box-shadow .18s ease, transform .18s ease;
    }
    details.faq[open]{
      box-shadow:0 16px 30px rgba(31,35,40,.10);
      transform:translateY(-1px);
    }
    details.faq summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:4px 2px;
      outline:none;
    }
    details.faq summary::-webkit-details-marker{ display:none; }
    .qLeft{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .qMark{
      width:30px; height:30px;
      border-radius:12px;
      background:rgba(255,122,138,.13);
      border:1px solid rgba(31,35,40,.10);
      display:grid;
      place-items:center;
      font-weight:900;
      flex:0 0 auto;
      margin-top:1px;
    }
    details.faq[open] .qMark{ background:rgba(122,76,255,.14); }
    .qText b{
      display:block;
      font-size:14.5px;
      margin-bottom:6px;
      letter-spacing:-.2px;
    }
    .qText span{
      display:block;
      color:var(--muted);
      font-size:13.2px;
      line-height:1.6;
    }

    .chev{
      width:30px;
      height:30px;
      border-radius:12px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.70);
      display:grid;
      place-items:center;
      flex:0 0 auto;
      transition:transform .2s ease;
      margin-top:2px;
    }
    details.faq[open] .chev{ transform:rotate(180deg); }

    .faqAnswer{
      margin-top:10px;
      border-top:1px dashed rgba(31,35,40,.14);
      padding-top:10px;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.85;
    }

    .policyGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }

    .policyList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .policyItem{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:12px;
      border-radius:20px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.74);
    }
    .policyItem .pIcon{
      width:40px;
      height:40px;
      border-radius:16px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(11,122,90,.10);
      display:grid;
      place-items:center;
      font-size:18px;
      flex:0 0 auto;
    }
    .policyItem:nth-child(2) .pIcon{ background:rgba(255,176,32,.14); }
    .policyItem:nth-child(3) .pIcon{ background:rgba(122,76,255,.12); }
    .policyItem:nth-child(4) .pIcon{ background:rgba(255,122,138,.14); }

    .policyItem b{
      display:block;
      font-size:14.5px;
      margin-bottom:6px;
      letter-spacing:-.2px;
    }
    .policyItem span{
      color:var(--muted);
      font-size:13.4px;
      line-height:1.75;
      display:block;
    }

    .contactCard{
      padding:14px;
    }
    .contactGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      align-items:start;
    }

    .qrArea{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .qrBlock{
      border-radius:20px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.78);
      padding:12px;
    }

    .qrBlock h3{
      margin:0 0 10px 0;
      font-size:15px;
      letter-spacing:-.2px;
    }

    .qrImg{
      width:100%;
      display:block;
      border-radius:16px;
      border:1px solid rgba(31,35,40,.10);
      background:#fff;
    }

    .contactInfo{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .infoItem{
      border-radius:20px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.74);
      padding:12px;
    }
    .infoItem b{
      display:block;
      font-size:14.5px;
      margin-bottom:6px;
      letter-spacing:-.2px;
    }
    .infoItem span, .infoItem a{
      color:var(--muted);
      font-size:13.5px;
      line-height:1.8;
      text-decoration:none;
    }
    .infoItem a{
      color:#0b5bd3;
      font-weight:750;
      word-break:break-word;
    }

    .footer{
      padding:14px 0 26px;
      border-top:1px solid rgba(31,35,40,.08);
      background:rgba(255,255,251,.55);
    }
    .footerInner{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .footLeft{
      min-width:240px;
    }
    .footLeft b{
      display:block;
      font-size:14.5px;
      margin-bottom:6px;
      letter-spacing:-.2px;
    }
    .footLeft span{
      color:var(--muted);
      font-size:13.5px;
      line-height:1.8;
      display:block;
    }
    .footLinks{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .footLinks a{
      text-decoration:none;
      color:var(--muted);
      font-weight:650;
      font-size:13.5px;
      border:1px solid rgba(31,35,40,.10);
      background:rgba(255,255,255,.65);
      padding:10px 12px;
      border-radius:14px;
      transition:transform .18s ease, background .18s ease;
      white-space:nowrap;
    }
    .footLinks a:hover{ transform:translateY(-1px); background:rgba(255,255,255,.88); }

    .toTop{
      position:fixed;
      right:14px;
      bottom:14px;
      width:46px;
      height:46px;
      border-radius:16px;
      border:1px solid rgba(31,35,40,.12);
      background:rgba(255,255,255,.85);
      box-shadow:0 16px 32px rgba(31,35,40,.16);
      cursor:pointer;
      display:grid;
      place-items:center;
      z-index:50;
      opacity:0;
      pointer-events:none;
      transform:translateY(10px);
      transition:opacity .2s ease, transform .2s ease, background .2s ease;
    }
    .toTop.show{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }
    .toTop:hover{ background:rgba(255,255,255,.96); }

    @media (max-width: 900px){
      .heroGrid{ grid-template-columns: 1fr; }
      .miniStat{ min-width:unset; }
      .solutionGrid{ grid-template-columns: 1fr; }
      .grid2{ grid-template-columns: 1fr; }
      .policyGrid{ grid-template-columns: 1fr; }
      .contactGrid{ grid-template-columns: 1fr; }
      .navlinks{ display:none; }
      .cta{ display:none; }
      .menuBtn{ display:flex; }
      .mobilePanel{ display:block; }
      h1{ font-size:30px; }
    }

    @media (prefers-reduced-motion: reduce){
      .logo::after{ animation:none; }
      .btn, .navlinks a, .step, .solItem, .qcItem, .toTop{ transition:none; }
    }