/* =====================================================
       CSS Reset & Base
    ===================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
      font-size: 16px;
      color: #333;
      background: #fff;
      line-height: 1.8;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    /* =====================================================
       Layout Helpers
    ===================================================== */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section-title {
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 12px;
      position: relative;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 56px;
      height: 4px;
      background: linear-gradient(90deg, #CC0000, #E53935);
      border-radius: 2px;
      margin: 14px auto 0;
    }
    .section-sub {
      text-align: center;
      color: #777;
      font-size: 16px;
      margin-bottom: 48px;
      margin-top: 8px;
    }

    /* =====================================================
       TOP BAR
    ===================================================== */
    .top-bar {
      background: #8C0000;
      height: 40px;
      display: flex;
      align-items: center;
    }
    .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
    .top-bar-links a {
      color: rgba(255,255,255,.82);
      font-size: 12px;
      padding: 0 10px;
      border-right: 1px solid rgba(255,255,255,.2);
      transition: color .2s;
    }
    .top-bar-links a:first-child { padding-left: 0; }
    .top-bar-links a:last-child { border-right: none; }
    .top-bar-links a:hover { color: #fff; }
    .top-bar-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .top-bar-right .tel {
      color: rgba(255,255,255,.9);
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .top-bar-right .btn-trial-sm {
      background: rgba(255,255,255,.15);
      color: #fff;
      font-size: 12px;
      padding: 4px 14px;
      border-radius: 3px;
      border: 1px solid rgba(255,255,255,.3);
      transition: background .2s;
    }
    .top-bar-right .btn-trial-sm:hover { background: rgba(255,255,255,.28); }

    /* =====================================================
       MAIN NAV
    ===================================================== */
    .main-nav {
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
      position: sticky;
      top: 0;
      z-index: 900;
    }
    .main-nav .container {
      display: flex;
      align-items: center;
      height: 72px;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .nav-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #CC0000, #8C0000);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nav-logo-icon svg { width: 22px; height: 22px; fill: #fff; }
    .nav-logo-text {
      font-size: 20px;
      font-weight: 800;
      color: #1a1a1a;
      letter-spacing: 1px;
    }
    .nav-logo-text span { color: #CC0000; }
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-item { position: relative; }
    .nav-item > a {
      display: block;
      padding: 8px 16px;
      font-size: 14px;
      color: #333;
      border-radius: 4px;
      transition: all .2s;
      font-weight: 500;
    }
    .nav-item > a:hover,
    .nav-item.active > a {
      color: #CC0000;
      background: rgba(204,0,0,.05);
    }
    .nav-item.active > a { font-weight: 700; }
    .nav-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      background: #fff;
      min-width: 180px;
      border-radius: 6px;
      box-shadow: 0 8px 32px rgba(0,0,0,.12);
      padding: 8px 0;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: all .22s;
      z-index: 200;
      border-top: 3px solid #CC0000;
    }
    .nav-item:hover .nav-dropdown {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
    .nav-dropdown a {
      display: block;
      padding: 9px 20px;
      font-size: 14px;
      color: #444;
      transition: all .15s;
    }
    .nav-dropdown a:hover {
      color: #CC0000;
      background: #fef5f5;
      padding-left: 26px;
    }
    .nav-cta {
      background: #CC0000;
      color: #fff !important;
      border-radius: 4px;
      padding: 8px 20px !important;
      font-weight: 600 !important;
      transition: background .2s !important;
    }
    .nav-cta:hover { background: #A80000 !important; }

    /* =====================================================
       BANNER / HERO
    ===================================================== */
    .page-banner {
      background: linear-gradient(135deg, #6B0000 0%, #9C0000 35%, #C62828 70%, #8C0000 100%);
      position: relative;
      overflow: hidden;
      padding: 80px 0 88px;
    }
    .page-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 60%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,.04) 0%, transparent 60%);
    }
    /* 网格背景 */
    .page-banner::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 50px 50px;
    }
    .banner-inner {
      position: relative;
      z-index: 2;
      text-align: center;
    }
    .banner-breadcrumb {
      font-size: 14px;
      color: rgba(255,255,255,.6);
      margin-bottom: 20px;
    }
    .banner-breadcrumb a { color: rgba(255,255,255,.6); }
    .banner-breadcrumb a:hover { color: #fff; }
    .banner-breadcrumb span { margin: 0 8px; }
    .banner-tag {
      display: inline-block;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.2);
      color: rgba(255,255,255,.9);
      font-size: 14px;
      padding: 5px 18px;
      border-radius: 20px;
      margin-bottom: 20px;
      letter-spacing: 2px;
    }
    .banner-h1 {
      font-size: 44px;
      font-weight: 800;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 20px;
      letter-spacing: 2px;
    }
    .banner-h1 em {
      font-style: normal;
      background: linear-gradient(90deg, #FFD54F, #FFF176, #FFD54F);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .banner-desc {
      font-size: 16px;
      color: rgba(255,255,255,.82);
      max-width: 780px;
      margin: 0 auto 36px;
      line-height: 1.9;
    }
    .banner-formula {
      display: inline-block;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 8px;
      padding: 12px 36px;
      font-size: 16px;
      color: #fff;
      font-weight: 600;
      letter-spacing: 1px;
      margin-bottom: 36px;
    }
    .banner-formula .hl { color: #FFD54F; }
    .banner-stats {
      display: flex;
      justify-content: center;
      gap: 0;
    }
    .banner-stat {
      text-align: center;
      padding: 0 36px;
      border-right: 1px solid rgba(255,255,255,.2);
    }
    .banner-stat:last-child { border-right: none; }
    .banner-stat-num {
      font-size: 34px;
      font-weight: 800;
      color: #FFD54F;
      line-height: 1.2;
    }
    .banner-stat-label {
      font-size: 14px;
      color: #fff;
      margin-top: 4px;
    }

    /* =====================================================
       SECTION 1: 什么是AI党建
    ===================================================== */
    .sec-what {
      padding: 80px 0;
      background: #fff;
    }
    .what-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    .what-content {}
    .what-label {
      display: inline-block;
      background: #FFF0F0;
      color: #CC0000;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 3px;
      padding: 4px 14px;
      border-radius: 3px;
      margin-bottom: 16px;
      border-left: 3px solid #CC0000;
    }
    .what-h2 {
      font-size: 36px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 20px;
      line-height: 1.4;
    }
    .what-p {
      color: #555;
      font-size: 16px;
      line-height: 2;
      margin-bottom: 16px;
      text-indent: 2em;
    }
    .what-formula-box {
      background: linear-gradient(135deg, #FFF5F5, #FFF0F0);
      border: 1px solid #FFCDD2;
      border-radius: 10px;
      padding: 20px 24px;
      margin-top: 24px;
    }
    .what-formula-box p {
      font-size: 16px;
      font-weight: 700;
      color: #CC0000;
      text-align: center;
      line-height: 1.6;
    }
    .what-formula-box p em {
      font-style: normal;
      color: #000;
    }
    .what-transitions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 24px;
    }
    .what-trans-item {
      background: #FAFAFA;
      border-left: 3px solid #CC0000;
      border-radius: 0 6px 6px 0;
      padding: 12px 16px;
      font-size: 14px;
      color: #555;
    }
    .what-trans-item strong {
      color: #CC0000;
      display: block;
      font-size: 16px;
      margin-bottom: 3px;
      letter-spacing: 1px;
    }
    /* 右侧图示 */
    .what-visual {
      position: relative;
    }
    .what-visual-card {
      background: linear-gradient(135deg, #8C0000 0%, #CC0000 60%, #E53935 100%);
      border-radius: 20px;
      padding: 40px 36px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(140,0,0,.3);
    }
    .what-visual-card::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: rgba(255,255,255,.05);
    }
    .what-visual-card::after {
      content: '';
      position: absolute;
      bottom: -50px; left: -30px;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: rgba(255,255,255,.04);
    }
    .what-visual-card h3 {
      font-size: 22px;
      font-weight: 800;
    }
    .what-visual-card .subtitle {
      font-size: 16px;
      color: rgba(255,255,255,.7);
      margin-bottom: 28px;
    }
    .wvc-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }
    .wvc-icon {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,.25);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 12px;
    }
    .wvc-text strong {
      display: block;
      font-size: 16px;
	  color:#FFD54F;
    }
    .wvc-text span {
      font-size: 12px;
      color: rgba(255,255,255,.72);
      line-height: 1.5;
    }

    /* =====================================================
       SECTION 2: 技术架构四层体系（全新交互式设计）
    ===================================================== */
    .sec-arch {
      padding: 80px 0;
      background: #F8F9FB;
      position: relative;
    }
    .arch-wrapper {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
    }

    /* 四层卡片 */
    .arch-layer {
      display: flex;
      gap: 0;
      margin-bottom: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,.05);
      transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s cubic-bezier(.25,.8,.25,1);
      position: relative;
      perspective: 1000px;
    }
    .arch-layer:hover {
      transform: translateX(8px) scale(1.01);
      box-shadow: 0 12px 40px rgba(0,0,0,.12);
      z-index: 10;
    }

    /* 编号徽章 */
    .arch-layer-no {
      width: 180px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 28px 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .arch-layer-no::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 60%);
      animation: archShimmer 6s ease-in-out infinite;
    }
    @keyframes archShimmer {
      0%, 100% { transform: translate(-30%, -30%); }
      50% { transform: translate(10%, 10%); }
    }
    .arch-layer-no .num {
      font-size: 32px;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 8px;
      text-shadow: 0 2px 8px rgba(0,0,0,.2);
      position: relative;
      z-index: 1;
    }
    .arch-layer-no .label {
      font-size: 16px;
      opacity: .9;
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }

    /* 内容主体 */
    .arch-layer-body {
      flex: 1;
      padding: 28px 36px;
      background: #fff;
      position: relative;
      transition: background .3s;
    }
    .arch-layer:hover .arch-layer-body {
      background: #FFFEFE;
    }

    /* 标题行 */
    .arch-layer-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }
    .arch-layer-title {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
    }
    .arch-layer-tag {
      font-size: 12px;
      padding: 4px 14px;
      border-radius: 14px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    /* 描述文字 */
    .arch-layer-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 18px;
      line-height: 1.8;
    }

    /* 标签组 */
    .arch-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .arch-tag {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      padding: 7px 16px;
      border-radius: 6px;
      font-weight: 600;
      cursor: default;
      transition: all .25s cubic-bezier(.25,.8,.25,1);
      position: relative;
      overflow: hidden;
    }
    .arch-tag::before {
      content: '';
      position: absolute;
      inset: 0;
      background: currentColor;
      opacity: 0;
      transition: opacity .2s;
    }
    .arch-tag:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }
    .arch-tag:hover::before {
      opacity: .06;
    }

    /* hover展开详情 */
    .arch-layer-detail {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s cubic-bezier(.25,.8,.25,1), margin .3s, opacity .3s;
      opacity: 0;
      margin-top: 0;
    }
    .arch-layer:hover .arch-layer-detail {
      max-height: 200px;
      opacity: 1;
      margin-top: 16px;
    }
    .arch-layer-detail-inner {
      padding: 14px 18px;
      background: #FAFAFA;
      border-radius: 8px;
      border-left: 3px solid #CC0000;
      font-size: 14px;
      color: #888;
      line-height: 1.8;
    }
    .arch-layer-detail-inner strong {
      color: #CC0000;
      font-weight: 700;
    }

