:root{
      --bg0:#0b0f1a;
      --bg1:#ffffff;
      --ink:#14151b;
      --muted:#5a6070;
      --muted2:#7b8193;
      --line:rgba(20,21,27,.10);
      --card:rgba(255,255,255,.74);
      --card2:#ffffff;
      --shadow:0 18px 45px rgba(16,24,40,.10);
      --shadow2:0 10px 25px rgba(17,24,39,.10);
      --radius:18px;
      --radius2:26px;
      --primary:#2a55ff;
      --primary2:#ff2aa6;
      --primary3:#00c2ff;
      --warn:#ff6a00;
      --good:#10b981;
      --focus:rgba(42,85,255,.20);
      --chipBg:rgba(20,21,27,.06);
      --footerBg:#0f1324;
      --footerInk:#eaf0ff;
      --footerMuted:rgba(234,240,255,.72);
      --accentGrad:linear-gradient(110deg, rgba(42,85,255,.95) 0%, rgba(255,42,166,.95) 55%, rgba(0,194,255,.95) 100%);
      --accentGrad2:linear-gradient(120deg, rgba(255,42,166,.95) 0%, rgba(42,85,255,.95) 52%, rgba(0,194,255,.95) 100%);
      --softGrad:radial-gradient(900px 420px at 20% -10%, rgba(42,85,255,.24), rgba(42,85,255,0) 55%),
                 radial-gradient(900px 420px at 75% 0%, rgba(255,42,166,.20), rgba(255,42,166,0) 58%),
                 radial-gradient(720px 360px at 55% 35%, rgba(0,194,255,.16), rgba(0,194,255,0) 60%),
                 linear-gradient(#fff, #fff);
      --heroGrad:radial-gradient(900px 520px at 20% 20%, rgba(255,42,166,.22), rgba(255,42,166,0) 60%),
                 radial-gradient(900px 520px at 85% 10%, rgba(42,85,255,.25), rgba(42,85,255,0) 56%),
                 radial-gradient(720px 420px at 55% 55%, rgba(0,194,255,.20), rgba(0,194,255,0) 60%),
                 linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,252,255,1) 60%, rgba(255,255,255,1) 100%);
      --container:1140px;
      --pad:20px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color:var(--ink);
      background:var(--softGrad);
      line-height:1.6;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; height:auto; display:block}
    .container{
      width:100%;
      max-width:var(--container);
      margin:0 auto;
      padding:0 var(--pad);
    }

    .skip{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip:focus{
      left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
      background:#fff; border:1px solid var(--line); border-radius:12px; z-index:9999;
      box-shadow:var(--shadow2);
    }

    header{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.72);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(20,21,27,.08);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:14px 0;
    }
    .brand{
      display:flex; align-items:center; gap:12px; min-width: 220px;
    }
    .brand img{
      width:40px; height:40px; border-radius:12px;
      box-shadow:0 10px 22px rgba(42,85,255,.18);
    }
    .brand .brandText{
      display:flex; flex-direction:column; gap:2px;
    }
    .brand .brandName{
      font-weight:850; letter-spacing:.2px;
      font-size:15px;
      color:#0f1527;
    }
    .brand .brandSub{
      font-size:12px; color:var(--muted);
      white-space:nowrap;
    }

    nav .navLinks{
      display:flex; gap:18px; align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navLinks a{
      font-size:13px; color:#1a1b22;
      padding:8px 10px; border-radius:12px;
      border:1px solid transparent;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .navLinks a:hover{
      background:rgba(42,85,255,.08);
      border-color:rgba(42,85,255,.16);
      transform: translateY(-1px);
    }

    .navActions{display:flex; align-items:center; gap:10px;}
    .btn{
      appearance:none; border:0;
      padding:10px 14px; border-radius:14px;
      font-weight:750; cursor:pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
      display:inline-flex; align-items:center; gap:10px;
      user-select:none;
      white-space:nowrap;
    }
    .btn:focus{outline:none; box-shadow:0 0 0 4px var(--focus);}
    .btnPrimary{
      color:#fff;
      background:var(--accentGrad);
      box-shadow:0 14px 35px rgba(42,85,255,.18);
    }
    .btnPrimary:hover{transform: translateY(-1px); box-shadow:0 18px 45px rgba(42,85,255,.24);}
    .btnGhost{
      background:#fff;
      border:1px solid rgba(20,21,27,.12);
      color:#14151b;
    }
    .btnGhost:hover{transform: translateY(-1px); border-color:rgba(42,85,255,.25); box-shadow:0 12px 30px rgba(17,24,39,.08);}
    .btnSmall{padding:9px 12px; border-radius:12px; font-size:13px;}
    .iconDot{
      width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.92);
      box-shadow:0 0 0 6px rgba(255,255,255,.18);
    }

    .mobileToggle{
      display:none;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(20,21,27,.12);
      background:#fff;
      cursor:pointer;
      align-items:center; justify-content:center;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .mobileToggle:hover{transform: translateY(-1px); box-shadow:0 12px 30px rgba(17,24,39,.08); border-color:rgba(42,85,255,.25);}
    .hamburger{
      width:18px; height:12px; position:relative;
    }
    .hamburger span{
      position:absolute; left:0; right:0; height:2px; background:#14151b; border-radius:999px;
      transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }
    .hamburger span:nth-child(1){top:0}
    .hamburger span:nth-child(2){top:5px}
    .hamburger span:nth-child(3){top:10px}
    .mobileToggle[aria-expanded="true"] .hamburger span:nth-child(1){top:5px; transform: rotate(45deg);}
    .mobileToggle[aria-expanded="true"] .hamburger span:nth-child(2){opacity:0}
    .mobileToggle[aria-expanded="true"] .hamburger span:nth-child(3){top:5px; transform: rotate(-45deg);}

    .mobilePanel{
      display:none;
      padding:0 0 14px;
    }
    .mobilePanelInner{
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.86);
      backdrop-filter: blur(8px);
      border-radius:18px;
      padding:12px;
      box-shadow:0 16px 45px rgba(16,24,40,.10);
    }
    .mobilePanel a{
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px; border-radius:14px;
      border:1px solid transparent;
      font-size:13px;
      margin-bottom:8px;
    }
    .mobilePanel a:last-child{margin-bottom:0}
    .mobilePanel a:hover{
      background:rgba(42,85,255,.08);
      border-color:rgba(42,85,255,.16);
    }
    .chev{opacity:.55}

    .hero{
      padding:28px 0 18px;
      background:var(--heroGrad);
    }
    .heroGrid{
      display:grid; grid-template-columns: 1.15fr .85fr;
      gap:18px; align-items:stretch;
      padding:28px 0 18px;
    }
    .heroLeft{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
      box-shadow: var(--shadow);
      padding:26px;
      overflow:hidden;
      position:relative;
    }
    .heroLeft:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(600px 240px at 10% 0%, rgba(42,85,255,.18), rgba(42,85,255,0) 60%),
        radial-gradient(520px 240px at 90% 20%, rgba(255,42,166,.18), rgba(255,42,166,0) 60%),
        radial-gradient(520px 240px at 50% 65%, rgba(0,194,255,.14), rgba(0,194,255,0) 62%);
      pointer-events:none;
      filter:saturate(1.2);
    }
    .heroLeft > *{position:relative; z-index:1}
    .badgeRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
    .badge{
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.70);
      padding:9px 12px;
      border-radius:999px;
      font-size:13px; color:#1a1b22;
    }
    .badge .spark{
      width:12px; height:12px; border-radius:4px;
      background:var(--accentGrad2);
      box-shadow:0 12px 25px rgba(255,42,166,.22);
    }
    h1{
      margin:0;
      font-size:36px;
      letter-spacing:-.8px;
      line-height:1.15;
      font-weight:930;
    }
    .lead{
      margin:14px 0 18px;
      color:var(--muted);
      font-size:15px;
      max-width:62ch;
    }
    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:4px;
    }
    .metaRow{
      display:flex; gap:16px; flex-wrap:wrap;
      margin-top:18px;
      padding-top:16px;
      border-top:1px dashed rgba(20,21,27,.16);
    }
    .metaItem{
      display:flex; flex-direction:column; gap:2px;
      min-width: 140px;
    }
    .metaItem .k{
      font-weight:900; letter-spacing:-.2px;
      font-size:16px;
    }
    .metaItem .v{
      font-size:12.5px; color:var(--muted2);
    }

    .heroRight{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.50));
      box-shadow: var(--shadow2);
      padding:18px;
      display:flex; flex-direction:column; gap:12px;
      overflow:hidden;
      position:relative;
    }
    .heroRight:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        conic-gradient(from 210deg at 50% 50%, rgba(42,85,255,.20), rgba(255,42,166,.16), rgba(0,194,255,.16), rgba(42,85,255,.20));
      opacity:.35;
      pointer-events:none;
      filter:saturate(1.2);
    }
    .heroRight > *{position:relative; z-index:1}
    .rightTitle{
      display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
      padding:4px 4px 0;
    }
    .rightTitle h2{
      margin:0; font-size:15px; font-weight:880;
      letter-spacing:-.2px;
    }
    .rightTitle p{margin:4px 0 0; font-size:12.5px; color:var(--muted2);}
    .chips{
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .chip{
      font-size:12.5px;
      border-radius:999px;
      background:rgba(20,21,27,.06);
      padding:8px 10px;
      color:#1b1c24;
      border:1px solid rgba(20,21,27,.08);
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .chip:hover{transform: translateY(-1px); border-color:rgba(42,85,255,.22); background:rgba(42,85,255,.08);}

    .indicatorGrid{
      display:grid; grid-template-columns: 1fr 1fr;
      gap:12px;
      margin-top:2px;
    }
    .stat{
      border-radius:16px;
      padding:14px 12px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(20,21,27,.10);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .stat:hover{transform: translateY(-2px); box-shadow:0 18px 45px rgba(16,24,40,.10);}
    .stat .num{
      font-weight:930; font-size:20px; letter-spacing:-.4px;
      display:flex; align-items:baseline; gap:8px;
    }
    .stat .num span{
      font-size:12px; font-weight:800; color:var(--muted2);
      letter-spacing:.2px;
    }
    .stat .label{margin-top:6px; font-size:12.5px; color:var(--muted2);}

    .miniTimeline{
      border-radius:16px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      padding:12px;
      margin-top:auto;
    }
    .miniTimelineHeader{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:8px;
    }
    .miniTimelineHeader .t{font-weight:900; font-size:13px;}
    .tagPill{
      font-size:12px; color:#0f1527; background:rgba(42,85,255,.10);
      border:1px solid rgba(42,85,255,.18);
      padding:6px 10px; border-radius:999px;
    }
    .stepsRow{
      display:grid; grid-template-columns: repeat(3, 1fr);
      gap:10px;
    }
    .tStep{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 10px;
      border-radius:14px;
      background:rgba(20,21,27,.04);
      border:1px solid rgba(20,21,27,.06);
      transition: transform .18s ease;
    }
    .tStep:hover{transform: translateY(-2px);}
    .tStep .dot{
      width:12px; height:12px; border-radius:4px;
      background:var(--accentGrad);
      box-shadow:0 12px 25px rgba(42,85,255,.18);
      margin-top:2px;
      flex:0 0 auto;
    }
    .tStep .sText{display:flex; flex-direction:column; gap:2px;}
    .tStep b{font-size:12.5px;}
    .tStep small{color:var(--muted2); font-size:12px;}

    section{
      padding:22px 0;
    }
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
      margin-bottom:14px;
    }
    .sectionHead h2{
      margin:0;
      font-size:22px;
      letter-spacing:-.4px;
      font-weight:930;
    }
    .sectionHead p{
      margin:0;
      color:var(--muted);
      font-size:13.5px;
      max-width:58ch;
    }
    .divider{
      height:1px; background:rgba(20,21,27,.08);
      margin:10px 0 0;
    }

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

    .card{
      border-radius:var(--radius);
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      box-shadow:0 14px 40px rgba(16,24,40,.06);
      padding:16px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      overflow:hidden;
    }
    .card:hover{
      transform: translateY(-3px);
      box-shadow:0 20px 55px rgba(16,24,40,.10);
      border-color: rgba(42,85,255,.20);
    }
    .cardTitle{
      display:flex; align-items:center; gap:12px;
      margin-bottom:8px;
    }
    .cardIcon{
      width:42px; height:42px;
      border-radius:14px;
      background:rgba(42,85,255,.10);
      border:1px solid rgba(42,85,255,.18);
      display:flex; align-items:center; justify-content:center;
    }
    .cardIcon svg{width:20px; height:20px; color:#1a2b70;}
    .card h3{
      margin:0;
      font-size:15px;
      font-weight:920;
      letter-spacing:-.2px;
    }
    .card p{margin:0; color:var(--muted); font-size:13.5px;}

    .list{
      margin:10px 0 0;
      padding:0; list-style:none;
      display:flex; flex-direction:column; gap:10px;
    }
    .list li{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 10px;
      border-radius:14px;
      border:1px solid rgba(20,21,27,.08);
      background:rgba(20,21,27,.03);
    }
    .list .check{
      width:22px; height:22px; border-radius:8px;
      background:rgba(16,185,129,.12);
      border:1px solid rgba(16,185,129,.22);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
      margin-top:1px;
    }
    .list .check svg{width:14px; height:14px; color:#0f7a5a;}
    .list b{font-size:13.5px;}
    .list small{display:block; color:var(--muted2); font-size:12.5px; margin-top:2px;}

    .process{
      position:relative;
      overflow:hidden;
    }
    .process .row{
      display:grid; grid-template-columns: repeat(4, 1fr);
      gap:12px;
    }
    .stepCard{
      border-radius:18px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.72);
      padding:16px 14px;
      transition: transform .18s ease, border-color .18s ease;
      display:flex; flex-direction:column; gap:10px;
      min-height: 180px;
    }
    .stepCard:hover{transform: translateY(-3px); border-color:rgba(42,85,255,.22);}
    .stepTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    }
    .stepNo{
      font-weight:950; letter-spacing:-.4px; font-size:26px;
      background:var(--accentGrad);
      -webkit-background-clip:text; background-clip:text;
      color:transparent;
    }
    .stepBadge{
      font-size:12px; color:#0f1527;
      background:rgba(255,42,166,.10);
      border:1px solid rgba(255,42,166,.18);
      padding:6px 10px; border-radius:999px;
      white-space:nowrap;
    }
    .stepCard h3{margin:0; font-size:15px; font-weight:930;}
    .stepCard p{margin:0; color:var(--muted); font-size:13.3px;}

    .compareWrap{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
      box-shadow:var(--shadow2);
      overflow:hidden;
    }
    .compareHeader{
      padding:16px 16px 0;
    }
    .compareHeader .topLine{
      display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
    }
    .ratingPill{
      display:flex; align-items:center; gap:10px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.80);
      padding:10px 12px; border-radius:16px;
      box-shadow:0 12px 25px rgba(16,24,40,.06);
    }
    .stars{
      display:flex; gap:4px; align-items:center;
    }
    .star{
      width:18px; height:18px;
      background:var(--accentGrad2);
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21z"/>') center/contain no-repeat;
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21z"/>') center/contain no-repeat;
      opacity:.98;
    }
    .ratingText b{font-size:14px;}
    .ratingText small{display:block; color:var(--muted2); font-size:12.5px; margin-top:2px;}
    .compareHeader p{margin:10px 0 0; color:var(--muted); font-size:13.5px;}

    .compareTableWrap{
      padding:12px 12px 16px;
    }
    .compareTable{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius:16px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.78);
    }
    .compareTable th,
    .compareTable td{
      text-align:left;
      padding:12px 12px;
      border-bottom:1px solid rgba(20,21,27,.08);
      font-size:13.5px;
      vertical-align:top;
    }
    .compareTable th{
      background:linear-gradient(90deg, rgba(42,85,255,.08), rgba(255,42,166,.06));
      font-weight:950;
      color:#11131a;
      border-bottom:1px solid rgba(20,21,27,.10);
    }
    .compareTable tr:last-child td{border-bottom:0}
    .highlightCol{
      background:rgba(42,85,255,.06);
    }
    .score{
      font-weight:950;
      display:flex; align-items:center; gap:10px;
    }
    .score .badgeScore{
      font-weight:950; font-size:22px;
      letter-spacing:-.6px;
      background:var(--accentGrad);
      -webkit-background-clip:text; background-clip:text;
      color:transparent;
    }
    .kpi{
      display:flex; flex-direction:column; gap:6px;
    }
    .kpiItem{
      display:flex; align-items:flex-start; gap:10px;
      padding:8px 10px;
      border-radius:14px;
      border:1px solid rgba(20,21,27,.08);
      background:rgba(20,21,27,.03);
    }
    .kpiItem .miniMark{
      width:18px; height:18px; border-radius:7px;
      background:rgba(42,85,255,.10);
      border:1px solid rgba(42,85,255,.18);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto; margin-top:1px;
    }
    .kpiItem .miniMark svg{width:12px; height:12px; color:#183a99;}
    .kpiItem b{font-size:13.2px}
    .kpiItem small{display:block; color:var(--muted2); font-size:12.4px; margin-top:2px;}

    .casesGrid{
      display:grid; grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:stretch;
    }
    .caseCard{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      box-shadow:0 14px 40px rgba(16,24,40,.06);
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      display:flex; flex-direction:column;
    }
    .caseCard:hover{transform: translateY(-3px); box-shadow:0 22px 60px rgba(16,24,40,.12); border-color:rgba(42,85,255,.22);}
    .caseTop{
      padding:16px 16px 0;
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    }
    .caseTop .left{
      display:flex; flex-direction:column; gap:8px;
    }
    .caseTop h3{
      margin:0; font-size:16px; font-weight:940; letter-spacing:-.25px;
    }
    .caseTop p{margin:0; color:var(--muted); font-size:13.3px;}
    .caseMeta{
      display:flex; gap:8px; flex-wrap:wrap;
      margin-top:10px;
    }
    .pill{
      font-size:12px; padding:7px 10px; border-radius:999px;
      background:rgba(20,21,27,.06);
      border:1px solid rgba(20,21,27,.08);
      color:#1b1c24;
      white-space:nowrap;
    }
    .pillHot{
      background:rgba(255,42,166,.10);
      border-color:rgba(255,42,166,.18);
    }
    .caseBody{
      padding:14px 16px 16px;
      display:grid; grid-template-columns: 1fr 1fr;
      gap:12px;
      align-items:stretch;
    }
    .imgFrame{
      border-radius:18px;
      border:1px solid rgba(20,21,27,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55));
      overflow:hidden;
      position:relative;
      min-height: 170px;
    }
    .imgFrame img{
      width:100%; height:100%;
      object-fit:cover;
      filter: saturate(1.08) contrast(1.02);
      transform: scale(1.02);
    }
    .imgFrame:after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.10) 70%, rgba(255,255,255,.18) 100%);
      pointer-events:none;
    }
    .caseList{
      display:flex; flex-direction:column; gap:10px;
    }
    .caseList .li{
      padding:10px 10px;
      border-radius:16px;
      border:1px solid rgba(20,21,27,.08);
      background:rgba(20,21,27,.03);
    }
    .caseList b{font-size:13.3px;}
    .caseList small{display:block; color:var(--muted2); font-size:12.5px; margin-top:2px;}

    .articles{
      display:grid; grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:start;
    }
    .articleCard{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      box-shadow:0 14px 40px rgba(16,24,40,.06);
      overflow:hidden;
    }
    .articleCard .inner{padding:16px;}
    .articleCard h3{margin:0 0 6px; font-size:16px; font-weight:940; letter-spacing:-.25px;}
    .articleCard p{margin:0; color:var(--muted); font-size:13.3px;}
    .articleList{
      margin:12px 0 0;
      padding:0; list-style:none;
      display:flex; flex-direction:column; gap:10px;
    }
    .articleItem{
      display:flex; gap:12px; align-items:flex-start;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(20,21,27,.08);
      background:rgba(20,21,27,.03);
      transition: transform .18s ease, border-color .18s ease;
    }
    .articleItem:hover{transform: translateY(-2px); border-color:rgba(42,85,255,.22);}
    .articleItem .thumb{
      width:38px; height:38px; border-radius:14px;
      background:rgba(42,85,255,.10);
      border:1px solid rgba(42,85,255,.18);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .articleItem .thumb svg{width:18px; height:18px; color:#183a99;}
    .articleItem b{font-size:13.6px;}
    .articleItem small{display:block; color:var(--muted2); margin-top:2px; font-size:12.5px;}
    .articleItem a{margin-left:auto; font-size:13px; font-weight:850; color:#1a2b70; padding:8px 10px; border-radius:12px; border:1px solid rgba(42,85,255,.18); background:rgba(42,85,255,.08);}
    .articleItem a:hover{transform: translateY(-1px);}

    .tagsCloud{
      padding:16px;
    }
    .cloudTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      margin-bottom:10px;
    }
    .cloudTop h3{margin:0; font-size:16px; font-weight:940;}
    .cloudTop p{margin:6px 0 0; color:var(--muted); font-size:13.3px; max-width:40ch;}
    .tagGrid{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top:12px;
    }
    .tagLink{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 11px; border-radius:999px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.70);
      font-size:13px;
      color:#161722;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }
    .tagLink:hover{transform: translateY(-2px); border-color:rgba(255,42,166,.22); background:rgba(255,42,166,.08);}
    .tagLink .bubble{
      width:10px; height:10px; border-radius:4px;
      background:var(--accentGrad2);
      box-shadow:0 12px 25px rgba(255,42,166,.20);
    }

    .formWrap{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60));
      box-shadow:var(--shadow2);
      overflow:hidden;
    }
    .formGrid{
      display:grid; grid-template-columns: 1fr 1fr;
      gap:0;
      align-items:stretch;
    }
    .formLeft{
      padding:18px;
      border-right:1px solid rgba(20,21,27,.08);
      background:radial-gradient(700px 240px at 20% 0%, rgba(42,85,255,.15), rgba(42,85,255,0) 55%),
                 radial-gradient(600px 240px at 80% 20%, rgba(255,42,166,.12), rgba(255,42,166,0) 55%),
                 rgba(255,255,255,.6);
    }
    .formLeft h3{margin:0; font-size:16px; font-weight:950; letter-spacing:-.25px;}
    .formLeft p{margin:10px 0 0; color:var(--muted); font-size:13.5px;}
    .formFeatures{
      margin-top:14px;
      display:flex; flex-direction:column; gap:10px;
    }
    .featureRow{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(20,21,27,.08);
      background:rgba(20,21,27,.03);
    }
    .featureRow .ico{
      width:30px; height:30px; border-radius:12px;
      background:rgba(0,194,255,.10);
      border:1px solid rgba(0,194,255,.18);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
      margin-top:2px;
    }
    .featureRow .ico svg{width:16px; height:16px; color:#0b6b85;}
    .featureRow b{font-size:13.5px;}
    .featureRow small{display:block; color:var(--muted2); font-size:12.5px; margin-top:2px;}

    form{
      padding:18px;
      display:flex; flex-direction:column; gap:12px;
    }
    label{
      font-size:12.5px;
      color:var(--muted2);
      font-weight:700;
      display:block;
      margin-bottom:6px;
    }
    input, select, textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(20,21,27,.14);
      background:rgba(255,255,255,.86);
      padding:12px 12px;
      font-size:14px;
      color:#11131a;
      outline:none;
      transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
    }
    textarea{min-height:110px; resize:vertical}
    input:focus, select:focus, textarea:focus{
      border-color:rgba(42,85,255,.42);
      box-shadow:0 0 0 4px rgba(42,85,255,.18);
    }
    .formRow{
      display:grid; grid-template-columns: 1fr 1fr; gap:12px;
    }
    .formActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:4px;
    }
    .hint{
      color:var(--muted2);
      font-size:12.5px;
      margin:0;
    }

    .reviewsGrid{
      display:grid; grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .review{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      box-shadow:0 14px 40px rgba(16,24,40,.06);
      padding:16px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .review:hover{transform: translateY(-3px); box-shadow:0 22px 60px rgba(16,24,40,.12); border-color:rgba(255,42,166,.22);}
    .reviewTop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
    .avatar{
      width:44px; height:44px; border-radius:16px;
      background:rgba(255,42,166,.10);
      border:1px solid rgba(255,42,166,.18);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .avatar svg{width:20px; height:20px; color:#8a1f61;}
    .who b{font-size:14px;}
    .who small{display:block; color:var(--muted2); font-size:12.5px; margin-top:2px;}
    .reviewText{
      color:var(--muted);
      font-size:13.6px;
      margin:0;
    }
    .reviewBottom{
      margin-top:12px;
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .miniPill{
      font-size:12px; padding:7px 10px; border-radius:999px;
      background:rgba(20,21,27,.06);
      border:1px solid rgba(20,21,27,.08);
      color:#161722;
    }
    .miniPill.hot{
      background:rgba(42,85,255,.10);
      border-color:rgba(42,85,255,.18);
    }

    .faqWrap{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      box-shadow:var(--shadow2);
      overflow:hidden;
    }
    .faqInner{padding:12px;}
    details.faq{
      border-radius:18px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.78);
      margin-bottom:10px;
      overflow:hidden;
      transition: border-color .15s ease, transform .15s ease;
    }
    details.faq[open]{border-color:rgba(42,85,255,.24)}
    details.faq:last-child{margin-bottom:0}
    summary{
      list-style:none;
      cursor:pointer;
      padding:14px 14px;
      display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
      font-weight:900;
      letter-spacing:-.2px;
      font-size:14px;
    }
    summary::-webkit-details-marker{display:none}
    .sumLeft{display:flex; gap:12px; align-items:flex-start;}
    .qMark{
      width:28px; height:28px;
      border-radius:12px;
      background:rgba(42,85,255,.10);
      border:1px solid rgba(42,85,255,.18);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto; margin-top:1px;
    }
    .qMark svg{width:16px; height:16px; color:#183a99;}
    .sumRight{
      display:flex; align-items:center; gap:10px; margin-top:2px;
      color:var(--muted2);
      font-weight:800;
    }
    .caret{
      width:10px; height:10px; border-right:2px solid rgba(20,21,27,.55); border-bottom:2px solid rgba(20,21,27,.55);
      transform: rotate(45deg);
      transition: transform .18s ease;
      margin-right:2px;
    }
    details[open] .caret{transform: rotate(-135deg)}
    .faqContent{
      padding:0 14px 14px;
      color:var(--muted);
      font-size:13.6px;
    }

    .anchorGap{scroll-margin-top:92px;}

    .networkGrid{
      display:grid; grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:stretch;
    }
    .networkCard{
      border-radius:var(--radius2);
      border:1px solid rgba(20,21,27,.10);
      background:rgba(255,255,255,.74);
      box-shadow:0 14px 40px rgba(16,24,40,.06);
      padding:16px;
      overflow:hidden;
      position:relative;
    }
    .networkCard:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(520px 220px at 10% 10%, rgba(255,42,166,.14), rgba(255,42,166,0) 60%),
        radial-gradient(520px 220px at 90% 30%, rgba(42,85,255,.14), rgba(42,85,255,0) 60%),
        radial-gradient(520px 220px at 55% 90%, rgba(0,194,255,.12), rgba(0,194,255,0) 60%);
      pointer-events:none;
    }
    .networkCard > *{position:relative; z-index:1}
    .networkCard h3{margin:0 0 6px; font-size:16px; font-weight:950; letter-spacing:-.25px;}
    .networkCard p{margin:0; color:var(--muted); font-size:13.5px;}
    .networkList{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
    .networkList li{
      padding:12px 12px;
      border-radius:18px;
      border:1px solid rgba(20,21,27,.08);
      background:rgba(20,21,27,.03);
      display:flex; gap:12px; align-items:flex-start;
    }
    .networkList .badgeNet{
      width:36px; height:36px; border-radius:14px;
      background:rgba(0,194,255,.10);
      border:1px solid rgba(0,194,255,.18);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto; margin-top:2px;
    }
    .networkList .badgeNet svg{width:18px; height:18px; color:#0b6b85;}
    .networkList b{font-size:13.6px;}
    .networkList small{display:block; color:var(--muted2); font-size:12.5px; margin-top:2px;}

    .footer{
      margin-top:8px;
      background:var(--footerBg);
      color:var(--footerInk);
      border-top:1px solid rgba(255,255,255,.08);
    }
    footer .footTop{
      padding:26px 0 18px;
    }
    .footGrid{
      display:grid; grid-template-columns: 1.2fr .8fr;
      gap:14px;
      align-items:start;
    }
    .footBrand{
      display:flex; flex-direction:column; gap:12px;
    }
    .footBrand .row{
      display:flex; align-items:center; gap:12px;
    }
    .footBrand img{
      width:44px; height:44px; border-radius:16px;
      background:#fff;
      padding:6px;
      box-shadow:0 16px 40px rgba(42,85,255,.20);
      border:1px solid rgba(255,255,255,.12);
    }
    .footBrand b{font-size:16px}
    .footBrand p{margin:0; color:var(--footerMuted); font-size:13.5px;}
    .footCols{
      display:grid; grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:6px;
    }
    .footCol{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      border-radius:18px;
      padding:14px;
    }
    .footCol h4{
      margin:0 0 10px;
      font-weight:950; font-size:13.5px;
      color:#f2f6ff;
      letter-spacing:-.2px;
    }
    .footLinks{
      display:flex; flex-direction:column; gap:9px;
    }
    .footLinks a{
      color:var(--footerMuted);
      font-size:13px;
      padding:6px 0;
      border-radius:10px;
      transition: color .15s ease, transform .15s ease;
    }
    .footLinks a:hover{color:#fff; transform: translateY(-1px);}
    .footBottom{
      padding:14px 0 22px;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footBottom .bottomRow{
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
      color:var(--footerMuted);
      font-size:12.5px;
    }
    .linkRow{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    }
    .sysLink{
      color:rgba(234,240,255,.86);
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.05);
      padding:8px 10px;
      border-radius:999px;
      font-weight:850;
      font-size:12.5px;
    }
    .sysLink:hover{transform: translateY(-1px);}

    .floatChat{
      position:fixed;
      right:16px;
      bottom:18px;
      z-index:70;
      display:flex; flex-direction:column; gap:10px;
    }
    .floatBtn{
      border-radius:18px;
      border:1px solid rgba(20,21,27,.12);
      background:rgba(255,255,255,.86);
      backdrop-filter: blur(8px);
      box-shadow:0 18px 50px rgba(16,24,40,.16);
      padding:10px 12px;
      cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      width:190px;
      user-select:none;
    }
    .floatBtn:hover{transform: translateY(-3px); border-color:rgba(42,85,255,.26);}
    .floatBtn .left{
      display:flex; align-items:center; gap:12px;
    }
    .floatBtn .bubble{
      width:40px; height:40px; border-radius:16px;
      background:var(--accentGrad2);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 16px 40px rgba(255,42,166,.20);
    }
    .floatBtn .bubble svg{width:18px; height:18px; color:#fff;}
    .floatBtn b{font-size:13.8px;}
    .floatBtn small{display:block; color:var(--muted2); font-size:12.2px; margin-top:2px;}
    .floatPopover{
      position:absolute;
      right:0;
      bottom:64px;
      width:250px;
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(20,21,27,.12);
      background:rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      box-shadow:0 26px 70px rgba(16,24,40,.18);
      transform-origin: bottom right;
      opacity:0; pointer-events:none;
      transform: translateY(8px) scale(.98);
      transition: opacity .15s ease, transform .15s ease;
    }
    .floatChat[data-open="true"] .floatPopover{
      opacity:1; pointer-events:auto;
      transform: translateY(0) scale(1);
    }
    .floatPopover h4{
      margin:0 0 8px; font-size:13.5px; font-weight:950;
    }
    .qrcodeFrame{
      display:grid; grid-template-columns: 92px 1fr; gap:12px; align-items:center;
      border-radius:16px;
      border:1px solid rgba(20,21,27,.10);
      background:rgba(20,21,27,.03);
      padding:10px;
    }
    .qrcodeFrame img{
      width:92px; height:92px;
      border-radius:14px;
      border:1px solid rgba(20,21,27,.12);
      object-fit:cover;
    }
    .qrcodeFrame p{margin:0; color:var(--muted); font-size:12.8px;}
    .qrcodeActions{
      margin-top:10px;
      display:flex; gap:10px; flex-wrap:wrap;
    }

    .toTop{
      position:fixed;
      right:16px;
      bottom:140px;
      z-index:69;
      width:44px; height:44px;
      border-radius:16px;
      border:1px solid rgba(20,21,27,.12);
      background:rgba(255,255,255,.86);
      backdrop-filter: blur(8px);
      box-shadow:0 18px 50px rgba(16,24,40,.12);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      transition: transform .18s ease, opacity .18s ease;
      opacity:0; pointer-events:none;
    }
    .toTop.show{opacity:1; pointer-events:auto;}
    .toTop:hover{transform: translateY(-3px);}

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

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

    @media (max-width: 980px){
      .heroGrid{grid-template-columns: 1fr; }
      .grid3{grid-template-columns: 1fr 1fr;}
      .process .row{grid-template-columns: 1fr 1fr;}
      .articles{grid-template-columns: 1fr;}
      .casesGrid{grid-template-columns: 1fr;}
      .caseBody{grid-template-columns: 1fr;}
      .reviewsGrid{grid-template-columns: 1fr 1fr;}
      .networkGrid{grid-template-columns: 1fr;}
      .formGrid{grid-template-columns: 1fr;}
      .formLeft{border-right:0; border-bottom:1px solid rgba(20,21,27,.08);}
      .floatChat{right:12px; bottom:16px;}
      .floatBtn{width:176px;}
    }
    @media (max-width: 720px){
      :root{--pad:14px}
      .navLinks{display:none}
      .mobileToggle{display:flex}
      .mobilePanel{display:block}
      header{border-bottom:1px solid rgba(20,21,27,.08)}
      .heroLeft{padding:18px}
      h1{font-size:28px}
      .grid3{grid-template-columns: 1fr;}
      .grid2{grid-template-columns: 1fr;}
      .process .row{grid-template-columns: 1fr;}
      .reviewsGrid{grid-template-columns: 1fr;}
      .indicatorGrid{grid-template-columns: 1fr 1fr;}
      .stepsRow{grid-template-columns: 1fr 1fr 1fr;}
      .formRow{grid-template-columns: 1fr;}
      footer .footTop{padding:20px 0 14px;}
      .footGrid{grid-template-columns: 1fr;}
      .footCols{grid-template-columns: 1fr 1fr;}
      .floatChat{gap:8px}
      .toTop{right:12px; bottom:126px}
      .compareTableWrap{padding:10px}
      .compareHeader{padding:14px 14px 0}
    }