/* CSS RESET & VARIABLES */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        :root {
            --primary: #F1302b;        /* Brand China Red */
            --primary-dark: #b81d1a;   /* Darker Red */
            --slate-dark: #111827;     /* Industrial Charcoal */
            --slate-light: #4b5563;    /* Muted Text */
            --bg-canvas: #ffffff;      /* 已修改：最外层大背景由浅灰改为纯白 */
            --bg-card: #ffffff;        /* White Elevated Blocks */
            --border-split: #e5e7eb;   /* Separation Lines */
            --font-modern: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            font-family: var(--font-modern);
            color: var(--slate-dark);
            background-color: var(--bg-canvas);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

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

        /* SECTION HEADER */
        .section-title {
            font-size: 24px;
            font-weight: 800;
            color: var(--slate-dark);
            margin-bottom: 24px;
            padding-left: 12px;
            border-left: 4px solid var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-action {
            display: inline-block;
            background-color: var(--primary);
            color: #ffffff;
            font-weight: 700;
            padding: 16px 32px;
            border-radius: 8px;
            text-decoration: none;
            text-align: center;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: none;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
            box-shadow: 0 4px 14px rgba(241, 48, 43, 0.25);
        }
        .btn-action:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(241, 48, 43, 0.4);
        }

        /* IMAGE STYLE OVERRIDES & INTERACTION */
        .template-img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            background-color: transparent;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 添加图片平滑过渡 */
        }

        /* HERO SECTION */
        .product-hero {
            padding: 60px 0;
            background: #ffffff;
            border-bottom: 1px solid var(--border-split);
        }
        .hero-split {
            display: block;
        }
        .gallery-wrap {
            margin-bottom: 40px;
        }
        .stage-box {
            border: 1px solid var(--border-split);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            margin-bottom: 16px;
        }
        .stage-box .template-img {
            height: 450px;
        }
        /* 主图动态淡入动效类 */
        .stage-box .template-img.fade-in {
            animation: imgFadeIn 0.4s ease forwards;
        }
        @keyframes imgFadeIn {
            from { opacity: 0.4; transform: scale(1.02); }
            to { opacity: 1; transform: scale(1); }
        }

        .thumbnail-carousel {
            display: block;
            text-align: left;
        }
        .thumb-node {
            display: inline-block;
            width: 76px;
            height: 76px;
            border: 2px solid var(--border-split);
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 6px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.25s ease;
        }
        .thumb-node img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.25s ease;
        }
        .thumb-node:hover img {
            transform: scale(1.08); /* 缩略图悬停轻微放大 */
        }
        .thumb-node.active {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(241, 48, 43, 0.15);
        }

        .details-wrap {
            padding-top: 10px;
        }
        .badge-edition {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 800;
            color: var(--primary);
            background-color: rgba(241, 48, 43, 0.08);
            padding: 6px 12px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 16px;
        }
        .main-headline {
            font-size: 26px;
            font-weight: 800;
            color: var(--slate-dark);
            line-height: 1.25;
            margin-bottom: 18px;
        }
        .sub-paragraph {
            color: var(--slate-light);
            font-size: 15px;
            margin-bottom: 28px;
        }
        
        /* Stats Panel */
        .stats-dashboard {
            display: block;
            background: #ffffff; 
            border: 1px solid var(--border-split);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }
        .stat-widget {
            padding: 10px 0;
            border-bottom: 1px solid var(--border-split);
        }
        .stat-widget:last-child {
            border-bottom: none;
        }
        .stat-meta {
            font-size: 12px;
            color: var(--slate-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block;
        }
        .stat-data {
            font-size: 18px;
            font-weight: 700;
            color: var(--slate-dark);
            margin-top: 2px;
        }

        /* Configurator Matrix */
        .config-block {
            margin-bottom: 24px;
        }
        .config-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--slate-dark);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
            display: block;
        }
        .matrix-grid {
            display: block;
        }
        .matrix-btn {
            display: inline-block;
            padding: 10px 16px;
            border: 1px solid var(--border-split);
            background: #ffffff;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--slate-light);
            margin-right: 8px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .matrix-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background-color: rgba(241, 48, 43, 0.02);
        }
        .matrix-btn.selected {
            border-color: var(--primary);
            background-color: var(--primary);
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(241, 48, 43, 0.15);
        }

        /* SCROLLFLOW CONTENT SECTIONS */
        .content-section {
            padding: 50px 0;
            border-bottom: 1px solid var(--border-split);
        }
        .content-section:last-child {
            border-bottom: none;
        }

        /* FEATURES STYLE & INTERACTION */
        .asymmetric-features {
            display: block;
        }
        .asym-card {
            background: var(--bg-card);
            padding: 24px;
            border-radius: 8px;
            margin-bottom: 16px;
            border: 1px solid var(--border-split);
            box-shadow: 0 1px 3px rgba(0,0,0,0.01);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 添加模块平滑过渡 */
        }
        .asym-card:hover {
            transform: translateY(-4px); /* 悬停浮起 */
            border-color: var(--border-split);
            box-shadow: 0 10px 25px rgba(17, 24, 39, 0.05); /* 优雅弱阴影 */
        }
        .asym-icon {
            font-size: 24px;
            color: var(--primary);
            margin-bottom: 12px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
        .asym-card:hover {
            border-left: 1px solid var(--primary); /* 悬停时左边框微弱点缀红线提升交互感 */
        }
        .asym-card:hover .asym-icon {
            transform: scale(1.15); /* 图标微放大 */
        }
        .asym-heading {
            font-size: 18px;
            font-weight: 700;
            color: var(--slate-dark);
            margin-bottom: 8px;
        }
        .asym-body {
            font-size: 14px;
            color: var(--slate-light);
        }

        /* TECHNICAL PARAMETERS TABLE */
        .table-enclosure {
            width: 100%;
            overflow-x: auto;
            background: var(--bg-card);
            border-radius: 8px;
            border: 1px solid var(--border-split);
            transition: box-shadow 0.3s ease;
        }
        .table-enclosure:hover {
            box-shadow: 0 8px 20px rgba(17, 24, 39, 0.03);
        }
        .dense-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 14px;
        }
        .dense-table th, .dense-table td {
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-split);
            transition: background-color 0.2s ease;
        }
        .dense-table th {
            background-color: #ffffff; 
            color: var(--slate-dark);
            font-weight: 700;
            width: 35%;
        }
        .dense-table tr:hover td, .dense-table tr:hover th {
            background-color: rgba(17, 24, 39, 0.01); /* 表格行悬停高亮 */
        }
        .dense-table tr:last-child td, .dense-table tr:last-child th {
            border-bottom: none;
        }

        /* PERIPHERAL SYSTEMS & INTERACTION */
        .stack-layout {
            display: block;
        }
        .stack-card {
            background: var(--bg-card);
            border: 1px solid var(--border-split);
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 24px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .stack-card:hover {
            transform: translateY(-6px); /* 模块向上悬浮 */
            box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
            border-color: rgba(17, 24, 39, 0.15);
        }
        .stack-card .template-img {
            height: 240px;
        }
        .stack-card:hover .template-img {
            transform: scale(1.04); /* 图片悬停放大效果 */
        }
        .stack-body {
            padding: 20px;
        }
        .stack-headline {
            font-size: 18px;
            font-weight: 700;
            color: var(--slate-dark);
            margin-bottom: 10px;
            transition: color 0.2s ease;
        }
        .stack-card:hover .stack-headline {
            color: var(--primary); /* 标题变红反馈 */
        }
        .stack-desc {
            font-size: 14px;
            color: var(--slate-light);
            margin-bottom: 16px;
        }
        .tag-pool {
            display: block;
        }
        .pill-tag {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            background: transparent; 
            color: var(--slate-dark);
            padding: 4px 10px;
            border-radius: 6px;
            margin-right: 6px;
            margin-bottom: 6px;
            border: 1px solid #e5e7eb;
            transition: all 0.2s ease;
        }
        .stack-card:hover .pill-tag {
            border-color: rgba(241, 48, 43, 0.3);
            color: var(--primary); /* 标签互动 */
        }

        /* INDUSTRY APPLICATIONS & INTERACTION */
        .industry-layout {
            display: block;
        }
        .industry-card {
            background: var(--bg-card);
            border: 1px solid var(--border-split);
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .industry-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
        }
        .industry-card .template-img {
            height: 220px;
        }
        .industry-card:hover .template-img {
            transform: scale(1.04); /* 图片悬停放大 */
        }
        .industry-body {
            padding: 24px;
        }
        .industry-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--slate-dark);
            margin-bottom: 8px;
        }
        .industry-desc {
            font-size: 14px;
            color: var(--slate-light);
        }

        /* AFTER-SALES SERVICE & INTERACTION */
        .service-layout {
            display: block;
        }
        .service-card {
            background: var(--bg-card);
            border: 1px solid var(--border-split);
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }
        .service-card:hover {
            border-color: rgba(241, 48, 43, 0.2);
            box-shadow: 0 6px 20px rgba(17, 24, 39, 0.03);
            background-color: rgba(241, 48, 43, 0.005);
        }
        .service-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--slate-dark);
            margin-bottom: 8px;
        }
        .service-desc {
            font-size: 14px;
            color: var(--slate-light);
        }

        /* FAQ ACCORDION & INTERACTION */
        .faq-layout {
            display: block;
        }
        .faq-item {
            background: var(--bg-card);
            border: 1px solid var(--border-split);
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.25s ease;
        }
        .faq-item:hover {
            border-color: rgba(17, 24, 39, 0.2);
            box-shadow: 0 4px 12px rgba(17, 24, 39, 0.02);
        }
        .faq-trigger {
            width: 100%;
            padding: 18px 20px;
            background: none;
            border: none;
            text-align: left;
            font-size: 15px;
            font-weight: 700;
            color: var(--slate-dark);
            cursor: pointer;
            display: block;
            position: relative;
            transition: background 0.2s, color 0.2s;
        }
        .faq-trigger:hover {
            background: transparent; 
            color: var(--primary);
        }
        .faq-trigger::after {
            content: '+';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: normal;
            color: var(--slate-light);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s; /* 符号平滑旋转 */
        }
        .faq-item.active {
            border-color: rgba(241, 48, 43, 0.3);
            box-shadow: 0 4px 15px rgba(241, 48, 43, 0.04);
        }
        .faq-item.active .faq-trigger {
            color: var(--primary);
        }
        .faq-item.active .faq-trigger::after {
            content: '+'; /* 保持+号直接用旋转45度来表示关闭(变成×)，效果更高级现代 */
            transform: translateY(-50%) rotate(135deg); 
            color: var(--primary);
        }
        .faq-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: #ffffff;
        }
        .faq-item.active .faq-panel {
            max-height: 1000px;
        }
        .faq-body {
            padding: 0 20px 20px 20px;
            font-size: 14px;
            color: var(--slate-light);
            border-top: 1px solid transparent;
        }
        .faq-item.active .faq-body {
            border-top-color: var(--border-split);
        }

        /* BREAKPOINT TRANSFORMS (MIN-WIDTH: 768px) */
        @media (min-width: 768px) {
            .hero-split {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
            .gallery-wrap, .details-wrap {
                display: table-cell;
                vertical-align: top;
                width: 50%;
            }
            .gallery-wrap { padding-right: 40px; }
            .details-wrap { padding-left: 40px; }
            .main-headline { font-size: 34px; }
            
            .stats-dashboard {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
            .stat-widget {
                display: table-cell;
                border-bottom: none;
                border-right: 1px dashed var(--border-split);
                padding: 5px 24px;
            }
            .stat-widget:first-child { padding-left: 0; }
            .stat-widget:last-child { border-right: none; padding-right: 0; }

            .asymmetric-features, .industry-layout {
                display: table;
                width: 100%;
                table-layout: fixed;
                border-spacing: 20px;
                margin-left: -20px;
                margin-right: -20px;
            }
            .asym-card, .industry-card {
                display: table-cell;
                vertical-align: top;
                margin-bottom: 0;
            }
            
            .stack-layout, .service-layout {
                display: table;
                width: 100%;
                table-layout: fixed;
                border-spacing: 24px;
                margin-left: -24px;
                margin-right: -24px;
            }
            .stack-row, .service-row {
                display: table-row;
            }
            .stack-card, .service-card {
                display: table-cell;
                vertical-align: top;
                width: 33.333%;
                margin-bottom: 0;
            }
        }