/* roulang page: index */
:root {
      --primary: #1d4ed8;
      --primary-hover: #1e40af;
      --primary-light: #eff6ff;
      --secondary: #0284c7;
      --accent: #0d9488;
      --accent-light: #f0fdfa;
      --bg-main: #f8fafc;
      --bg-card: #ffffff;
      --bg-dark: #0f172a;
      --bg-dark-card: #1e293b;
      --text-main: #0f172a;
      --text-muted: #475569;
      --text-light: #94a3b8;
      --border-color: #e2e8f0;
      --border-dark: #334155;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
      --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
      --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
      --shadow-xl: 0 20px 30px -10px rgba(15, 23, 42, 0.1);
      --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--font-family);
      background-color: var(--bg-main);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    button, input, select, textarea {
      font-family: inherit;
    }

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

    /* 顶部服务公告 */
    .top-bar {
      background-color: #f1f5f9;
      border-bottom: 1px solid var(--border-color);
      font-size: 13px;
      color: var(--text-muted);
      padding: 7px 0;
    }
    .top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .top-bar-left, .top-bar-right {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .top-tag {
      background-color: #dbeafe;
      color: var(--primary);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    /* 主导航栏 */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }
    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.5px;
    }
    .logo-badge {
      font-size: 11px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
    }
    .nav-menu {
      display: flex;
      list-style: none;
      gap: 32px;
      align-items: center;
    }
    .nav-link {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-muted);
      position: relative;
      padding: 6px 0;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--primary);
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary);
      transition: width 0.25s ease;
    }
    .nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.25s ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-primary {
      background-color: var(--primary);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    }
    .btn-primary:hover {
      background-color: var(--primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(29, 78, 216, 0.35);
    }
    .btn-outline {
      background-color: #ffffff;
      color: var(--primary);
      border-color: #cbd5e1;
    }
    .btn-outline:hover {
      border-color: var(--primary);
      background-color: var(--primary-light);
    }
    .btn-dark {
      background-color: #0f172a;
      color: #ffffff;
    }
    .btn-dark:hover {
      background-color: #1e293b;
    }
    .btn-sm {
      padding: 6px 14px;
      font-size: 13px;
    }
    .btn-lg {
      padding: 14px 30px;
      font-size: 16px;
      border-radius: var(--radius-md);
    }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    /* 板块通用 */
    section {
      padding: 88px 0;
      position: relative;
    }
    .section-light {
      background-color: #ffffff;
    }
    .section-slate {
      background-color: var(--bg-main);
    }
    .section-dark {
      background-color: var(--bg-dark);
      color: #f8fafc;
    }
    .section-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 56px auto;
    }
    .section-subtitle-tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--primary);
      background-color: #eff6ff;
      border: 1px solid #bfdbfe;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 14px;
    }
    .section-title {
      font-size: 34px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .section-desc {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .section-dark .section-title {
      color: #ffffff;
    }
    .section-dark .section-desc {
      color: #94a3b8;
    }
    .section-dark .section-subtitle-tag {
      background-color: rgba(2, 132, 199, 0.2);
      border-color: rgba(2, 132, 199, 0.4);
      color: #38bdf8;
    }

    /* 板块一：Hero Bento 布局 */
    #hero {
      padding: 36px 0 64px 0;
    }
    .bento-hero-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-gap: 24px;
    }
    .bento-main-card {
      position: relative;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 58, 138, 0.9)), url('/assets/images/28f16a153dbb78d4.webp') center/cover no-repeat;
      border-radius: var(--radius-xl);
      padding: 56px 48px;
      color: #ffffff;
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 480px;
      overflow: hidden;
    }
    .hero-badge-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .hero-dot {
      width: 8px;
      height: 8px;
      background-color: #22c55e;
      border-radius: 50%;
      box-shadow: 0 0 10px #22c55e;
    }
    .bento-main-card h1 {
      font-size: 40px;
      font-weight: 900;
      line-height: 1.25;
      margin-bottom: 20px;
      letter-spacing: -0.5px;
    }
    .bento-main-card p {
      font-size: 16px;
      color: #cbd5e1;
      max-width: 640px;
      line-height: 1.8;
      margin-bottom: 32px;
    }
    .hero-action-group {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .bento-side-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .bento-sub-card {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: var(--shadow-md);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .bento-sub-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    .sub-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    .card-icon-box {
      width: 46px;
      height: 46px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .icon-blue {
      background-color: #eff6ff;
      color: var(--primary);
    }
    .icon-cyan {
      background-color: #f0fdfa;
      color: var(--accent);
    }
    .bento-sub-card h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 8px;
    }
    .bento-sub-card p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .kpi-indicator {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px dashed var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: var(--text-light);
    }
    .kpi-value {
      font-weight: 700;
      font-size: 17px;
      color: var(--primary);
    }

    /* Bento 底部快捷 CTA 条 */
    .bento-cta-bar {
      margin-top: 24px;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 18px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      box-shadow: var(--shadow-sm);
    }
    .cta-bar-text {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .cta-pulse {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2);
    }
    .cta-bar-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
    }
    .cta-bar-desc {
      font-size: 14px;
      color: var(--text-muted);
    }

    /* 板块二：平台背景与架构标准 (#intro) */
    .intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 56px;
      align-items: center;
    }
    .intro-content h2 {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 20px;
      line-height: 1.35;
    }
    .intro-content p {
      font-size: 16px;
      color: var(--text-muted);
      margin-bottom: 24px;
      line-height: 1.8;
    }
    .spec-box-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 28px;
    }
    .spec-item {
      display: flex;
      gap: 14px;
      padding: 14px 18px;
      background-color: #f8fafc;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
    }
    .spec-icon {
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .spec-item h4 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .spec-item p {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 0;
      line-height: 1.5;
    }
    .intro-media {
      position: relative;
    }
    .intro-img-frame {
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      border: 6px solid #ffffff;
    }
    .intro-floating-badge {
      position: absolute;
      bottom: -20px;
      right: -10px;
      background: #ffffff;
      padding: 18px 24px;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      gap: 14px;
    }

    /* 板块三：核心技术优势六宫格 (#features) */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 28px;
    }
    .feature-card {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-sm);
    }
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
      border-color: #cbd5e1;
    }
    .feature-icon-wrapper {
      width: 54px;
      height: 54px;
      border-radius: 12px;
      background-color: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: var(--Focusing on the "体育云平台" keyword within the myfictions.com domain, the goal is to continue the provided HTML snippet, ensuring proper closure. The requirement is to append code only to the existing content, strictly avoiding any redundant output of already-defined HTML structural elements (DOCTYPE, html, head, navigation/sections).


The CSS for the heading is incomplete; primary color needs to be assigned. Additional styling rules for other sections such as products, solutions, and the footer are necessary. The `<style>` block must be closed before the `<link rel="stylesheet" href="/assets/css/style.css">
</head>` and `<body>` tags can begin.


Now, the structural elements are being considered based on the provided content. The `#stats`, `#testimonials`, `#news`, `#partners`, `#faq`, and `#cta` sections need distinct HTML representations with appropriate CSS styling. A footer with contact information and copyright is required, along with floating CTAs for user interaction and basic JavaScript for dynamic features. Image assets for backgrounds and covers are available for visual integration.


`.feature-icon-wrapper`'s style is now completed, assigning the primary color to it. Considering the listed image assets, determining their appropriate placement within the section's visual hierarchy is necessary, particularly for backgrounds and content images. Further CSS rules will be developed for elements within the `#products`, `#solutions`, `#case-dark`, `#stories`, `#stats`, `#testimonials`, `#news`, `#partners`, and `#faq` sections.


CSS styling for the FAQ, CTA, footer, and floating CTA components is now underway, establishing the visual framework for user interaction and information presentation. Responsive media queries are incorporated to ensure optimal display across various screen sizes.  Structure of the HTML body is being built with header, main sections (#hero, #intro, #features, #products, #solutions, #case-dark, #stories, #stats, #testimonials, #news) as dictated by the provided information.


primary);
    }
    .feature-card h3 {
      font-size: 19px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 12px;
    }
    .feature-card p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* 板块四：热门产品与三大服务矩阵 (#products) */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 30px;
    }
    .product-card {
      background-color: #ffffff;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
    }
    .product-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
      border-color: #93c5fd;
    }
    .product-card-cover {
      position: relative;
      height: 200px;
      overflow: hidden;
    }
    .product-card-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-card-cover img {
      transform: scale(1.04);
    }
    .product-badge-overlay {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(6px);
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    .product-body {
      padding: 30px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .product-body h3 {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 12px;
    }
    .product-body p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .product-checklist {
      list-style: none;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .product-checklist li {
      font-size: 13px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .product-checklist li svg {
      color: #16a34a;
      flex-shrink: 0;
    }
    .product-load-box {
      background-color: #f8fafc;
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      margin-top: auto;
      margin-bottom: 20px;
      border: 1px solid #f1f5f9;
    }
    .product-load-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .product-load-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--primary);
    }

    /* 板块五：场景化方案推进与落地流程 (#solutions) */
    .steps-timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 24px;
      position: relative;
    }
    .step-item {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 28px 24px;
      position: relative;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
    }
    .step-item:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--primary);
    }
    .step-num-badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 800;
      color: var(--primary);
      background-color: var(--primary-light);
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .step-item h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 10px;
    }
    .step-item p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 板块六：深色沉浸式案例展区 (#case-dark) */
    .case-inner-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      grid-gap: 48px;
      align-items: center;
    }
    .case-visual-wrap {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--border-dark);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    .case-visual-wrap img {
      width: 100%;
      height: 380px;
      object-fit: cover;
    }
    .case-metric-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 16px;
      margin-top: 28px;
    }
    .case-metric-card {
      background: var(--bg-dark-card);
      border: 1px solid var(--border-dark);
      padding: 18px;
      border-radius: var(--radius-sm);
    }
    .case-metric-number {
      font-size: 26px;
      font-weight: 800;
      color: #38bdf8;
      line-height: 1.2;
    }
    .case-metric-label {
      font-size: 13px;
      color: #94a3b8;
      margin-top: 4px;
    }

    /* 板块七：行业用户实践纪实 (#stories) */
    .stories-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 32px;
    }
    .story-card {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
    }
    .story-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }
    .story-img-side {
      width: 40%;
      min-height: 240px;
    }
    .story-img-side img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .story-info-side {
      width: 60%;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .story-tag {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .story-info-side h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    .story-info-side p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .story-result-box {
      font-size: 13px;
      font-weight: 600;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 板块八：关键效能数据统计条 (#stats) */
    .stats-strip {
      background: linear-gradient(135deg, #1e3a8a, #0f172a);
      border-radius: var(--radius-xl);
      padding: 56px 48px;
      color: #ffffff;
      box-shadow: var(--shadow-xl);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 32px;
      text-align: center;
    }
    .stat-item {
      position: relative;
    }
    .stat-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -16px;
      top: 15%;
      height: 70%;
      width: 1px;
      background: rgba(255, 255, 255, 0.15);
    }
    .stat-value {
      font-size: 44px;
      font-weight: 900;
      letter-spacing: -1px;
      color: #60a5fa;
      line-height: 1.1;
      margin-bottom: 8px;
    }
    .stat-title {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }
    .stat-subtitle {
      font-size: 13px;
      color: #94a3b8;
    }

    /* 板块九：客户口碑与专家测评背书 (#testimonials) */
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 28px;
    }
    .testi-card {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .testi-stars {
      display: flex;
      gap: 4px;
      color: #f59e0b;
      margin-bottom: 16px;
    }
    .testi-quote {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 24px;
      font-style: normal;
    }
    .testi-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid #f1f5f9;
    }
    .author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--primary);
    }
    .author-meta h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
    }
    .author-meta p {
      font-size: 12px;
      color: var(--text-light);
    }

    /* 板块十：行业资讯动态 (#news) */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 28px;
    }
    .news-card {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    .news-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
    }
    .news-card-img {
      height: 180px;
      overflow: hidden;
    }
    .news-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .news-card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .news-card-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 12px;
    }
    .news-card-body h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 10px;
      line-height: 1.45;
    }
    .news-card-body p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .news-card-btn {
      margin-top: auto;
      font-size: 13px;
      font-weight: 600;
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* 板块十一：合作伙伴墙 (#partners) */
    .partners-matrix {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-gap: 20px;
    }
    .partner-card {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 22px 14px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      filter: grayscale(100%);
      opacity: 0.8;
      transition: all 0.25s ease;
      min-height: 72px;
    }
    .partner-card:hover {
      filter: grayscale(0%);
      opacity: 1;
      border-color: #93c5fd;
      color: var(--primary);
      box-shadow: var(--shadow-sm);
    }

    /* 板块十二：平台选型 FAQ (#faq) */
    .faq-wrapper {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-item {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .faq-trigger {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 20px 24px;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    .faq-trigger svg {
      transition: transform 0.25s ease;
      color: var(--primary);
      flex-shrink: 0;
    }
    .faq-content {
      padding: 0 24px 20px 24px;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      display: none;
    }
    .faq-item.active .faq-content {
      display: block;
    }
    .faq-item.active .faq-trigger svg {
      transform: rotate(180deg);
    }

    /* 板块十三：预约演示 CTA (#cta) */
    .cta-container-card {
      background: linear-gradient(135deg, #1d4ed8, #0369a1);
      border-radius: var(--radius-xl);
      padding: 64px 48px;
      color: #ffffff;
      box-shadow: var(--shadow-xl);
    }
    .cta-inner-flex {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 56px;
      align-items: center;
    }
    .cta-info h2 {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 18px;
    }
    .cta-info p {
      font-size: 16px;
      color: #e0f2fe;
      line-height: 1.7;
      margin-bottom: 24px;
    }
    .cta-form-box {
      background-color: #ffffff;
      padding: 36px;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      color: var(--text-main);
    }
    .form-group {
      margin-bottom: 18px;
    }
    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .form-control {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    }
    .form-privacy-tip {
      font-size: 12px;
      color: var(--text-light);
      margin-top: 12px;
      line-height: 1.5;
    }

    /* 全局页脚 */
    .site-footer {
      background-color: #0b1120;
      color: #94a3b8;
      padding: 72px 0 32px 0;
      border-top: 1px solid #1e293b;
      font-size: 14px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      grid-gap: 48px;
      margin-bottom: 56px;
    }
    .footer-logo {
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 16px;
      display: inline-block;
    }
    .footer-about {
      line-height: 1.7;
      margin-bottom: 20px;
      max-width: 320px;
    }
    .footer-col h4 {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-links a:hover {
      color: #ffffff;
      padding-left: 4px;
    }
    .footer-contact-item {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    .footer-bottom {
      padding-top: 32px;
      border-top: 1px solid #1e293b;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 13px;
    }

    /* 移动端菜单抽屉 */
    .mobile-drawer {
      display: none;
      position: fixed;
      top: 72px;
      left: 0;
      width: 100%;
      background: #ffffff;
      box-shadow: var(--shadow-lg);
      border-bottom: 1px solid var(--border-color);
      padding: 24px;
      z-index: 999;
    }
    .mobile-drawer.open {
      display: block;
    }
    .mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .mobile-nav-link {
      font-size: 1The code snippet appears to be styling the mobile navigation links. Determining the correct `font-size` value is essential for readability and visual consistency across different devices. Starting to add styling rules for hover effect, which is `background-color: #f0f0f0;`.


6px;  color: #333;  text-decoration: none;  display: block;  padding: 10px 15px;  border-bottom: 1px solid #eee; }
    .mobile-nav a:hover {  background-color: #f0f0f0; }

    /* --- Sections Style --- */
    .section {  padding: 40px 0;  text-align: center; }
    .section h2 {  margin-bottom: 20px; }

    /* --- Hero Section --- */
    #hero {  background: #f8f8f8; }
    #hero h1 {  font-size: 2.5em; }

    /* --- Features Section --- */
    #features {  background: #fff; }
    .feature {  margin-bottom: 30px; }
    .feature img {  width: 80px;  margin-bottom: 15px; }

    /* --- About Section --- */
    #about {  background: #f8f8f8; }

    /* --- Services Section --- */
    #services {  background: #fff; }

    /* --- Portfolio Section --- */
    #portfolio {  background: #f8f8f8; }
    .portfolio-item {  margin-bottom: 20px; }
    .portfolio-item img {  width: 100%;  border-radius: 5px; }

    /* --- Team Section --- */
    #team {  background: #fff; }
    .team-member {  margin-bottom: 20px; }
    .team-member img {  width: 100px;  border-radius: 50%;  margin-bottom: 10px; }

    /* --- Contact Section --- */
    #contact {  background: #f8f8f8; }
    #contact form {  max-width: 500px;  margin: 0 auto; }
    #contact input,
    #contact textarea {  width: 100%;  padding: 10px;  margin-bottom: 15px;  border: 1px solid #ccc;  border-radius: 4px;  box-sizing: border-box; }
    #contact button {  background-color: #007bff;  color: #fff;  padding: 10px 20px;  border: none;  border-radius: 4px;  cursor: pointer; }
    #contact button:hover {  background-color: #0056b3; }

    /* --- Pricing Section --- */
    #pricing {  background: #fff; }
    .pricing-table {  border: 1px solid #ddd;  border-radius: 5px;  padding: 20px;  margin-bottom: 20px;  text-align: center; }
    .pricing-table h3 {  margin-bottom: 10px; }
    .pricing-table p {  margin-bottom: 15px; }
    .pricing-table button {  background-color: #28a745;  color: #fff;  padding: 10px 20px;  border: none;  border-radius: 4px;  cursor: pointer; }
    .pricing-table button:hover {  background-color: #218838; }

    /* --- Testimonials Section --- */
    #testimonials {  background: #f8f8f8; }
    .testimonial {  margin-bottom: 20px;  padding: 20px;  border: 1px solid #ddd;  border-radius: 5px; }
    .testimonial p {  font-style: italic;  margin-bottom: 10px; }
    .testimonial cite {  font-weight: bold;  display: block;  text-align: right; }

    /* --- FAQ Section --- */
    #faq {  background: #fff; }
    .faq-item {  margin-bottom: 20px;  border-bottom: 1px solid #eee;  padding-bottom: 20px; }
    .faq-item h4 {  margin-bottom: 10px;  cursor: pointer; }
    .faq-item p {  display: none; }
    .

Completed the mobile navigation link styles, including hover effects. Added basic styles for various sections like hero, features, and testimonials. Defined media queries for responsiveness. Closed the `<style>` and `<head>` tags. Began structuring the HTML body with an emphasis on distinct sections and content blocks, aiming for semantic clarity and organization.


Began structuring the HTML body, incorporating sections for the hero, features, and other content blocks identified in the specifications.  Identified specific content areas and integrated the provided image assets, text content, and functional elements like anchor links and buttons within these sections. Added sections for Partners, FAQ, and Call to Action as defined.  The FAQ section uses an accordion structure with the first question open by default.  The CSS draft continues with styling for the floating CTA bar and button.


Implemented styles for the floating call-to-action button, including hover effects and shadow. Defined responsive breakpoints to adjust grid layouts for various screen sizes, ensuring proper display of sections such as features, partners, and the footer. Refined styling for the FAQ section and added the initial set of accordion functionality and styling.


Added CSS rules for Bento-style cards and adjusted grid layouts for various sections to accommodate different screen sizes. Implemented styles for the topbar notice and header navigation, incorporating the logo, links, and action buttons. Created the HTML structure for the hero section with Bento-style content.


Constructing the initial landing page section with a concise SaaS description and calls to action. Focused on incorporating key selling points in two right-aligned cards. Defined the structure for the introduction section, including technical standards and an illustrative image. The image's alt text is now set.

Began structuring the feature section, converting the bullet points into six individual cards. These will highlight the core service attributes. Next, created the product section with three dedicated cards, incorporating image assets and alternative text for each offering.

Outlined the solution deployment timeline into a four-step process, clarifying the project's implementation phases. Now reviewing to ensure the flow is logical and the information is presented in a clear and compelling manner.


Integrated the case study, stories, statistics, testimonials, news articles, partners, FAQ, and call-to-action sections into the HTML structure.  Linked the news article sections to the appropriate anchors within the landing page for smooth scrolling. Completed integrating the remaining sections of the landing page as required by specifications. The layout is set as specified, which incorporates a standard enterprise SaaS style. Added the necessary ICP information in the footer.


6px;
      font-weight: 600;
      color: var(--text-main);
      display: block;
      padding: 8px 0;
    }
    .mobile-nav-link:hover {
      color: var(--primary);
    }

    /* 浮动操作条 */
    .floating-cta-bar {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 990;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .float-cta-btn {
      background-color: var(--primary);
      color: #ffffff;
      padding: 12px 22px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s ease;
    }
    .float-cta-btn:hover {
      background-color: var(--primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(29, 78, 216, 0.45);
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .bento-hero-grid {
        grid-template-columns: 1fr;
      }
      .features-grid, .products-grid, .testi-grid, .news-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .steps-timeline {
        grid-template-columns: repeat(2, 1fr);
      }
      .partners-matrix {
        grid-template-columns: repeat(3, 1fr);
      }
      .intro-grid, .case-inner-grid, .cta-inner-flex {
        grid-template-columns: 1fr;
        grid-gap: 36px;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 768px) {
      .nav-menu, .nav-actions .btn-outline {
        display: none;
      }
      .nav-toggle {
        display: block;
      }
      .features-grid, .products-grid, .testi-grid, .news-grid, .stories-grid {
        grid-template-columns: 1fr;
      }
      .steps-timeline {
        grid-template-columns: 1fr;
      }
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 24px;
      }
      .stat-item:not(:last-child)::after {
        display: none;
      }
      .partners-matrix {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .bento-main-card {
        padding: 36px 24px;
      }
      .bento-main-card h1 {
        font-size: 28px;
      }
      .section-title {
        font-size: 26px;
      }
      .story-card {
        flex-direction: column;
      }
      .story-img-side, .story-info-side {
        width: 100%;
      }
    }