/* roulang page: index */
:root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --text-color: #333;
            --text-color-light: #fff;
            --bg-color: #f8f9fa;
            --light-gray: #f0f0f0;
            --border-color: #ccc;
            --bg-card: #fff; /* Initial card background color */
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }
        h1, h2, h3 {
            color: var(--primary-color);
            margin-bottom: 0.5em;
        }
        a {
            color: var(--primary-color);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }
        .section {
            padding: 20px;
            margin-bottom: 20px;
            background-color: var(--bg-card); /* Apply background to each section */
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        #hero {
            background-color: var(--primary-color);
            color: var(--text-color-light);
            text-align: center;
        }
        #hero h1 {
            color: var(--text-color-light);
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(2

The HTML structure's ID assignments were verified against the blueprint to ensure the 13 sections align with specified content areas. Section content placeholders are added, and the plan to integrate CSS for styling continues.

The plan now focuses on the layout of a single-page structure using CSS grid to organize content. The sections defined in the blueprint will be explicitly mapped to ensure the HTML correctly reflects the intended order.


CSS Grid layout properties will be applied to the main container to manage the 13 sections in a responsive, single-page format. The `grid-template-areas` property will be used to define a visual structure matching the planned blueprint sections. The design is intended to remain responsive on smaller screens.


CSS for the `.specs-table` is completed, including background, padding, borders, and text alignment. Additional CSS classes (`.specs-row`, `.faq-item`, `.faq-question`, `.faq-answer`, `.cta-section`, `.cta-form`, and `.footer`) are identified, and their properties will be defined subsequently. Responsive breakpoints will also be integrated.

The HTML structure for the `<body>` is now being created to include the top bar, header with main navigation, and the `<main>` section containing the 13 content sections with unique IDs. Each section will hold placeholder content to facilitate later content population. The basic skeleton, including footer and a top-bar is being added to the HTML structure.


The HTML structure is being built, placing all 13 content sections with assigned IDs within the `<main>` element. Placeholders are incorporated for future content. The footer and top bar are also included in the basic HTML layout.

CSS will be integrated to manage the layout with a responsive, single-page structure using CSS Grid. `grid-template-areas` will be applied for visual structuring, matching the intended blueprint.

Additional CSS classes are identified for specific components, with properties planned to be defined later. Responsive breakpoints will be added to ensure the layout adapts across various screen sizes.


bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    .specs-row {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 14px;
    }

    .specs-row:last-child {
      border-bottom: none;
    }

    .specs-label {
      color: var(--text-muted);
    }

    .specs-val {
      color: var(--text-main);
      font-weight: 700;
      font-family: monospace, sans-serif;
    }

    /* 板块 11: 合作伙伴 */
    .partners-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }

    .partner-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 20px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
      transition: var(--transition);
      min-height: 80px;
    }

    .partner-card:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--bg-card-hover);
    }

    /* 板块 12: 常见解答 FAQ */
    .faq-container {
      max-width: 860px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .faq-item {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: var(--transition);
    }

    .faq-item.active {
      border-color: var(--primary);
    }

    .faq-question {
      padding: 22px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
      user-select: none;
    }

    .faq-icon {
      font-size: 20px;
      color: var(--primary);
      transition: transform 0.3s ease;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      padding: 0 28px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .faq-item.active .faq-answer {
      max-height: 200px;
      padding: 0 28px 22px;
    }

    /* 板块 13: 试用与预约 CTA */
    .cta-card-wrap {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(0, 220, 130, 0.15) 100%), var(--bg-surface);
      border: 1px solid var(--border-accent);
      border-radius: var(--radius-lg);
      padding: 56px 48px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .cta-info h3 {
      font-size: 32px;
      line-height: 1.3;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 18px;
    }

    .cta-info p {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .cta-benefit-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cta-benefit-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: #E2E8F0;
    }

    .cta-benefit-list li::before {
      content: '✔';
      color: var(--primary);
      font-weight: 900;
    }

    .cta-form {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 32px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .form-input, .form-select {
      width: 100%;
      background: #0B0F19;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 14px;
      color: var(--text-main);
      outline: none;
      transition: var(--transition);
    }

    .form-input:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px var(--primary-dim);
    }

    .form-btn-submit {
      width: 100%;
      background: var(--primary);
      color: #070A10;
      border: none;
      font-size: 15px;
      font-weight: 700;
      padding: 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 4px 16px rgba(0, 220, 130, 0.3);
    }

    .form-btn-submit:hover {
      background: var(--primary-hover);
      box-shadow: 0 6px 20px rgba(0, 220, 130, 0.45);
    }

    .form-privacy-tip {
      font-size: 12px;
      color: var(--text-dim);
      text-align: center;
      margin-top: 14px;
    }

    /* 俱乐部实战故事双列卡片 */
    .stories-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }

    .story-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .story-img-wrap {
      height: 220px;
      position: relative;
    }

    .story-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story-tag {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(14, 165, 233, 0.85);
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
    }

    .story-body {
      padding: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .story-title {
      font-size: 19px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 12px;
    }

    .story-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 18px;
      flex: 1;
    }

    .story-quote {
      border-left: 3px solid var(--primary);
      padding-left: 14px;
      font-size: 13px;
      color: #CBD5E1;
      font-style: italic;
      background: rgba(0, 220, 130, 0.04);
      padding: 10px 14px;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    /* 工作流推演四步步进器 */
    .workflow-timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
    }

    .workflow-step {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 26px 20px;
      position: relative;
      transition: var(--transition);
    }

    .workflow-step:hover {
      border-color: var(--secondary);
      transform: translateY(-4px);
    }

    .step-badge {
      font-size: 12px;
      font-weight: 800;
      color: var(--secondary);
      margin-bottom: 12px;
      display: inline-block;
      letter-spacing: 1px;
    }

    .step-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 10px;
    }

    .step-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* 页脚 */
    footer {
      background: #070A10;
      border-top: 1px solid var(--border-subtle);
      padding: 70px 0 30px;
      margin-top: auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 40px;
      margin-bottom: 50px;
    }

    .footer-brand h4 {
      font-size: 20px;
      color: var(--text-main);
      font-weight: 800;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-brand p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .footer-domain-note {
      font-size: 12px;
      color: var(--text-dim);
    }

    .footer-col h5 {
      font-size: 15px;
      color: var(--text-main);
      font-weight: 700;
      margin-bottom: 18px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      font-size: 13px;
      color: var(--text-muted);
    }

    .footer-links a:hover {
      color: var(--primary);
    }

    .footer-contact-item {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 10px;
      display: flex;
      gap: 8px;
      line-height: 1.5;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 13px;
      color: var(--text-dim);
    }

    .footer-seo-links {
      display: flex;
      gap: 16px;
    }

    .footer-seo-links a {
      color: var(--text-dim);
    }

    .footer-seo-links a:hover {
      color: var(--primary);
    }

    /* 响应式断点适配 */
    @media (max-width: 1024px) {
      .hero-series-bar {
        grid-template-columns: repeat(2, 1fr);
      }
      .topics-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .calendar-grid, .news-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .viewpoints-wrapper, .specs-grid, .media-carousel-grid, .cta-card-wrap, .analytics-dashboard-preview {
        grid-template-columns: 1fr;
      }
      .partners-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .workflow-timeline {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .top-bar-contact {
        display: none;
      }
      .nav-links, .nav-cta-btn {
        display: none;
      }
      .mobile-menu-toggle {
        display: block;
      }
      .hero-title {
        font-size: 32px;
      }
      .hero-series-bar {
        grid-template-columns: 1fr;
      }
      .calendar-grid, .news-grid, .topics-grid, .stories-grid, .security-grid, .metrics-bar, .workflow-timeline {
        grid-template-columns: 1fr;
      }
      .partners-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .subscribe-box {
        flex-direction: column;
        align-items: flex-start;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
      .cta-card-wrap {
        padding: 30px 20px;
      }
    }