:root{
      --bg0:#f6fbf8;
      --bg1:#eef8f2;
      --card:#ffffff;
      --text:#1f2937;
      --muted:#5b6b7a;
      --muted2:#7a8a9a;
      --line:rgba(16, 24, 40, .10);
      --shadow: 0 10px 28px rgba(16, 24, 40, .10);
      --shadow2: 0 6px 18px rgba(16, 24, 40, .10);
      --mint:#2fbf86;
      --mint2:#66d3a6;
      --mint3:#e8fff3;
      --blue:#2a7de1;
      --warn:#c65b2c;
      --radius:18px;
      --radius2:14px;
      --container: 1120px;
      --padX: 20px;
      --focus: rgba(47,191,134,.28);
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 420px at 8% -6%, rgba(47,191,134,.18), transparent 60%),
        radial-gradient(900px 420px at 92% 6%, rgba(42,125,225,.14), transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0) 55%, #ffffff 100%);
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    .container{
      width:100%;
      max-width:var(--container);
      padding:0 var(--padX);
      margin:0 auto;
    }
    .skip{
      position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip:focus{
      left:16px; top:16px; width:auto; height:auto; z-index:9999;
      background:#fff; padding:10px 12px; border-radius:12px; box-shadow:var(--shadow2);
      outline:2px solid var(--mint);
    }

    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(246,251,248,.72);
      border-bottom:1px solid rgba(16,24,40,.08);
    }
    .navBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
    }
    .brand{
      display:flex; align-items:center; gap:12px; min-width: 220px;
    }
    .brand img{
      width:38px; height:38px; border-radius:12px; background:#fff;
      box-shadow: 0 10px 20px rgba(16,24,40,.08);
      object-fit:cover;
    }
    .brandText{
      display:flex; flex-direction:column; line-height:1.1;
    }
    .brandName{
      font-weight:820; letter-spacing:.2px; font-size:14px;
    }
    .brandSub{
      color:var(--muted); font-size:12px; margin-top:4px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width:240px;
    }
    nav{
      display:flex; align-items:center; gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navLinks{
      display:flex; align-items:center; gap:6px;
      padding:6px;
      border-radius:999px;
      background: rgba(255,255,255,.65);
      border:1px solid rgba(16,24,40,.08);
    }
    .navLinks a{
      padding:8px 10px;
      border-radius:999px;
      color:var(--muted);
      font-size:13px;
      transition: background .15s ease, color .15s ease, transform .15s ease;
      display:inline-flex; align-items:center; gap:8px;
      outline:none;
    }
    .navLinks a:hover{
      background: rgba(47,191,134,.10);
      color: #0f3a2a;
      transform: translateY(-1px);
    }
    .navLinks a:focus-visible{ box-shadow:0 0 0 4px var(--focus); }
    .navCta{
      display:flex; align-items:center; gap:10px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      border-radius:14px;
      padding:11px 14px;
      border:1px solid rgba(16,24,40,.10);
      background:#fff;
      color:#0f172a;
      font-weight:700;
      font-size:14px;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
      cursor:pointer;
      user-select:none;
      outline:none;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16,24,40,.10); border-color: rgba(16,24,40,.16); }
    .btn:focus-visible{ box-shadow:0 0 0 4px var(--focus), 0 10px 22px rgba(16,24,40,.10); }
    .btnPrimary{
      border-color: rgba(47,191,134,.30);
      background: linear-gradient(180deg, rgba(47,191,134,.12), rgba(47,191,134,.06));
    }
    .btnMint{
      border-color: rgba(47,191,134,.40);
      background: linear-gradient(180deg, rgba(47,191,134,.20), rgba(47,191,134,.10));
      color:#0b3b2a;
    }
    .btnSmall{
      padding:9px 12px; border-radius:12px; font-size:13px;
    }
    .btnIcon{
      width:18px; height:18px; display:inline-block;
    }
    .hamburger{
      display:none;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(16,24,40,.10);
      background:#fff;
      cursor:pointer;
      align-items:center; justify-content:center;
      transition: transform .15s ease, box-shadow .15s ease;
      outline:none;
    }
    .hamburger:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
    .hamburger:focus-visible{ box-shadow:0 0 0 4px var(--focus), var(--shadow2); }
    .hamburger svg{ width:20px; height:20px; }

    .mobilePanel{
      display:none;
      padding:0 0 14px;
    }
    .mobilePanelInner{
      background: rgba(255,255,255,.78);
      border:1px solid rgba(16,24,40,.10);
      border-radius:16px;
      padding:10px;
      box-shadow: 0 14px 30px rgba(16,24,40,.08);
    }
    .mobileLinks{
      display:flex; flex-direction:column; gap:6px;
    }
    .mobileLinks a{
      padding:12px 12px;
      border-radius:12px;
      color: var(--muted);
      background: rgba(255,255,255,.6);
      border:1px solid rgba(16,24,40,.08);
      transition: transform .15s ease, background .15s ease;
      font-weight:650;
      font-size:14px;
    }
    .mobileLinks a:hover{ transform: translateY(-1px); background: rgba(47,191,134,.10); color:#0f3a2a; }
    .mobileCtas{
      display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;
    }

    main{ padding-bottom: 30px; }
    .hero{
      padding: 28px 0 8px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    .heroLeft{
      border-radius: var(--radius);
      background:
        radial-gradient(700px 320px at 10% 5%, rgba(47,191,134,.22), transparent 55%),
        radial-gradient(650px 280px at 86% 0%, rgba(42,125,225,.18), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
      border: 1px solid rgba(16,24,40,.08);
      box-shadow: 0 20px 50px rgba(16,24,40,.08);
      overflow:hidden;
      position:relative;
    }
    .heroLeft::after{
      content:"";
      position:absolute; inset:-2px;
      background:
        linear-gradient(90deg, rgba(47,191,134,.14), transparent 40%),
        linear-gradient(180deg, rgba(42,125,225,.10), transparent 55%);
      pointer-events:none;
      opacity:.9;
    }
    .heroLeftInner{
      position:relative;
      padding:22px 22px 18px;
    }
    .badgeRow{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin-bottom:14px;
    }
    .badge{
      display:inline-flex; align-items:center; gap:10px;
      padding:9px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.7);
      border:1px solid rgba(16,24,40,.08);
      color:#0f3a2a;
      font-weight:760;
      font-size:13px;
    }
    .badgeDot{
      width:10px; height:10px; border-radius:50%;
      background: linear-gradient(180deg, var(--mint), var(--mint2));
      box-shadow: 0 0 0 4px rgba(47,191,134,.14);
    }
    .heroTitle{
      font-size: 34px;
      margin: 0;
      letter-spacing: -0.6px;
      line-height: 1.18;
      position:relative;
      z-index:1;
    }
    .heroLead{
      margin: 12px 0 18px;
      color: var(--muted);
      font-size: 15.5px;
      line-height:1.75;
      max-width: 62ch;
      position:relative;
      z-index:1;
    }
    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      position:relative; z-index:1;
      margin-bottom: 14px;
    }
    .ghostLink{
      display:inline-flex; align-items:center; gap:10px;
      padding:11px 14px;
      border-radius:14px;
      border:1px solid rgba(16,24,40,.10);
      background: rgba(255,255,255,.55);
      color: var(--muted);
      font-weight:740;
      font-size:14px;
      transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
      outline:none;
      cursor:pointer;
    }
    .ghostLink:hover{ transform: translateY(-1px); background: rgba(255,255,255,.80); color:#0f172a; border-color: rgba(16,24,40,.16); }
    .ghostLink:focus-visible{ box-shadow:0 0 0 4px var(--focus); }
    .heroMeta{
      display:flex; gap:14px; flex-wrap:wrap;
      border-top: 1px solid rgba(16,24,40,.08);
      padding-top: 14px;
      margin-top: 10px;
      position:relative; z-index:1;
    }
    .metaItem{
      display:flex; gap:10px; align-items:flex-start;
      min-width: 170px;
      flex: 1;
    }
    .metaIcon{
      width:36px; height:36px; border-radius:14px;
      background: rgba(47,191,134,.10);
      border: 1px solid rgba(47,191,134,.20);
      display:flex; align-items:center; justify-content:center;
      color:#0b3b2a;
      flex:0 0 auto;
    }
    .metaIcon svg{ width:18px; height:18px; }
    .metaText strong{ display:block; font-size:13.5px; }
    .metaText span{ display:block; font-size:12.5px; color: var(--muted); margin-top:5px; line-height:1.35; }

    .heroRight{
      display:flex; flex-direction:column; gap:14px;
    }
    .sideCard{
      border-radius: var(--radius);
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(16,24,40,.08);
      box-shadow: 0 14px 30px rgba(16,24,40,.06);
      overflow:hidden;
    }
    .sideCardInner{ padding:16px 16px 14px; }
    .sideHeading{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .sideHeading h3{
      margin:0;
      font-size:15px;
      letter-spacing:-.2px;
    }
    .chip{
      display:inline-flex; align-items:center;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(16,24,40,.10);
      color: var(--muted);
      background: rgba(255,255,255,.7);
      font-size:12.5px;
      font-weight:720;
      white-space:nowrap;
    }
    .quickList{
      display:flex; flex-direction:column; gap:10px;
      margin-top:10px;
    }
    .quickItem{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 10px;
      border-radius:14px;
      background: rgba(255,255,255,.62);
      border:1px solid rgba(16,24,40,.07);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .quickItem:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,24,40,.08); }
    .qiIcon{
      width:30px; height:30px; border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(42,125,225,.10);
      border: 1px solid rgba(42,125,225,.20);
      color:#114a9a;
      flex:0 0 auto;
    }
    .qiIcon svg{ width:16px; height:16px; }
    .qiBody strong{ display:block; font-size:13.5px; }
    .qiBody span{ display:block; font-size:12.5px; color: var(--muted); margin-top:5px; line-height:1.35; }

    .section{
      padding: 30px 0;
    }
    .sectionTop{
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
      margin-bottom: 16px;
    }
    .kicker{
      color:#0b3b2a;
      font-weight:820;
      letter-spacing:.2px;
      font-size:13px;
      display:flex; align-items:center; gap:10px;
      margin-bottom:10px;
    }
    .kicker::before{
      content:"";
      width:10px; height:10px; border-radius:50%;
      background: linear-gradient(180deg, var(--mint), var(--mint2));
      box-shadow: 0 0 0 4px rgba(47,191,134,.14);
    }
    .section h2{
      margin:0;
      font-size: 22px;
      letter-spacing:-.35px;
    }
    .sectionSub{
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.75;
      font-size: 14.5px;
      max-width: 68ch;
    }
    .sectionTools{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
    }

    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
    .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
    .grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }

    .card{
      background: rgba(255,255,255,.68);
      border:1px solid rgba(16,24,40,.08);
      border-radius: var(--radius);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      overflow:hidden;
    }
    .cardInner{ padding:16px; }
    .cardTitle{
      margin:0;
      font-size:15.5px;
      letter-spacing:-.2px;
    }
    .cardDesc{
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 14px;
    }
    .cardFooterRow{
      margin-top: 14px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-top:1px dashed rgba(16,24,40,.12);
      padding-top: 14px;
    }
    .pillRow{ display:flex; gap:8px; flex-wrap:wrap; }
    .pill{
      padding:8px 10px;
      border-radius:999px;
      background: rgba(47,191,134,.10);
      border:1px solid rgba(47,191,134,.18);
      color:#0f3a2a;
      font-weight:760;
      font-size:12.5px;
      white-space:nowrap;
    }
    .pillBlue{
      background: rgba(42,125,225,.10);
      border:1px solid rgba(42,125,225,.18);
      color:#114a9a;
    }
    .pillGray{
      background: rgba(16,24,40,.05);
      border:1px solid rgba(16,24,40,.10);
      color: var(--muted);
    }

    .metricGrid{
      display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;
    }
    .metric{
      border-radius: var(--radius);
      border: 1px solid rgba(16,24,40,.08);
      background: rgba(255,255,255,.70);
      box-shadow: 0 12px 25px rgba(16,24,40,.05);
      padding:14px 14px 12px;
      position:relative;
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
      min-height: 96px;
    }
    .metric:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(16,24,40,.10); }
    .metric::after{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(320px 120px at 10% 0%, rgba(47,191,134,.18), transparent 60%),
        radial-gradient(320px 120px at 90% 0%, rgba(42,125,225,.14), transparent 60%);
      opacity:.9; pointer-events:none;
    }
    .metric > *{ position:relative; z-index:1; }
    .metricTop{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      margin-bottom:8px;
    }
    .metricIcon{
      width:34px; height:34px; border-radius:14px;
      background: rgba(47,191,134,.10);
      border:1px solid rgba(47,191,134,.18);
      display:flex; align-items:center; justify-content:center;
      color:#0b3b2a;
      flex:0 0 auto;
    }
    .metricIcon.blue{ background: rgba(42,125,225,.10); border-color: rgba(42,125,225,.18); color:#114a9a; }
    .metricIcon svg{ width:18px; height:18px; }
    .metricValue{
      font-weight:900;
      font-size: 22px;
      letter-spacing:-.4px;
      margin:0;
    }
    .metricLabel{
      margin:0;
      color: var(--muted);
      font-size: 13.5px;
      line-height:1.4;
    }

    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap:12px;
      align-items:stretch;
    }
    .step{
      border-radius: var(--radius);
      background: rgba(255,255,255,.70);
      border:1px solid rgba(16,24,40,.08);
      padding:14px 14px 12px;
      box-shadow: 0 12px 25px rgba(16,24,40,.05);
      transition: transform .18s ease, box-shadow .18s ease;
      position:relative;
      overflow:hidden;
    }
    .step:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(16,24,40,.10); }
    .step::before{
      content:"";
      position:absolute; top:-20px; right:-30px;
      width:90px; height:90px; border-radius:50%;
      background: rgba(47,191,134,.10);
      border:1px solid rgba(47,191,134,.14);
    }
    .step > *{ position:relative; z-index:1; }
    .stepNum{
      display:inline-flex; align-items:center; justify-content:center;
      width:34px; height:34px;
      border-radius:14px;
      background: rgba(47,191,134,.12);
      border:1px solid rgba(47,191,134,.22);
      color:#0b3b2a;
      font-weight:900;
      letter-spacing:-.2px;
      margin-bottom:10px;
      font-size:14px;
    }
    .step h3{ margin:0; font-size:15.5px; letter-spacing:-.2px; }
    .step p{ margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }

    .compareWrap{
      border-radius: var(--radius);
      background: rgba(255,255,255,.66);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 18px 42px rgba(16,24,40,.06);
      overflow:hidden;
    }
    .compareTable{
      width:100%;
      border-collapse: collapse;
      min-width: 720px;
    }
    .compareTable th, .compareTable td{
      border-bottom:1px solid rgba(16,24,40,.08);
      padding:12px 12px;
      text-align:left;
      vertical-align:top;
      font-size:14px;
    }
    .compareTable th{
      background: rgba(47,191,134,.10);
      color:#0f3a2a;
      font-weight:900;
      letter-spacing:-.2px;
    }
    .compareTable tr:last-child td{ border-bottom:none; }
    .tagGood{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(47,191,134,.22);
      background: rgba(47,191,134,.10);
      color:#0b3b2a;
      font-weight:850;
      font-size:13px;
      white-space:nowrap;
    }
    .tagMid{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(42,125,225,.22);
      background: rgba(42,125,225,.10);
      color:#114a9a;
      font-weight:850;
      font-size:13px;
      white-space:nowrap;
    }
    .tagWarn{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(198,91,44,.22);
      background: rgba(198,91,44,.10);
      color:#6b2a12;
      font-weight:850;
      font-size:13px;
      white-space:nowrap;
    }
    .checkRow{
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .miniCheck{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:12px;
      background: rgba(255,255,255,.60);
      border:1px solid rgba(16,24,40,.10);
      color: var(--muted);
      font-size:13px;
      font-weight:730;
      white-space:nowrap;
    }
    .miniCheck svg{ width:16px; height:16px; color: var(--mint); }
    .compareTopBar{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px;
      border-bottom:1px solid rgba(16,24,40,.08);
      background:
        radial-gradient(700px 240px at 10% 0%, rgba(47,191,134,.18), transparent 55%),
        radial-gradient(700px 240px at 90% 0%, rgba(42,125,225,.14), transparent 55%),
        rgba(255,255,255,.50);
    }
    .ratingBox{
      display:flex; gap:14px; align-items:center;
    }
    .stars{
      display:flex; gap:6px; align-items:center;
    }
    .star{
      width:18px; height:18px; display:inline-block;
    }
    .ratingScore{
      display:flex; flex-direction:column; gap:6px;
    }
    .ratingScore strong{
      font-size: 26px; letter-spacing:-.5px;
    }
    .ratingScore span{ color:var(--muted); font-size:13.5px; font-weight:700; }
    .recommend{
      display:flex; flex-direction:column; gap:6px;
      align-items:flex-end;
    }
    .recommend strong{
      font-size:14px; color:#0b3b2a;
    }
    .recommend .starsText{
      color:var(--muted); font-size:13.5px; font-weight:750;
    }

    .timeline{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    .timelineItem{
      display:flex; gap:12px; align-items:flex-start;
      border-radius: var(--radius);
      background: rgba(255,255,255,.70);
      border:1px solid rgba(16,24,40,.08);
      padding:14px;
      box-shadow: 0 12px 25px rgba(16,24,40,.05);
    }
    .timeDot{
      width:38px; height:38px; border-radius:16px;
      background: rgba(47,191,134,.12);
      border:1px solid rgba(47,191,134,.22);
      display:flex; align-items:center; justify-content:center;
      color:#0b3b2a; flex:0 0 auto;
    }
    .timeDot svg{ width:18px; height:18px; }
    .timelineBody strong{ display:block; font-size:15.5px; letter-spacing:-.2px; }
    .timelineBody p{ margin:10px 0 0; color:var(--muted); line-height:1.7; font-size:14px; }
    .timelineBody .smallRow{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

    .cardsRow{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }
    .listBullets{
      margin: 10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;
    }
    .listBullets li{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px 12px;
      border-radius:14px;
      background: rgba(255,255,255,.62);
      border:1px solid rgba(16,24,40,.07);
    }
    .bulletMark{
      width:26px; height:26px; border-radius:12px;
      background: rgba(47,191,134,.12);
      border:1px solid rgba(47,191,134,.22);
      display:flex; align-items:center; justify-content:center;
      color:#0b3b2a;
      flex:0 0 auto;
      margin-top:2px;
    }
    .bulletMark svg{ width:14px; height:14px; }
    .listBullets strong{ display:block; font-size:14.5px; }
    .listBullets span{ display:block; margin-top:6px; color:var(--muted); line-height:1.6; font-size:13.5px; }

    .serviceGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .serviceCard{
      border-radius: var(--radius);
      background: rgba(255,255,255,.68);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
      cursor: default;
    }
    .serviceCard:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
    .serviceTop{
      padding:16px 16px 0;
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    }
    .serviceIcon{
      width:40px; height:40px; border-radius:16px;
      background: rgba(47,191,134,.12);
      border:1px solid rgba(47,191,134,.22);
      display:flex; align-items:center; justify-content:center;
      color:#0b3b2a;
      flex:0 0 auto;
    }
    .serviceIcon.blue{ background: rgba(42,125,225,.10); border-color: rgba(42,125,225,.20); color:#114a9a; }
    .serviceIcon svg{ width:20px; height:20px; }
    .serviceBody{ padding:14px 16px 16px; }
    .serviceBody h3{ margin:0; font-size:15.5px; letter-spacing:-.2px; }
    .serviceBody p{ margin:10px 0 0; color:var(--muted); line-height:1.7; font-size:14px; }
    .serviceBody .miniList{
      margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;
    }
    .miniList li{
      display:flex; gap:8px; align-items:flex-start;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.5;
    }
    .miniList li svg{ width:16px; height:16px; color: var(--mint); margin-top:1px; flex:0 0 auto; }

    .scenarioGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:stretch;
    }
    .scenarioCard{
      border-radius: var(--radius);
      background: rgba(255,255,255,.68);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      padding:16px;
      overflow:hidden;
      position:relative;
    }
    .scenarioCard::after{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(520px 200px at 0% 0%, rgba(47,191,134,.16), transparent 55%),
        radial-gradient(520px 200px at 100% 0%, rgba(42,125,225,.13), transparent 55%);
      opacity:.8; pointer-events:none;
    }
    .scenarioCard > *{ position:relative; z-index:1; }
    .scenarioCard h3{ margin:0; font-size:16px; letter-spacing:-.2px; }
    .scenarioCard p{ margin:10px 0 0; color:var(--muted); line-height:1.7; font-size:14px; }
    .cloudTags{
      margin-top:14px;
      display:flex; flex-wrap:wrap; gap:8px;
    }
    .cloudTag{
      padding:9px 11px;
      border-radius:999px;
      background: rgba(255,255,255,.64);
      border:1px solid rgba(16,24,40,.10);
      color: var(--muted);
      font-weight:740;
      font-size:13px;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }
    .cloudTag:hover{
      transform: translateY(-2px);
      border-color: rgba(47,191,134,.24);
      background: rgba(47,191,134,.08);
      color:#0f3a2a;
    }

    .faqWrap{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    .faqItem{
      border-radius: var(--radius);
      background: rgba(255,255,255,.70);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      overflow:hidden;
    }
    details.faq{
      padding:0;
    }
    details.faq > summary{
      list-style:none;
      cursor:pointer;
      padding:14px 16px;
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      font-weight:850;
      letter-spacing:-.2px;
      outline:none;
    }
    details.faq > summary::-webkit-details-marker{ display:none; }
    details.faq > summary .q{
      font-size:14.5px;
      line-height:1.45;
    }
    .chev{
      width:34px; height:34px; border-radius:14px;
      border:1px solid rgba(16,24,40,.10);
      background: rgba(255,255,255,.60);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
      margin-top:-4px;
    }
    details[open].faq > summary .chev{
      transform: rotate(180deg);
      background: rgba(47,191,134,.10);
      border-color: rgba(47,191,134,.22);
    }
    details.faq > .faqBody{
      padding: 0 16px 14px;
      color: var(--muted);
      line-height: 1.75;
      font-size: 14px;
      border-top:1px solid rgba(16,24,40,.08);
      animation: faqIn .2s ease both;
    }
    @keyframes faqIn{
      from{ opacity:.0; transform: translateY(-4px); }
      to{ opacity:1; transform: translateY(0); }
    }

    .reviewGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .reviewCard{
      border-radius: var(--radius);
      background: rgba(255,255,255,.68);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      padding:16px;
      overflow:hidden;
      position:relative;
    }
    .reviewCard::after{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(520px 220px at 0% 0%, rgba(47,191,134,.13), transparent 58%),
        radial-gradient(520px 220px at 100% 0%, rgba(42,125,225,.10), transparent 60%);
      opacity:.85; pointer-events:none;
    }
    .reviewCard > *{ position:relative; z-index:1; }
    .reviewTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .reviewRole{
      display:flex; flex-direction:column; gap:6px;
    }
    .reviewRole strong{ font-size:15.5px; letter-spacing:-.2px; }
    .reviewRole span{ color:var(--muted); font-size:13.5px; font-weight:750; }
    .reviewText{
      color:var(--muted);
      line-height:1.75;
      font-size:14px;
      margin:10px 0 0;
    }

    .articleGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }
    .articleList{
      display:flex; flex-direction:column; gap:10px;
      margin-top: 2px;
    }
    .articleItem{
      display:flex; gap:12px; align-items:flex-start;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(16,24,40,.08);
      background: rgba(255,255,255,.65);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .articleItem:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(16,24,40,.10); border-color: rgba(16,24,40,.14); }
    .articleBadge{
      width:38px; height:38px; border-radius:16px;
      background: rgba(42,125,225,.10);
      border:1px solid rgba(42,125,225,.18);
      display:flex; align-items:center; justify-content:center;
      color:#114a9a; flex:0 0 auto;
    }
    .articleBadge svg{ width:18px; height:18px; }
    .articleBody{ flex:1; min-width:0; }
    .articleBody strong{
      display:block;
      font-size:14.5px;
      letter-spacing:-.2px;
      line-height:1.4;
      margin-top:2px;
    }
    .articleBody span{
      display:block;
      color:var(--muted);
      font-size:13.5px;
      margin-top:6px;
      line-height:1.5;
    }
    .articleLink{
      display:inline-flex; align-items:center; gap:8px;
      color:#0b3b2a; font-weight:850;
      margin-top:10px;
      font-size:13.5px;
    }
    .articleLink svg{ width:16px; height:16px; }
    .sideQuote{
      border-radius: var(--radius);
      border:1px solid rgba(16,24,40,.08);
      background: rgba(255,255,255,.66);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      overflow:hidden;
    }
    .sideQuote .quoteInner{ padding:16px; }
    .quoteInner h3{
      margin:0;
      font-size:16px;
      letter-spacing:-.2px;
    }
    .quoteInner p{
      margin:10px 0 0;
      color:var(--muted);
      line-height:1.75;
      font-size:14px;
    }
    .quoteStats{
      margin-top:14px;
      display:grid; grid-template-columns: 1fr 1fr; gap:10px;
    }
    .statBox{
      border-radius:16px;
      background: rgba(47,191,134,.10);
      border:1px solid rgba(47,191,134,.18);
      padding:12px 12px;
    }
    .statBox.blue{
      background: rgba(42,125,225,.10);
      border-color: rgba(42,125,225,.18);
    }
    .statBox strong{
      display:block; font-size:18px; letter-spacing:-.3px;
    }
    .statBox span{
      display:block; margin-top:6px; color:var(--muted); font-size:13.5px; line-height:1.4; font-weight:740;
    }

    .formGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    .formCard{
      border-radius: var(--radius);
      background: rgba(255,255,255,.70);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 18px 42px rgba(16,24,40,.06);
      overflow:hidden;
    }
    .formCard .formInner{ padding:16px; }
    form .row2{
      display:grid; grid-template-columns: 1fr 1fr; gap:12px;
    }
    label{
      display:block;
      font-weight:850;
      font-size:13.5px;
      color:#22303f;
      margin:0 0 8px;
    }
    input, select, textarea{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(16,24,40,.12);
      background: rgba(255,255,255,.78);
      color: var(--text);
      outline:none;
      transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
      font-size:14px;
    }
    textarea{ min-height: 112px; resize: vertical; }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(47,191,134,.45);
      box-shadow: 0 0 0 4px var(--focus);
    }
    .formActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top: 14px;
      justify-content:space-between;
    }
    .finePrint{
      color:var(--muted2);
      font-size:12.5px;
      line-height:1.5;
      max-width: 44ch;
    }

    .helpGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    .helpCard{
      border-radius: var(--radius);
      background: rgba(255,255,255,.68);
      border:1px solid rgba(16,24,40,.08);
      box-shadow: 0 14px 30px rgba(16,24,40,.05);
      overflow:hidden;
    }
    .helpCard .inner{ padding:16px; }
    .helpCard h3{ margin:0; font-size:16px; letter-spacing:-.2px; }
    .helpCard p{ margin:10px 0 0; color:var(--muted); line-height:1.75; font-size:14px; }

    .tagCloud{
      display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;
    }
    .tagCloud .t{
      padding:10px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.66);
      border:1px solid rgba(16,24,40,.10);
      color:var(--muted);
      font-weight:760;
      font-size:13px;
    }

    .networkGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:stretch;
    }
    .mapLike{
      border-radius: var(--radius);
      border:1px solid rgba(16,24,40,.08);
      background:
        radial-gradient(600px 220px at 15% 0%, rgba(47,191,134,.16), transparent 55%),
        radial-gradient(600px 220px at 85% 0%, rgba(42,125,225,.12), transparent 55%),
        rgba(255,255,255,.65);
      box-shadow: 0 18px 42px rgba(16,24,40,.06);
      overflow:hidden;
    }
    .mapLike .inner{ padding:16px; }
    .mapGrid{
      margin-top:12px;
      display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
    }
    .area{
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(16,24,40,.08);
      background: rgba(255,255,255,.66);
    }
    .area strong{ display:block; font-size:14.5px; letter-spacing:-.2px; }
    .area span{ display:block; margin-top:6px; color:var(--muted); font-size:13.5px; line-height:1.4; font-weight:740; }

    .footer{
      margin-top: 8px;
      background: #0f172a;
      color: #e5e7eb;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footerInner{
      padding: 22px 0 18px;
    }
    .footerGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }
    .footerBrand{
      display:flex; gap:12px; align-items:flex-start;
    }
    .footerBrand .fLogo{
      width:44px; height:44px; border-radius:16px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .footerBrand .fLogo svg{ width:22px; height:22px; color: #a7f3d0; }
    .footerBrand strong{ display:block; font-size:15px; letter-spacing:-.2px; }
    .footerBrand span{ display:block; margin-top:8px; color: rgba(229,231,235,.82); line-height:1.7; font-size:13.5px; }
    .footerLinks{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:flex-start;
    }
    .footerLinks a{
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(229,231,235,.88);
      font-weight:780;
      font-size:13.5px;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .footerLinks a:hover{
      transform: translateY(-2px);
      background: rgba(47,191,134,.14);
      border-color: rgba(47,191,134,.30);
      color:#eafff5;
    }
    .friendRow{
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.10);
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .friendTitle{
      color: rgba(229,231,235,.86);
      font-weight:850;
      font-size:13.5px;
      display:flex; align-items:center; gap:10px;
      white-space:nowrap;
    }
    .friendTitle .bar{
      width:10px; height:10px; border-radius:3px;
      background: linear-gradient(180deg, rgba(47,191,134,.95), rgba(42,125,225,.85));
      box-shadow: 0 0 0 4px rgba(47,191,134,.18);
    }
    .friendLinks{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
    }
    .friendLinks a{
      color: rgba(229,231,235,.90);
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      font-weight:780;
      font-size:13px;
      transition: transform .15s ease, background .15s ease;
    }
    .friendLinks a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); }
    .copyright{
      margin-top:14px;
      color: rgba(229,231,235,.72);
      font-size:12.5px;
      line-height:1.6;
      display:flex; gap:10px; flex-wrap:wrap;
      justify-content:space-between;
      align-items:center;
      padding-bottom: 10px;
    }
    .backTop{
      width:46px; height:46px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:#e5e7eb;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      position:fixed;
      right: 18px;
      bottom: 18px;
      z-index:60;
      opacity:0;
      transform: translateY(10px);
      pointer-events:none;
      transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
      outline:none;
    }
    .backTop.show{
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }
    .backTop:hover{
      background: rgba(47,191,134,.14);
      border-color: rgba(47,191,134,.30);
    }

    .floatCta{
      position:fixed;
      left: 14px;
      bottom: 14px;
      z-index: 59;
      display:flex;
      gap:10px;
      align-items:flex-end;
      pointer-events:none;
    }
    .floatCta .item{
      pointer-events:auto;
      border-radius:16px;
      border:1px solid rgba(16,24,40,.10);
      background: rgba(255,255,255,.82);
      box-shadow: 0 18px 42px rgba(16,24,40,.12);
      overflow:hidden;
    }
    .floatCta .call{
      display:flex; gap:10px; align-items:center;
      padding:10px 12px;
      max-width: 220px;
    }
    .floatCta .call strong{
      font-size:13.5px;
      letter-spacing:-.2px;
      display:block;
      margin-bottom:4px;
    }
    .floatCta .call span{
      color:var(--muted);
      font-size:12.5px; line-height:1.3;
      display:block;
      font-weight:740;
    }
    .floatCta .iconBox{
      width:40px; height:40px; border-radius:16px;
      background: rgba(47,191,134,.12);
      border:1px solid rgba(47,191,134,.22);
      display:flex; align-items:center; justify-content:center;
      color:#0b3b2a;
      flex:0 0 auto;
    }
    .floatCta .iconBox svg{ width:20px; height:20px; }
    .floatCta .qrcode{
      width: 118px;
      padding: 10px;
      display:flex; flex-direction:column; gap:8px;
      align-items:center;
    }
    .floatCta .qrcode img{
      width: 98px; height: 98px;
      object-fit: cover;
      border-radius:14px;
      border:1px solid rgba(16,24,40,.10);
      background:#fff;
    }
    .floatCta .qrcode span{
      color:var(--muted);
      font-size:12.5px;
      font-weight:820;
    }

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

    .srOnly{
      position:absolute;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    @media (max-width: 1020px){
      .heroGrid{ grid-template-columns: 1fr; }
      .metricGrid{ grid-template-columns: repeat(2, 1fr); }
      .steps{ grid-template-columns: repeat(2, 1fr); }
      .serviceGrid{ grid-template-columns: repeat(2, 1fr); }
      .scenarioGrid{ grid-template-columns: 1fr; }
      .faqWrap{ grid-template-columns: 1fr; }
      .reviewGrid{ grid-template-columns: repeat(2, 1fr); }
      .articleGrid{ grid-template-columns: 1fr; }
      .formGrid{ grid-template-columns: 1fr; }
      .helpGrid{ grid-template-columns: 1fr; }
      .networkGrid{ grid-template-columns: 1fr; }
      .cardsRow{ grid-template-columns: 1fr; }
      .footerGrid{ grid-template-columns: 1fr; }
      .footerLinks{ justify-content:flex-start; }
      .friendRow{ flex-direction:column; align-items:flex-start; }
      .friendLinks{ justify-content:flex-start; }
    }
    @media (max-width: 860px){
      .navLinks{ display:none; }
      .navCta .btnPrimary{ display:none; }
      .hamburger{ display:flex; }
      .mobilePanel.show{ display:block; }
      .heroTitle{ font-size:28px; }
      .reviewGrid{ grid-template-columns: 1fr; }
      .serviceGrid{ grid-template-columns: 1fr; }
      .metricGrid{ grid-template-columns: 1fr 1fr; }
      .compareTable{ min-width: 650px; }
      .floatCta .qrcode{ display:none; }
      .floatCta{ left: 10px; bottom: 10px; }
    }
    @media (prefers-reduced-motion: reduce){
      .reveal{ transition:none; opacity:1; transform:none; }
      .btn, .metric, .step, .serviceCard, .articleItem, .quickItem, .ghostLink{ transition:none; }
      details.faq > .faqBody{ animation:none; }
      html{ scroll-behavior:auto; }
    }