/* 层级配色 — 参考数据中台四色：青绿→蓝→金黄→紫 */
    /* 第一层：底座 青绿（技术基座） */
    .layer-1 .arch-layer-no { background: linear-gradient(135deg, #0D9B82 0%, #1AB899 40%, #2ED8AE 100%); color: #fff; }
    .layer-1 .arch-layer-tag { background: #E8F8F5; color: #0D9B82; }
    .layer-1 .arch-tag { background: #E8F8F5; color: #0D9B82; border: 1px solid #B2EBD8; }
    .layer-1 .arch-layer-detail-inner { border-left-color: #1AB899; }
    .layer-1 .arch-layer-title { color: #0D8068; }
    /* 第二层：知识 蓝色（数据处理） */
    .layer-2 .arch-layer-no { background: linear-gradient(135deg, #2E6BB0 0%, #4488CE 40%, #5CA3E3 100%); color: #fff; }
    .layer-2 .arch-layer-tag { background: #EEF4FA; color: #2E6BB0; }
    .layer-2 .arch-tag { background: #EEF4FA; color: #2E6BB0; border: 1px solid #BDD4EF; }
    .layer-2 .arch-layer-detail-inner { border-left-color: #4488CE; }
    .layer-2 .arch-layer-title { color: #23558E; }
    /* 第三层：应用 金黄（核心能力） */
    .layer-3 .arch-layer-no { background: linear-gradient(135deg, #C98A16 0%, #E6A82C 40%, #F0BC44 100%); color: #fff; }
    .layer-3 .arch-layer-tag { background: #FFF9EC; color: #B07810; }
    .layer-3 .arch-tag { background: #FFF9EC; color: #B07810; border: 1px solid #FFE08A; }
    .layer-3 .arch-layer-detail-inner { border-left-color: #E6A82C; }
    .layer-3 .arch-layer-title { color: #A06A08; }
    /* 第四层：价值 紫罗兰（智能赋能） */
    .layer-4 .arch-layer-no { background: linear-gradient(135deg, #6B5BA0 0%, #8274BE 40%, #9B8CD6 100%); color: #fff; }
    .layer-4 .arch-layer-tag { background: #F4F1FA; color: #6B5BA0; }
    .layer-4 .arch-tag { background: #F4F1FA; color: #6B5BA0; border: 1px solid #D4CEE8; }
    .layer-4 .arch-layer-detail-inner { border-left-color: #8274BE; }
    .layer-4 .arch-layer-title { color: #55478A; }

        /* 动态流光连接器 */
    .arch-connector {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 38px 0;
      position: relative;
      height: 42px;
    }
    .arch-connector-capsule {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 20px 3px 20px;
      border-radius: 20px;
      background: rgba(140,130,160,.06);
      border: 1px dashed rgba(140,130,160,.18);
      position: relative;
    }
    .arch-connector-chevron {
      width: 10px;
      height: 10px;
      border-top: 2px solid rgba(140,130,160,.35);
      border-right: 2px solid rgba(140,130,160,.35);
      transform: rotate(-45deg);
    }

    /* =====================================================
       SECTION 3: 五大应用矩阵
    ===================================================== */
    .sec-apps {
      padding: 80px 0;
      background: #fff;
    }
    .apps-nav {
      display: flex;
      justify-content: center;
      gap: 0;
      margin-bottom: 48px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0,0,0,.08);
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .app-nav-btn {
      flex: 1;
      padding: 14px 10px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: #666;
      background: #fff;
      cursor: pointer;
      border-right: 1px solid #f0f0f0;
      transition: all .25s;
    }
    .app-nav-btn:last-child { border-right: none; }
    .app-nav-btn .icon { font-size: 20px; display: block; margin-bottom: 4px; }
    .app-nav-btn.active {
      background: #CC0000;
      color: #fff;
    }
    .app-nav-btn:not(.active):hover {
      background: #FFF5F5;
      color: #CC0000;
    }

    .app-panels {}
    .app-panel {
      display: none;
      animation: fadeIn .4s ease;
    }
    .app-panel.active { display: block; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .app-panel-inner {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 48px;
      align-items: start;
    }
    .app-panel-left {}
    .app-panel-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #FFF0F0;
      color: #CC0000;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 4px;
      margin-bottom: 24px;
      border-left: 3px solid #CC0000;
    }
    .app-panel-h3 {
      font-size: 34px;
      font-weight: 800;
      color: #1a1a1a;
      margin-bottom: 12px;
      line-height: 1.3;
    }
    .app-panel-role {
      font-size: 16px;
      color: #CC0000;
      margin-bottom: 24px;
      font-style: italic;
    }
    .app-pain {
      background: #FFF8F8;
      border: 1px solid #FFE0E0;
      border-radius: 8px;
      padding: 14px 18px;
      margin-bottom: 30px;
    }
    .app-pain-label {
      font-size: 16px;
      font-weight: 700;
      color: #CC0000;
      letter-spacing: 2px;
      margin-bottom: 6px;
    }
    .app-pain p {
      font-size: 14px;
      color: #666;
      line-height: 1.7;
    }
    .app-value {
      background: linear-gradient(135deg, #8C0000, #CC0000);
      border-radius: 8px;
      padding: 16px 18px;
      color: #fff;
    }
    .app-value-label {
      font-size: 16px;
      font-weight: 700;
      color: rgba(255,255,255,.7);
      letter-spacing: 2px;
      margin-bottom: 6px;
    }
    .app-value p {
      font-size: 14px;
      line-height: 1.7;
    }

    .app-panel-right {}
    .app-features-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    .app-feature-item {
      display: flex;
      gap: 16px;
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 10px;
      background: #FAFAFA;
      transition: all .25s;
    }
    .app-feature-item:hover {
      background: #FFF5F5;
      transform: translateX(4px);
      box-shadow: 0 2px 12px rgba(204,0,0,.06);
    }
    .app-feat-icon {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: linear-gradient(135deg, #CC0000, #E53935);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
      color: #fff;
    }
    .app-feat-body {}
    .app-feat-body strong {
      display: block;
      color: #1a1a1a;
      margin-bottom: 4px;
    }
    .app-feat-body p {
      font-size: 12px;
      color: #777;
      line-height: 1.65;
    }
    .app-feat-effect {
      display: inline-block;
      background: #FFF;
      color: #CC0000;
      font-size: 14px;
      padding: 2px 8px;
      border-radius: 3px;
      margin-top: 4px;
      font-weight: 600;
    }

    /* ====== PANEL 5 DIGITAL: 右侧功能2列网格 ====== */
    .panel-digital {
      grid-template-columns: 4fr 8fr;
    }
    .panel-digital .app-panel-right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-content: start;
    }
    .panel-digital .app-features-title {
      grid-column: 1 / -1;
    }
    .panel-digital .app-feature-item {
      margin-bottom: 0;
      flex-direction: column;
      gap: 8px;
      padding: 14px;
    }
    .panel-digital .app-feat-icon {
      width: 36px;
      height: 36px;
      font-size: 14px;
      border-radius: 6px;
    }
    .panel-digital .app-feat-body strong {
      font-size: 16px;
    }

    /* =====================================================
       SECTION 4: 核心方法论 1-6-5-5
    ===================================================== */
    .sec-method {
      padding: 80px 0;
      background: #F8F9FB;
    }
    .method-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 56px;
    }
    .method-card {
      background: #fff;
      border-radius: 12px;
      padding: 28px 24px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,.05);
      border-top: 4px solid #CC0000;
      transition: transform .3s, box-shadow .3s;
    }
    .method-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 36px rgba(0,0,0,.1);
    }
    .method-num {
      font-size: 52px;
      font-weight: 900;
      background: linear-gradient(135deg, #CC0000, #E53935);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 8px;
    }
    .method-dimension {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 10px;
    }
    .method-items {
      font-size: 12px;
      color: #888;
      line-height: 1.8;
    }
    .method-meaning {
      font-size: 14px;
      color: #CC0000;
      margin-top: 8px;
      font-weight: 600;
    }

    /* 智能闭环 */
    .method-loop {
      background: #fff;
      border-radius: 16px;
      padding: 40px 48px;
      box-shadow: 0 4px 24px rgba(0,0,0,.06);
    }
    .method-loop h3 {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      color: #1a1a1a;
    }
    .loop-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
    }
    .loop-step {
      text-align: center;
      padding: 20px 24px;
      flex: 1;
      min-width: 120px;
      position: relative;
    }
    .loop-step-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin: 0 auto 12px;
      border: 3px solid transparent;background: #FFF0F0; border-color: #CC0000; color: #CC0000; 
    }
    .loop-step-name {
      font-size: 18px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 4px;
    }
    .loop-step-tech {
      font-size: 14px;
      color: #999;
      line-height: 1.6;
    }
    .loop-arrow {
      color: #CC0000;
      opacity: .35;
      font-size: 32px;
      margin: 0 -4px;
      padding-bottom: 100px;
    }

    /* =====================================================
       SECTION 5: AI党建 vs 传统党建
    ===================================================== */
    .sec-compare {
      padding: 80px 0;
      background: #fff;
    }
    .compare-table-wrapper {
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,.07);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 700px;
    }
    .compare-table thead tr {
      background: linear-gradient(135deg, #8C0000, #CC0000);
    }
    .compare-table thead th {
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      padding: 16px 24px;
      text-align: center;
      letter-spacing: 1px;
    }
    .compare-table thead th:first-child { width: 18%; border-radius: 12px 0 0 0; }
    .compare-table thead th:last-child { border-radius: 0 12px 0 0; }
    .compare-table tbody tr {
      border-bottom: 1px solid #F5F5F5;
      transition: background .2s;
    }
    .compare-table tbody tr:hover { background: #FFF5F5; }
    .compare-table tbody tr:last-child { border-bottom: none; }
    .compare-table td {
      padding: 18px 24px;
      font-size: 16px;
      vertical-align: top;
      line-height: 1.7;
    }
    .compare-table .td-dim {
      font-weight: 700;
      color: #333;
      background: #FAFAFA;text-align:center;
    }
    .compare-table .td-old { color: #888; }
    .compare-table .td-new {
      color: #CC0000;
      font-weight: 600;
    }
    .compare-table .td-new-icon { margin-right: 4px; }

    /* =====================================================
       SECTION 6: 五重赋能价值
    ===================================================== */
    .sec-value {
      padding: 80px 0;
      background: #F8F9FB;
    }
    .value-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .value-card {
      background: #fff;
      border-radius: 12px;
      padding: 46px 20px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(0,0,0,.05);
      transition: transform .3s, box-shadow .3s;
      position: relative;
      overflow: hidden;
    }
    .value-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #CC0000, #E53935);
    }
    .value-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 40px rgba(0,0,0,.1);
    }
    .value-card:hover::before {
      height: 6px;
    }
    .value-icon {
      font-size: 40px;
      margin-bottom: 14px;
      display: block;
    }
    .value-title {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 20px;
    }
    .value-desc {
      font-size: 12px;
      color: #777;
      line-height: 1.75;
    }
    .value-tech {
      margin-top: 22px;
      font-size: 12px;
      color: #CC0000;
      background: #FFF0F0;
      border-radius: 4px;
      padding: 5px 8px;
      line-height: 1.6;
    }

    /* =====================================================
       CTA SECTION
    ===================================================== */
    .sec-cta {
      padding: 72px 0;
      background: linear-gradient(135deg, #8C0000, #CC0000 50%, #E53935);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .sec-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .sec-cta .container { position: relative; z-index: 2; }
    .cta-h2 {
      font-size: 34px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 12px;
    }
    .cta-p {
      font-size: 16px;
      color: rgba(255,255,255,.85);
      margin-bottom: 32px;
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.8;
    }
    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
    }
    .btn-cta-primary {
      background: #fff;
      color: #CC0000;
      font-size: 16px;
      font-weight: 700;
      padding: 14px 40px;
      border-radius: 6px;
      display: inline-block;
      transition: all .25s;
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
    }
    .btn-cta-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 32px rgba(0,0,0,.2);
    }
    .btn-cta-secondary {
      background: transparent;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      padding: 14px 40px;
      border-radius: 6px;
      display: inline-block;
      border: 2px solid rgba(255,255,255,.5);
      transition: all .25s;
    }
    .btn-cta-secondary:hover {
      border-color: #fff;
      background: rgba(255,255,255,.1);
    }
    .cta-tel {
      margin-top: 20px;
      font-size: 14px;
      color: rgba(255,255,255,.7);
    }
    .cta-tel strong { color: #FFD54F; }

    /* =====================================================
       FOOTER
    ===================================================== */
    .footer {
      background: #1a1a1a;
      padding: 56px 0 0;
      color: rgba(255,255,255,.7);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand {}
    .footer-brand h3 {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 12px;
    }
    .footer-brand h3 span { color: #CC0000; }
    .footer-brand p {
      font-size: 14px;
      line-height: 1.85;
      color: rgba(255,255,255,.55);
      max-width: 240px;
    }
    .footer-brand .footer-tel {
      margin-top: 16px;
      font-size: 18px;
      font-weight: 700;
      color: #CC0000;
    }
    .footer-col h4 {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-col ul li { margin-bottom: 9px; }
    .footer-col ul li a {
      font-size: 14px;
      color: rgba(255,255,255,.55);
      transition: color .2s;
    }
    .footer-col ul li a:hover { color: #CC0000; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.06);
      padding: 18px 0;
    }
    .footer-bottom-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: rgba(255,255,255,.35);
    }
    .footer-links-row {
      display: flex;
      gap: 16px;
    }
    .footer-links-row a {
      color: rgba(255,255,255,.35);
      transition: color .2s;
    }
    .footer-links-row a:hover { color: #CC0000; }

    /* =====================================================
       FLOATING SIDEBAR
    ===================================================== */
    .float-sidebar {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 800;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .float-btn {
      width: 54px;
      background: #CC0000;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 8px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,.15);
      transition: background .2s, width .2s;
      position: relative;
      overflow: hidden;
    }
    .float-btn:first-child { border-radius: 8px 0 0 0; }
    .float-btn:last-child { border-radius: 0 0 0 8px; border-bottom: none; }
    .float-btn:hover { background: #A80000; width: 120px; }
    .float-btn:hover .float-btn-expand { max-width: 80px; opacity: 1; }
    .float-btn-icon { font-size: 18px; margin-bottom: 3px; }
    .float-btn-text { font-size: 12px; white-space: nowrap; }
    .float-btn-expand {
      max-width: 0;
      overflow: hidden;
      opacity: 0;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 600;
      transition: max-width .3s, opacity .3s;
      margin-left: 4px;
    }

    /* =====================================================
       RESPONSIVE
    ===================================================== */
    @media (max-width: 1100px) {
      .method-grid { grid-template-columns: repeat(2, 1fr); }
      .value-cards { grid-template-columns: repeat(3, 1fr); }
      .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
      .arch-layer-no { width: 80px; padding: 20px 10px; }
      .arch-layer-no .num { font-size: 26px; }
    }
    @media (max-width: 900px) {
      .what-grid { grid-template-columns: 1fr; }
      .app-panel-inner { grid-template-columns: 1fr; }
      .loop-steps { gap: 8px; }
      .loop-arrow { display: none; }
      .value-cards { grid-template-columns: repeat(2, 1fr); }
      .arch-layer { flex-direction: column; }
      .arch-layer-no { width: 100%; flex-direction: row; gap: 10px; padding: 14px 20px; }
      .arch-layer-no .num { font-size: 24px; margin-bottom: 0; }
      .arch-layer-body { padding: 20px; }
    }
    @media (max-width: 680px) {
      .banner-h1 { font-size: 28px; }
      .banner-stats { flex-wrap: wrap; gap: 16px; }
      .banner-stat { border-right: none; padding: 0 20px; }
      .method-grid { grid-template-columns: 1fr; }
      .apps-nav { flex-wrap: wrap; }
      .app-nav-btn { flex: 0 0 50%; border-bottom: 1px solid #f0f0f0; }
      .footer-grid { grid-template-columns: 1fr; }
      .float-sidebar { display: none; }
      .cta-buttons { flex-direction: column; align-items: center; }
      .arch-tags { gap: 6px; }
      .arch-tag { font-size: 12px; padding: 6px 12px; }
    }
  
    /* ====== SCROLL PROGRESS BAR ====== */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #CC0000, #E53935, #C8A45C);
      z-index: 9999;
      transition: width .1s;
      width: 0;
    }

    /* ====== SECTION NAV DOTS ====== */
    .section-nav {
      position: fixed;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 800;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .section-nav-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(204,0,0,.18);
      cursor: pointer;
      transition: all .3s;
      position: relative;
    }
    .section-nav-dot:hover {
      background: rgba(204,0,0,.5);
      transform: scale(1.4);
    }
    .section-nav-dot.active {
      background: #CC0000;
      box-shadow: 0 0 0 3px rgba(204,0,0,.15);
    }
    .section-nav-dot::after {
      content: attr(data-label);
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      font-size: 12px;
      color: #666;
      background: #fff;
      padding: 4px 12px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .section-nav-dot:hover::after {
      opacity: 1;
    }

    /* ====== INTERACTIVE ARCHITECTURE ====== */
    .arch-layer { cursor: pointer; }
    .arch-layer.selected {
      transform: translateX(8px) scale(1.02);
      box-shadow: 0 12px 40px rgba(0,0,0,.15);
      z-index: 10;
    }
    .arch-layer.selected .arch-layer-detail {
      max-height: 200px;
      opacity: 1;
      margin-top: 16px;
    }

    /* ====== LOOP STEP INTERACTION ====== */
    .loop-step { transition: transform .3s; }
    .loop-step:hover { transform: translateY(-6px); }
    .loop-step:hover .loop-step-icon {
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(0,0,0,.15);
    }
    .loop-step-icon { transition: transform .3s, box-shadow .3s; }
    .loop-step-icon span { font-size: 16px; font-weight: 800; color: inherit; }

    /* ====== VALUE ICON STYLING ====== */
    .value-icon {
      font-size: 22px !important;
      font-weight: 900;
      color: #CC0000 !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      background: #FFF0F0;
      border-radius: 50%;
      margin: 0 auto 14px !important;
      transition: transform .3s, box-shadow .3s;
    }
    .value-card:hover .value-icon {
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(204,0,0,.15);
    }

    /* ====== APP FEAT ICON NUMBER ====== */
    .app-feat-icon {
      font-size: 14px !important;
      font-weight: 800 !important;
      letter-spacing: -0.5px;
    }

    /* ====== COMPARE TABLE ROW INTERACTION ====== */
    .compare-table tbody tr { }
    .compare-table tbody tr:active { background: #FFF0F0; }

    /* ====== METHOD CARD CLICK ====== */
    .method-card { }
    .method-card:active { transform: translateY(-4px) scale(0.98); }

    /* ====== BANNER COUNTER ANIMATION ====== */
    .banner-stat-num { display: inline-block; }

    /* ====== WHAT-TRANS-ITEM INTERACTION ====== */
    .what-trans-item {
      transition: transform .25s, box-shadow .25s;
    }
    .what-trans-item:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(204,0,0,.08);
    }

    /* ====== INTERACTIVE APP FEATURE ITEMS ====== */
    .app-feature-item { }
    .app-feature-item .app-feat-effect {
      display: inline-block;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .3s, opacity .3s;
    }
    .app-feature-item:hover .app-feat-effect {
      max-height: 40px;
      opacity: 1;
      margin-top: 4px;
    }

    /* ====== INTERACTIVE VALUE CARDS ====== */
    .value-card .value-expand {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, opacity .3s;
      opacity: 0;
    }
    .value-card:hover .value-expand,
    .value-card.expanded .value-expand {
      max-height: 100px;
      opacity: 1;
      margin-top: 10px;
    }

    /* ====== CONNECTOR DIFF COLORS ====== */
    /* 连接器1: 金黄→紫罗兰 */
    .arch-connector:nth-child(2) .arch-connector-capsule {
      border-color: rgba(107,91,160,.2);
      background: rgba(107,91,160,.04);
    }
    .arch-connector:nth-child(2) .arch-connector-chevron {
      border-color: rgba(130,116,190,.45);
    }
    /* 连接器2: 紫罗兰→蓝 */
    .arch-connector:nth-child(4) .arch-connector-capsule {
      border-color: rgba(46,107,176,.2);
      background: rgba(46,107,176,.04);
    }
    .arch-connector:nth-child(4) .arch-connector-chevron {
      border-color: rgba(68,136,206,.45);
    }
    /* 连接器3: 蓝→青绿 */
    .arch-connector:nth-child(6) .arch-connector-capsule {
      border-color: rgba(13,155,130,.2);
      background: rgba(13,155,130,.04);
    }
    .arch-connector:nth-child(6) .arch-connector-chevron {
      border-color: rgba(26,184,153,.45);
    }

    @media (max-width: 900px) {
      .section-nav { display: none; }
    }

    .btn-cta-primary:hover {
      color: #CC0000;
    }
    .btn-cta-secondary:hover {
      color: #fff;
    }