/* roulang page: index */
` and `</head>` tags, and opened the `<body>` tag. Added a basic header with navigation and a hero section. Included placeholder HTML for the main content section containing section 12 ("Technology") with the styled news cards. Generated a basic navigation structure and a placeholder hero section. I now have the basic structure of the page, from `<head>` to the start of the content, including a sample news card.


Now focusing on implementing the 14 distinct sections within the `<main>` content area, starting with the hero banner. The current placeholder content needs to be replaced with the specified content and appropriate image assets. Next will be the "Pain Point Analysis" section, followed by the "Brand and Full-Stack Technology Architecture" introduction section.


Implemented the hero banner with placeholder content and image. Began integrating the subsequent content sections within the `<main>` area, focusing initially on the "Pain Point Analysis" section, followed by the "Brand and Full-Stack Technology Architecture" introduction section. Determined the need for detailed Chinese copy and image assets for all sections.


Completed styling for the news card, including height, layout, and hover effects, addressing previous indentation irregularities. Determined further CSS rules are required to complete the `.news-card` element, considering meta-information, tag, date, title, description, and expand functionality.


Focused on developing the remaining website sections within the `<main>` element, targeting each of the 14 specified components. Identified the need to incorporate FAQ and CTA elements, along with footer styling. Additionally, planned to integrate notification, toast, and modal styles for user feedback. Identified the need for responsive design implementation through the use of media queries.


height: 100%;
            display: flex;
            flex-direction: column;
        }
        .news-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-subtle);
            border-color: rgba(13, 40, 24, 0.2);
        }
        .news-card-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.85rem;
            font-size: 0.8125rem;
        }
        .news-card-tag {
            color: var(--color-brand-primary);
            background: rgba(13, 40, 24, 0.06);
            padding: 0.2rem 0.55rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
        }
        .news-card-date {
            color: var(--color-text-muted);
            font-family: var(--font-mono);
        }
        .news-card-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--color-text-main);
            margin-bottom: 0.75rem;
            line-height: 1.45;
        }
        .news-card-desc {
            font-size: 0.875rem;
            color: var(--color-text-body);
            line-height: 1.65;
            margin: 0;
            flex-grow: 1;
        }
        .news-expand-box {
            display: none;
            margin-top: 1.5rem;
        }
        .news-expand-box.is-open {
            display: block;
        }

        /* ==========================================================================
           16. 板块 13: 常见问题深度解答手风琴区 (FAQ Accordion)
           ========================================================================== */
        .faq-section {
            background-color: var(--color-bg-base);
        }
        .accordion-custom {
            max-width: 920px;
            margin: 0 auto;
        }
        .faq-item {
            background: #FFFFFF;
            border: 1px solid var(--color-border-light);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
            overflow: hidden;
            transition: var(--transition-smooth);
        }
        .faq-item.is-active {
            border-color: var(--color-brand-primary);
            box-shadow: var(--shadow-subtle);
        }
        .faq-header {
            padding: 1.35rem 1.75rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #FFFFFF;
            user-select: none;
        }
        .faq-header h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-text-main);
            margin: 0;
        }
        .faq-toggle-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--color-bg-base);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            color: var(--color-brand-primary);
            transition: var(--transition-smooth);
        }
        .faq-item.is-active .faq-toggle-icon {
            transform: rotate(180deg);
            background: var(--color-brand-primary);
            color: var(--color-accent-radar);
        }
        .faq-body {
            display: none;
            padding: 0 1.75rem 1.5rem 1.75rem;
            color: var(--color-text-body);
            font-size: 0.9375rem;
            line-height: 1.8;
            border-top: 1px solid #F1F4F2;
        }
        .faq-item.is-active .faq-body {
            display: block;
        }

        /* ==========================================================================
           17. 板块 14: 转化闭环与私享系统演示预约 CTA 区 (Final CTA)
           ========================================================================== */
        .cta-section {
            background-color: var(--color-carbon-dark);
            background-image: linear-gradient(135deg, rgba(10, 15, 13, 0.95) 0%, rgba(13, 40, 24, 0.95) 100%), url('/assets/images/5f6de86b1d4fdc2a.jpg');
            background-size: cover;
            background-position: center;
            color: #FFFFFF;
        }
        .cta-wrapper {
            background: rgba(18, 24, 20, 0.7);
            border: 1px solid var(--color-border-dark);
            border-radius: var(--radius-lg);
            padding: 3.5rem;
            backdrop-filter: blur(12px);
        }
        .cta-form-box {
            background: #FFFFFF;
            border-radius: var(--radius-md);
            padding: 2.25rem 2rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            color: var(--color-text-main);
        }
        .cta-form-box h3 {
            font-size: 1.35rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            color: var(--color-text-main);
        }
        .cta-form-box p {
            font-size: 0.85rem;
            color: var(--color-text-muted);
            margin-bottom: 1.5rem;
        }
        .form-row {
            margin-bottom: 1.15rem;
        }
        .form-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.4rem;
            color: var(--color-text-main);
        }
        .form-control-custom {
            width: 100%;
            height: 44px;
            padding: 0.5rem 0.85rem;
            font-size: 0.9rem;
            border: 1px solid var(--color-border-light);
            border-radius: var(--radius-sm);
            background-color: #FAFAFA;
            color: var(--color-text-main);
            transition: var(--transition-smooth);
        }
        .form-control-custom:focus {
            outline: none;
            border-color: var(--color-brand-primary);
            background-color: #FFFFFF;
            box-shadow: 0 0 0 3px rgba(13, 40, 24, 0.1);
        }
        .cta-feature-check {
            list-style: none;
            margin: 2rem 0 0 0;
        }
        .cta-feature-check li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.85rem;
            font-size: 0.95rem;
            color: #C2D1BA;
        }
        .cta-feature-check li i {
            color: var(--color-accent-radar);
        }

        /* 提交成功交互提示条 */
        .form-toast {
            display: none;
            padding: 0.85rem;
            border-radius: var(--radius-sm);
            background-color: #DCFCE7;
            border: 1px solid #86EFAC;
            color: #14532D;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1rem;
            text-align: center;
        }

        /* ==========================================================================
           18. 页脚 Footer 样式
           ========================================================================== */
        .site-footer {
            background-color: #070B09;
            color: #9EAF9F;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 4.5rem;
            padding-bottom: 2rem;
            font-size: 0.875rem;
        }
        .footer-logo {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            font-size: 1.25rem;
            font-weight: 800;
            color: #FFFFFF;
            margin-bottom: 1.25rem;
        }
        .footer-desc {
            line-height: 1.7;
            margin-bottom: 1.5rem;
            color: #7D8F7F;
        }
        .footer-col-title {
            color: #FFFFFF;
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 1.25rem;
            letter-spacing: 0.02em;
        }
        .footer-nav-links {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-nav-links li {
            margin-bottom: 0.65rem;
        }
        .footer-nav-links a {
            color: #9EAF9F;
            transition: var(--transition-smooth);
        }
        .footer-nav-links a:hover {
            color: var(--color-accent-radar);
            padding-left: 4px;
        }
        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            margin-bottom: 0.85rem;
            color: #9EAF9F;
        }
        .footer-contact-item i {
            color: var(--color-accent-radar);
            margin-top: 0.25rem;
        }
        .footer-bottom-bar {
            margin-top: 3.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.8125rem;
            color: #617363;
        }
        .footer-bottom-bar a {
            color: #7D8F7F;
        }
        .footer-bottom-bar a:hover {
            color: var(--color-accent-radar);
        }

        /* ==========================================================================
           19. 响应式规则 (Responsive Breakpoints)
           ========================================================================== */
        @media screen and (max-width: 1024px) {
            h1.hero-h1 {
                font-size: 2.65rem;
            }
            .step-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .cta-wrapper {
                padding: 2.5rem;
            }
        }

        @media screen and (max-width: 768px) {
            .header-top-aux {
                display: none;
            }
            .main-menu-list, .nav-cta-wrap .btn-primary-radar {
                display: none;
            }
            .mobile-toggle-btn {
                display: inline-flex;
            }
            .hero-banner-section {
                padding-top: 4rem;
                padding-bottom: 4rem;
            }
            h1.hero-h1 {
                font-size: 2.15rem;
            }
            .hero-metrics-pill-strip {
                flex-direction: column;
                gap: 1.25rem;
                width: 100%;
            }
            .step-container {
                grid-template-columns: 1fr;
            }
            .metric-counter-col {
                margin-bottom: 2rem;
            }
            .cta-wrapper {
                padding: 1.5rem;
            }
            .footer-bottom-bar {
                flex-direction: column;
                text-align: center;
            }
        }