:root{
      --bg:#fbfaf7;
      --panel:#ffffff;
      --text:#1f2937;
      --muted:#5b6472;
      --border:rgba(15, 23, 42, .10);
      --shadow: 0 14px 40px rgba(17, 24, 39, .10);
      --shadow-sm: 0 10px 24px rgba(17, 24, 39, .10);
      --radius: 18px;
      --radius-sm: 12px;
      --brand1:#7c3aed;
      --brand2:#06b6d4;
      --brand3:#f59e0b;
      --brand4:#10b981;
      --btn:#111827;
      --btnText:#fff;
      --focus: rgba(124, 58, 237, .35);
      --link:#0f4c81;
      --soft:#f6f3ff;
      --soft2:#eef7ff;
      --soft3:#fff4e6;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height:1.55;
      overflow-x:hidden;
    }
    img{display:block; max-width:100%; height:auto}
    .skip-link{
      position:absolute; left:-9999px; top:8px;
      background:#111827; color:#fff; padding:10px 12px; border-radius:10px;
      z-index:9999;
    }
    .skip-link:focus{left:12px}
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

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

    .bg-wrap{
      position:fixed; inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        radial-gradient(1200px 520px at 12% 8%, rgba(124,58,237,.10), transparent 55%),
        radial-gradient(900px 420px at 92% 18%, rgba(6,182,212,.10), transparent 52%),
        radial-gradient(800px 420px at 82% 74%, rgba(245,158,11,.10), transparent 55%),
        linear-gradient(180deg, #fbfaf7 0%, #ffffff 50%, #fbfaf7 100%);
    }
    .bg-grid{
      position:absolute; inset:0;
      opacity:.25;
      background-image:
        linear-gradient(to right, rgba(15,23,42,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,.08) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(600px 240px at 20% 10%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
    }
    .bg-glow{
      position:absolute;
      width:520px; height:520px;
      border-radius:50%;
      filter: blur(42px);
      opacity:.65;
    }
    .bg-glow-1{left:-140px; top:80px; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.28), transparent 60%)}
    .bg-glow-2{right:-180px; top:240px; background: radial-gradient(circle at 30% 30%, rgba(6,182,212,.25), transparent 62%)}

    .site-header{
      position:sticky; top:0; z-index:50;
      background: rgba(251,250,247,.72);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(15,23,42,.07);
    }
    .nav-container{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 220px;
    }
    .brand-link{display:flex; align-items:center}
    .ai-page-logo{width:46px; height:46px; border-radius:12px; object-fit:cover; box-shadow:0 10px 22px rgba(17,24,39,.10)}
    .brand-meta{display:flex; flex-direction:column; gap:2px}
    .brand-name{font-weight:800; letter-spacing:.2px}
    .brand-sub{font-size:12px; color:var(--muted)}
    .nav-desktop{
      display:flex; align-items:center; gap:18px;
      padding:0 6px;
      flex: 1;
      justify-content:center;
      flex-wrap:nowrap;
      overflow:hidden;
    }
    .nav-item{
      color:#1f2937;
      text-decoration:none;
      font-weight:650;
      font-size:14px;
      padding:10px 10px;
      border-radius:12px;
      transition: background .2s ease, transform .2s ease;
      white-space:nowrap;
    }
    .nav-item:hover{background: rgba(124,58,237,.08); transform: translateY(-1px)}
    .nav-actions{
      display:flex; align-items:center; gap:10px;
      min-width: 320px;
      justify-content:flex-end;
    }
    .nav-toggle{
      display:none;
      width:44px; height:44px;
      border:1px solid rgba(15,23,42,.10);
      background: #fff;
      border-radius:14px;
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease;
      position:relative;
    }
    .nav-toggle:focus{outline:2px solid var(--focus); outline-offset:2px}
    .nav-toggle:hover{transform: translateY(-1px); box-shadow: 0 14px 26px rgba(17,24,39,.10)}
    .nav-toggle-lines{
      position:absolute; left:50%; top:50%;
      width:18px; height:12px;
      transform: translate(-50%,-50%);
      background:
        linear-gradient(#111827,#111827) 0 0 / 100% 2px no-repeat,
        linear-gradient(#111827,#111827) 0 50% / 100% 2px no-repeat,
        linear-gradient(#111827,#111827) 0 100% / 100% 2px no-repeat;
      border-radius:2px;
      opacity:.9;
    }

    .btn{
      display:inline-flex;
      align-items:center; justify-content:center;
      gap:10px;
      border-radius:14px;
      padding:11px 14px;
      text-decoration:none;
      font-weight:750;
      border:1px solid transparent;
      cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:focus{outline:2px solid var(--focus); outline-offset:2px}
    .btn-primary{
      background: linear-gradient(135deg, rgba(17,24,39,1) 0%, rgba(17,24,39,.95) 70%);
      color:var(--btnText);
      box-shadow: 0 18px 44px rgba(17,24,39,.18);
      border-color: rgba(17,24,39,.16);
    }
    .btn-primary:hover{transform: translateY(-1px); box-shadow: 0 22px 54px rgba(17,24,39,.22)}
    .btn-ghost{
      background: rgba(255,255,255,.85);
      color:#111827;
      border-color: rgba(15,23,42,.12);
      box-shadow: 0 14px 30px rgba(17,24,39,.08);
    }
    .btn-ghost:hover{transform: translateY(-1px); border-color: rgba(124,58,237,.22); box-shadow: 0 18px 40px rgba(17,24,39,.10)}
    .btn-lg{padding:13px 16px; border-radius:16px}
    .w-100{width:100%}

    .mobile-nav{
      display:none;
      background: rgba(255,255,255,.98);
      border-bottom:1px solid rgba(15,23,42,.08);
    }
    .mobile-nav.open{display:block}
    .mobile-nav-inner{padding:12px 0}
    .mobile-nav-top{
      display:flex; align-items:center; justify-content:space-between;
      padding:4px 0 10px;
    }
    .mobile-nav-title{font-weight:850}
    .mobile-nav-close{
      width:40px; height:40px;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.10);
      background:#fff; cursor:pointer;
      font-size:22px; line-height:1;
    }
    .mobile-nav-close:focus{outline:2px solid var(--focus); outline-offset:2px}
    .mobile-nav-list{
      display:flex; flex-direction:column; gap:8px;
      padding-bottom:10px;
    }
    .mobile-nav-item{
      text-decoration:none;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.08);
      background: linear-gradient(180deg, rgba(246,243,255,.65) 0%, rgba(255,255,255,.95) 100%);
      font-weight:800;
      color:#111827;
    }
    .mobile-nav-item:active{transform: translateY(1px)}
    .mobile-nav-cta{display:flex; flex-direction:column; gap:10px; padding-bottom:12px}

    .hero{
      padding:34px 0 10px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:22px;
      align-items:start;
    }
    .hero-left{
      padding:20px 0 10px;
    }
    .pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px}
    .pill{
      display:inline-flex; align-items:center;
      padding:8px 12px;
      border-radius:999px;
      font-weight:800;
      font-size:13px;
      color:#111827;
      background: rgba(255,255,255,.78);
      border:1px solid rgba(15,23,42,.10);
      box-shadow: 0 12px 26px rgba(17,24,39,.06);
    }
    .pill-secondary{
      background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.10));
      border-color: rgba(124,58,237,.20);
    }
    .hero-title{
      font-size:40px;
      line-height:1.15;
      margin:0;
      letter-spacing:-.6px;
    }
    .hero-desc{
      margin:14px 0 20px;
      font-size:16px;
      color: #2b3441;
      max-width: 60ch;
    }
    .hero-actions{
      display:flex; gap:12px; flex-wrap:wrap;
      margin-bottom:18px;
    }
    .hero-metrics{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:14px;
    }
    .metric-card{
      background: rgba(255,255,255,.82);
      border:1px solid rgba(15,23,42,.09);
      border-radius:16px;
      padding:12px 12px;
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .metric-card:hover{transform: translateY(-3px); box-shadow: 0 24px 60px rgba(17,24,39,.10)}
    .metric-top{display:flex; align-items:center; gap:10px; margin-bottom:8px}
    .icon{
      width:34px; height:34px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(6,182,212,.12));
      border:1px solid rgba(124,58,237,.18);
      font-weight:900;
    }
    .metric-label{font-weight:900; font-size:13px; color:#111827}
    .metric-value{font-weight:760; font-size:13px; color: var(--muted)}

    .hero-right{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding-top:6px;
    }
    .side-panel{
      background: rgba(255,255,255,.88);
      border:1px solid rgba(15,23,42,.09);
      border-radius:20px;
      padding:16px 14px;
      box-shadow: var(--shadow-sm);
      overflow:hidden;
      position:relative;
    }
    .side-panel:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(400px 160px at 30% 0%, rgba(124,58,237,.18), transparent 60%),
        radial-gradient(360px 180px at 110% 50%, rgba(6,182,212,.16), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .side-panel > *{position:relative}
    .side-panel-head{display:flex; flex-direction:column; gap:4px; margin-bottom:10px}
    .side-title{font-weight:950; letter-spacing:-.2px}
    .side-sub{color:var(--muted); font-size:13px}
    .feature-list{display:flex; flex-direction:column; gap:10px; margin-top:6px}
    .feature-item{display:flex; gap:12px; align-items:flex-start}
    .feature-badge{
      width:30px; height:30px;
      border-radius:12px;
      background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(124,58,237,.12));
      border:1px solid rgba(245,158,11,.22);
      display:flex; align-items:center; justify-content:center;
      font-weight:950; color:#111827;
      flex:0 0 auto;
    }
    .feature-title{font-weight:920; margin-bottom:2px}
    .feature-desc{color:var(--muted); font-size:13px}
    .side-cta{display:flex; flex-direction:column; gap:10px; margin-top:14px}

    .banner-strip{
      background: linear-gradient(135deg, rgba(246,243,255,.72) 0%, rgba(255,255,255,.92) 60%);
      border:1px solid rgba(124,58,237,.16);
      border-radius:20px;
      padding:14px;
      box-shadow: 0 18px 42px rgba(124,58,237,.08);
    }
    .banner-strip-title{font-weight:950; margin-bottom:10px}
    .tag-cloud{display:flex; flex-wrap:wrap; gap:8px}
    .tag{
      font-size:13px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.86);
      font-weight:800;
      color:#111827;
    }

    .section{padding:54px 0}
    .section-tight{padding:26px 0 44px}
    .section-soft{
      background: linear-gradient(180deg, rgba(246,243,255,.55) 0%, rgba(255,255,255,.0) 100%);
      border-top: 1px solid rgba(15,23,42,.05);
      border-bottom: 1px solid rgba(15,23,42,.05);
    }
    .section-head{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-bottom:22px;
      max-width: 78ch;
    }
    .section-head h2{
      margin:0;
      font-size:26px;
      letter-spacing:-.4px;
    }
    .section-desc{margin:0; color:var(--muted); font-size:15px}

    .grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
    .grid-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
    .grid-4{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px}
    .lift{transition: transform .22s ease, box-shadow .22s ease}
    .lift:hover{transform: translateY(-4px)}
    .card{
      background: rgba(255,255,255,.90);
      border:1px solid rgba(15,23,42,.09);
      border-radius: var(--radius);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .card.alt{
      background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(246,243,255,.40) 100%);
    }
    .card-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px}
    .kpi-icon{
      width:44px; height:44px;
      border-radius:16px;
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(6,182,212,.12));
      border:1px solid rgba(124,58,237,.20);
      display:flex; align-items:center; justify-content:center;
      font-size:18px;
      flex:0 0 auto;
    }
    .card-title{font-weight:950; font-size:18px; letter-spacing:-.2px}
    .card-text{margin:0; color:var(--muted)}
    .divider{height:1px; background: rgba(15,23,42,.10); margin:14px 0}

    .card.process-card{padding:18px}
    .process-head{display:flex; align-items:center; gap:12px; margin-bottom:8px}
    .muted{color:var(--muted)}
    .inline-points{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px}
    .inline-point{display:flex; gap:10px; align-items:center; color:#1f2937; font-weight:800; font-size:13px}
    .dot{width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, rgba(124,58,237,.7), rgba(6,182,212,.7))}

    .stat-row{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:10px}
    .stat{background: rgba(255,255,255,.78); border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:12px}
    .stat-num{font-weight:980; font-size:16px}
    .stat-label{color:var(--muted); font-size:13px; font-weight:750; margin-top:4px}
    .callout{
      margin-top:14px;
      padding:12px;
      border-radius:16px;
      border:1px dashed rgba(124,58,237,.28);
      background: rgba(246,243,255,.45);
    }
    .callout-title{font-weight:950; margin-bottom:6px}
    .callout-text{color:var(--muted); font-weight:750}

    .service-card{
      padding:18px;
      border-radius: var(--radius);
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
      position:relative;
      overflow:hidden;
    }
    .service-card:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(420px 160px at 10% 0%, rgba(124,58,237,.15), transparent 60%),
        radial-gradient(320px 140px at 110% 40%, rgba(6,182,212,.12), transparent 55%);
      opacity:.7; pointer-events:none;
    }
    .service-card > *{position:relative}
    .service-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:10px}
    .service-icon{
      width:46px; height:46px;
      border-radius:16px;
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(245,158,11,.12));
      border:1px solid rgba(124,58,237,.20);
      display:flex; align-items:center; justify-content:center;
      font-weight:950;
      flex:0 0 auto;
    }
    .service-title{font-weight:980; letter-spacing:-.2px; margin:0}
    .service-text{margin:0; color:var(--muted)}
    .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
    .chip{
      font-size:13px;
      font-weight:850;
      padding:8px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.85);
      border:1px solid rgba(15,23,42,.10);
      color:#111827;
    }
    .flow-mini{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px}
    .flow-node{
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.86);
      font-weight:900;
      font-size:13px;
    }
    .flow-arrow{color:rgba(17,24,39,.35); font-weight:900}
    .service-cta-row{display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:14px}
    .link-cta{
      color:#111827;
      font-weight:950;
      text-decoration:none;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,243,255,.50));
      box-shadow: 0 16px 34px rgba(17,24,39,.08);
      transition: transform .18s ease, box-shadow .18s ease;
      display:inline-flex; align-items:center;
    }
    .link-cta:hover{transform: translateY(-2px); box-shadow: 0 22px 48px rgba(17,24,39,.12)}
    .capabilities-strip{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:12px;
    }
    .strip-item{
      border-radius:18px;
      padding:14px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.86);
    }
    .strip-title{font-weight:980; margin-bottom:6px}
    .strip-desc{color:var(--muted); font-weight:750; font-size:13px}

    .step-list{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:12px}
    .step{
      display:flex; gap:12px;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
    }
    .step-num{
      width:46px; height:46px;
      border-radius:18px;
      background: linear-gradient(135deg, rgba(6,182,212,.15), rgba(124,58,237,.12));
      border:1px solid rgba(6,182,212,.20);
      display:flex; align-items:center; justify-content:center;
      font-weight:980;
      flex:0 0 auto;
    }
    .step-title{font-weight:980; margin-bottom:2px}
    .step-text{color:var(--muted); font-weight:750; font-size:13px}
    .process-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

    .scenario-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
    }
    .scenario{
      border-radius:16px;
      padding:12px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.82);
    }
    .scenario-icon{
      width:40px; height:40px;
      border-radius:16px;
      background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(124,58,237,.10));
      border:1px solid rgba(245,158,11,.22);
      display:flex; align-items:center; justify-content:center;
      font-weight:950;
      margin-bottom:10px;
    }
    .scenario-title{font-weight:980; margin-bottom:4px}
    .scenario-text{color:var(--muted); font-weight:750; font-size:13px}

    .bullets{margin:10px 0 0; padding-left:18px; color:var(--muted); font-weight:750}
    .bullets li{margin:8px 0}
    .brand-note-actions{margin-top:12px}
    .brand-note-title{font-weight:980; margin-bottom:6px}

    .grid-3 .solution-card{padding:18px; border-radius:var(--radius); border:1px solid rgba(15,23,42,.09); background: rgba(255,255,255,.90); box-shadow: 0 18px 42px rgba(17,24,39,.06); position:relative; overflow:hidden}
    .grid-3 .solution-card:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(420px 160px at 12% 0%, rgba(245,158,11,.14), transparent 60%),
                  radial-gradient(360px 160px at 110% 60%, rgba(124,58,237,.12), transparent 62%);
      opacity:.75; pointer-events:none;
    }
    .solution-card > *{position:relative}
    .solution-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:10px}
    .solution-icon{
      width:46px; height:46px; border-radius:16px;
      background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(6,182,212,.12));
      border:1px solid rgba(245,158,11,.22);
      display:flex; align-items:center; justify-content:center;
      font-weight:950;
      flex:0 0 auto;
    }
    .solution-title{font-weight:980; margin:0}
    .solution-text{margin:0; color:var(--muted); font-weight:760}
    .solution-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

    .meta-badge{
      font-size:13px;
      font-weight:900;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.85);
    }

    .compare-inline{
      display:flex; justify-content:space-between; align-items:center; gap:14px;
      margin-top:18px;
      padding:16px;
      border-radius:20px;
      border:1px solid rgba(124,58,237,.16);
      background: linear-gradient(135deg, rgba(246,243,255,.70) 0%, rgba(255,255,255,.92) 60%);
      box-shadow: 0 18px 42px rgba(124,58,237,.08);
    }
    .compare-inline-title{font-weight:980; margin-bottom:6px}
    .compare-inline-desc{color:var(--muted); font-weight:760}
    .compare-inline-right{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}

    .network-list{display:flex; flex-direction:column; gap:12px}
    .network-item{display:flex; gap:12px; align-items:flex-start}
    .network-dot{width:12px; height:12px; border-radius:50%; background: linear-gradient(135deg, rgba(124,58,237,.7), rgba(6,182,212,.7)); margin-top:7px}
    .network-title{font-weight:980; margin-bottom:4px}
    .network-desc{color:var(--muted); font-weight:760; font-size:13px}
    .contact-mini-title{font-weight:980; margin-bottom:6px}
    .contact-link{color:#111827; font-weight:900; text-decoration:none}
    .contact-mini-sub{margin-top:8px; color:var(--muted); font-weight:760}

    .timeline{display:flex; flex-direction:column; gap:12px}
    .timeline-item{
      display:flex; gap:14px; align-items:flex-start;
      padding:12px; border-radius:16px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
    }
    .timeline-time{
      width:92px; flex:0 0 auto;
      font-weight:980; color:#111827;
      background: linear-gradient(135deg, rgba(6,182,212,.14), rgba(124,58,237,.10));
      border:1px solid rgba(6,182,212,.20);
      border-radius:16px;
      padding:10px 10px;
      text-align:center;
      font-size:13px;
      margin-top:2px;
    }
    .timeline-title{font-weight:980; margin-bottom:4px}
    .timeline-desc{color:var(--muted); font-weight:760; font-size:13px}

    .pair-links{display:flex; gap:12px; flex-wrap:wrap}

    .grid-4 .mini-card{
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.90);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
    }
    .mini-icon{
      width:46px; height:46px;
      border-radius:18px;
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(245,158,11,.12));
      border:1px solid rgba(124,58,237,.20);
      display:flex; align-items:center; justify-content:center;
      font-weight:980;
      margin-bottom:10px;
    }
    .mini-title{font-weight:980; margin-bottom:6px}
    .mini-text{color:var(--muted); font-weight:760; font-size:13px}

    .process-cta{
      margin-top:16px;
      border-radius:22px;
      padding:16px;
      border:1px solid rgba(15,23,42,.08);
      background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(238,247,255,.55) 60%);
      display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
    }
    .process-cta-title{font-weight:980; margin-bottom:6px}
    .process-cta-desc{color:var(--muted); font-weight:760}

    .case-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
    .case-card{
      padding:16px;
      border-radius:20px;
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
      position:relative;
      overflow:hidden;
    }
    .case-card:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(420px 180px at 10% 0%, rgba(124,58,237,.14), transparent 60%),
        radial-gradient(320px 160px at 110% 70%, rgba(6,182,212,.12), transparent 62%);
      opacity:.7; pointer-events:none;
    }
    .case-card > *{position:relative}
    .case-header{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
    .case-badge{
      width:max-content;
      font-weight:950;
      padding:8px 10px;
      border-radius:999px;
      background: rgba(246,243,255,.60);
      border:1px solid rgba(124,58,237,.18);
      color:#111827;
    }
    .case-title{font-weight:980; letter-spacing:-.2px}
    .case-body{display:flex; flex-direction:column; gap:12px}
    .case-kv{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
    .kv{
      border-radius:16px;
      padding:12px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
    }
    .kv-k{font-size:12px; font-weight:900; color: rgba(31,41,55,.65); margin-bottom:4px}
    .kv-v{font-weight:980; color:#111827}
    .case-points{display:flex; flex-wrap:wrap; gap:8px}
    .case-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px}

    .rating-row{display:grid; grid-template-columns: .7fr 1.3fr; gap:14px; margin-bottom:16px}
    .rating-card{
      border-radius:22px;
      padding:18px;
      border:1px solid rgba(15,23,42,.09);
      background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,244,230,.60) 60%);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
      display:flex; flex-direction:column; gap:10px; justify-content:center;
    }
    .rating-stars{font-size:20px; letter-spacing:1px; color:#b45309}
    .rating-score{display:flex; align-items:baseline; gap:8px}
    .rating-num{font-size:38px; font-weight:1000; letter-spacing:-.6px}
    .rating-max{color:var(--muted); font-weight:900}
    .rating-label{color:var(--muted); font-weight:820}
    .rating-note{
      border-radius:22px;
      padding:18px;
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
    }
    .rating-note-title{font-weight:980; margin-bottom:10px}

    .compare-table-wrap{
      border-radius:22px;
      padding:16px;
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
    }
    .compare-table-head{display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-bottom:12px; flex-wrap:wrap}
    .compare-table-title{font-weight:980; letter-spacing:-.2px; font-size:18px}

    .table-scroll{overflow:auto; -webkit-overflow-scrolling:touch}
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      min-width: 720px;
      font-size:14px;
    }
    .compare-table th, .compare-table td{
      padding:12px 12px;
      border-top:1px solid rgba(15,23,42,.08);
      text-align:left;
      vertical-align:top;
    }
    .compare-table thead th{
      border-top:none;
      background: linear-gradient(180deg, rgba(246,243,255,.75) 0%, rgba(255,255,255,.9) 100%);
      position:sticky; top:0; z-index:2;
      font-weight:980;
    }
    .good-pill{
      display:inline-flex; align-items:center;
      padding:8px 10px;
      border-radius:999px;
      font-weight:950;
      border:1px solid rgba(16,185,129,.25);
      background: rgba(16,185,129,.10);
      color:#064e3b;
      white-space:nowrap;
    }
    .good-pill.alt{
      border-color: rgba(124,58,237,.24);
      background: rgba(124,58,237,.10);
      color:#4c1d95;
    }

    .compare-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; justify-content:flex-end}
    .form-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:10px}
    .form{margin-top:6px}
    .form-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
    }
    .field{display:flex; flex-direction:column; gap:8px}
    .field-label{font-weight:900; font-size:13px; color:#111827}
    input, select, textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.12);
      padding:12px 12px;
      background: rgba(255,255,255,.95);
      font-weight:750;
      color:#111827;
      transition: border-color .2s ease, box-shadow .2s ease;
      outline:none;
    }
    textarea{resize:vertical; min-height:120px}
    input:focus, select:focus, textarea:focus{
      border-color: rgba(124,58,237,.35);
      box-shadow: 0 0 0 4px rgba(124,58,237,.14);
    }
    select{
      appearance:none;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(31,41,55,.7) 50%),
        linear-gradient(135deg, rgba(31,41,55,.7) 50%, transparent 50%),
        linear-gradient(to right, rgba(31,41,55,.12), rgba(31,41,55,.12));
      background-position:
        calc(100% - 18px) calc(1em + 2px),
        calc(100% - 12px) calc(1em + 2px),
        calc(100% - 44px) .8em;
      background-size:6px 6px, 6px 6px, 1px 1.6em;
      background-repeat:no-repeat;
      padding-right:44px;
    }
    .form-actions{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
    .form-hint{
      min-height: 20px;
      color:#0f766e;
      font-weight:900;
      opacity:0;
      transition: opacity .2s ease;
    }
    .benefit-list{display:flex; flex-direction:column; gap:12px}
    .benefit-item{
      display:flex; gap:12px; align-items:flex-start;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
    }
    .benefit-num{
      width:44px; height:44px;
      border-radius:18px;
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(6,182,212,.12));
      border:1px solid rgba(124,58,237,.20);
      display:flex; align-items:center; justify-content:center;
      font-weight:980;
      flex:0 0 auto;
    }
    .benefit-title{font-weight:980; margin-bottom:4px}
    .benefit-desc{color:var(--muted); font-weight:760; font-size:13px}

    .need-box{
      padding:12px;
      border-radius:18px;
      border:1px dashed rgba(124,58,237,.28);
      background: rgba(246,243,255,.45);
    }
    .need-title{font-weight:980; margin-bottom:12px}
    .need-grid{display:flex; flex-direction:column; gap:12px}
    .need-item{display:flex; gap:12px; align-items:flex-start}
    .need-icon{
      width:44px; height:44px; border-radius:18px;
      background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(124,58,237,.10));
      border:1px solid rgba(245,158,11,.22);
      display:flex; align-items:center; justify-content:center;
      font-weight:980; flex:0 0 auto;
    }
    .need-head{font-weight:980; margin-bottom:4px}
    .need-desc{color:var(--muted); font-weight:760; font-size:13px}

    .price-table-wrap{margin-top:8px}
    .price-table{width:100%; border-collapse:separate; border-spacing:0; min-width: 660px; font-size:14px}
    .price-table th, .price-table td{
      padding:12px 12px;
      border-top:1px solid rgba(15,23,42,.08);
      text-align:left;
      vertical-align:top;
    }
    .price-table thead th{
      border-top:none;
      background: linear-gradient(180deg, rgba(238,247,255,.80) 0%, rgba(255,255,255,.92) 100%);
      position:sticky; top:0; z-index:2;
      font-weight:980;
    }
    .price-pill{
      display:inline-flex;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(16,185,129,.22);
      background: rgba(16,185,129,.10);
      font-weight:950;
      color:#064e3b;
      white-space:nowrap;
    }
    .price-pill.alt{
      border-color: rgba(124,58,237,.24);
      background: rgba(124,58,237,.10);
      color:#4c1d95;
    }

    .training-grid{
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .training-item{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.80);
      font-weight:920;
      color:#111827;
    }
    .training-dot{
      width:10px; height:10px; border-radius:50%;
      background: linear-gradient(135deg, rgba(124,58,237,.7), rgba(6,182,212,.7));
    }

    .check-list{display:flex; flex-direction:column; gap:12px}
    .check-item{
      display:flex; gap:12px; align-items:flex-start;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
    }
    .check{width:26px; height:26px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.22); font-weight:1000}
    .check-title{font-weight:980; margin-bottom:4px}
    .check-desc{color:var(--muted); font-weight:760; font-size:13px}

    .help-tiles{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
    .help-tile{
      text-decoration:none;
      border-radius:18px;
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.90);
      padding:14px;
      box-shadow: 0 18px 42px rgba(17,24,39,.05);
      position:relative;
      overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease;
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    }
    .help-tile:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(260px 120px at 0% 0%, rgba(124,58,237,.12), transparent 60%);
      opacity:.7; pointer-events:none;
    }
    .help-tile > *{position:relative}
    .help-tile:hover{transform: translateY(-3px); box-shadow: 0 24px 60px rgba(17,24,39,.10)}
    .help-tile-title{font-weight:980}
    .help-tile-desc{color:var(--muted); font-weight:760; font-size:13px; margin-top:6px}
    .help-tile-arrow{font-weight:1000; color: rgba(17,24,39,.55); font-size:18px}

    .quote{
      display:flex; gap:12px; align-items:flex-start;
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(246,243,255,.45);
    }
    .quote-mark{font-size:34px; font-weight:1000; color: rgba(124,58,237,.55); line-height:1}
    .quote-text{font-weight:820; color:#2b3441}
    .quote-actions{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}

    .article-list{display:flex; flex-direction:column; gap:10px; margin-top:6px}
    .article-item{
      display:flex; gap:12px; align-items:flex-start;
      text-decoration:none;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .article-item:hover{
      transform: translateY(-3px);
      box-shadow: 0 22px 54px rgba(17,24,39,.10);
      border-color: rgba(124,58,237,.20);
    }
    .article-dot{
      width:12px; height:12px; border-radius:50%;
      background: linear-gradient(135deg, rgba(124,58,237,.7), rgba(6,182,212,.7));
      margin-top:6px;
      flex:0 0 auto;
    }
    .article-title{font-weight:980; margin-bottom:6px}
    .article-meta{color:var(--muted); font-weight:760; font-size:13px}

    .review-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
    .review-card{
      padding:16px;
      border-radius:20px;
      border:1px solid rgba(15,23,42,.09);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 42px rgba(17,24,39,.06);
    }
    .review-top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
    .avatar{
      width:44px; height:44px;
      border-radius:18px;
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(6,182,212,.12));
      border:1px solid rgba(124,58,237,.20);
      display:flex; align-items:center; justify-content:center;
      font-weight:1000;
      flex:0 0 auto;
    }
    .review-name{font-weight:980; margin-bottom:2px}
    .review-meta{color:var(--muted); font-weight:760; font-size:13px}
    .review-text{color:#2b3441; font-weight:780}

    .faq{display:flex; flex-direction:column; gap:10px; margin-top:12px}
    .faq-item{
      border-radius:18px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      padding:0;
      overflow:hidden;
    }
    .faq-item summary{
      cursor:pointer;
      padding:14px 14px;
      font-weight:950;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-chevron{
      width:18px; height:18px;
      border-radius:8px;
      border:1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.85);
      position:relative;
      flex:0 0 auto;
    }
    .faq-item summary .faq-chevron:before{
      content:"";
      position:absolute;
      left:50%; top:50%;
      width:9px; height:9px;
      border-right:2px solid rgba(17,24,39,.55);
      border-bottom:2px solid rgba(17,24,39,.55);
      transform: translate(-50%,-60%) rotate(45deg);
      transition: transform .2s ease;
    }
    .faq-item[open] summary .faq-chevron:before{
      transform: translate(-50%,-50%) rotate(-135deg);
    }
    .faq-body{
      padding:0 14px 14px;
      color:var(--muted);
      font-weight:760;
    }
    .faq-body p{margin:0}

    .wiki-list{display:flex; flex-direction:column; gap:12px; margin-top:6px}
    .wiki-item{
      border-radius:18px;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      padding:12px;
    }
    .wiki-title{font-weight:980; margin-bottom:6px}
    .wiki-desc{color:var(--muted); font-weight:760; font-size:13px}
    .wiki-cta{margin-top:10px}
    .wiki-cta-title{font-weight:980; margin-bottom:6px}
    .wiki-cta-desc{color:var(--muted); font-weight:760; margin-bottom:12px}

    .friend-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; flex-wrap:wrap}
    .friend-title{font-weight:980; font-size:18px}
    .friend-links{display:flex; flex-wrap:wrap; gap:10px}
    .friend-link{
      text-decoration:none;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.88);
      font-weight:900;
      color:#111827;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .friend-link:hover{transform: translateY(-2px); box-shadow: 0 22px 54px rgba(17,24,39,.10); border-color: rgba(124,58,237,.22)}

    .footer-inner{padding:26px 0 22px}
    .site-footer{
      background: #0f172a;
      color:#e5e7eb;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-top{
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      padding-bottom:16px;
      border-bottom:1px solid rgba(255,255,255,.10);
      margin-bottom:16px;
    }
    .footer-brand{display:flex; gap:12px; align-items:flex-start}
    .footer-logo{width:46px; height:46px; border-radius:14px; object-fit:cover; box-shadow:0 18px 42px rgba(0,0,0,.25)}
    .footer-name{font-weight:1000; margin-bottom:4px}
    .footer-desc{color: rgba(229,231,235,.86); font-weight:760; max-width: 52ch}
    .footer-links{display:flex; gap:18px; flex-wrap:wrap}
    .footer-col{display:flex; flex-direction:column; gap:10px; min-width: 160px}
    .footer-col-title{font-weight:1000; color:#fff}
    .footer-link{
      text-decoration:none;
      color: rgba(229,231,235,.86);
      font-weight:780;
      transition: color .18s ease;
    }
    .footer-link:hover{color:#fff}
    .footer-bottom{
      display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    }
    .footer-legal{color: rgba(229,231,235,.80); font-weight:760}
    .footer-meta{display:flex; gap:10px; flex-wrap:wrap}
    .footer-chip{
      text-decoration:none;
      color:#fff;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      font-weight:900;
    }
    .footer-chip:hover{background: rgba(255,255,255,.10)}

    .to-top{
      position:fixed;
      right:14px;
      bottom:110px;
      width:44px; height:44px;
      border-radius:16px;
      border:1px solid rgba(15,23,42,.14);
      background: rgba(255,255,255,.88);
      box-shadow: 0 18px 42px rgba(17,24,39,.10);
      color:#111827;
      cursor:pointer;
      font-size:20px;
      opacity:0;
      transform: translateY(10px);
      pointer-events:none;
      transition: opacity .2s ease, transform .2s ease;
      z-index:80;
    }
    .to-top.show{
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }
    .to-top:focus{outline:2px solid var(--focus); outline-offset:2px}

    .float-kefu{
      position:fixed;
      right:14px;
      bottom:56px;
      z-index:90;
      border:none;
      width:auto;
      padding:12px 14px;
      border-radius:999px;
      background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,1));
      color:#fff;
      box-shadow: 0 24px 60px rgba(124,58,237,.28);
      cursor:pointer;
      display:flex; align-items:center; gap:10px;
      font-weight:1000;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .float-kefu:hover{transform: translateY(-3px); box-shadow: 0 28px 72px rgba(124,58,237,.34)}
    .float-kefu:focus{outline:2px solid rgba(255,255,255,.65); outline-offset:2px}
    .float-kefu-dot{width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.9); box-shadow:0 0 0 4px rgba(255,255,255,.18)}
    .float-kefu-text{font-size:14px}

    .kefu-pop{
      position:fixed; inset:0;
      z-index:120;
      display:block;
    }
    .kefu-pop-backdrop{
      position:absolute; inset:0;
      background: rgba(15,23,42,.55);
      backdrop-filter: blur(8px);
    }
    .kefu-pop-panel{
      position:relative;
      margin: 10vh auto 0;
      width:min(520px, calc(100% - 26px));
      border-radius:22px;
      background: rgba(255,255,255,.96);
      border:1px solid rgba(255,255,255,.35);
      box-shadow: 0 40px 120px rgba(0,0,0,.35);
      overflow:hidden;
      animation: popIn .22s ease both;
    }
    @keyframes popIn{
      from{transform: translateY(12px) scale(.98); opacity:.0}
      to{transform: translateY(0) scale(1); opacity:1}
    }
    .kefu-pop-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 16px;
      border-bottom:1px solid rgba(15,23,42,.08);
      background: linear-gradient(180deg, rgba(246,243,255,.70), rgba(255,255,255,.90));
    }
    .kefu-pop-title{font-weight:1000}
    .kefu-pop-close{
      width:42px; height:42px; border-radius:16px;
      border:1px solid rgba(15,23,42,.12);
      background:#fff;
      cursor:pointer; font-size:22px; line-height:1;
    }
    .kefu-pop-close:focus{outline:2px solid var(--focus); outline-offset:2px}
    .kefu-pop-body{padding:16px}
    .kefu-pop-desc{color:var(--muted); font-weight:760; margin-bottom:12px}
    .kefu-pop-qr{
      width:100%;
      border-radius:18px;
      border:1px dashed rgba(124,58,237,.28);
      background: rgba(246,243,255,.45);
      padding:12px;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:14px;
    }
    .kefu-pop-qr img{max-width: 240px}
    .kefu-pop-actions{display:flex; gap:12px; flex-wrap:wrap}

    .reveal{opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease}
    .reveal.is-in{opacity:1; transform: translateY(0)}
    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto !important}
      .lift,.btn,.metric-card,.friend-link,.case-card,.review-card,.help-tile,.article-item{transition:none !important}
      .to-top, .float-kefu{transition:none !important}
      .reveal{opacity:1; transform:none}
      .kefu-pop-panel{animation:none !important}
    }

    @media (max-width: 980px){
      .nav-desktop{display:none}
      .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
      .nav-actions{min-width:auto}
      .hero-grid{grid-template-columns: 1fr; gap:14px}
      .hero-title{font-size:34px}
      .hero-metrics{grid-template-columns: 1fr; gap:10px}
      .grid-2{grid-template-columns: 1fr}
      .grid-3{grid-template-columns: 1fr}
      .grid-4{grid-template-columns: 1fr 1fr}
      .case-grid{grid-template-columns: 1fr}
      .rating-row{grid-template-columns: 1fr}
      .review-grid{grid-template-columns: 1fr}
      .help-tiles{grid-template-columns: 1fr}
      .form-grid{grid-template-columns: 1fr}
      .capabilities-strip{grid-template-columns: 1fr}
      .compare-inline{align-items:flex-start}
      .compare-actions{justify-content:flex-start}
      .mobile-nav{display:block}
      .mobile-nav[hidden]{display:none}
    }