/* =========================================================
       BLOG PAGE
       所有样式均限定在 .blog-page 内，避免影响其他页面
    ========================================================= */

    .blog-page{

      --blue:#1769ff;
      --blue-dark:#0b4fd8;
      --blue-light:#eef5ff;
      --cyan:#35b9ff;

      --text:#111827;
      --text-soft:#64748b;
      --text-light:#94a3b8;

      --border:#e8edf5;

      --bg:#ffffff;
      --bg-soft:#f7f9fc;

      --dark:#07111f;
      --dark-2:#0d1a2b;

      --container:1180px;

      --shadow:
        0 20px 60px
        rgba(15,35,70,.08);

      min-height:100vh;
      overflow:hidden;

      color:var(--text);
      background:#fff;

      line-height:1.7;

      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        Arial,
        sans-serif;

      -webkit-font-smoothing:antialiased;

    }


    .blog-page *,
    .blog-page *::before,
    .blog-page *::after{
      box-sizing:border-box;
    }


    .blog-page html{
      scroll-behavior:smooth;
    }


    .blog-page a{
      color:inherit;
      text-decoration:none;
    }


    .blog-page button,
    .blog-page input{
      font:inherit;
    }


    /* =========================================================
       CONTAINER
    ========================================================= */

    .blog-page .container{

      width:
        min(
          var(--container),
          calc(100% - 40px)
        );

      margin:0 auto;

    }


    /* =========================================================
       HEADER
    ========================================================= */

    .blog-page .header{

      position:fixed;

      top:0;
      left:0;

      width:100%;
      height:76px;

      z-index:1000;

      background:
        rgba(255,255,255,.84);

      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);

      border-bottom:
        1px solid transparent;

      transition:.3s ease;

    }


    .blog-page .header.scrolled{

      background:
        rgba(255,255,255,.94);

      border-bottom-color:
        rgba(15,23,42,.07);

      box-shadow:
        0 8px 30px
        rgba(15,23,42,.05);

    }


    .blog-page .header-inner{

      height:76px;

      display:flex;

      align-items:center;

      gap:30px;

    }


    /* =========================
       统一 Logo
    ========================== */

    .blog-page .logo{

      display:flex;

      align-items:center;

      gap:11px;

      flex-shrink:0;

    }


    .blog-page .logo-icon{

      display:flex;

      align-items:center;

      justify-content:center;

      flex-shrink:0;

    }


    .blog-page .logo-icon img{

      width:auto;

      height:auto;

      max-height:44px;

      display:block;

    }


    /* =========================================================
       NAV
    ========================================================= */

    .blog-page .nav{

      display:flex;

      align-items:center;

      gap:28px;

      margin-left:auto;

    }


    .blog-page .nav a{

      position:relative;

      color:#475569;

      font-size:14px;

      font-weight:600;

      transition:.25s ease;

    }


    .blog-page .nav a:hover,
    .blog-page .nav a.active{

      color:var(--blue);

    }


    .blog-page .nav a.active::after{

      content:"";

      position:absolute;

      left:50%;

      bottom:-10px;

      width:18px;

      height:3px;

      border-radius:99px;

      background:var(--blue);

      transform:translateX(-50%);

    }


    /* =========================================================
       HEADER ACTIONS
    ========================================================== */

    .blog-page .header-actions{

      display:flex;

      align-items:center;

      gap:10px;

    }


    .blog-page .btn{

      display:inline-flex;

      align-items:center;

      justify-content:center;

      gap:8px;

      min-height:44px;

      padding:0 19px;

      border-radius:12px;

      border:1px solid transparent;

      font-size:14px;

      font-weight:700;

      cursor:pointer;

      transition:.25s ease;

    }


    .blog-page .btn-primary{

      color:#fff;

      background:
        linear-gradient(
          135deg,
          #1769ff,
          #2587ff
        );

      box-shadow:
        0 10px 24px
        rgba(23,105,255,.22);

    }


    .blog-page .btn-primary:hover{

      transform:translateY(-2px);

      box-shadow:
        0 14px 30px
        rgba(23,105,255,.28);

    }


    .blog-page .btn-outline{

      color:#334155;

      background:#fff;

      border-color:#dfe6f0;

    }


    .blog-page .btn-outline:hover{

      transform:translateY(-2px);

      border-color:#b9c8dd;

    }


    /* =========================================================
       MOBILE MENU BUTTON
    ========================================================== */

    .blog-page .menu-btn{

      display:none;

      width:42px;
      height:42px;

      border:1px solid #e2e8f0;

      border-radius:11px;

      background:#fff;

      cursor:pointer;

    }


    .blog-page .menu-btn span{

      display:block;

      width:19px;
      height:2px;

      margin:4px auto;

      border-radius:99px;

      background:#334155;

    }


    .blog-page .mobile-panel{

      display:none;

    }


    /* =========================================================
       HERO
    ========================================================== */

    .blog-page .hero{

      position:relative;

      overflow:hidden;

      padding:
        150px
        0
        90px;

      background:

        radial-gradient(
          circle at 80% 20%,
          rgba(53,185,255,.14),
          transparent 27%
        ),

        radial-gradient(
          circle at 20% 40%,
          rgba(23,105,255,.09),
          transparent 32%
        ),

        linear-gradient(
          180deg,
          #f7faff,
          #fff
        );

    }


    .blog-page .hero::before{

      content:"";

      position:absolute;

      inset:0;

      pointer-events:none;

      opacity:.38;

      background-image:

        linear-gradient(
          rgba(23,105,255,.05) 1px,
          transparent 1px
        ),

        linear-gradient(
          90deg,
          rgba(23,105,255,.05) 1px,
          transparent 1px
        );

      background-size:48px 48px;

      mask-image:
        linear-gradient(
          to bottom,
          black,
          transparent 90%
        );

      -webkit-mask-image:
        linear-gradient(
          to bottom,
          black,
          transparent 90%
        );

    }


    .blog-page .hero-inner{

      position:relative;

      z-index:1;

      text-align:center;

    }


    .blog-page .eyebrow{

      display:inline-flex;

      align-items:center;

      gap:8px;

      padding:7px 12px;

      border-radius:99px;

      color:var(--blue);

      background:#edf5ff;

      font-size:12px;

      font-weight:800;

      margin-bottom:21px;

    }


    .blog-page .eyebrow-dot{

      width:7px;
      height:7px;

      border-radius:50%;

      background:var(--blue);

      box-shadow:
        0 0 0 6px
        rgba(23,105,255,.10);

    }


    .blog-page .hero h1{

      max-width:820px;

      margin:0 auto 20px;

      font-size:
        clamp(
          38px,
          5vw,
          58px
        );

      line-height:1.16;

      letter-spacing:-2.4px;

    }


    .blog-page .hero h1 span{

      background:
        linear-gradient(
          90deg,
          #1769ff,
          #2ca9ff
        );

      -webkit-background-clip:text;

      background-clip:text;

      color:transparent;

    }


    .blog-page .hero p{

      max-width:720px;

      margin:0 auto;

      color:var(--text-soft);

      font-size:16px;

      line-height:1.9;

    }


    /* =========================================================
       CATEGORY
    ========================================================== */

    .blog-page .category-section{

      padding:34px 0 15px;

    }


    .blog-page .category-list{

      display:flex;

      align-items:center;

      justify-content:center;

      flex-wrap:wrap;

      gap:10px;

    }


    .blog-page .category{

      padding:9px 17px;

      border:1px solid #e1e8f1;

      border-radius:99px;

      color:#64748b;

      background:#fff;

      font-size:12px;

      font-weight:700;

      transition:.25s ease;

    }


    .blog-page .category:hover,
    .blog-page .category.active{

      color:var(--blue);

      border-color:#cfe0ff;

      background:#edf5ff;

    }


    /* =========================================================
       SECTION
    ========================================================== */

    .blog-page .section{

      padding:85px 0;

    }


    .blog-page .section-head{

      display:flex;

      align-items:flex-end;

      justify-content:space-between;

      gap:25px;

      margin-bottom:30px;

    }


    .blog-page .section-kicker{

      color:var(--blue);

      font-size:11px;

      font-weight:900;

      letter-spacing:1.3px;

      margin-bottom:7px;

    }


    .blog-page .section-head h2{

      font-size:
        clamp(
          29px,
          4vw,
          42px
        );

      line-height:1.25;

      letter-spacing:-1.5px;

    }


    .blog-page .section-head p{

      max-width:480px;

      color:var(--text-soft);

      font-size:13px;

      line-height:1.8;

    }


    /* =========================================================
       SEARCH
    ========================================================== */

    .blog-page .search-box{

      max-width:650px;

      margin:0 auto;

      padding:7px;

      display:flex;

      gap:7px;

      border:1px solid #dce5f1;

      border-radius:15px;

      background:#fff;

      box-shadow:
        0 12px 35px
        rgba(15,35,70,.05);

    }


    .blog-page .search-box input{

      flex:1;

      min-width:0;

      border:0;

      outline:0;

      padding:10px 13px;

      color:#334155;

      background:transparent;

      font-size:13px;

    }


    .blog-page .search-box input::placeholder{

      color:#a2adbb;

    }


    .blog-page .search-btn{

      flex-shrink:0;

      min-width:90px;

      border:0;

      border-radius:10px;

      color:#fff;

      background:var(--blue);

      font-size:12px;

      font-weight:800;

      cursor:pointer;

      transition:.25s ease;

    }


    .blog-page .search-btn:hover{

      background:var(--blue-dark);

    }


    .blog-page .search-result{

      display:none;

      max-width:650px;

      margin:12px auto 0;

      padding:13px 16px;

      border-radius:12px;

      color:#64748b;

      background:#f5f8fc;

      font-size:12px;

      text-align:center;

    }


    .blog-page .search-result.show{

      display:block;

    }


    /* =========================================================
       FEATURED
    ========================================================== */

    .blog-page .featured{

      display:grid;

      grid-template-columns:
        1.2fr
        .8fr;

      gap:20px;

    }


    .blog-page .featured-main{

      position:relative;

      overflow:hidden;

      min-height:390px;

      padding:38px;

      display:flex;

      flex-direction:column;

      justify-content:flex-end;

      border-radius:26px;

      color:#fff;

      background:

        radial-gradient(
          circle at 80% 10%,
          rgba(53,185,255,.45),
          transparent 30%
        ),

        linear-gradient(
          135deg,
          #0d4fd3,
          #1769ff 55%,
          #278dff
        );

      box-shadow:
        0 25px 60px
        rgba(23,105,255,.18);

    }


    .blog-page .featured-main::before{

      content:"";

      position:absolute;

      width:280px;
      height:280px;

      right:-90px;
      top:-90px;

      border-radius:50%;

      border:
        1px solid
        rgba(255,255,255,.18);

      box-shadow:
        0 0 0 40px
        rgba(255,255,255,.03),
        0 0 0 80px
        rgba(255,255,255,.02);

    }


    .blog-page .featured-grid{

      position:absolute;

      inset:0;

      opacity:.12;

      background-image:

        linear-gradient(
          rgba(255,255,255,.7) 1px,
          transparent 1px
        ),

        linear-gradient(
          90deg,
          rgba(255,255,255,.7) 1px,
          transparent 1px
        );

      background-size:40px 40px;

      mask-image:
        linear-gradient(
          to top right,
          black,
          transparent 75%
        );

      -webkit-mask-image:
        linear-gradient(
          to top right,
          black,
          transparent 75%
        );

    }


    .blog-page .featured-main > *{

      position:relative;

      z-index:1;

    }


    .blog-page .article-tag{

      display:inline-flex;

      width:max-content;

      padding:6px 10px;

      border-radius:8px;

      font-size:10px;

      font-weight:800;

      background:
        rgba(255,255,255,.14);

      border:
        1px solid
        rgba(255,255,255,.17);

      margin-bottom:15px;

    }


    .blog-page .featured-main h3{

      max-width:650px;

      font-size:
        clamp(
          25px,
          3vw,
          36px
        );

      line-height:1.3;

      letter-spacing:-1px;

      margin-bottom:13px;

    }


    .blog-page .featured-main p{

      max-width:620px;

      color:
        rgba(255,255,255,.78);

      font-size:12px;

      line-height:1.85;

      margin-bottom:20px;

    }


    .blog-page .featured-meta{

      display:flex;

      align-items:center;

      gap:15px;

      color:
        rgba(255,255,255,.62);

      font-size:10px;

    }


    .blog-page .featured-side{

      display:grid;

      gap:20px;

    }


    .blog-page .side-article{

      padding:27px;

      display:flex;

      flex-direction:column;

      justify-content:center;

      background:#fff;

      border:1px solid var(--border);

      border-radius:22px;

      transition:.3s ease;

    }


    .blog-page .side-article:hover{

      transform:translateY(-5px);

      box-shadow:
        0 18px 45px
        rgba(15,35,70,.07);

    }


    .blog-page .side-article .article-label{

      color:var(--blue);

      font-size:10px;

      font-weight:900;

      margin-bottom:9px;

    }


    .blog-page .side-article h3{

      font-size:18px;

      line-height:1.45;

      margin-bottom:9px;

    }


    .blog-page .side-article p{

      color:#94a3b8;

      font-size:11px;

      line-height:1.8;

    }


    /* =========================================================
       ARTICLES
    ========================================================== */

    .blog-page .article-section{

      background:var(--bg-soft);

    }


    .blog-page .article-grid{

      display:grid;

      grid-template-columns:
        repeat(3,1fr);

      gap:18px;

    }


    .blog-page .article-card{

      overflow:hidden;

      background:#fff;

      border:1px solid var(--border);

      border-radius:21px;

      transition:.3s ease;

    }


    .blog-page .article-card:hover{

      transform:translateY(-6px);

      box-shadow:
        0 20px 45px
        rgba(15,35,70,.07);

    }


    .blog-page .article-cover{

      position:relative;

      height:175px;

      overflow:hidden;

      background:
        linear-gradient(
          135deg,
          #eef5ff,
          #f8fbff
        );

    }


    .blog-page .article-cover::before{

      content:"";

      position:absolute;

      width:170px;
      height:170px;

      right:-45px;
      top:-50px;

      border-radius:50%;

      border:
        20px solid
        rgba(23,105,255,.07);

    }


    .blog-page .article-cover::after{

      content:"";

      position:absolute;

      width:90px;
      height:90px;

      left:35px;
      bottom:-35px;

      border-radius:22px;

      background:
        rgba(53,185,255,.10);

      transform:rotate(25deg);

    }


    .blog-page .cover-icon{

      position:absolute;

      left:28px;
      top:28px;

      width:47px;
      height:47px;

      display:flex;

      align-items:center;
      justify-content:center;

      border-radius:14px;

      color:var(--blue);

      background:#fff;

      font-size:13px;

      font-weight:900;

      box-shadow:
        0 10px 25px
        rgba(23,105,255,.10);

    }


    .blog-page .article-content{

      padding:23px;

    }


    .blog-page .article-category{

      display:inline-block;

      color:var(--blue);

      font-size:10px;

      font-weight:900;

      margin-bottom:8px;

    }


    .blog-page .article-card h3{

      font-size:17px;

      line-height:1.5;

      margin-bottom:9px;

    }


    .blog-page .article-card p{

      color:#94a3b8;

      font-size:11px;

      line-height:1.8;

      margin-bottom:15px;

    }


    .blog-page .article-meta{

      display:flex;

      align-items:center;

      justify-content:space-between;

      color:#a1acba;

      font-size:10px;

    }


    .blog-page .article-more{

      color:var(--blue);

      font-weight:800;

    }


    /* =========================================================
       KNOWLEDGE
    ========================================================== */

    .blog-page .knowledge-grid{

      display:grid;

      grid-template-columns:
        repeat(4,1fr);

      gap:14px;

    }


    .blog-page .knowledge{

      padding:24px;

      border-radius:19px;

      border:1px solid var(--border);

      background:#fff;

      transition:.3s ease;

    }


    .blog-page .knowledge:hover{

      transform:translateY(-5px);

      border-color:#d5e3f8;

      box-shadow:
        0 15px 35px
        rgba(15,35,70,.06);

    }


    .blog-page .knowledge-icon{

      width:43px;
      height:43px;

      display:flex;

      align-items:center;
      justify-content:center;

      margin-bottom:15px;

      border-radius:13px;

      background:#edf5ff;

      color:var(--blue);

      font-size:12px;

      font-weight:900;

    }


    .blog-page .knowledge h3{

      font-size:15px;

      margin-bottom:7px;

    }


    .blog-page .knowledge p{

      color:#94a3b8;

      font-size:10px;

      line-height:1.8;

    }


    /* =========================================================
       CTA
    ========================================================== */

    .blog-page .cta{

      padding:105px 0;

      text-align:center;

      background:#f7faff;

    }


    .blog-page .cta h2{

      font-size:
        clamp(
          30px,
          4vw,
          44px
        );

      line-height:1.25;

      letter-spacing:-1.5px;

      margin-bottom:14px;

    }


    .blog-page .cta p{

      color:var(--text-soft);

      font-size:14px;

      margin-bottom:28px;

    }


    .blog-page .cta-actions{

      display:flex;

      justify-content:center;

      flex-wrap:wrap;

      gap:12px;

    }


    /* =========================================================
       FOOTER
       与首页母版统一
    ========================================================== */

    .blog-page .footer{

      padding:65px 0 25px;

      background:#091629;

      color:#fff;

    }


    .blog-page .footer-grid{

      display:grid;

      grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1fr;

      gap:45px;

      padding-bottom:48px;

      border-bottom:
        1px solid
        rgba(255,255,255,.08);

    }


    .blog-page .footer-brand p{

      max-width:330px;

      margin:16px 0 0;

      color:#8190a7;

      font-size:13px;

      line-height:1.9;

    }


    .blog-page .footer-title{

      margin-bottom:15px;

      font-size:14px;

      font-weight:700;

    }


    .blog-page .footer-links{

      display:grid;

      gap:9px;

    }


    .blog-page .footer-links a{

      color:#8190a7;

      font-size:13px;

      transition:color .2s ease;

    }


    .blog-page .footer-links a:hover{

      color:#fff;

    }


    .blog-page .footer-bottom{

      display:flex;

      justify-content:space-between;

      gap:20px;

      padding-top:23px;

      color:#65748b;

      font-size:12px;

    }


    /* =========================================================
       REVEAL
    ========================================================== */

    .blog-page .reveal{

      opacity:0;

      transform:translateY(24px);

      transition:
        opacity .75s ease,
        transform .75s ease;

    }


    .blog-page .reveal.show{

      opacity:1;

      transform:translateY(0);

    }


    .blog-page .delay-1{

      transition-delay:.08s;

    }


    .blog-page .delay-2{

      transition-delay:.16s;

    }


    .blog-page .delay-3{

      transition-delay:.24s;

    }


    /* =========================================================
       RESPONSIVE
    ========================================================== */

    @media(max-width:1080px){

      .blog-page .footer-grid{

        grid-template-columns:
          repeat(3,1fr);

      }

    }


    @media(max-width:1050px){

      .blog-page .nav{

        gap:18px;

      }


      .blog-page .nav a{

        font-size:13px;

      }

    }


    @media(max-width:850px){

      .blog-page .nav,
      .blog-page .header-actions{

        display:none;

      }


      .blog-page .menu-btn{

        display:block;

        margin-left:auto;

      }


      .blog-page .mobile-panel{

        position:absolute;

        top:76px;

        left:0;

        width:100%;

        padding:
          15px
          20px
          20px;

        background:
          rgba(255,255,255,.97);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        border-bottom:
          1px solid #e7edf5;

        box-shadow:
          0 20px 40px
          rgba(15,35,70,.08);

      }


      .blog-page .mobile-panel.open{

        display:block;

      }


      .blog-page .mobile-panel a{

        display:block;

        padding:12px 5px;

        color:#475569;

        font-size:14px;

        font-weight:600;

        border-bottom:
          1px solid #f0f3f7;

      }


      .blog-page .mobile-panel a.active{

        color:var(--blue);

      }


      .blog-page .mobile-panel .mobile-cta{

        margin-top:12px;

        text-align:center;

        border:0;

        border-radius:10px;

        color:#fff;

        background:var(--blue);

      }


      .blog-page .featured{

        grid-template-columns:1fr;

      }


      .blog-page .article-grid{

        grid-template-columns:
          repeat(2,1fr);

      }


      .blog-page .knowledge-grid{

        grid-template-columns:
          repeat(2,1fr);

      }


      .blog-page .footer-grid{

        grid-template-columns:
          repeat(2,1fr);

      }


      .blog-page .footer-brand{

        grid-column:1 / -1;

      }


      .blog-page .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

      }

    }


    @media(max-width:560px){

      .blog-page .container{

        width:
          min(
            var(--container),
            calc(100% - 28px)
          );

      }


      .blog-page .header{

        height:68px;

      }


      .blog-page .header-inner{

        height:68px;

      }


      .blog-page .mobile-panel{

        top:68px;

      }


      .blog-page .logo-icon img{

        max-height:40px;

      }


      .blog-page .hero{

        padding:
          112px
          0
          65px;

      }


      .blog-page .hero h1{

        font-size:37px;

        letter-spacing:-1.7px;

      }


      .blog-page .hero p{

        font-size:14px;

      }


      .blog-page .category-section{

        padding-top:24px;

      }


      .blog-page .category-list{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:5px;

        scrollbar-width:none;

      }


      .blog-page .category-list::-webkit-scrollbar{

        display:none;

      }


      .blog-page .category{

        flex-shrink:0;

      }


      .blog-page .section{

        padding:70px 0;

      }


      .blog-page .section-head{

        display:block;

      }


      .blog-page .section-head p{

        margin-top:12px;

      }


      .blog-page .featured-main{

        min-height:390px;

        padding:27px;

      }


      .blog-page .featured-main h3{

        font-size:27px;

      }


      .blog-page .article-grid{

        grid-template-columns:1fr;

      }


      .blog-page .knowledge-grid{

        grid-template-columns:1fr;

      }


      .blog-page .search-box{

        border-radius:13px;

      }


      .blog-page .search-btn{

        min-width:76px;

      }


      .blog-page .cta{

        padding:75px 0;

      }


      .blog-page .footer{

        padding-top:55px;

      }


      .blog-page .footer-grid{

        grid-template-columns:
          1fr 1fr;

        gap:32px 20px;

      }


      .blog-page .footer-brand{

        grid-column:1 / -1;

      }


      .blog-page .footer-bottom{

        font-size:11px;

      }

    }

  
    /* ==========================================================
    全站统一 Header / Footer 样式（统一顶部与底部布局）
    追加于页面原有样式之后，保证所有页面渲染一致
    ========================================================== */

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .site-header, .site-header{
      position:fixed;
      z-index:1000;
      top:0;
      left:0;
      right:0;
      height:76px;
      display:flex;
      align-items:center;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid #e8eef7;
      transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .site-header.scrolled, .site-header.scrolled{
      background:rgba(255,255,255,.98);
      border-color:#e2e9f3;
      box-shadow:0 8px 30px rgba(20,48,90,.08);
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-inner, .header-inner{
      width:min(1240px,calc(100% - 40px));
      height:100%;
      margin:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .logo, .logo{
      display:flex;
      align-items:center;
      gap:11px;
      flex-shrink:0;
      text-decoration:none;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .logo-icon, .logo-icon{
      display:flex;
      align-items:center;
      justify-content:center;
      width:auto;
      height:auto;
      border-radius:0;
      box-shadow:none;
      overflow:visible;
      background:transparent;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .logo-icon img, .logo-icon img{
      width:auto;
      height:auto;
      display:block;
      max-height:44px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .nav, .nav{
      display:flex;
      align-items:center;
      gap:5px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .nav a, .nav a{
      padding:9px 13px;
      border-radius:10px;
      color:#50617d;
      font-size:14px;
      font-weight:600;
      text-decoration:none;
      transition:.25s ease;
      display:inline-block;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .nav a:hover, .nav a.active, .nav a:hover, .nav a.active{
      color:#1769ff;
      background:#edf4ff;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-actions, .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-shrink:0;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-help, .header-help{
      padding:9px 12px;
      color:#52637e;
      font-size:14px;
      font-weight:600;
      text-decoration:none;
      transition:.25s ease;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-help:hover, .header-help:hover{
      color:#1769ff;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-btn, .header-btn{
      padding:11px 18px;
      border-radius:11px;
      color:#fff;
      background:#1769ff;
      font-size:14px;
      font-weight:700;
      text-decoration:none;
      box-shadow:0 8px 22px rgba(23,105,255,.22);
      transition:.25s ease;
      white-space:nowrap;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-btn:hover, .header-btn:hover{
      background:#0f5ae0;
      transform:translateY(-2px);
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .menu-btn, .menu-btn{
      display:none;
      width:42px;
      height:42px;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:5px;
      border:1px solid #dde5ef;
      border-radius:11px;
      background:#fff;
      cursor:pointer;
      flex-shrink:0;
      padding:0;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .menu-btn span, .menu-btn span{
      width:18px;
      height:2px;
      border-radius:3px;
      background:#31415d;
      display:block;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav, .mobile-nav{
      display:none;
      position:fixed;
      top:76px;
      left:0;
      right:0;
      z-index:999;
      background:#fff;
      border-bottom:1px solid #e2e9f3;
      box-shadow:0 18px 40px rgba(16,24,40,.10);
      padding:12px 20px 20px;
      flex-direction:column;
      gap:4px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav.open, .mobile-nav.open{
      display:flex;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav a, .mobile-nav a{
      padding:12px 14px;
      border-radius:10px;
      color:#3c4c63;
      font-size:15px;
      font-weight:600;
      text-decoration:none;
      transition:.2s ease;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav a:hover, .mobile-nav a.active, .mobile-nav a:hover, .mobile-nav a.active{
      color:#1769ff;
      background:#edf4ff;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav .mobile-menu-primary, .mobile-nav .mobile-menu-primary{
      margin-top:8px;
      color:#fff;
      background:#1769ff;
      text-align:center;
      border-radius:10px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav .mobile-menu-primary:hover, .mobile-nav .mobile-menu-primary:hover{
      color:#fff;
      background:#0f5ae0;
    }

    /* 屏蔽旧版移动端下拉菜单样式，统一由 .mobile-nav 承担 */
    .mq-home .site-header.mobile-open .nav,
    .products-page .site-header.mobile-open .nav,
    .mq-solutions-page .site-header.mobile-open .nav,
    .mq-features-page .site-header.mobile-open .main-nav,
    .mq-features-page .site-header.mobile-open .header-actions{
      display:none !important;
    }

    /* ---------- 统一底部 ---------- */

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .site-footer, .site-footer{
      background:#091629;
      color:#fff;
      padding:65px 0 25px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-inner, .footer-inner{
      width:min(1240px,calc(100% - 40px));
      margin:auto;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-top, .footer-top{
      display:grid;
      grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
      gap:45px;
      padding-bottom:48px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-brand, .footer-brand{
      max-width:330px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-brand .logo-icon img, .footer-brand .logo-icon img{
      max-height:44px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-brand p, .footer-brand p{
      margin:16px 0 0;
      color:#8190a7;
      font-size:13px;
      line-height:1.9;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-col h4, .footer-col h4{
      margin:0 0 15px;
      color:#fff;
      font-size:14px;
      font-weight:700;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-links, .footer-links{
      display:grid;
      gap:9px;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-links a, .footer-links a{
      color:#8190a7;
      font-size:13px;
      text-decoration:none;
      transition:.2s ease;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-links a:hover, .footer-links a:hover{
      color:#fff;
    }

    :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-bottom, .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding-top:23px;
      color:#65748b;
      font-size:12px;
    }

    /* ---------- 统一响应式 ---------- */

    @media(max-width:1080px){
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .nav, .nav{ gap:0; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .nav a, .nav a{ padding:8px 9px; font-size:13px; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-help, .header-help{ display:none; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-top, .footer-top{ grid-template-columns:repeat(3,1fr); }
    }

    @media(max-width:900px){
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .nav, .nav{ display:none; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-actions, .header-actions{ display:none; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .menu-btn, .menu-btn{ display:flex; }
    }

    @media(max-width:820px){
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .site-header, .site-header{ height:68px; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .header-inner, .header-inner{ width:calc(100% - 28px); gap:12px; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .mobile-nav, .mobile-nav{ top:68px; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-top, .footer-top{ grid-template-columns:repeat(2,1fr); gap:28px; }
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-bottom, .footer-bottom{ flex-direction:column; }
    }

    @media(max-width:480px){
      :is(.mq-home,.mq-features-page,.products-page,.mq-solutions-page,.faq-page,.blog-page,.api-page,.terms-page,.mq-download-page,.mq-404-page,.download-guide-page,.install-guide-page,.pc-guide-page,.guide-page,.blog-online-page) .footer-top, .footer-top{ grid-template-columns:1fr; }
    }