/* roulang page: index */
:root {
      --primary: #00A854;
      --primary-hover: #008f47;
      --primary-light: #e6f7ef;
      --accent: #FF5500;
      --accent-hover: #e04b00;
      --dark: #0F172A;
      --dark-card: #1E293B;
      --dark-border: #334155;
      --light-bg: #F8FAFC;
      --white: #FFFFFF;
      --text-main: #0F172A;
      --text-muted: #475569;
      --text-light: #94A3B8;
      --border-color: #E2E8F0;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
      --shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
      --shadow-lg: 0 12px 30px -4px rgba(15, 23, 42, 0.12);
      --max-width: 1280px;
    }
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      color: var(--text-main);
      background-color: var(--light-bg);
      -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: var(--max-width);
      margin: 0 auto;
      padding: 0 20px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8125rem;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 9999px;
      line-height: 1.4;
    }
    .badge-primary {
      background-color: var(--primary-light);
      color: var(--primary);
      border: 1px solid rgba(0, 168, 84, 0.2);
    }
    .badge-dark {
      background-color: rgba(255, 255, 255, 0.12);
      color: #38BDF8;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .pulse-dot {
      width: 8px;
      height: 8px;
      background-color: #10B981;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
      70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 24px;
      font-size: 0.9375rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.25s ease;
      border: none;
      white-space: nowrap;
    }
    .btn-primary {
      background-color: var(--primary);
      color: var(--white);
    }
    .btn-primary:hover {
      background-color: var(--primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 168, 84, 0.3);
    }
    .btn-accent {
      background-color: var(--accent);
      color: var(--white);
    }
    .btn-accent:hover {
      background-color: var(--accent-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(255, 85, 0, 0.35);
    }
    .btn-outline {
      background-color: transparent;
      color: var(--text-main);
      border: 1px solid var(--border-color);
    }
    .btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background-color: var(--primary-light);
    }
    .btn-outline-white {
      background-color: rgba(255, 255, 255, 0.08);
      color: var(--white);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .btn-outline-white:hover {
      background-color: rgba(255, 255, 255, 0.16);
      border-color: var(--white);
    }

    /* 顶部双行导航 */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-color);
    }
    .top-bar {
      background-color: var(--dark);
      color: var(--text-light);
      font-size: 0.8125rem;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .top-bar-left, .top-bar-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .nav-main {
      padding: 14px 0;
    }
    .nav-main-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .brand-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--dark);
      letter-spacing: -0.5px;
    }
    .brand-icon {
      width: 34px;
      height: 34px;
      background: linear-gradient(135deg, var(--primary) 0%, #059669 100%);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-weight: 800;
      font-size: 1.1rem;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      list-style: none;
    }
    .nav-links a {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--text-muted);
    }
    .nav-links a:hover {
      color: var(--primary);
    }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      color: var(--dark);
    }

    /* Section 通用规范 */
    section {
      padding: 72px 0;
      scroll-margin-top: 110px;
    }
    .section-header {
      margin-bottom: 48px;
    }
    .section-header.text-center {
      text-align: center;
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
    .section-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--dark);
      margin-top: 10px;
      margin-bottom: 14px;
      letter-spacing: -0.5px;
    }
    .section-desc {
      font-size: 1.0625rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* 1. 首屏 Hero 卡片堆叠 */
    #hero {
      position: relative;
      background: radial-gradient(circle at 10% 20%, rgba(0, 168, 84, 0.05) 0%, transparent 40%),
                  linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
      padding: 56px 0 80px;
      border-bottom: 1px solid var(--border-color);
    }
    .hero-head {
      text-align: center;
      max-width: 860px;
      margin: 0 auto 40px;
    }
    .hero-h1 {
      font-size: 2.5rem;
      font-weight: 800;
      line-height: 1.25;
      color: var(--dark);
      margin-top: 14px;
      margin-bottom: 18px;
      letter-spacing: -0.8px;
    }
    .hero-h1 span {
      color: var(--primary);
    }
    .hero-intro {
      font-size: 1.125rem;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 28px;
    }
    .hero-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .hero-card-stack {
      display: grid;
      grid-template-columns: 1fr 2.2fr 1fr;
      gap: 20px;
      align-items: center;
      margin-top: 40px;
    }
    .hero-card-side {
      background: var(--white);
      border-radius: var(--radius-md);
      padding: 22px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      position: relative;
    }
    .hero-card-side h4 {
      font-size: 1rem;
      color: var(--dark);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hero-card-side p {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .hero-side-thumb {
      height: 130px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-top: 14px;
    }
    .hero-side-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero-card-main {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(0, 168, 84, 0.3);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      transform: translateY(-8px);
      position: relative;
    }
    .hero-console-bar {
      background: var(--dark);
      color: var(--white);
      padding: 12px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8125rem;
    }
    .hero-console-signals {
      display: flex;
      gap: 6px;
    }
    .console-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #475569;
    }
    .console-dot.red { background: #EF4444; }
    .console-dot.yellow { background: #F59E0B; }
    .console-dot.green { background: #10B981; }
    .hero-console-body {
      padding: 24px;
    }
    .hero-live-monitor {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 18px;
      margin-bottom: 16px;
    }
    .monitor-screen {
      height: 180px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
    }
    .monitor-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .monitor-overlay {
      position: absolute;
      top: 8px;
      left: 8px;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(4px);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.6875rem;
      color: var(--white);
      font-family: monospace;
    }
    .monitor-stats {
      background: #F8FAFC;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .stat-line {
      display: flex;
      justify-content: space-between;
      font-size: 0.8125rem;
      border-bottom: 1px dashed var(--border-color);
      padding-bottom: 6px;
    }
    .stat-line:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .stat-val {
      font-weight: 700;
      color: var(--primary);
    }
    .hero-trust-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 32px;
      margin-top: 36px;
      font-size: 0.875rem;
      color: var(--text-muted);
      flex-wrap: wrap;
    }
    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 2. KPI 看板与关键效能数据 */
    #metrics {
      background: linear-gradient(135deg, #064E3B 0%, #0F172A 100%);
      color: var(--white);
      padding: 56px 0;
    }
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .kpi-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md);
      padding: 24px;
      text-align: center;
      backdrop-filter: blur(8px);
      transition: transform 0.25s ease;
    }
    .kpi-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 168, 84, 0.5);
    }
    .kpi-num {
      font-size: 2.75rem;
      font-weight: 800;
      line-height: 1;
      color: #34D399;
      font-family: monospace;
      margin-bottom: 8px;
    }
    .kpi-label {
      font-size: 1rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 6px;
    }
    .kpi-sub {
      font-size: 0.8125rem;
      color: var(--text-light);
    }

    /* 3. 品牌与产品全景：SportsML与编播流 */
    #overview {
      background-color: var(--white);
    }
    .overview-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 48px;
      align-items: center;
    }
    .overview-content h3 {
      font-size: 1.75rem;
      color: var(--dark);
      margin-bottom: 16px;
    }
    .overview-content p {
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .spec-table-box {
      background: #F8FAFC;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
      margin-top: 24px;
    }
    .spec-table-box h4 {
      font-size: 0.9375rem;
      color: var(--dark);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .spec-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 0.875rem;
      border-bottom: 1px solid var(--border-color);
    }
    .spec-row:last-child { border-bottom: none; }
    .spec-name { color: var(--text-muted); }
    .spec-value { font-weight: 600; color: var(--dark); }
    .overview-media {
      position: relative;
    }
    .overview-media img {
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    /* 4. 核心优势六维矩阵 */
    #features {
      background-color: #F8FAFC;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .feature-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 30px;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: rgba(0, 168, 84, 0.4);
    }
    .feature-icon {
      width: 48px;
      height: 48px;
      background: var(--primary-light);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 1.5rem;
      margin-bottom: 20px;
    }
    .feature-card h3 {
      font-size: 1.1875rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 12px;
    }
    .feature-card p {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.7;
      flex-grow: 1;
    }

    /* 5. 核心子系统与服务矩阵 */
    #solutions {
      background-color: var(--white);
    }
    .solutions-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .solution-card {
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      background: #FFFFFF;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.25s ease;
    }
    .solution-card.featured {
      border: 2px solid var(--primary);
      box-shadow: var(--shadow-md);
      position: relative;
    }
    .solution-card-header {
      padding: 28px 24px 20px;
      background: #FAFAFA;
      border-bottom: 1px solid var(--border-color);
    }
    .featured .solution-card-header {
      background: var(--primary-light);
    }
    .solution-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }
    .solution-card-desc {
      font-size: 0.875rem;
      color: var(--text-muted);
    }
    .solution-card-body {
      padding: 24px;
      flex-grow: 1;
    }
    .checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .checklist li {
      font-size: 0.9375rem;
      color: var(--text-muted);
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .checklist li span.check-icon {
      color: var(--primary);
      font-weight: bold;
    }
    .solution-card-footer {
      padding: 20px 24px;
      background: #FAFAFA;
      border-top: 1px solid var(--border-color);
    }

    /* 6. 深色沉浸式赛事中控台 */
    #cases {
      background-color: var(--dark);
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    .cases-frame {
      border: 1px solid var(--dark-border);
      background: var(--dark-card);
      border-radius: var(--radius-lg);
      padding: 36px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }
    .cases-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }
    .cases-left h3 {
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--white);
    }
    .cases-left p {
      color: var(--text-light);
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .tech-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }
    .tech-pill {
      font-size: 0.8125rem;
      background: rgba(255, 255, 255, 0.08);
      padding: 4px 12px;
      border-radius: 4px;
      color: #7DD3FC;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cases-right {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--dark-border);
    }
    .cases-right img {
      width: 100%;
      height: 320px;
      object-fit: cover;
    }

    /* 7. 行业场景与工作流 */
    #workflow {
      background-color: #F8FAFC;
    }
    .flow-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
    }
    .flow-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 28px;
      position: relative;
    }
    .flow-step-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--primary);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 18px;
    }
    .flow-card h3 {
      font-size: 1.1875rem;
      color: var(--dark);
      margin-bottom: 12px;
    }
    .flow-card p {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* 8. 商业差异与竞品对比 */
    #comparison {
      background-color: var(--white);
    }
    .compare-table-wrapper {
      overflow-x: auto;
      background: var(--white);Focusing on the sports content management system, the analysis attempts to identify key features or structural elements within the code related to this functionality. The examination centers on components associated with content display or organization, especially within the context of the identified domain. The presence of a "compare-table-wrapper" suggests a likely focus on comparative data presentation for sports-related content.


The code snippet clearly resides within a style declaration, specifically CSS. The interruption occurred within a CSS rule, requiring continuation with the remaining CSS properties. The next step involves completing the style section, followed by the head, body, HTML structure, inclusion of the required sections, and corresponding javascript, and close the HTML.


The landing page structure needs careful consideration, as multiple layout specifications exist. The base blueprint defines a specific section order, but a "conversion flow" variant and a randomized "blueprint" are also mandated.  The specified content modules must be integrated into one of these layouts.


Analyzing content module components to determine their placement within the landing page's structure, considering mandated layout variations. Investigating integration of specified sections, including core system features, case studies, workflows, comparisons, metrics, user stories, testimonials, insights, FAQs, guarantees, and contact information.

Identifying the necessity for a floating action bar at the bottom. Determining image usage from the approved list, categorizing backgrounds and covers for their appropriate positioning within the visual design of the landing page.


The CSS cutoff point is confirmed; the incomplete line `background: var(--white);` necessitates immediate continuation of the `.compare-table-wrapper` styling. Completion involves adding a border and other relevant properties, ensuring no redundant declaration of `background: var(--white);`.  Further CSS rules must be defined for remaining identified components, including grids, cards, forms, and other page elements.


CSS styling for the footer, floating CTA bar, and responsive media queries must now be constructed to finalize the `<style>` section. Proceeding with the HTML `<body>`, header with brand, anchor links, demo CTA, and hamburger menu will be created.

Main content sections `#hero`, `#metrics`, `#overview`, `#features`, `#solutions`, `#cases`, `#workflow`, `#comparison`, `#stories`, and `#testimonials` are to be built and integrated into the landing page structure, in the specified order.



      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      min-width: 720px;
    }
    .compare-table th, .compare-table td {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.9375rem;
    }
    .compare-table th {
      background-color: #F8FAFC;
      font-weight: 700;
      color: var(--dark);
    }
    .compare-table th.col-pro {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    .compare-table td.col-pro {
      background-color: rgba(0, 168, 84, 0.03);
      font-weight: 600;
      color: var(--dark);
    }
    .compare-check {
      color: var(--primary);
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .compare-cross {
      color: #94A3B8;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* 9. 典型赛事与机构用户故事 */
    #stories {
      background-color: #F8FAFC;
    }
    .stories-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
    }
    .story-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-color);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
    }
    .story-thumb {
      height: 220px;
      overflow: hidden;
      position: relative;
    }
    .story-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .story-card:hover .story-thumb img {
      transform: scale(1.04);
    }
    .story-body {
      padding: 28px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .story-body h3 {
      font-size: 1.25rem;
      color: var(--dark);
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .story-body p {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 20px;
      flex-grow: 1;
    }
    .story-kpis {
      display: flex;
      gap: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }
    .story-kpi-item {
      display: flex;
      flex-direction: column;
    }
    .story-kpi-val {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--primary);
      font-family: monospace;
    }
    .story-kpi-name {
      font-size: 0.75rem;
      color: var(--text-light);
    }

    /* 10. 权威客户口碑与评价 */
    #testimonials {
      background-color: var(--white);
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .testimonial-card {
      background: #F8FAFC;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .stars {
      color: #F59E0B;
      font-size: 0.9375rem;
      margin-bottom: 14px;
      letter-spacing: 2px;
    }
    .testimonial-card p {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 20px;
      font-style: italic;
    }
    .author-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #E2E8F0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--dark);
      font-size: 1rem;
    }
    .author-meta h4 {
      font-size: 0.9375rem;
      color: var(--dark);
    }
    .author-meta span {
      font-size: 0.8125rem;
      color: var(--text-light);
    }

    /* 11. 体育传媒前沿与技术资讯 */
    #insights {
      background-color: #F8FAFC;
    }
    .insights-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .insight-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
    }
    .insight-thumb {
      height: 180px;
      overflow: hidden;
    }
    .insight-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .insight-body {
      padding: 24px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .insight-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.8125rem;
      color: var(--text-light);
      margin-bottom: 12px;
    }
    .insight-body h3 {
      font-size: 1.125rem;
      color: var(--dark);
      margin-bottom: 10px;
      line-height: 1.5;
    }
    .insight-body p {
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 16px;
      flex-grow: 1;
    }
    .insight-link {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* 12. 常见异议与 FAQ */
    #faq {
      background-color: var(--white);
    }
    .faq-list {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-item {
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #FFFFFF;
      transition: border-color 0.25s ease;
    }
    .faq-item.active {
      border-color: var(--primary);
    }
    .faq-question {
      width: 100%;
      padding: 20px 24px;
      background: none;
      border: none;
      text-align: left;
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--dark);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    .faq-icon {
      font-size: 1.25rem;
      color: var(--primary);
      transition: transform 0.25s ease;
    }
    .faq-item.active .faq-icon {
      transform: rotate(45deg);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      background: #FAFAFA;
    }
    .faq-item.active .faq-answer {
      max-height: 200px;
      padding: 0 24px 20px 24px;
    }
    .faq-answer p {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.8;
    }

    /* 13. 服务保障与合规承诺条 */
    #guarantee {
      background: #0F172A;
      color: var(--white);
      padding: 44px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .guarantee-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .guarantee-item {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .guarantee-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background: rgba(0, 168, 84, 0.15);
      border: 1px solid rgba(0, 168, 84, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #34D399;
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .guarantee-info h4 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--white);
    }
    .guarantee-info p {
      font-size: 0.8125rem;
      color: var(--text-light);
    }

    /* 14. 行动召唤与需求提报 */
    #contact {
      background: radial-gradient(circle at 90% 10%, rgba(0, 168, 84, 0.08) 0%, transparent 50%),
                  linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
    }
    .contact-card-wrap {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 48px;
      box-shadow: var(--shadow-lg);
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 48px;
    }
    .contact-intro h3 {
      font-size: 1.875rem;
      color: var(--dark);
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .contact-intro p {
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .contact-channels {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .channel-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.9375rem;
      color: var(--dark);
    }
    .channel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--primary);
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .form-group.full {
      grid-column: span 2;
    }
    .form-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--dark);
    }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      font-size: 0.9375rem;
      background: #F8FAFC;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--primary);
      background: var(--white);
      box-shadow: 0 0 0 3px rgba(0, 168, 84, 0.1);
    }

    /* 页脚 */
    .site-footer {
      background-color: var(--dark);
      color: var(--text-light);
      padding: 64px 0 24px;
      border-top: 1px solid var(--dark-border);
      font-size: 0.875rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand h4 {
      font-size: 1.25rem;
      color: var(--white);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .footer-brand p {
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .footer-links-title {
      font-size: 1rem;
      color: var(--white);
      margin-bottom: 16px;
      font-weight: 600;
    }
    .footer-links-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-links-list a:hover {
      color: var(--primary);
    }
    .footer-bottom {
      padding-top: 24px;
      border-top: 1px solid var(--dark-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 0.8125rem;
    }

    /* 底部固定转化浮条 */
    .floating-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      padding: 12px 0;
      z-index: 999;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    .floating-bar.visible {
      transform: translateY(0);
    }
    .floating-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .floating-text {
      color: var(--white);
      font-size: 0.9375rem;
    }
    .floating-text span {
      color: #34D399;
      font-weight: 700;
    }
    .floating-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .hero-card-stack {
        grid-template-columns: 1fr;
      }
      .hero-card-side {
        display: none;
      }
      .hero-card-main {
        transform: none;
      }
      .overview-grid, .cases-grid, .contact-card-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .kpi-grid, .features-grid, .solutions-grid, .insights-grid, .testimonials-grid, .guarantee-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 768px) {
      .top-bar {
        display: none;
      }
      .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-md);
        display: none;
      }
      .nav-links.open {
        display: flex;
      }
      .nav-toggle {
        display: block;
      }
      .hero-h1 {
        font-size: 1.875rem;
      }
      .hero-live-monitor {
        grid-template-columns: 1fr;
      }
      .kpi-grid, .features-grid, .solutions-grid, .stories-grid, .insights-grid, .testimonials-grid, .guarantee-grid, .flow-steps {
        grid-template-columns: 1fr;
      }
      .contact-card-wrap {
        padding: 24px;
      }
      .form-grid {
        grid-template-columns: 1fr;
      }
      .form-group.full {
        grid-column: span 1;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .floating-text {
        display: none;
      }
      .floating-inner {
        justify-content: center;
      }
      .floating-actions {
        width: 100%;
        justify-content: space-around;
      }
      .floating-actions .btn {
        flex: 1;
      }
    }