:root{
    --bg:#070a12;
    --card:rgba(255,255,255,.045);
    --line:rgba(255,255,255,.09);
    --txt:#e8ecf6;
    --mut:#8892ab;
    --acc:#7c5cff;
    --acc2:#00e0c6;
    --ok:#3ddc97;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--txt);
    font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:-30% -30% auto -30%;height:120vh;z-index:-2;
    background:
      radial-gradient(46% 40% at 22% 18%, rgba(124,92,255,.30), transparent 62%),
      radial-gradient(42% 38% at 82% 12%, rgba(0,224,198,.22), transparent 60%),
      radial-gradient(50% 44% at 55% 78%, rgba(124,92,255,.16), transparent 65%);
    filter:blur(12px);animation:drift 18s ease-in-out infinite alternate;
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  }
  @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-3%,0) scale(1.06)}}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}

  header{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.4px}
  .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));
        display:grid;place-items:center;font-weight:800;color:#080b13;box-shadow:0 8px 26px rgba(124,92,255,.35)}
  .nav a{color:var(--mut);text-decoration:none;margin-left:22px;font-size:14px;transition:.2s}
  .nav a:hover{color:var(--txt)}

  .hero{padding:56px 0 8px;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
  .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
         border:1px solid var(--line);background:var(--card);font-size:12.5px;color:#b9c3da}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(61,220,151,.14)}
  h1{font-size:44px;line-height:1.18;margin:18px 0 14px;letter-spacing:-.5px;font-weight:800}
  h1 span{background:linear-gradient(100deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{color:#a8b2c8;font-size:16px;max-width:520px}
  .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:13px;
       font-weight:650;text-decoration:none;font-size:15px;transition:.22s;border:1px solid transparent}
  .btn-primary{background:linear-gradient(135deg,var(--acc),#5b7bff);color:#fff;
               box-shadow:0 14px 34px rgba(124,92,255,.36)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(124,92,255,.48)}
  .btn-ghost{border-color:var(--line);background:var(--card);color:var(--txt)}
  .btn-ghost:hover{border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
  .hint{color:var(--mut);font-size:12.5px;margin-top:14px}

  .panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
         padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
  .panel .bar{display:flex;align-items:center;gap:7px;margin-bottom:12px}
  .panel .bar i{width:10px;height:10px;border-radius:50%;background:#2b3244;display:block}
  .panel .bar i:nth-child(1){background:#ff5f57}.panel .bar i:nth-child(2){background:#febc2e}.panel .bar i:nth-child(3){background:#28c840}
  .panel .bar span{margin-left:8px;color:var(--mut);font-size:12px}
  .rows{display:grid;gap:9px}
  .row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;
       background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);font-size:13px}
  .row b{font-weight:600;color:#cfd7e8}
  .tag{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid rgba(61,220,151,.35);
       color:var(--ok);background:rgba(61,220,151,.10)}
  .meter{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:12px}
  .meter i{display:block;height:100%;width:72%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2))}

  section.block{padding:64px 0}
  .kicker{color:var(--acc2);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
  h2{font-size:29px;margin:10px 0 8px;letter-spacing:-.3px}
  .sub{color:var(--mut);margin:0 0 30px}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .card{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--card);transition:.22s}
  .card:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.40);background:rgba(124,92,255,.07)}
  .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;
       background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(0,224,198,.16));border:1px solid var(--line)}
  .ico svg{width:19px;height:19px;stroke:#cfd7e8;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .card h3{margin:0 0 6px;font-size:15.5px}
  .card p{margin:0;color:var(--mut);font-size:13.4px;line-height:1.65}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
  .step{position:relative;border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;background:var(--card)}
  .step::before{counter-increment:s;content:counter(s);position:absolute;top:-13px;left:20px;width:28px;height:28px;
    border-radius:9px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#0a0e17;
    background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 8px 20px rgba(124,92,255,.35)}
  .step h4{margin:6px 0 6px;font-size:15px}
  .step p{margin:0;color:var(--mut);font-size:13.4px}

  .spec{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .spec .row{font-size:13.5px}

  details{border:1px solid var(--line);border-radius:13px;background:var(--card);padding:14px 18px;margin-bottom:10px}
  details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";color:var(--mut);font-weight:700}
  details[open] summary::after{content:"–"}
  details p{color:var(--mut);margin:10px 0 0;font-size:13.6px}

  .final{border:1px solid rgba(124,92,255,.35);border-radius:20px;padding:38px;text-align:center;
         background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(0,224,198,.08));margin:40px 0 10px}
  .final h2{margin:0 0 8px}
  .final p{color:#a9b3c9;margin:0 0 22px}

  footer{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 40px;color:var(--mut);font-size:12.8px;
         display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .warnbar{max-width:1080px;margin:14px auto 0;padding:0 22px}
  .warnbar div{border:1px solid rgba(255,196,84,.28);background:rgba(255,196,84,.07);color:#e6c98a;
               border-radius:12px;padding:11px 16px;font-size:13px}

  @media(max-width:900px){
    .hero{grid-template-columns:1fr;gap:30px}
    .grid,.steps,.spec{grid-template-columns:1fr}
    h1{font-size:34px}
    .nav{display:none}
  }


  /* ============ 产品卡（首页） ============ */
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .pcard{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--card);
         transition:.22s;display:flex;flex-direction:column}
  .pcard:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.45);
               background:rgba(124,92,255,.07);box-shadow:0 18px 44px rgba(0,0,0,.42)}
  .pcard .ico{width:46px;height:46px;border-radius:13px;margin-bottom:15px;
              background:linear-gradient(135deg,rgba(124,92,255,.24),rgba(0,224,198,.18));
              display:grid;place-items:center;border:1px solid var(--line)}
  .pcard .ico svg{width:22px;height:22px}
  .pcard h3{margin:0 0 4px;font-size:17.5px}
  .pcard .verline{font-size:11.5px;color:var(--ok);margin-bottom:10px}
  .pcard .oneline{color:var(--mut);font-size:13.2px;line-height:1.68;margin:0 0 14px;min-height:66px}
  .pcard .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
  .pcard .tags span{font-size:11px;color:var(--mut);border:1px solid var(--line);
                    padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.03)}
  .pcard .btn{margin-top:auto;justify-content:center}

  /* 功能分组标题 */
  .fhead{margin:34px 0 4px;font-size:15px;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
  .fhead::before{content:"";width:3px;height:16px;border-radius:2px;
                 background:linear-gradient(180deg,var(--acc),#00e0c6)}
  .fhead span{font-size:11.5px;color:var(--mut);font-weight:400}
  .fsub{color:var(--mut);font-size:12.8px;margin:0 0 16px 13px}

  /* ============ 详情页 ============ */
  .crumb{margin:26px 0 0;font-size:12.5px;color:var(--mut)}
  .crumb a{color:var(--mut);text-decoration:none}
  .crumb a:hover{color:var(--txt)}

  .dhero{display:grid;grid-template-columns:1.12fr .88fr;gap:36px;align-items:center;padding:26px 0 8px}
  .dhero h1{font-size:36px;line-height:1.22;margin:0 0 14px}
  .dhero .lead{margin:0 0 22px}
  .dhero .cta{margin-bottom:14px}

  .dlbox{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--card)}
  .dlbox .dtitle{font-size:13.5px;color:var(--txt);font-weight:650;margin:0 0 12px}
  .dlbox .rowline{display:flex;justify-content:space-between;gap:14px;font-size:12.7px;
                  color:var(--mut);padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
  .dlbox .rowline:last-of-type{border-bottom:0}
  .dlbox .rowline b{color:var(--txt);font-weight:600}
  .dlbox .btn{width:100%;justify-content:center;margin-top:16px}
  .hsh{margin-top:12px;font-size:10.3px;color:#5f6880;line-height:1.55;word-break:break-all;
       font-family:ui-monospace,Consolas,monospace}

  .flist{margin:0;padding:0;list-style:none;display:grid;gap:11px}
  .flist li{position:relative;padding-left:22px;font-size:13.6px;line-height:1.68;color:#c9d2e4}
  .flist li::before{content:"";position:absolute;left:3px;top:8px;width:8px;height:8px;
                    border-radius:2px;background:linear-gradient(135deg,var(--acc),#00e0c6)}
  .flist li b{color:var(--txt);font-weight:650}
  .flist li code{background:rgba(255,255,255,.07);padding:1px 6px;border-radius:5px;
                 font-size:12.4px;font-family:ui-monospace,Consolas,monospace;color:#b9c6e0}

  .steps2{display:grid;gap:10px;counter-reset:s2}
  .steps2 .s2{display:flex;gap:12px;font-size:13.4px;color:#c9d2e4;line-height:1.6}
  .steps2 .s2 i{flex:0 0 22px;height:22px;border-radius:7px;display:grid;place-items:center;
                font-size:11.5px;font-style:normal;color:#fff;
                background:linear-gradient(135deg,var(--acc),#5b7bff)}
  .steps2 .s2 b{color:var(--txt)}

  .backm{margin:38px 0 0}
  .backm a{color:var(--mut);text-decoration:none;font-size:13.5px;display:inline-flex;align-items:center;gap:7px}
  .backm a:hover{color:var(--txt)}

  .kv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .kv .spec{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}

  @media(max-width:900px){
    .pgrid{grid-template-columns:1fr}
    .dhero{grid-template-columns:1fr;gap:26px}
    .dhero h1{font-size:30px}
    .kv{grid-template-columns:1fr}
  }

  /* spec 行：标签长时值仍右对齐，避免挤压换行 */
  .spec .row{gap:16px}
  .spec .row span{text-align:right}
  .spec .row b{color:var(--txt)}