:root{
    --bg:#FFFFFF;
    --bg-soft:#F7F9FC;
    --card:#FFFFFF;
    --line:#E4E9F0;
    --line-strong:#D3DBE6;
    --accent:#0072CE;
    --accent-2:#0B93E8;
    --accent-soft:rgba(0,114,206,.07);
    --text:#0F172A;
    --muted:#5B6B7F;
    --radius:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{width:min(1120px,92%);margin:0 auto}
  a{color:inherit;text-decoration:none}

  /* ===== Top Background Grid ===== */
  .grid-bg{
    position:absolute;top:0;left:0;right:0;height:620px;z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(0,114,206,.055) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,114,206,.055) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000 10%,transparent 72%);
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000 10%,transparent 72%);
  }

  /* ===== Hero ===== */
  .hero{position:relative;z-index:1;padding:100px 0 76px;text-align:center}
  .badge{
    display:inline-flex;align-items:center;gap:9px;
    padding:6px 16px;border-radius:999px;font-size:13px;font-weight:500;
    color:var(--accent);border:1px solid rgba(0,114,206,.25);
    background:var(--accent-soft);margin-bottom:26px;
  }
  .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(0,114,206,.16);
    animation:pulse 2.4s infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  h1{
    font-size:clamp(32px,5vw,56px);line-height:1.18;
    font-weight:800;letter-spacing:-.6px;margin-bottom:22px;
  }
  h1 .hl{
    background:linear-gradient(115deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.lead{
    max-width:740px;margin:0 auto;
    font-size:clamp(15.5px,1.7vw,17.5px);color:var(--muted);
  }

  /* ===== Key Metrics ===== */
  .stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;margin-top:66px;
  }
  .stat{background:var(--bg-soft);padding:26px 16px;text-align:center}
  .stat b{
    display:block;font-size:clamp(19px,2.3vw,24px);font-weight:800;
    color:var(--accent);letter-spacing:-.3px;
  }
  .stat span{font-size:13px;color:var(--muted)}

  /* ===== Section Common ===== */
  section{padding:84px 0}
  .sec-head{text-align:center;max-width:700px;margin:0 auto 52px}
  .sec-tag{
    font-size:12.5px;font-weight:700;letter-spacing:2.2px;
    text-transform:uppercase;color:var(--accent);margin-bottom:13px;
  }
  h2{
    font-size:clamp(25px,3.3vw,36px);font-weight:800;
    letter-spacing:-.5px;line-height:1.28;margin-bottom:15px;
  }
  .sec-head p{color:var(--muted);font-size:15.5px}

  /* ===== Feature Cards ===== */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  .card{
    background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius);
    padding:30px 26px;position:relative;overflow:hidden;
    transition:border-color .25s, box-shadow .25s, transform .25s;
  }
  .card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    opacity:0;transition:opacity .25s;
  }
  .card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,114,206,.3);
    box-shadow:0 14px 34px rgba(15,23,42,.08);
  }
  .card:hover::before{opacity:1}
  .ico{
    width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
    background:var(--accent-soft);
    border:1px solid rgba(0,114,206,.18);
    margin-bottom:19px;font-size:21px;
  }
  .card h3{font-size:17.5px;font-weight:700;margin-bottom:9px}
  .card p{font-size:14.5px;color:var(--muted);line-height:1.72}

  /* ===== Suitable Scenarios ===== */
  .scenes-wrap{
    background:var(--bg-soft);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px}
  .scene{
    display:flex;align-items:flex-start;gap:14px;
    padding:22px;border-radius:13px;
    background:#FFFFFF;
    border:1px solid var(--line);
    transition:border-color .25s, box-shadow .25s, transform .25s;
  }
  .scene:hover{
    border-color:rgba(0,114,206,.32);
    box-shadow:0 10px 26px rgba(15,23,42,.07);
    transform:translateX(4px);
  }
  .scene .num{
    flex:none;width:30px;height:30px;border-radius:9px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#FFFFFF;font-weight:800;font-size:13px;
    display:grid;place-items:center;
  }
  .scene h4{font-size:15.5px;font-weight:700;margin-bottom:4px}
  .scene p{font-size:13.5px;color:var(--muted);line-height:1.6}

  /* ===== Spec Table ===== */
  .spec-table{
    width:100%;border-collapse:collapse;
    border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--line);font-size:14.5px;
    background:#FFFFFF;
  }
  .spec-table th,.spec-table td{
    padding:16px 22px;text-align:left;
    border-bottom:1px solid var(--line);
  }
  .spec-table th{
    background:var(--accent-soft);
    font-weight:700;font-size:13.5px;
    color:var(--accent);letter-spacing:.3px;
  }
  .spec-table tr:last-child td{border-bottom:none}
  .spec-table td:first-child{color:var(--muted);width:34%}
  .spec-table tbody tr:hover{background:#FAFBFD}

  /* ===== Scroll Animation ===== */
  .reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.22,.61,.36,1)}
  .reveal.on{opacity:1;transform:none}

  @media(max-width:900px){
    .stats{grid-template-columns:repeat(2,1fr)}
    section{padding:62px 0}
    .hero{padding:70px 0 56px}
  }
  @media(max-width:520px){
    .stats{grid-template-columns:1fr}
    .spec-table th,.spec-table td{padding:13px 15px;font-size:13.5px}
  }